diff --git a/apps/docs/components/cmdk.tsx b/apps/docs/components/cmdk.tsx index e259a641ec..25a33d03f5 100644 --- a/apps/docs/components/cmdk.tsx +++ b/apps/docs/components/cmdk.tsx @@ -154,6 +154,16 @@ export const Cmdk: FC<{}> = () => { } }; + const prioritizeFirstLevelItems = (a: SearchResultItem, b: SearchResultItem) => { + if (a.type === "lvl1") { + return -1; + } else if (b.type === "lvl1") { + return 1; + } + + return 0; + }; + const results = useMemo( function getResults() { if (query.length < 2) return []; @@ -165,12 +175,22 @@ export const Cmdk: FC<{}> = () => { if (words.length === 1) { return matchSorter(data, query, { keys: MATCH_KEYS, + sorter: (matches) => { + matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item)); + + return matches; + }, }).slice(0, MAX_RESULTS); } const matchesForEachWord = words.map((word) => matchSorter(data, word, { keys: MATCH_KEYS, + sorter: (matches) => { + matches.sort((a, b) => prioritizeFirstLevelItems(a.item, b.item)); + + return matches; + }, }), ); diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json index cdc90c4417..82146646d1 100644 --- a/apps/docs/config/routes.json +++ b/apps/docs/config/routes.json @@ -421,7 +421,8 @@ "key": "nextui-provider", "title": "NextUI Provider", "keywords": "api references, nextui, api, nextui provider", - "path": "/docs/api-references/nextui-provider.mdx" + "path": "/docs/api-references/nextui-provider.mdx", + "updated": true } ] } diff --git a/apps/docs/content/components/input/regex-validation.ts b/apps/docs/content/components/input/regex-validation.ts index d6c9828ce0..b3ce257e4f 100644 --- a/apps/docs/content/components/input/regex-validation.ts +++ b/apps/docs/content/components/input/regex-validation.ts @@ -19,7 +19,7 @@ export default function App() { variant="bordered" isInvalid={isInvalid} color={isInvalid ? "danger" : "success"} - errorMessage={isInvalid && "Please enter a valid email"} + errorMessage="Please enter a valid email" onValueChange={setValue} className="max-w-xs" /> diff --git a/apps/docs/content/components/tabs/form.ts b/apps/docs/content/components/tabs/form.ts index 76ccac2840..679964350b 100644 --- a/apps/docs/content/components/tabs/form.ts +++ b/apps/docs/content/components/tabs/form.ts @@ -69,7 +69,7 @@ export default function App() { const AppTs = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react"; export default function App() { - const [selected, setSelected] = React.useState("login"); + const [selected, setSelected] = React.useState("login"); return (
diff --git a/apps/docs/content/docs/api-references/nextui-provider.mdx b/apps/docs/content/docs/api-references/nextui-provider.mdx index 063ca19891..0a5b7f55ae 100644 --- a/apps/docs/content/docs/api-references/nextui-provider.mdx +++ b/apps/docs/content/docs/api-references/nextui-provider.mdx @@ -5,80 +5,167 @@ description: API References for NextUI Provider # NextUI Provider +API reference for the `NextUIProvider`. + ------ -Here's the API reference for the `NextUIProvider`. +## Import + + + +## Usage + +```jsx +import * as React from "react"; +import {NextUIProvider} from "@nextui-org/react"; + +function App() { + return ( + + + + ); +} +``` ## Props -### navigate + -`navigate` provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc. +`navigate` -**type**: `((path: string) => void) | undefined` +- **Description**: Provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc. +- **Type**: `((path: string) => void) | undefined` -### locale + -The locale to apply to the children. The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale. By default, It is `en-US`. +`locale` -**type**: `string | undefined` +- **Description**: The locale to apply to the children. +- **Type**: `string | undefined` +- **Default**: `en-US` -### defaultDates -The default dates range that can be selected in the calendar. +Here's the supported locales. By default, It is `en-US`. -**type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }` +```tsx +const localeValues = [ + 'fr-FR', 'fr-CA', 'de-DE', 'en-US', 'en-GB', 'ja-JP', + 'da-DK', 'nl-NL', 'fi-FI', 'it-IT', 'nb-NO', 'es-ES', + 'sv-SE', 'pt-BR', 'zh-CN', 'zh-TW', 'ko-KR', 'bg-BG', + 'hr-HR', 'cs-CZ', 'et-EE', 'hu-HU', 'lv-LV', 'lt-LT', + 'pl-PL', 'ro-RO', 'ru-RU', 'sr-SP', 'sk-SK', 'sl-SI', + 'tr-TR', 'uk-UA', 'ar-AE', 'ar-DZ', 'AR-EG', 'ar-SA', + 'el-GR', 'he-IL', 'fa-AF', 'am-ET', 'hi-IN', 'th-TH' +]; +``` -- minDate +Here's an example to set a Spanish locale. - The minimum date that can be selected in the calendar. +```tsx +"use client"; - **type**: `CalendarDate | undefined` +import {type ReactNode} from "react"; +import {NextUIProvider} from "@nextui-org/react"; - **default**: `new CalendarDate(1900, 1, 1)` +export function AppProvider(props: AppProviderProps) { + const {children, className} = props; -- maxDate + return ( + + {children} + + ); +} - The maximum date that can be selected in the calendar. +interface AppProviderProps { + children: ReactNode; + className?: string; +} +``` - **type**: `CalendarDate | undefined` + - **default**: `new CalendarDate(2099, 12, 31)` +`defaultDates` -### createCalendar +- **Description**: The default dates range that can be selected in the calendar. +- **Type**: `{ minDate?: CalendarDate | undefined; maxDate?: CalendarDate | undefined; }` +- **Default**: `{ minDate: new CalendarDate(1900, 1, 1), maxDate: new CalendarDate(2099, 12, 31) }` -This function helps to reduce the bundle size by providing a custom calendar system. + -By default, this includes all calendar systems supported by `@internationalized/date`. However, -if your application supports a more limited set of regions, or you know you will only be picking dates -in a certain calendar system, you can reduce your bundle size by providing your own implementation -of `createCalendar` that includes a subset of these Calendar implementations. +`createCalendar` -For example, if your application only supports Gregorian dates, you could implement a `createCalendar` -function like this: +- **Description**: + This function helps to reduce the bundle size by providing a custom calendar system. -```tsx -import {GregorianCalendar} from '@internationalized/date'; - -function createCalendar(identifier) { - switch (identifier) { - case 'gregory': - return new GregorianCalendar(); - default: - throw new Error(`Unsupported calendar ${identifier}`); - } -} -``` + By default, this includes all calendar systems supported by `@internationalized/date`. However, + if your application supports a more limited set of regions, or you know you will only be picking dates + in a certain calendar system, you can reduce your bundle size by providing your own implementation + of `createCalendar` that includes a subset of these Calendar implementations. + + For example, if your application only supports Gregorian dates, you could implement a `createCalendar` + function like this: + + ```tsx + import {GregorianCalendar} from '@internationalized/date'; + + function createCalendar(identifier) { + switch (identifier) { + case 'gregory': + return new GregorianCalendar(); + default: + throw new Error(`Unsupported calendar ${identifier}`); + } + } + ``` + + This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken. + +- **Type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined` + + + +`disableAnimation` -This way, only GregorianCalendar is imported, and the other calendar implementations can be tree-shaken. +- **Description**: Disables animations globally. This will also avoid `framer-motion` features to be loaded in the bundle which can potentially reduce the bundle size. +- **Type**: `boolean` +- **Default**: `false` -**type**: `((calendar: SupportedCalendars) => Calendar | null) | undefined` + + +`disableRipple` + +- **Description**: Disables ripple effect globally. +- **Type**: `boolean` +- **Default**: `false` + + + +`skipFramerMotionAnimations` + +- **Description**: + Controls whether `framer-motion` animations are skipped within the application. + This property is automatically enabled (`true`) when the `disableAnimation` prop is set to `true`, + effectively skipping all `framer-motion` animations. To retain `framer-motion` animations while + using the `disableAnimation` prop for other purposes, set this to `false`. However, note that + animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`. +- **Type**: `boolean` +- **Default**: Same as `disableAnimation` + +--- ## Types -### CalendarDate +`CalendarDate` -A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`. +- **Description**: A [CalendarDate](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html) represents a date without any time components in a specific calendar system from `@internationalized/date`. +- **Type**: `import {CalendarDate} from '@internationalized/date';` ### SupportedCalendars diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx index 3d0a576e3f..25348e870a 100644 --- a/apps/docs/content/docs/components/date-range-picker.mdx +++ b/apps/docs/content/docs/components/date-range-picker.mdx @@ -348,7 +348,7 @@ import {I18nProvider} from "@react-aria/i18n"; ### DateRangePicker Props | Attribute | Type | Description | Default | -| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | +|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------| | label | `ReactNode` | The content to display as the label. | - | | value | `RangeValue` \| `undefined` \| `null` | The current value of the date-range-picker (controlled). | - | | variant | `flat` \| `bordered` \| `faded` \| `underlined` | The variant of the date input. | `flat` | @@ -375,7 +375,7 @@ import {I18nProvider} from "@react-aria/i18n"; | selectorIcon | `ReactNode` | The icon to toggle the date picker popover. Usually a calendar icon. | | | pageBehavior | `single` \| `visible` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` | | validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. | - | -| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop. | `1` | +| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. | `1` | | autoFocus | `boolean` | Whether the element should receive focus on render. | `false` | | hourCycle | `12` \| `24` | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale. | - | | granularity | `day` \| `hour` \| `minute` \| `second` | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates. | - | diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx index f519bf42c1..7b063e2e03 100644 --- a/apps/docs/content/docs/components/input.mdx +++ b/apps/docs/content/docs/components/input.mdx @@ -108,7 +108,7 @@ You can add a description to the input by passing the `description` property. ### With Error Message -You can combine the `isInvalid` and `errorMessage` properties to show an invalid input. +You can combine the `isInvalid` and `errorMessage` properties to show an invalid input. `errorMessage` is only shown when `isInvalid` is set to `true`. @@ -206,7 +206,7 @@ In case you need to customize the input even further, you can use the `useInput` | defaultValue | `string` | The default value of the input (uncontrolled). | - | | placeholder | `string` | The placeholder of the input. | - | | description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - | -| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. | - | +| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - | | validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - | | startContent | `ReactNode` | Element to be rendered in the left side of the input. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the input. | - | diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx index 4bbba55128..8ec84d0a73 100644 --- a/apps/docs/content/docs/components/range-calendar.mdx +++ b/apps/docs/content/docs/components/range-calendar.mdx @@ -201,38 +201,35 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr ### RangeCalendar Props -| Attribute | Type | Description | Default | | -| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | --- | -| value | `RangeValue | null` | The current value (controlled). | - | -| defaultValue | `RangeValue | null` | The default value (uncontrolled). | - | -| minValue | `DateValue` | The minimum allowed date that a user may select. | - | | -| maxValue | `DateValue` | The maximum allowed date that a user may select. | - | | -| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the time input. | `default` | -| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop | `1` | | -| focusedValue | `DateValue` | Controls the currently focused date within the calendar. | - | | -| defaultFocusedValue | `DateValue` | The date that is focused when the calendar first mounts (uncountrolled). | - | | -| calendarWidth | `number` \| `string` | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar. | `256` | -| pageBehavior | `PageBehavior` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` | | -| weekdayStyle | `"narrow" \|"short" \| "long" \| undefined` | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name. | `narrow` | | -| allowsNonContiguousRanges | `boolean` | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. | `false` | | -| showMonthAndYearPickers | `boolean` | Whether the label should be crossed out. | `false` | | -| isDisabled | `boolean` | Whether the calendar is disabled. | `false` | | -| isReadOnly | `boolean` | Whether the calendar value is immutable. | `false` | | -| isInvalid | `boolean` | Whether the current selection is invalid according to application logic. | - | | -| autoFocus | `boolean` | Whether to automatically focus the calendar when it mounts. | `false` | | -| showHelper | `boolean` | Whether to show the description or error message. | `false` | | -| showShadow | `boolean` | Whether to show the shadow in the selected dates. | `false` | -| isHeaderExpanded | `boolean` | Whether the calendar header is expanded. This is only available if the `showMonthAndYearPickers` prop is set to `true`. | `false` | | -| isHeaderDefaultExpanded | `boolean` | Whether the calendar header should be expanded by default.This is only available if the `showMonthAndYearPickers` prop is set to `true`. | `false` | | -| topContent | `ReactNode` | Custom content to be included in the top of the calendar. | - | | -| bottomContent | `ReactNode` | Custom content to be included in the bottom of the calendar. | - | | -| isDateUnavailable | `(date: DateValue) => boolean` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - | | -| createCalendar | `(calendar: SupportedCalendars) => Calendar \| null` | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all
calendars` | | -| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - | -| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. | - | -| hideDisabledDates | `boolean` | Whether to hide the disabled or invalid dates. | `false` | -| disableAnimation | `boolean` | Whether to disable the animation of the calendar. | `false` | -| classNames | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots. | - | | +| Attribute | Type | Description | Default | | +|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|---| +| value | `RangeValue | null` | The current value (controlled). | - | +| defaultValue | `RangeValue | null` | The default value (uncontrolled). | - | +| minValue | `DateValue` | The minimum allowed date that a user may select. | - | | +| maxValue | `DateValue` | The maximum allowed date that a user may select. | - | | +| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the time input. | `default` | | +| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. | `1` | | +| focusedValue | `DateValue` | Controls the currently focused date within the calendar. | - | | +| defaultFocusedValue | `DateValue` | The date that is focused when the calendar first mounts (uncountrolled). | - | | +| calendarWidth | `number` \| `string` | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar. | `256` | | +| pageBehavior | `PageBehavior` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` | | +| weekdayStyle | `"narrow" \|"short" \| "long" \| undefined` | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name. | `narrow` | | +| allowsNonContiguousRanges | `boolean` | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. | `false` | | +| isDisabled | `boolean` | Whether the calendar is disabled. | `false` | | +| isReadOnly | `boolean` | Whether the calendar value is immutable. | `false` | | +| isInvalid | `boolean` | Whether the current selection is invalid according to application logic. | - | | +| autoFocus | `boolean` | Whether to automatically focus the calendar when it mounts. | `false` | | +| showHelper | `boolean` | Whether to show the description or error message. | `false` | | +| showShadow | `boolean` | Whether to show the shadow in the selected dates. | `false` | | +| topContent | `ReactNode` | Custom content to be included in the top of the calendar. | - | | +| bottomContent | `ReactNode` | Custom content to be included in the bottom of the calendar. | - | | +| isDateUnavailable | `(date: DateValue) => boolean` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - | | +| createCalendar | `(calendar: SupportedCalendars) => Calendar \| null` | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all
calendars` | | +| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - | | +| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. | - | | +| hideDisabledDates | `boolean` | Whether to hide the disabled or invalid dates. | `false` | | +| disableAnimation | `boolean` | Whether to disable the animation of the calendar. | `false` | | +| classNames | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots. | - | | ### RangeCalendar Events @@ -240,7 +237,6 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr | ---------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | onFocusChange | `(date: CalendarDate) => void` | Handler that is called when the focused date changes. | | onChange | `(value: RangeValue>) => void` | Handler that is called when the value changes. | -| onHeaderExpandedChange | `(isExpanded: boolean) => void` | The event handler for the calendar header expanded state. This is only available if the `showMonthAndYearPickers` prop is set to `true`. | #### Supported Calendars diff --git a/apps/docs/content/docs/guide/cli.mdx b/apps/docs/content/docs/guide/cli.mdx index cba3fd1f54..37bcd7e046 100644 --- a/apps/docs/content/docs/guide/cli.mdx +++ b/apps/docs/content/docs/guide/cli.mdx @@ -75,7 +75,7 @@ Commands: Initialize a new NextUI project using the `init` command. This sets up your project with the necessary configurations. ```codeBlock bash -nextui init [my-nextui-app-name] +nextui init my-nextui-app ``` @@ -90,6 +90,16 @@ You will be prompted to configure your project: A Next.js 13 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS. ``` +Install the dependencies to start the local server: +```codeBlock bash +cd my-nextui-app && npm install +``` + +Start the local server: +```codeBlock bash +npm run dev +``` + ## add Add components to your NextUI project with the add command. This command manages component dependencies and updates your project configurations. diff --git a/apps/docs/content/docs/guide/installation.mdx b/apps/docs/content/docs/guide/installation.mdx index 763f21b5c0..41472107a2 100644 --- a/apps/docs/content/docs/guide/installation.mdx +++ b/apps/docs/content/docs/guide/installation.mdx @@ -39,7 +39,17 @@ You will be prompted to configure your project: A Next.js 13 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS. ``` -Once your NextUI project is initialized, you can add individual components using the CLI. For example, to add a button component: +Install the dependencies to start the local server: +```codeBlock bash +cd my-nextui-app && npm install +``` + +Start the local server: +```codeBlock bash +npm run dev +``` + +Once your NextUI project is ready to develop, you can add individual components using the CLI. For example, to add a button component: ```codeBlock bash nextui add button diff --git a/packages/components/calendar/stories/range-calendar.stories.tsx b/packages/components/calendar/stories/range-calendar.stories.tsx index 3f844510e5..d1d58410cd 100644 --- a/packages/components/calendar/stories/range-calendar.stories.tsx +++ b/packages/components/calendar/stories/range-calendar.stories.tsx @@ -382,7 +382,6 @@ export const InternationalCalendars = { render: InternationalCalendarsTemplate, args: { ...defaultProps, - showMonthAndYearPickers: true, }, };