diff --git a/docs/accordion.md b/docs/accordion.md index 063c1970f..5f3b7c60a 100644 --- a/docs/accordion.md +++ b/docs/accordion.md @@ -86,257 +86,109 @@ export default App; ### `useAccordionState` -- **`manual`** boolean Whether the accodion selection should be - manual. -- **`allowToggle`** boolean Allow to toggle accordion items -- **`allowMultiple`** false | undefined Allow to open multiple - accordion items -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`rtl`** boolean Determines how `next` and `previous` functions - will behave. If `rtl` is set to `true`, they will be inverted. This only - affects the composite widget behavior. You still need to set `dir="rtl"` on - HTML/CSS. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`loop`** boolean | "horizontal" | "vertical" On - one-dimensional composites: - - - `true` loops from the last item to the first item and vice-versa. - - `horizontal` loops only if `orientation` is `horizontal` or not set. - - `vertical` loops only if `orientation` is `vertical` or not set. - - If `currentId` is initially set to `null`, the composite element will be - focused in between the last and first items. - - On two-dimensional composites: - - - `true` loops from the last row/column item to the first item in the same - row/column and vice-versa. If it's the last item in the last row, it moves - to the first item in the first row and vice-versa. - - `horizontal` loops only from the last row item to the first item in the same - row. - - `vertical` loops only from the last column item to the first item in the - column row. - - If `currentId` is initially set to `null`, vertical loop will have no effect - as moving down from the last row or up from the first row will focus the - composite element. - - If `wrap` matches the value of `loop`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. - -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`shift`** boolean **Has effect only on two-dimensional - composites**. If enabled, moving up or down when there's no next item or the - next item is disabled will shift to the item right before it. +| Name | Type | Description | +| :---------------------------------------------------------- | :------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`manual`** | boolean | Whether the accodion selection should be manual. | +| **`allowToggle`** | boolean | Allow to toggle accordion items | +| **`allowMultiple`** | false \| undefined | Allow to open multiple accordion items | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`rtl`** | boolean | Determines how `next` and `previous` functions will behave. If `rtl` isset to `true`, they will be inverted. This only affects the compositewidget behavior. You still need to set `dir="rtl"` on HTML/CSS. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`loop`** | boolean \| "horizontal" \| "vertical" | On one-dimensional composites: - `true` loops from the last item to the first item and vice-versa. - `horizontal` loops only if `orientation` is `horizontal` or not set. - `vertical` loops only if `orientation` is `vertical` or not set. - If `currentId` is initially set to `null`, the composite element willbe focused in between the last and first items.On two-dimensional composites: - `true` loops from the last row/column item to the first item in thesame row/column and vice-versa. If it's the last item in the last row, itmoves to the first item in the first row and vice-versa. - `horizontal` loops only from the last row item to the first item inthe same row. - `vertical` loops only from the last column item to the first item inthe column row. - If `currentId` is initially set to `null`, vertical loop will have noeffect as moving down from the last row or up from the first row willfocus the composite element. - If `wrap` matches the value of `loop`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`shift`** | boolean | **Has effect only on two-dimensional composites**. If enabled, moving upor down when there's no next item or the next item is disabled will shiftto the item right before it. | ### `Accordion` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +
12 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`groups`** Group[] Lists all the composite groups with their - `id` and DOM `ref`. This state is automatically updated when `registerGroup` - and `unregisterGroup` are called. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`move`** (id: StringOrNull) => void Moves focus to a given - item ID. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`move`** | (id: StringOrNull) => void | Moves focus to a given item ID. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. |
### `AccordionPanel` -- **`accordionId`** string | undefined Accordion's id -- **`visible`** boolean Whether it's visible or not. -- **`animating`** boolean Whether it's animating or not. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`stopAnimation`** () => void Stops animation. It's called - automatically if there's a CSS transition. -- **`id`** string | undefined Same as the HTML attribute. +| Name | Type | Description | +| :------------------ | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`accordionId`** | string \| undefined | Accordion's id | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animating`** | boolean | Whether it's animating or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`stopAnimation`** | () => void | Stops animation. It's called automatically if there's a CSS transition. | +| **`id`** | string \| undefined | Same as the HTML attribute. | +
8 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`allowMultiple`** boolean Allow to open multiple accordion - items -- **`selectedId`** string | null | undefined The current selected - accordion's `id`. -- **`selectedIds`** StringOrNull[] | undefined The current selected - accordion's `id`. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`registerPanel`** (item: Item) => void Registers a - accordion panel. -- **`unregisterPanel`** (id: string) => void Unregisters a - accordion panel. -- **`panels`** Item[] Lists all the panels. +| Name | Type | Description | +| :-------------------- | :--------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`allowMultiple`** | boolean | Allow to open multiple accordion items | +| **`selectedId`** | string \| null \| undefined | The current selected accordion's `id`. | +| **`selectedIds`** | StringOrNull[] \| undefined | The current selected accordion's `id`. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`registerPanel`** | (item: Item) => void | Registers a accordion panel. | +| **`unregisterPanel`** | (id: string) => void | Unregisters a accordion panel. | +| **`panels`** | Item[] | Lists all the panels. |
### `AccordionTrigger` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`id`** string | undefined Same as the HTML attribute. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`id`** | string \| undefined | Same as the HTML attribute. | +
23 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`registerItem`** (item: Item) => void Registers a composite - item. -- **`unregisterItem`** (id: string) => void Unregisters a - composite item. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`next`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the next item. -- **`previous`** (unstable_allTheWay?: boolean | undefined) => - void Moves focus to the previous item. -- **`up`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item above. -- **`down`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item below. -- **`manual`** boolean Whether the accodion selection should be - manual. -- **`allowToggle`** boolean Allow to toggle accordion items -- **`allowMultiple`** boolean Allow to open multiple accordion - items -- **`selectedId`** string | null | undefined The current selected - accordion's `id`. -- **`selectedIds`** StringOrNull[] | undefined The current selected - accordion's `id`. -- **`panels`** Item[] Lists all the panels. -- **`select`** (id: StringOrNull) => void Moves into and - selects an accordion by its `id`. -- **`unSelect`** (id: StringOrNull) => void Moves into and - unSelects an accordion by its `id` if it's already selected. +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`registerItem`** | (item: Item) => void | Registers a composite item. | +| **`unregisterItem`** | (id: string) => void | Unregisters a composite item. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`next`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the next item. | +| **`previous`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the previous item. | +| **`up`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item above. | +| **`down`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item below. | +| **`manual`** | boolean | Whether the accodion selection should be manual. | +| **`allowToggle`** | boolean | Allow to toggle accordion items | +| **`allowMultiple`** | boolean | Allow to open multiple accordion items | +| **`selectedId`** | string \| null \| undefined | The current selected accordion's `id`. | +| **`selectedIds`** | StringOrNull[] \| undefined | The current selected accordion's `id`. | +| **`panels`** | Item[] | Lists all the panels. | +| **`select`** | (id: StringOrNull) => void | Moves into and selects an accordion by its `id`. | +| **`unSelect`** | (id: StringOrNull) => void | Moves into and unSelects an accordion by its `id` if it's already selected. |
diff --git a/docs/breadcrumb.md b/docs/breadcrumb.md index cc1963fa3..b5a728cf2 100644 --- a/docs/breadcrumb.md +++ b/docs/breadcrumb.md @@ -74,13 +74,12 @@ export default App; ### `BreadcrumbLink` -- **`isCurrent`** boolean | undefined If true, sets - `aria-current: "page"` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`isExternal`** boolean | undefined Opens the link in a new tab +| Name | Type | Description | +| :--------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`isCurrent`** | boolean \| undefined | If true, sets `aria-current: "page"` | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`isExternal`** | boolean \| undefined | Opens the link in a new tab | ### `Breadcrumbs` diff --git a/docs/calendar.md b/docs/calendar.md index 003821db5..66f40f0c1 100644 --- a/docs/calendar.md +++ b/docs/calendar.md @@ -141,9 +141,9 @@ Also we can customize and style the ranges with CSS attribute selectors } ``` -[Calendar - Open On Sandbox](https://codesandbox.io/s/lf1ol) +[Calendar - Open On Sandbox](https://codesandbox.io/s/z5377) -[RangeCalendar - Open On Sandbox](https://codesandbox.io/s/o4s64) +[RangeCalendar - Open On Sandbox](https://codesandbox.io/s/lxxfg) ## Composition @@ -159,113 +159,107 @@ Also we can customize and style the ranges with CSS attribute selectors ### `useCalendarState` -- **`value`** string | undefined The current value (controlled). -- **`defaultValue`** string | undefined The default value - (uncontrolled). -- **`onChange`** ((value: string) => void) | undefined Handler - that is called when the value changes. -- **`minValue`** string | undefined The smallest value allowed. -- **`maxValue`** string | undefined The largest value allowed. -- **`isDisabled`** boolean | undefined Whether the input is - disabled. -- **`isReadOnly`** boolean | undefined Whether the input can be - selected but not changed by the user. -- **`autoFocus`** boolean | undefined Whether the element should - receive focus on render. -- **`id`** string | undefined Id for the calendar grid +| Name | Type | Description | +| :----------------- | :------------------------------------------------------ | :------------------------------------------------------------- | +| **`value`** | string \| undefined | The current value (controlled). | +| **`defaultValue`** | string \| undefined | The default value (uncontrolled). | +| **`onChange`** | ((value: string) => void) \| undefined | Handler that is called when the value changes. | +| **`minValue`** | string \| undefined | The smallest value allowed. | +| **`maxValue`** | string \| undefined | The largest value allowed. | +| **`isDisabled`** | boolean \| undefined | Whether the input is disabled. | +| **`isReadOnly`** | boolean \| undefined | Whether the input can be selected but not changed by the user. | +| **`autoFocus`** | boolean \| undefined | Whether the element should receive focus on render. | +| **`id`** | string \| undefined | Id for the calendar grid | ### `useRangeCalendarState` -- **`value`** Range | undefined The current value (controlled). -- **`defaultValue`** Range | undefined The default value - (uncontrolled). -- **`onChange`** ((value: Range) => void) | undefined Handler - that is called when the value changes. -- **`minValue`** string | undefined The smallest value allowed. -- **`maxValue`** string | undefined The largest value allowed. -- **`isDisabled`** boolean | undefined Whether the input is - disabled. -- **`isReadOnly`** boolean | undefined Whether the input can be - selected but not changed by the user. -- **`autoFocus`** boolean | undefined Whether the element should - receive focus on render. -- **`id`** string | undefined Id for the calendar grid +| Name | Type | Description | +| :----------------- | :----------------------------------------------------- | :------------------------------------------------------------- | +| **`value`** | Range \| undefined | The current value (controlled). | +| **`defaultValue`** | Range \| undefined | The default value (uncontrolled). | +| **`onChange`** | ((value: Range) => void) \| undefined | Handler that is called when the value changes. | +| **`minValue`** | string \| undefined | The smallest value allowed. | +| **`maxValue`** | string \| undefined | The largest value allowed. | +| **`isDisabled`** | boolean \| undefined | Whether the input is disabled. | +| **`isReadOnly`** | boolean \| undefined | Whether the input can be selected but not changed by the user. | +| **`autoFocus`** | boolean \| undefined | Whether the element should receive focus on render. | +| **`id`** | string \| undefined | Id for the calendar grid | ### `Calendar`
1 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`calendarId`** string | undefined Id for the Calendar Header +| Name | Type | Description | +| :--------------- | :------------------------------- | :------------------------- | +| **`calendarId`** | string \| undefined | Id for the Calendar Header |
### `CalendarButton` -- **`goto`** - "nextMonth" - | "previousMonth" | "nextYear" | "p... +| Name | Type | Description | +| :-------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`goto`** | "nextMonth" \| "previousMonth" \| "nextYear" \| "p... | | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set.
4 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`focusNextMonth`** () => void Focus the cell one month next - to the current date -- **`focusPreviousMonth`** () => void Focus the cell one month - prev to the current date -- **`focusPreviousYear`** () => void Focus the cell of the date - one year before the current date -- **`focusNextYear`** () => void Focus the cell of the date one - year from the current date +| Name | Type | Description | +| :----------------------- | :-------------------------- | :---------------------------------------------------------- | +| **`focusNextMonth`** | () => void | Focus the cell one month next to the current date | +| **`focusPreviousMonth`** | () => void | Focus the cell one month prev to the current date | +| **`focusPreviousYear`** | () => void | Focus the cell of the date one year before the current date | +| **`focusNextYear`** | () => void | Focus the cell of the date one year from the current date |
### `CalendarCell` -- **`date`** Date +| Name | Type | Description | +| :--------- | :---------------- | :---------- | +| **`date`** | Date | |
6 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`dateValue`** Date Selected Date value -- **`isDisabled`** boolean `true` if the calendar is disabled -- **`currentMonth`** Date Month of the current Date -- **`isRangeCalendar`** boolean `true` if the calendar is used as - RangeCalendar -- **`highlightDate`** (date: Date) => void - -- **`highlightedRange`** RangeValue<Date> | null +| Name | Type | Description | +| :--------------------- | :-------------------------------------------- | :---------------------------------------------- | +| **`dateValue`** | Date | Selected Date value | +| **`isDisabled`** | boolean | `true` if the calendar is disabled | +| **`currentMonth`** | Date | Month of the current Date | +| **`isRangeCalendar`** | boolean | `true` if the calendar is used as RangeCalendar | +| **`highlightDate`** | (date: Date) => void | | +| **`highlightedRange`** | RangeValue<Date> \| null | |
### `CalendarCellButton` -- **`date`** Date +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`date`** | Date | | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set.
11 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`dateValue`** Date Selected Date value -- **`isDisabled`** boolean `true` if the calendar is disabled -- **`isRangeCalendar`** boolean `true` if the calendar is used as - RangeCalendar -- **`focusedDate`** Date Date value that is currently focused -- **`selectDate`** (value: Date) => void sets `dateValue` -- **`setFocusedDate`** (value: SetStateAction<Date>) => - void Sets `focusedDate` -- **`month`** number Month of the current date value -- **`minDate`** Date | undefined Minimum allowed Date value -- **`maxDate`** Date | undefined Maximum allowed Date value -- **`isFocused`** boolean `true` if the calendar is focused -- **`anchorDate`** Date | null +| Name | Type | Description | +| :-------------------- | :------------------------------------------------------------- | :---------------------------------------------- | +| **`dateValue`** | Date | Selected Date value | +| **`isDisabled`** | boolean | `true` if the calendar is disabled | +| **`isRangeCalendar`** | boolean | `true` if the calendar is used as RangeCalendar | +| **`focusedDate`** | Date | Date value that is currently focused | +| **`selectDate`** | (value: Date) => void | sets `dateValue` | +| **`setFocusedDate`** | (value: SetStateAction<Date>) => void | Sets `focusedDate` | +| **`month`** | number | Month of the current date value | +| **`minDate`** | Date \| undefined | Minimum allowed Date value | +| **`maxDate`** | Date \| undefined | Maximum allowed Date value | +| **`isFocused`** | boolean | `true` if the calendar is focused | +| **`anchorDate`** | Date \| null | |
@@ -274,59 +268,55 @@ form elements. In this case, only `aria-disabled` will be set.
17 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`calendarId`** string | undefined Id for the Calendar Header -- **`focusNextMonth`** () => void Focus the cell one month next - to the current date -- **`focusPreviousMonth`** () => void Focus the cell one month - prev to the current date -- **`focusPreviousYear`** () => void Focus the cell of the date - one year before the current date -- **`focusNextYear`** () => void Focus the cell of the date one - year from the current date -- **`isDisabled`** boolean `true` if the calendar is disabled -- **`isRangeCalendar`** boolean `true` if the calendar is used as - RangeCalendar -- **`isReadOnly`** boolean `true` if the calendar is only readonly -- **`setFocused`** (value: SetStateAction<boolean>) => - void Sets `isFocused` -- **`selectFocusedDate`** () => void Selects the `focusedDate` -- **`focusEndOfMonth`** () => void Focus the cell of the last - day of the month -- **`focusStartOfMonth`** () => void Focus the cell of the - first day of the month -- **`focusNextDay`** () => void Focus the cell next to the - current date -- **`focusPreviousDay`** () => void Focus the cell prev to the - current date -- **`focusNextWeek`** () => void Focus the cell one week next - to the current date -- **`focusPreviousWeek`** () => void Focus the cell one week - prev to the current date -- **`setAnchorDate`** (value: SetStateAction<Date | null>) => - void +| Name | Type | Description | +| :----------------------- | :--------------------------------------------------------------------- | :---------------------------------------------------------- | +| **`calendarId`** | string \| undefined | Id for the Calendar Header | +| **`focusNextMonth`** | () => void | Focus the cell one month next to the current date | +| **`focusPreviousMonth`** | () => void | Focus the cell one month prev to the current date | +| **`focusPreviousYear`** | () => void | Focus the cell of the date one year before the current date | +| **`focusNextYear`** | () => void | Focus the cell of the date one year from the current date | +| **`isDisabled`** | boolean | `true` if the calendar is disabled | +| **`isRangeCalendar`** | boolean | `true` if the calendar is used as RangeCalendar | +| **`isReadOnly`** | boolean | `true` if the calendar is only readonly | +| **`setFocused`** | (value: SetStateAction<boolean>) => void | Sets `isFocused` | +| **`selectFocusedDate`** | () => void | Selects the `focusedDate` | +| **`focusEndOfMonth`** | () => void | Focus the cell of the last day of the month | +| **`focusStartOfMonth`** | () => void | Focus the cell of the first day of the month | +| **`focusNextDay`** | () => void | Focus the cell next to the current date | +| **`focusPreviousDay`** | () => void | Focus the cell prev to the current date | +| **`focusNextWeek`** | () => void | Focus the cell one week next to the current date | +| **`focusPreviousWeek`** | () => void | Focus the cell one week prev to the current date | +| **`setAnchorDate`** | (value: SetStateAction<Date \| null>) => void | |
### `CalendarHeader` -- **`format`** DateTimeFormatOpts | undefined +| Name | Type | Description | +| :----------- | :------------------------------------------- | :---------- | +| **`format`** | DateTimeFormatOpts \| undefined | |
2 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`calendarId`** string | undefined Id for the Calendar Header -- **`currentMonth`** Date Month of the current Date +| Name | Type | Description | +| :----------------- | :------------------------------- | :------------------------- | +| **`calendarId`** | string \| undefined | Id for the Calendar Header | +| **`currentMonth`** | Date | Month of the current Date |
### `CalendarWeekTitle` -- **`dayIndex`** number +| Name | Type | Description | +| :------------- | :------------------ | :---------- | +| **`dayIndex`** | number | |
1 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`weekDays`** { title: string; abbr: string; }[] Generated week - days for CalendarWeekTitle based on weekStart +| Name | Type | Description | +| :------------- | :---------------------------------------------- | :----------------------------------------------------------- | +| **`weekDays`** | { title: string; abbr: string; }[] | Generated week days for CalendarWeekTitle based on weekStart |
diff --git a/docs/datepicker.md b/docs/datepicker.md index 0b2d3b490..844d8a52f 100644 --- a/docs/datepicker.md +++ b/docs/datepicker.md @@ -12,6 +12,8 @@ for the keyboard navigation & accessibility features. - [Range DatePicker](#range-datepicker) - [Composition](#composition) - [Props](#props) + - [`useDatePickerState`](#usedatepickerstate) + - [`useDateRangePickerState`](#usedaterangepickerstate) - [`DatePicker`](#datepicker) - [`DatePickerContent`](#datepickercontent) - [`DatePickerSegment`](#datepickersegment) @@ -276,9 +278,9 @@ const RangeCalendar = state => { }; ``` -[DatePicker - Open On Sandbox](https://codesandbox.io/s/mfpzr) +[DatePicker - Open On Sandbox](https://codesandbox.io/s/l56y1) -[RangeDatePicker - Open On Sandbox](https://codesandbox.io/s/l9ths) +[RangeDatePicker - Open On Sandbox](https://codesandbox.io/s/8oyx5) ## Composition @@ -290,26 +292,82 @@ const RangeCalendar = state => { ## Props +### `useDatePickerState` + +| Name | Type | Description | +| :------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`value`** | T \| undefined | The current value (controlled). | +| **`defaultValue`** | T \| undefined | The default value (uncontrolled). | +| **`onChange`** | ((value: T) => void) \| undefined | Handler that is called when the value changes. | +| **`minValue`** | T \| undefined | The smallest value allowed. | +| **`maxValue`** | T \| undefined | The largest value allowed. | +| **`validationState`** | "valid" \| "invalid" \| undefined | Whether the input should display its "valid" or "invalid" visual styling. | +| **`isRequired`** | boolean \| undefined | Whether user input is required on the input before form submission.Often paired with the `necessityIndicator` prop to add a visual indicator to the input. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`placement`** | "auto-start" \| "auto" \| "auto-end" \| "top-start... | Actual `placement`. | +| **`unstable_fixed`** ⚠️ | boolean \| undefined | Whether or not the popover should have `position` set to `fixed`. | +| **`unstable_flip`** ⚠️ | boolean \| undefined | Flip the popover's placement when it starts to overlap its referenceelement. | +| **`unstable_offset`** ⚠️ | [string \| number, string \| number] \| undefined | Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`. | +| **`gutter`** | number \| undefined | Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`. | +| **`unstable_preventOverflow`** ⚠️ | boolean \| undefined | Prevents popover from being positioned outside the boundary. | +| **`isDisabled`** | boolean \| undefined | Whether the input is disabled. | +| **`isReadOnly`** | boolean \| undefined | Whether the input can be selected but not changed by the user. | +| **`pickerId`** | string \| undefined | Picker wrapper Id | +| **`dialogId`** | string \| undefined | Dialog Id | +| **`segmentFocus`** | (() => void) \| undefined | Function to be called on picker mousedownfor focusing first tabbable element | +| **`formatOptions`** | DateTimeFormatOpts \| undefined | Sets formmating of date based on Intl.DateFormatOptionshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat | +| **`placeholderDate`** | Date \| undefined | Placeholder date | +| **`autoFocus`** | boolean \| undefined | Whether the element should receive focus on render. | + +### `useDateRangePickerState` + +| Name | Type | Description | +| :------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`value`** | T \| undefined | The current value (controlled). | +| **`defaultValue`** | T \| undefined | The default value (uncontrolled). | +| **`onChange`** | ((value: T) => void) \| undefined | Handler that is called when the value changes. | +| **`minValue`** | T \| undefined | The smallest value allowed. | +| **`maxValue`** | T \| undefined | The largest value allowed. | +| **`validationState`** | "valid" \| "invalid" \| undefined | Whether the input should display its "valid" or "invalid" visual styling. | +| **`isRequired`** | boolean \| undefined | Whether user input is required on the input before form submission.Often paired with the `necessityIndicator` prop to add a visual indicator to the input. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`placement`** | "auto-start" \| "auto" \| "auto-end" \| "top-start... | Actual `placement`. | +| **`unstable_fixed`** ⚠️ | boolean \| undefined | Whether or not the popover should have `position` set to `fixed`. | +| **`unstable_flip`** ⚠️ | boolean \| undefined | Flip the popover's placement when it starts to overlap its referenceelement. | +| **`unstable_offset`** ⚠️ | [string \| number, string \| number] \| undefined | Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`. | +| **`gutter`** | number \| undefined | Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`. | +| **`unstable_preventOverflow`** ⚠️ | boolean \| undefined | Prevents popover from being positioned outside the boundary. | +| **`isDisabled`** | boolean \| undefined | Whether the input is disabled. | +| **`isReadOnly`** | boolean \| undefined | Whether the input can be selected but not changed by the user. | +| **`pickerId`** | string \| undefined | Picker wrapper Id | +| **`dialogId`** | string \| undefined | Dialog Id | +| **`segmentFocus`** | (() => void) \| undefined | Function to be called on picker mousedownfor focusing first tabbable element | +| **`formatOptions`** | DateTimeFormatOpts \| undefined | Sets formmating of date based on Intl.DateFormatOptionshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat | +| **`placeholderDate`** | Date \| undefined | Placeholder date | +| **`autoFocus`** | boolean \| undefined | Whether the element should receive focus on render. | + ### `DatePicker`
9 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`visible`** boolean Whether it's visible or not. -- **`pickerId`** string | undefined - -- **`dialogId`** string | undefined - -- **`isDisabled`** boolean | undefined - -- **`isReadOnly`** boolean | undefined - -- **`segmentFocus`** (() => void) | undefined - -- **`show`** () => void Changes the `visible` state to `true` -- **`isRequired`** boolean | undefined - -- **`validationState`** "valid" | "invalid" +| Name | Type | Description | +| :-------------------- | :------------------------------------------------ | :------------------------------------ | +| **`visible`** | boolean | Whether it's visible or not. | +| **`pickerId`** | string \| undefined | | +| **`dialogId`** | string \| undefined | | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | | +| **`segmentFocus`** | (() => void) \| undefined | | +| **`show`** | () => void | Changes the `visible` state to `true` | +| **`isRequired`** | boolean \| undefined | | +| **`validationState`** | "valid" \| "invalid" | |
@@ -318,112 +376,60 @@ const RangeCalendar = state => {
7 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`visible`** boolean Whether it's visible or not. -- **`pickerId`** string | undefined - -- **`dialogId`** string | undefined - -- **`isDisabled`** boolean | undefined - -- **`isReadOnly`** boolean | undefined - -- **`segmentFocus`** (() => void) | undefined - -- **`show`** () => void Changes the `visible` state to `true` +| Name | Type | Description | +| :----------------- | :----------------------------------------- | :------------------------------------ | +| **`visible`** | boolean | Whether it's visible or not. | +| **`pickerId`** | string \| undefined | | +| **`dialogId`** | string \| undefined | | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | | +| **`segmentFocus`** | (() => void) \| undefined | | +| **`show`** | () => void | Changes the `visible` state to `true` |
### `DatePickerSegment` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`id`** string | undefined Same as the HTML attribute. -- **`segment`** DateSegment +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`id`** | string \| undefined | Same as the HTML attribute. | +| **`segment`** | DateSegment | |
28 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`registerItem`** (item: Item) => void Registers a composite - item. -- **`unregisterItem`** (id: string) => void Unregisters a - composite item. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`next`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the next item. -- **`previous`** (unstable_allTheWay?: boolean | undefined) => - void Moves focus to the previous item. -- **`up`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item above. -- **`down`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item below. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`fieldValue`** Date - -- **`setSegment`** (part: DateTimeFormatPartTypes, v: number) => - void - -- **`increment`** (part: DateTimeFormatPartTypes) => void - -- **`decrement`** (part: DateTimeFormatPartTypes) => void - -- **`incrementPage`** (part: DateTimeFormatPartTypes) => void - -- **`decrementPage`** (part: DateTimeFormatPartTypes) => void - -- **`dateFormatter`** DateTimeFormat - -- **`confirmPlaceholder`** (part: DateTimeFormatPartTypes) => - void - -- **`isDisabled`** boolean | undefined - -- **`isReadOnly`** boolean | undefined - -- **`isRequired`** boolean | undefined - -- **`pickerId`** string | undefined - -- **`isDateRangePicker`** boolean +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`registerItem`** | (item: Item) => void | Registers a composite item. | +| **`unregisterItem`** | (id: string) => void | Unregisters a composite item. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`next`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the next item. | +| **`previous`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the previous item. | +| **`up`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item above. | +| **`down`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item below. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`fieldValue`** | Date | | +| **`setSegment`** | (part: DateTimeFormatPartTypes, v: number) => void | | +| **`increment`** | (part: DateTimeFormatPartTypes) => void | | +| **`decrement`** | (part: DateTimeFormatPartTypes) => void | | +| **`incrementPage`** | (part: DateTimeFormatPartTypes) => void | | +| **`decrementPage`** | (part: DateTimeFormatPartTypes) => void | | +| **`dateFormatter`** | DateTimeFormat | | +| **`confirmPlaceholder`** | (part: DateTimeFormatPartTypes) => void | | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | | +| **`isRequired`** | boolean \| undefined | | +| **`pickerId`** | string \| undefined | | +| **`isDateRangePicker`** | boolean | |
@@ -432,28 +438,29 @@ const RangeCalendar = state => {
1 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. +| Name | Type | Description | +| :----------- | :------------------ | :-------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. |
### `DatePickerTrigger` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +
6 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`visible`** boolean Whether it's visible or not. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`toggle`** () => void Toggles the `visible` state -- **`unstable_referenceRef`** ⚠️ - RefObject<HTMLElement | null> The reference element. -- **`isDisabled`** boolean | undefined - -- **`isReadOnly`** boolean | undefined +| Name | Type | Description | +| :--------------------------------------------------------------- | :-------------------------------------------------- | :-------------------------------------------------- | +| **`visible`** | boolean | Whether it's visible or not. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`toggle`** | () => void | Toggles the `visible` state | +| **`unstable_referenceRef`** ⚠️ | RefObject<HTMLElement \| null> | The reference element. | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | |
diff --git a/docs/drawer.md b/docs/drawer.md index 0dded82e1..0981db581 100644 --- a/docs/drawer.md +++ b/docs/drawer.md @@ -106,52 +106,29 @@ const cssTransforms = { ### `Drawer` -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`visible`** boolean Whether it's visible or not. -- **`animating`** boolean Whether it's animating or not. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`stopAnimation`** () => void Stops animation. It's called - automatically if there's a CSS transition. -- **`modal`** boolean Toggles Dialog's `modal` state. - - Non-modal: `preventBodyScroll` doesn't work and focus is free. - - Modal: `preventBodyScroll` is automatically enabled, focus is trapped within - the dialog and the dialog is rendered within a `Portal` by default. -- **`hide`** () => void Changes the `visible` state to `false` -- **`hideOnEsc`** boolean | undefined When enabled, user can hide - the dialog by pressing `Escape`. -- **`hideOnClickOutside`** boolean | undefined When enabled, user - can hide the dialog by clicking outside it. -- **`preventBodyScroll`** boolean | undefined When enabled, user - can't scroll on body when the dialog is visible. This option doesn't work if - the dialog isn't modal. -- **`unstable_initialFocusRef`** ⚠️ - RefObject<HTMLElement> | undefined The element that will - be focused when the dialog shows. When not set, the first tabbable element - within the dialog will be used. -- **`unstable_finalFocusRef`** ⚠️ - RefObject<HTMLElement> | undefined The element that will - be focused when the dialog hides. When not set, the disclosure component will - be used. -- **`unstable_orphan`** ⚠️ boolean | - undefined Whether or not the dialog should be a child of its parent. - Opening a nested orphan dialog will close its parent dialog if - `hideOnClickOutside` is set to `true` on the parent. It will be set to `false` - if `modal` is `false`. -- **`placement`** "left" | "right" | "top" | - "bottom" | undefined +| Name | Type | Description | +| :------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animating`** | boolean | Whether it's animating or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`stopAnimation`** | () => void | Stops animation. It's called automatically if there's a CSS transition. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`hide`** | () => void | Changes the `visible` state to `false` | +| **`hideOnEsc`** | boolean \| undefined | When enabled, user can hide the dialog by pressing `Escape`. | +| **`hideOnClickOutside`** | boolean \| undefined | When enabled, user can hide the dialog by clicking outside it. | +| **`preventBodyScroll`** | boolean \| undefined | When enabled, user can't scroll on body when the dialog is visible.This option doesn't work if the dialog isn't modal. | +| **`unstable_initialFocusRef`** ⚠️ | RefObject<HTMLElement> \| undefined | The element that will be focused when the dialog shows.When not set, the first tabbable element within the dialog will be used. | +| **`unstable_finalFocusRef`** ⚠️ | RefObject<HTMLElement> \| undefined | The element that will be focused when the dialog hides.When not set, the disclosure component will be used. | +| **`unstable_orphan`** ⚠️ | boolean \| undefined | Whether or not the dialog should be a child of its parent.Opening a nested orphan dialog will close its parent dialog if`hideOnClickOutside` is set to `true` on the parent.It will be set to `false` if `modal` is `false`. | +| **`placement`** | "left" \| "right" \| "top" \| "bottom" \| undefined | | ### `DrawerCloseButton` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`visible`** boolean Whether it's visible or not. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`toggle`** () => void Toggles the `visible` state +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`toggle`** | () => void | Toggles the `visible` state | diff --git a/docs/link.md b/docs/link.md index da0802d15..10d98ffe4 100644 --- a/docs/link.md +++ b/docs/link.md @@ -38,8 +38,8 @@ export default App; ### `Link` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`isExternal`** boolean | undefined Opens the link in a new tab +| Name | Type | Description | +| :--------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`isExternal`** | boolean \| undefined | Opens the link in a new tab | diff --git a/docs/meter.md b/docs/meter.md index 037e936e6..f20ac8a5d 100644 --- a/docs/meter.md +++ b/docs/meter.md @@ -70,36 +70,25 @@ const background = { ### `useMeterState` -- **`value`** number The `value` of the meter indicator. - - If `undefined`/`not valid` the meter bar will be equal to `min` - -- **`min`** number The minimum value of the meter -- **`max`** number The maximum value of the meter -- **`low`** number The higher limit of min range. - - Defaults to `min`. - -- **`optimum`** number The lower limit of max range. - - Defaults to `median of low & high`. - -- **`high`** number The lower limit of max range. - - Defaults to `max`. +| Name | Type | Description | +| :------------ | :------------------ | :------------------------------------------------------------------------------------------------- | +| **`value`** | number | The `value` of the meter indicator.If `undefined`/`not valid` the meter bar will be equal to `min` | +| **`min`** | number | The minimum value of the meter | +| **`max`** | number | The maximum value of the meter | +| **`low`** | number | The higher limit of min range.Defaults to `min`. | +| **`optimum`** | number | The lower limit of max range.Defaults to `median of low & high`. | +| **`high`** | number | The lower limit of max range.Defaults to `max`. | ### `Meter`
4 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`value`** number The `value` of the meter indicator. - - If `undefined`/`not valid` the meter bar will be equal to `min` - -- **`min`** number The minimum value of the meter -- **`max`** number The maximum value of the meter -- **`percent`** number Percentage of the value progressed with - respect to min & max +| Name | Type | Description | +| :------------ | :------------------ | :------------------------------------------------------------------------------------------------- | +| **`value`** | number | The `value` of the meter indicator.If `undefined`/`not valid` the meter bar will be equal to `min` | +| **`min`** | number | The minimum value of the meter | +| **`max`** | number | The maximum value of the meter | +| **`percent`** | number | Percentage of the value progressed with respect to min & max |
diff --git a/docs/number-input.md b/docs/number-input.md index 47f8cbbdc..860c2e7ed 100644 --- a/docs/number-input.md +++ b/docs/number-input.md @@ -68,137 +68,83 @@ export default App; ### `useNumberinputState` -- **`value`** string | number The value of the counter. Should be - less than `max` and greater than `min` - - If no value, initial value is set to `""` - -- **`keepWithinRange`** boolean This controls the value update - behavior in general. - - - If `true` and you use the stepper or up/down arrow keys, the value will not - exceed the `max` or go lower than `min` - - - If `false`, the value will be allowed to go out of range. - -- **`min`** number The minimum value of the counter -- **`max`** number The maximum value of the counter -- **`step`** number The step used to increment or decrement the - value -- **`precision`** number The number of decimal points used to round - the value - - If no precision, initial value is from the decimal places from value/step - - `0` - -- **`defaultValue`** string | number | undefined The initial value - of the counter. Should be less than `max` and greater than `min` -- **`onChange`** - ((valueAsString: - string, valueAsNumber: number)... The callback fired when the value - changes -- **`focusInputOnChange`** boolean | undefined If `true`, the input - will be focused as you increment or decrement the value with the stepper +| Name | Type | Description | +| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`value`** | string \| number | The value of the counter. Should be less than `max` and greater than `min`If no value, initial value is set to `""` | +| **`keepWithinRange`** | boolean | This controls the value update behavior in general.- If `true` and you use the stepper or up/down arrow keys, the value will not exceed the `max` or go lower than `min`- If `false`, the value will be allowed to go out of range. | +| **`min`** | number | The minimum value of the counter | +| **`max`** | number | The maximum value of the counter | +| **`step`** | number | The step used to increment or decrement the value | +| **`precision`** | number | The number of decimal points used to round the valueIf no precision, initial value is from the decimal places from value/step - `0` | +| **`defaultValue`** | string \| number \| undefined | The initial value of the counter. Should be less than `max` and greater than `min` | +| **`onChange`** | ((valueAsString: string, valueAsNumber: number)... | The callback fired when the value changes | +| **`focusInputOnChange`** | boolean \| undefined | If `true`, the input will be focused as you incrementor decrement the value with the stepper | ### `NumberInput` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`clampValueOnBlur`** boolean | undefined This controls the - value update when you blur out of the input. -- If `true` and the value is greater than `max`, the value will be reset to - `max` -- Else, the value remains the same. -- **`allowMouseWheel`** boolean | undefined If `true`, the input's -value will change based on mouse wheel +| Name | Type | Description | +| :--------------------- | :-------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`clampValueOnBlur`** | boolean \| undefined | This controls the value update when you blur out of the input.- If `true` and the value is greater than `max`, the value will be reset to `max`- Else, the value remains the same. | +| **`allowMouseWheel`** | boolean \| undefined | If `true`, the input's value will change based on mouse wheel | +
12 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`keepWithinRange`** boolean This controls the value update - behavior in general. - - - If `true` and you use the stepper or up/down arrow keys, the value will not - exceed the `max` or go lower than `min` - - - If `false`, the value will be allowed to go out of range. - -- **`value`** string | number The value of the counter. Should be - less than `max` and greater than `min` - - If no value, initial value is set to `""` - -- **`min`** number The minimum value of the counter -- **`max`** number The maximum value of the counter -- **`step`** number The step used to increment or decrement the - value -- **`valueAsNumber`** number The value of the counter in number. -- **`isOutOfRange`** boolean True, if value is less than `min` & - greater than `max`. -- **`inputRef`** RefObject<HTMLElement | null> The Input - Element. -- **`setValue`** (next: StringOrNumber) => void Set the value - which will be converted to string. -- **`increment`** (step: number) => void Increment the value - based on the step -- **`decrement`** (step: number) => void Decrement the value - based on the step -- **`setCastedValue`** (value: StringOrNumber) => void Set the - casted value based on precision & step. +| Name | Type | Description | +| :-------------------- | :-------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`keepWithinRange`** | boolean | This controls the value update behavior in general.- If `true` and you use the stepper or up/down arrow keys, the value will not exceed the `max` or go lower than `min`- If `false`, the value will be allowed to go out of range. | +| **`value`** | string \| number | The value of the counter. Should be less than `max` and greater than `min`If no value, initial value is set to `""` | +| **`min`** | number | The minimum value of the counter | +| **`max`** | number | The maximum value of the counter | +| **`step`** | number | The step used to increment or decrement the value | +| **`valueAsNumber`** | number | The value of the counter in number. | +| **`isOutOfRange`** | boolean | True, if value is less than `min` & greater than `max`. | +| **`inputRef`** | RefObject<HTMLElement \| null> | The Input Element. | +| **`setValue`** | (next: StringOrNumber) => void | Set the value which will be converted to string. | +| **`increment`** | (step: number) => void | Increment the value based on the step | +| **`decrement`** | (step: number) => void | Decrement the value based on the step | +| **`setCastedValue`** | (value: StringOrNumber) => void | Set the casted value based on precision & step. |
### `NumberInputDecrementButton` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +
5 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`keepWithinRange`** boolean This controls the value update - behavior in general. - - - If `true` and you use the stepper or up/down arrow keys, the value will not - exceed the `max` or go lower than `min` - - - If `false`, the value will be allowed to go out of range. - -- **`isAtMin`** boolean Truw, if value is equal to min. -- **`focusInput`** () => void Focus input if focus input on - value change is `true` -- **`spinDown`** () => void Spinner handler that decrements the - value after an interval -- **`spinStop`** () => void Spinner handler that Stop it from - incrementing or decrementing +| Name | Type | Description | +| :-------------------- | :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`keepWithinRange`** | boolean | This controls the value update behavior in general.- If `true` and you use the stepper or up/down arrow keys, the value will not exceed the `max` or go lower than `min`- If `false`, the value will be allowed to go out of range. | +| **`isAtMin`** | boolean | Truw, if value is equal to min. | +| **`focusInput`** | () => void | Focus input if focus input on value change is `true` | +| **`spinDown`** | () => void | Spinner handler that decrements the value after an interval | +| **`spinStop`** | () => void | Spinner handler that Stop it from incrementing or decrementing |
### `NumberInputIncrementButton` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +
5 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`keepWithinRange`** boolean This controls the value update - behavior in general. - - - If `true` and you use the stepper or up/down arrow keys, the value will not - exceed the `max` or go lower than `min` - - - If `false`, the value will be allowed to go out of range. - -- **`isAtMax`** boolean True, if value is equal to max. -- **`focusInput`** () => void Focus input if focus input on - value change is `true` -- **`spinUp`** () => void Spinner handler that increments the - value after an interval -- **`spinStop`** () => void Spinner handler that Stop it from - incrementing or decrementing +| Name | Type | Description | +| :-------------------- | :-------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`keepWithinRange`** | boolean | This controls the value update behavior in general.- If `true` and you use the stepper or up/down arrow keys, the value will not exceed the `max` or go lower than `min`- If `false`, the value will be allowed to go out of range. | +| **`isAtMax`** | boolean | True, if value is equal to max. | +| **`focusInput`** | () => void | Focus input if focus input on value change is `true` | +| **`spinUp`** | () => void | Spinner handler that increments the value after an interval | +| **`spinStop`** | () => void | Spinner handler that Stop it from incrementing or decrementing |
diff --git a/docs/pagination.md b/docs/pagination.md index 7a0cb35b8..e0c1a9848 100644 --- a/docs/pagination.md +++ b/docs/pagination.md @@ -92,61 +92,54 @@ export default App; ### `usePaginationState` -- **`defaultPage`** number | undefined Set the default - page(uncontrollable) -- **`page`** number | undefined Set the page(controllable) -- **`onChange`** ((page: number) => void) | undefined - -- **`count`** number | undefined Total no. of pages -- **`boundaryCount`** number | undefined No. of boundary pages to - be visible -- **`siblingCount`** number | undefined No. of sibiling pages - allowed before/after the current page +| Name | Type | Description | +| :------------------ | :----------------------------------------------------- | :---------------------------------------------------------- | +| **`defaultPage`** | number \| undefined | Set the default page(uncontrollable) | +| **`page`** | number \| undefined | Set the page(controllable) | +| **`onChange`** | ((page: number) => void) \| undefined | | +| **`count`** | number \| undefined | Total no. of pages | +| **`boundaryCount`** | number \| undefined | No. of boundary pages to be visible | +| **`siblingCount`** | number \| undefined | No. of sibiling pages allowed before/after the current page | ### `Pagination`
9 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`currentPage`** number The current active page -- **`pages`** (string | number)[] All the page with start & end - ellipsis -- **`isAtFirstPage`** boolean True, if the currentPage is at first - page -- **`isAtLastPage`** boolean True, if the currentPage is at last - page -- **`movePage`** (page: number) => void Go to the specified - page number -- **`nextPage`** () => void Go to next page -- **`prevPage`** () => void Go to previous page -- **`firstPage`** () => void Go to first page -- **`lastPage`** () => void Go to last page +| Name | Type | Description | +| :------------------ | :-------------------------------------- | :---------------------------------------- | +| **`currentPage`** | number | The current active page | +| **`pages`** | (string \| number)[] | All the page with start & end ellipsis | +| **`isAtFirstPage`** | boolean | True, if the currentPage is at first page | +| **`isAtLastPage`** | boolean | True, if the currentPage is at last page | +| **`movePage`** | (page: number) => void | Go to the specified page number | +| **`nextPage`** | () => void | Go to next page | +| **`prevPage`** | () => void | Go to previous page | +| **`firstPage`** | () => void | Go to first page | +| **`lastPage`** | () => void | Go to last page |
### `PaginationButton` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`goto`** - number - | "nextPage" | "prevPage" | "firstPage" ... +| Name | Type | Description | +| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`goto`** | number \| "nextPage" \| "prevPage" \| "firstPage" ... | |
8 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`currentPage`** number The current active page -- **`movePage`** (page: number) => void Go to the specified - page number -- **`nextPage`** () => void Go to next page -- **`prevPage`** () => void Go to previous page -- **`firstPage`** () => void Go to first page -- **`lastPage`** () => void Go to last page -- **`isAtLastPage`** boolean True, if the currentPage is at last - page -- **`isAtFirstPage`** boolean True, if the currentPage is at first - page +| Name | Type | Description | +| :------------------ | :-------------------------------------- | :---------------------------------------- | +| **`currentPage`** | number | The current active page | +| **`movePage`** | (page: number) => void | Go to the specified page number | +| **`nextPage`** | () => void | Go to next page | +| **`prevPage`** | () => void | Go to previous page | +| **`firstPage`** | () => void | Go to first page | +| **`lastPage`** | () => void | Go to last page | +| **`isAtLastPage`** | boolean | True, if the currentPage is at last page | +| **`isAtFirstPage`** | boolean | True, if the currentPage is at first page |
diff --git a/docs/picker-base.md b/docs/picker-base.md index e1858b636..0ed88d01e 100644 --- a/docs/picker-base.md +++ b/docs/picker-base.md @@ -9,6 +9,7 @@ - [Usage](#usage) - [Composition](#composition) - [Props](#props) + - [`usePickerBaseState`](#usepickerbasestate) - [`PickerBase`](#pickerbase) - [`PickerBaseContent`](#pickerbasecontent) - [`PickerBaseTrigger`](#pickerbasetrigger) @@ -51,88 +52,87 @@ export default App; ## Props +### `usePickerBaseState` + +| Name | Type | Description | +| :------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`placement`** | "auto-start" \| "auto" \| "auto-end" \| "top-start... | Actual `placement`. | +| **`unstable_fixed`** ⚠️ | boolean \| undefined | Whether or not the popover should have `position` set to `fixed`. | +| **`unstable_flip`** ⚠️ | boolean \| undefined | Flip the popover's placement when it starts to overlap its referenceelement. | +| **`unstable_offset`** ⚠️ | [string \| number, string \| number] \| undefined | Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`. | +| **`gutter`** | number \| undefined | Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`. | +| **`unstable_preventOverflow`** ⚠️ | boolean \| undefined | Prevents popover from being positioned outside the boundary. | +| **`isDisabled`** | boolean \| undefined | Whether the input is disabled. | +| **`isReadOnly`** | boolean \| undefined | Whether the input can be selected but not changed by the user. | +| **`pickerId`** | string \| undefined | Picker wrapper Id | +| **`dialogId`** | string \| undefined | Dialog Id | +| **`segmentFocus`** | (() => void) \| undefined | Function to be called on picker mousedownfor focusing first tabbable element | + ### `PickerBase`
7 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`visible`** boolean Whether it's visible or not. -- **`pickerId`** string | undefined - -- **`dialogId`** string | undefined - -- **`isDisabled`** boolean | undefined - -- **`isReadOnly`** boolean | undefined - -- **`segmentFocus`** (() => void) | undefined - -- **`show`** () => void Changes the `visible` state to `true` +| Name | Type | Description | +| :----------------- | :----------------------------------------- | :------------------------------------ | +| **`visible`** | boolean | Whether it's visible or not. | +| **`pickerId`** | string \| undefined | | +| **`dialogId`** | string \| undefined | | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | | +| **`segmentFocus`** | (() => void) \| undefined | | +| **`show`** | () => void | Changes the `visible` state to `true` |
### `PickerBaseContent` -- **`hideOnEsc`** boolean | undefined When enabled, user can hide - the dialog by pressing `Escape`. -- **`hideOnClickOutside`** boolean | undefined When enabled, user - can hide the dialog by clicking outside it. -- **`preventBodyScroll`** boolean | undefined When enabled, user - can't scroll on body when the dialog is visible. This option doesn't work if - the dialog isn't modal. -- **`unstable_initialFocusRef`** ⚠️ - RefObject<HTMLElement> | undefined The element that will - be focused when the dialog shows. When not set, the first tabbable element - within the dialog will be used. -- **`unstable_finalFocusRef`** ⚠️ - RefObject<HTMLElement> | undefined The element that will - be focused when the dialog hides. When not set, the disclosure component will - be used. -- **`unstable_orphan`** ⚠️ boolean | -undefined Whether or not the dialog should be a child of its parent. -Opening a nested orphan dialog will close its parent dialog if -`hideOnClickOutside` is set to `true` on the parent. It will be set to `false` -if `modal` is `false`. +| Name | Type | Description | +| :------------------------------------------------------------------ | :------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`hideOnEsc`** | boolean \| undefined | When enabled, user can hide the dialog by pressing `Escape`. | +| **`hideOnClickOutside`** | boolean \| undefined | When enabled, user can hide the dialog by clicking outside it. | +| **`preventBodyScroll`** | boolean \| undefined | When enabled, user can't scroll on body when the dialog is visible.This option doesn't work if the dialog isn't modal. | +| **`unstable_initialFocusRef`** ⚠️ | RefObject<HTMLElement> \| undefined | The element that will be focused when the dialog shows.When not set, the first tabbable element within the dialog will be used. | +| **`unstable_finalFocusRef`** ⚠️ | RefObject<HTMLElement> \| undefined | The element that will be focused when the dialog hides.When not set, the disclosure component will be used. | +| **`unstable_orphan`** ⚠️ | boolean \| undefined | Whether or not the dialog should be a child of its parent.Opening a nested orphan dialog will close its parent dialog if`hideOnClickOutside` is set to `true` on the parent.It will be set to `false` if `modal` is `false`. | +
8 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`visible`** boolean Whether it's visible or not. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`animating`** boolean Whether it's animating or not. -- **`stopAnimation`** () => void Stops animation. It's called - automatically if there's a CSS transition. -- **`modal`** boolean Toggles Dialog's `modal` state. - - Non-modal: `preventBodyScroll` doesn't work and focus is free. - - Modal: `preventBodyScroll` is automatically enabled, focus is trapped within - the dialog and the dialog is rendered within a `Portal` by default. -- **`hide`** () => void Changes the `visible` state to `false` -- **`dialogId`** string | undefined +| Name | Type | Description | +| :------------------ | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`animating`** | boolean | Whether it's animating or not. | +| **`stopAnimation`** | () => void | Stops animation. It's called automatically if there's a CSS transition. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`hide`** | () => void | Changes the `visible` state to `false` | +| **`dialogId`** | string \| undefined | |
### `PickerBaseTrigger` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +
6 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`visible`** boolean Whether it's visible or not. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`toggle`** () => void Toggles the `visible` state -- **`unstable_referenceRef`** ⚠️ - RefObject<HTMLElement | null> The reference element. -- **`isDisabled`** boolean | undefined - -- **`isReadOnly`** boolean | undefined +| Name | Type | Description | +| :--------------------------------------------------------------- | :-------------------------------------------------- | :-------------------------------------------------- | +| **`visible`** | boolean | Whether it's visible or not. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`toggle`** | () => void | Toggles the `visible` state | +| **`unstable_referenceRef`** ⚠️ | RefObject<HTMLElement \| null> | The reference element. | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | |
diff --git a/docs/progress.md b/docs/progress.md index c1e2fe726..44da778cb 100644 --- a/docs/progress.md +++ b/docs/progress.md @@ -60,24 +60,22 @@ export default App; ### `useProgressState` -- **`value`** number | null The `value` of the progress indicator. - - If `null` the progress bar will be in `indeterminate` state - -- **`min`** number The minimum value of the progress -- **`max`** number The maximum value of the +| Name | Type | Description | +| :---------- | :-------------------------- | :------------------------------------------------------------------------------------------------ | +| **`value`** | number \| null | The `value` of the progress indicator.If `null` the progress bar will be in `indeterminate` state | +| **`min`** | number | The minimum value of the progress | +| **`max`** | number | The maximum value of the | ### `Progress`
4 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`value`** number | null The `value` of the progress indicator. - - If `null` the progress bar will be in `indeterminate` state - -- **`min`** number The minimum value of the progress -- **`max`** number The maximum value of the -- **`isIndeterminate`** boolean Set isInterminate state +| Name | Type | Description | +| :-------------------- | :-------------------------- | :------------------------------------------------------------------------------------------------ | +| **`value`** | number \| null | The `value` of the progress indicator.If `null` the progress bar will be in `indeterminate` state | +| **`min`** | number | The minimum value of the progress | +| **`max`** | number | The maximum value of the | +| **`isIndeterminate`** | boolean | Set isInterminate state |
diff --git a/docs/segment.md b/docs/segment.md index 30f0ef3b4..a52d8954d 100644 --- a/docs/segment.md +++ b/docs/segment.md @@ -10,6 +10,7 @@ accessibility properties necessary for the [DatePicker](./datepicker.md) & - [Usage](#usage) - [Composition](#composition) - [Props](#props) + - [`useSegmentState`](#usesegmentstate) - [`Segment`](#segment) - [`SegmentField`](#segmentfield) @@ -51,159 +52,82 @@ export default App; ## Props -### `Segment` - -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`id`** string | undefined Same as the HTML attribute. -- **`segment`** DateSegment +### `useSegmentState` -- **`isDisabled`** boolean | undefined +| Name | Type | Description | +| :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`defaultValue`** | Date \| undefined | Default segment value | +| **`value`** | Date \| undefined | Segment value | +| **`onChange`** | ((value: Date, ...args: any[]) => void) \| undef... | Callback to fire on value change | +| **`formatOptions`** | DateTimeFormatOpts \| undefined | Sets formmating of date based on Intl.DateFormatOptionshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat | +| **`placeholderDate`** | Date \| undefined | Placeholder date | -- **`isReadOnly`** boolean | undefined +### `Segment` -- **`isRequired`** boolean | undefined +| Name | Type | Description | +| :--------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`id`** | string \| undefined | Same as the HTML attribute. | +| **`segment`** | DateSegment | | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | | +| **`isRequired`** | boolean \| undefined | |
23 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`registerItem`** (item: Item) => void Registers a composite - item. -- **`unregisterItem`** (id: string) => void Unregisters a - composite item. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`next`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the next item. -- **`previous`** (unstable_allTheWay?: boolean | undefined) => - void Moves focus to the previous item. -- **`up`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item above. -- **`down`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item below. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`fieldValue`** Date - -- **`setSegment`** (part: DateTimeFormatPartTypes, v: number) => - void - -- **`increment`** (part: DateTimeFormatPartTypes) => void - -- **`decrement`** (part: DateTimeFormatPartTypes) => void - -- **`incrementPage`** (part: DateTimeFormatPartTypes) => void - -- **`decrementPage`** (part: DateTimeFormatPartTypes) => void - -- **`dateFormatter`** DateTimeFormat - -- **`confirmPlaceholder`** (part: DateTimeFormatPartTypes) => - void +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`registerItem`** | (item: Item) => void | Registers a composite item. | +| **`unregisterItem`** | (id: string) => void | Unregisters a composite item. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`next`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the next item. | +| **`previous`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the previous item. | +| **`up`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item above. | +| **`down`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item below. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`fieldValue`** | Date | | +| **`setSegment`** | (part: DateTimeFormatPartTypes, v: number) => void | | +| **`increment`** | (part: DateTimeFormatPartTypes) => void | | +| **`decrement`** | (part: DateTimeFormatPartTypes) => void | | +| **`incrementPage`** | (part: DateTimeFormatPartTypes) => void | | +| **`decrementPage`** | (part: DateTimeFormatPartTypes) => void | | +| **`dateFormatter`** | DateTimeFormat | | +| **`confirmPlaceholder`** | (part: DateTimeFormatPartTypes) => void | |
### `SegmentField` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +
12 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`groups`** Group[] Lists all the composite groups with their - `id` and DOM `ref`. This state is automatically updated when `registerGroup` - and `unregisterGroup` are called. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`move`** (id: string | null) => void Moves focus to a given - item ID. +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. |
diff --git a/docs/select.md b/docs/select.md index f08e5bb68..37e8d5b18 100644 --- a/docs/select.md +++ b/docs/select.md @@ -81,705 +81,269 @@ export default App; ### `useSelectBaseState` -- **`values`** string[] Options/values provided. -- **`selectedValue`** string | null Initial value to be selected +| Name | Type | Description | +| :------------------ | :-------------------------- | :--------------------------- | +| **`values`** | string[] | Options/values provided. | +| **`selectedValue`** | string \| null | Initial value to be selected | ### `useSelectListState` -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`rtl`** boolean Determines how `next` and `previous` functions - will behave. If `rtl` is set to `true`, they will be inverted. This only - affects the composite widget behavior. You still need to set `dir="rtl"` on - HTML/CSS. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`loop`** boolean | "horizontal" | "vertical" On - one-dimensional composites: - - - `true` loops from the last item to the first item and vice-versa. - - `horizontal` loops only if `orientation` is `horizontal` or not set. - - `vertical` loops only if `orientation` is `vertical` or not set. - - If `currentId` is initially set to `null`, the composite element will be - focused in between the last and first items. - - On two-dimensional composites: - - - `true` loops from the last row/column item to the first item in the same - row/column and vice-versa. If it's the last item in the last row, it moves - to the first item in the first row and vice-versa. - - `horizontal` loops only from the last row item to the first item in the same - row. - - `vertical` loops only from the last column item to the first item in the - column row. - - If `currentId` is initially set to `null`, vertical loop will have no effect - as moving down from the last row or up from the first row will focus the - composite element. - - If `wrap` matches the value of `loop`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. - -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`shift`** boolean **Has effect only on two-dimensional - composites**. If enabled, moving up or down when there's no next item or the - next item is disabled will shift to the item right before it. -- **`values`** string[] Options/values provided. -- **`selectedValue`** string | null Initial value to be selected +| Name | Type | Description | +| :------------------ | :------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`rtl`** | boolean | Determines how `next` and `previous` functions will behave. If `rtl` isset to `true`, they will be inverted. This only affects the compositewidget behavior. You still need to set `dir="rtl"` on HTML/CSS. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`loop`** | boolean \| "horizontal" \| "vertical" | On one-dimensional composites: - `true` loops from the last item to the first item and vice-versa. - `horizontal` loops only if `orientation` is `horizontal` or not set. - `vertical` loops only if `orientation` is `vertical` or not set. - If `currentId` is initially set to `null`, the composite element willbe focused in between the last and first items.On two-dimensional composites: - `true` loops from the last row/column item to the first item in thesame row/column and vice-versa. If it's the last item in the last row, itmoves to the first item in the first row and vice-versa. - `horizontal` loops only from the last row item to the first item inthe same row. - `vertical` loops only from the last column item to the first item inthe column row. - If `currentId` is initially set to `null`, vertical loop will have noeffect as moving down from the last row or up from the first row willfocus the composite element. - If `wrap` matches the value of `loop`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`shift`** | boolean | **Has effect only on two-dimensional composites**. If enabled, moving upor down when there's no next item or the next item is disabled will shiftto the item right before it. | +| **`values`** | string[] | Options/values provided. | +| **`selectedValue`** | string \| null | Initial value to be selected | ### `useSelectPopoverState` -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`visible`** boolean Whether it's visible or not. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`modal`** boolean Toggles Dialog's `modal` state. - - Non-modal: `preventBodyScroll` doesn't work and focus is free. - - Modal: `preventBodyScroll` is automatically enabled, focus is trapped within - the dialog and the dialog is rendered within a `Portal` by default. -- **`placement`** - "auto-start" - | "auto" | "auto-end" | "top-start... Actual - `placement`. -- **`unstable_fixed`** ⚠️ boolean | - undefined Whether or not the popover should have `position` set to - `fixed`. -- **`unstable_flip`** ⚠️ boolean | - undefined Flip the popover's placement when it starts to overlap its - reference element. -- **`unstable_offset`** ⚠️ [string | - number, string | number] | undefined Offset between the reference and - the popover: [main axis, alt axis]. Should not be combined with `gutter`. -- **`gutter`** number | undefined Offset between the reference and - the popover on the main axis. Should not be combined with `unstable_offset`. -- **`unstable_preventOverflow`** ⚠️ - boolean | undefined Prevents popover from being positioned - outside the boundary. +| Name | Type | Description | +| :------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`placement`** | "auto-start" \| "auto" \| "auto-end" \| "top-start... | Actual `placement`. | +| **`unstable_fixed`** ⚠️ | boolean \| undefined | Whether or not the popover should have `position` set to `fixed`. | +| **`unstable_flip`** ⚠️ | boolean \| undefined | Flip the popover's placement when it starts to overlap its referenceelement. | +| **`unstable_offset`** ⚠️ | [string \| number, string \| number] \| undefined | Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`. | +| **`gutter`** | number \| undefined | Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`. | +| **`unstable_preventOverflow`** ⚠️ | boolean \| undefined | Prevents popover from being positioned outside the boundary. | ### `useSelectState` -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`visible`** boolean Whether it's visible or not. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`modal`** boolean Toggles Dialog's `modal` state. - - Non-modal: `preventBodyScroll` doesn't work and focus is free. - - Modal: `preventBodyScroll` is automatically enabled, focus is trapped within - the dialog and the dialog is rendered within a `Portal` by default. -- **`placement`** - "auto-start" - | "auto" | "auto-end" | "top-start... Actual - `placement`. -- **`unstable_fixed`** ⚠️ boolean | - undefined Whether or not the popover should have `position` set to - `fixed`. -- **`unstable_flip`** ⚠️ boolean | - undefined Flip the popover's placement when it starts to overlap its - reference element. -- **`unstable_offset`** ⚠️ [string | - number, string | number] | undefined Offset between the reference and - the popover: [main axis, alt axis]. Should not be combined with `gutter`. -- **`gutter`** number | undefined Offset between the reference and - the popover on the main axis. Should not be combined with `unstable_offset`. -- **`unstable_preventOverflow`** ⚠️ - boolean | undefined Prevents popover from being positioned - outside the boundary. -- **`rtl`** boolean Determines how `next` and `previous` functions - will behave. If `rtl` is set to `true`, they will be inverted. This only - affects the composite widget behavior. You still need to set `dir="rtl"` on - HTML/CSS. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`loop`** boolean | "horizontal" | "vertical" On - one-dimensional composites: - - - `true` loops from the last item to the first item and vice-versa. - - `horizontal` loops only if `orientation` is `horizontal` or not set. - - `vertical` loops only if `orientation` is `vertical` or not set. - - If `currentId` is initially set to `null`, the composite element will be - focused in between the last and first items. - - On two-dimensional composites: - - - `true` loops from the last row/column item to the first item in the same - row/column and vice-versa. If it's the last item in the last row, it moves - to the first item in the first row and vice-versa. - - `horizontal` loops only from the last row item to the first item in the same - row. - - `vertical` loops only from the last column item to the first item in the - column row. - - If `currentId` is initially set to `null`, vertical loop will have no effect - as moving down from the last row or up from the first row will focus the - composite element. - - If `wrap` matches the value of `loop`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. - -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`shift`** boolean **Has effect only on two-dimensional - composites**. If enabled, moving up or down when there's no next item or the - next item is disabled will shift to the item right before it. -- **`values`** string[] Options/values provided. -- **`selectedValue`** string | null Initial value to be selected +| Name | Type | Description | +| :------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`placement`** | "auto-start" \| "auto" \| "auto-end" \| "top-start... | Actual `placement`. | +| **`unstable_fixed`** ⚠️ | boolean \| undefined | Whether or not the popover should have `position` set to `fixed`. | +| **`unstable_flip`** ⚠️ | boolean \| undefined | Flip the popover's placement when it starts to overlap its referenceelement. | +| **`unstable_offset`** ⚠️ | [string \| number, string \| number] \| undefined | Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`. | +| **`gutter`** | number \| undefined | Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`. | +| **`unstable_preventOverflow`** ⚠️ | boolean \| undefined | Prevents popover from being positioned outside the boundary. | +| **`rtl`** | boolean | Determines how `next` and `previous` functions will behave. If `rtl` isset to `true`, they will be inverted. This only affects the compositewidget behavior. You still need to set `dir="rtl"` on HTML/CSS. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`loop`** | boolean \| "horizontal" \| "vertical" | On one-dimensional composites: - `true` loops from the last item to the first item and vice-versa. - `horizontal` loops only if `orientation` is `horizontal` or not set. - `vertical` loops only if `orientation` is `vertical` or not set. - If `currentId` is initially set to `null`, the composite element willbe focused in between the last and first items.On two-dimensional composites: - `true` loops from the last row/column item to the first item in thesame row/column and vice-versa. If it's the last item in the last row, itmoves to the first item in the first row and vice-versa. - `horizontal` loops only from the last row item to the first item inthe same row. - `vertical` loops only from the last column item to the first item inthe column row. - If `currentId` is initially set to `null`, vertical loop will have noeffect as moving down from the last row or up from the first row willfocus the composite element. - If `wrap` matches the value of `loop`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`shift`** | boolean | **Has effect only on two-dimensional composites**. If enabled, moving upor down when there's no next item or the next item is disabled will shiftto the item right before it. | +| **`values`** | string[] | Options/values provided. | +| **`selectedValue`** | string \| null | Initial value to be selected | ### `Select` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`hideOnEsc`** boolean | undefined When enabled, user can hide -the select popover by pressing `esc` while focusing on the select input. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`hideOnEsc`** | boolean \| undefined | When enabled, user can hide the select popover by pressing`esc` while focusing on the select input. | +
53 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`visible`** boolean Whether it's visible or not. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`toggle`** () => void Toggles the `visible` state -- **`unstable_referenceRef`** ⚠️ - RefObject<HTMLElement | null> The reference element. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`animating`** boolean Whether it's animating or not. -- **`modal`** boolean Toggles Dialog's `modal` state. - - Non-modal: `preventBodyScroll` doesn't work and focus is free. - - Modal: `preventBodyScroll` is automatically enabled, focus is trapped within - the dialog and the dialog is rendered within a `Portal` by default. -- **`placement`** - "auto-start" - | "auto" | "auto-end" | "top-start... Actual - `placement`. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`rtl`** boolean Determines how `next` and `previous` functions - will behave. If `rtl` is set to `true`, they will be inverted. This only - affects the composite widget behavior. You still need to set `dir="rtl"` on - HTML/CSS. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`groups`** Group[] Lists all the composite groups with their - `id` and DOM `ref`. This state is automatically updated when `registerGroup` - and `unregisterGroup` are called. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`loop`** boolean | "horizontal" | "vertical" On - one-dimensional composites: - - - `true` loops from the last item to the first item and vice-versa. - - `horizontal` loops only if `orientation` is `horizontal` or not set. - - `vertical` loops only if `orientation` is `vertical` or not set. - - If `currentId` is initially set to `null`, the composite element will be - focused in between the last and first items. - - On two-dimensional composites: - - - `true` loops from the last row/column item to the first item in the same - row/column and vice-versa. If it's the last item in the last row, it moves - to the first item in the first row and vice-versa. - - `horizontal` loops only from the last row item to the first item in the same - row. - - `vertical` loops only from the last column item to the first item in the - column row. - - If `currentId` is initially set to `null`, vertical loop will have no effect - as moving down from the last row or up from the first row will focus the - composite element. - - If `wrap` matches the value of `loop`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. - -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`shift`** boolean **Has effect only on two-dimensional - composites**. If enabled, moving up or down when there's no next item or the - next item is disabled will shift to the item right before it. -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`menuRole`** "listbox" | "tree" | "grid" | - "dialog" Indicates the type of the suggestions popup. -- **`items`** Item[] Lists all the select items with their `id`, - DOM `ref`, `disabled` state, `value` and `groupId` if any. This state is - automatically updated when `registerItem` and `unregisterItem` are called. -- **`values`** string[] Options/values provided. -- **`valuesById`** { id: string; value: string; }[] Initial value - to be selected -- **`selectedValue`** string | null Initial value to be selected -- **`currentValue`** string | undefined Initial value to be - selected -- **`selectedId`** string | null | undefined Id of the item that is - currently selected. -- **`setBaseId`** (value: SetStateAction<string>) => - void Sets `baseId`. -- **`show`** () => void Changes the `visible` state to `true` -- **`hide`** () => void Changes the `visible` state to `false` -- **`setVisible`** (value: SetStateAction<boolean>) => - void Sets `visible`. -- **`setAnimated`** (value: SetStateAction<number | boolean>) - => void Sets `animated`. -- **`stopAnimation`** () => void Stops animation. It's called - automatically if there's a CSS transition. -- **`setModal`** (value: SetStateAction<boolean>) => - void Sets `modal`. -- **`place`** (value: SetStateAction<Placement>) => - void Change the `placement` state. -- **`unregisterItem`** (id: string) => void Unregisters a - composite item. -- **`registerGroup`** (group: Group) => void Registers a - composite group. -- **`unregisterGroup`** (id: string) => void Unregisters a - composite group. -- **`move`** (id: string | null) => void Moves focus to a given - item ID. -- **`next`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the next item. -- **`previous`** (unstable_allTheWay?: boolean | undefined) => - void Moves focus to the previous item. -- **`up`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item above. -- **`down`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item below. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`sort`** () => void Sorts the `composite.items` based on - the items position in the DOM. This is especially useful after modifying the - composite items order in the DOM. Most of the time, though, you don't need to - manually call this function as the re-ordering happens automatically. -- **`unstable_setVirtual`** ⚠️ (value: - SetStateAction<boolean>) => void Sets `virtual`. -- **`setRTL`** (value: SetStateAction<boolean>) => void - Sets `rtl`. -- **`setOrientation`** - (value: - SetStateAction<"horizontal" | "vertical... Sets - `orientation`. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`setLoop`** - (value: - SetStateAction<boolean | "horizontal" |... Sets `loop`. -- **`setWrap`** - (value: - SetStateAction<boolean | "horizontal" |... Sets `wrap`. -- **`setShift`** (value: SetStateAction<boolean>) => - void Sets `shift`. -- **`reset`** () => void Resets to initial state. -- **`registerItem`** (item: Item) => void Registers a select - item. -- **`setSelectedValue`** (value: SetStateAction<string | null>) - => void Sets `values`. +| Name | Type | Description | +| :--------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`visible`** | boolean | Whether it's visible or not. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`toggle`** | () => void | Toggles the `visible` state | +| **`unstable_referenceRef`** ⚠️ | RefObject<HTMLElement \| null> | The reference element. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`animating`** | boolean | Whether it's animating or not. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`placement`** | "auto-start" \| "auto" \| "auto-end" \| "top-start... | Actual `placement`. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`rtl`** | boolean | Determines how `next` and `previous` functions will behave. If `rtl` isset to `true`, they will be inverted. This only affects the compositewidget behavior. You still need to set `dir="rtl"` on HTML/CSS. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`loop`** | boolean \| "horizontal" \| "vertical" | On one-dimensional composites: - `true` loops from the last item to the first item and vice-versa. - `horizontal` loops only if `orientation` is `horizontal` or not set. - `vertical` loops only if `orientation` is `vertical` or not set. - If `currentId` is initially set to `null`, the composite element willbe focused in between the last and first items.On two-dimensional composites: - `true` loops from the last row/column item to the first item in thesame row/column and vice-versa. If it's the last item in the last row, itmoves to the first item in the first row and vice-versa. - `horizontal` loops only from the last row item to the first item inthe same row. - `vertical` loops only from the last column item to the first item inthe column row. - If `currentId` is initially set to `null`, vertical loop will have noeffect as moving down from the last row or up from the first row willfocus the composite element. - If `wrap` matches the value of `loop`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`shift`** | boolean | **Has effect only on two-dimensional composites**. If enabled, moving upor down when there's no next item or the next item is disabled will shiftto the item right before it. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`menuRole`** | "listbox" \| "tree" \| "grid" \| "dialog" | Indicates the type of the suggestions popup. | +| **`items`** | Item[] | Lists all the select items with their `id`, DOM `ref`, `disabled` state,`value` and `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`values`** | string[] | Options/values provided. | +| **`valuesById`** | { id: string; value: string; }[] | Initial value to be selected | +| **`selectedValue`** | string \| null | Initial value to be selected | +| **`currentValue`** | string \| undefined | Initial value to be selected | +| **`selectedId`** | string \| null \| undefined | Id of the item that is currently selected. | +| **`setBaseId`** | (value: SetStateAction<string>) => void | Sets `baseId`. | +| **`show`** | () => void | Changes the `visible` state to `true` | +| **`hide`** | () => void | Changes the `visible` state to `false` | +| **`setVisible`** | (value: SetStateAction<boolean>) => void | Sets `visible`. | +| **`setAnimated`** | (value: SetStateAction<number \| boolean>) => void | Sets `animated`. | +| **`stopAnimation`** | () => void | Stops animation. It's called automatically if there's a CSS transition. | +| **`setModal`** | (value: SetStateAction<boolean>) => void | Sets `modal`. | +| **`place`** | (value: SetStateAction<Placement>) => void | Change the `placement` state. | +| **`unregisterItem`** | (id: string) => void | Unregisters a composite item. | +| **`registerGroup`** | (group: Group) => void | Registers a composite group. | +| **`unregisterGroup`** | (id: string) => void | Unregisters a composite group. | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. | +| **`next`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the next item. | +| **`previous`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the previous item. | +| **`up`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item above. | +| **`down`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item below. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`sort`** | () => void | Sorts the `composite.items` based on the items position in the DOM. Thisis especially useful after modifying the composite items order in the DOM.Most of the time, though, you don't need to manually call this function asthe re-ordering happens automatically. | +| **`unstable_setVirtual`** ⚠️ | (value: SetStateAction<boolean>) => void | Sets `virtual`. | +| **`setRTL`** | (value: SetStateAction<boolean>) => void | Sets `rtl`. | +| **`setOrientation`** | (value: SetStateAction<"horizontal" \| "vertical... | Sets `orientation`. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`setLoop`** | (value: SetStateAction<boolean \| "horizontal" \|... | Sets `loop`. | +| **`setWrap`** | (value: SetStateAction<boolean \| "horizontal" \|... | Sets `wrap`. | +| **`setShift`** | (value: SetStateAction<boolean>) => void | Sets `shift`. | +| **`reset`** | () => void | Resets to initial state. | +| **`registerItem`** | (item: Item) => void | Registers a select item. | +| **`setSelectedValue`** | (value: SetStateAction<string \| null>) => void | Sets `values`. |
### `SelectItem` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`id`** string | undefined Same as the HTML attribute. -- **`value`** string | undefined Item's value that will be used to -fill input value and filter `matches` based on the input value. You can omit -this for items that perform actions other than filling a form. For example, -items may open a dialog. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`id`** | string \| undefined | Same as the HTML attribute. | +| **`value`** | string \| undefined | Item's value that will be used to fill input value and filter `matches`based on the input value. You can omit this for items that performactions other than filling a form. For example, items may open a dialog. | +
18 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`registerItem`** (item: Item) => void Registers a composite - item. -- **`unregisterItem`** (id: string) => void Unregisters a - composite item. -- **`next`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the next item. -- **`previous`** (unstable_allTheWay?: boolean | undefined) => - void Moves focus to the previous item. -- **`up`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item above. -- **`down`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item below. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`visible`** boolean Whether it's visible or not. -- **`hide`** () => void Changes the `visible` state to `false` -- **`setSelectedValue`** (value: SetStateAction<string | null>) - => void Sets `values`. +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`registerItem`** | (item: Item) => void | Registers a composite item. | +| **`unregisterItem`** | (id: string) => void | Unregisters a composite item. | +| **`next`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the next item. | +| **`previous`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the previous item. | +| **`up`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item above. | +| **`down`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item below. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`hide`** | () => void | Changes the `visible` state to `false` | +| **`setSelectedValue`** | (value: SetStateAction<string \| null>) => void | Sets `values`. |
### `SelectList` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +
13 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`groups`** Group[] Lists all the composite groups with their - `id` and DOM `ref`. This state is automatically updated when `registerGroup` - and `unregisterGroup` are called. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`move`** (id: string | null) => void Moves focus to a given - item ID. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`menuRole`** "listbox" | "tree" | "grid" | - "dialog" Indicates the type of the suggestions popup. +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`menuRole`** | "listbox" \| "tree" \| "grid" \| "dialog" | Indicates the type of the suggestions popup. |
### `SelectOption` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`id`** string | undefined Same as the HTML attribute. -- **`value`** string | undefined Item's value that will be used to -fill input value and filter `matches` based on the input value. You can omit -this for items that perform actions other than filling a form. For example, -items may open a dialog. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`id`** | string \| undefined | Same as the HTML attribute. | +| **`value`** | string \| undefined | Item's value that will be used to fill input value and filter `matches`based on the input value. You can omit this for items that performactions other than filling a form. For example, items may open a dialog. | +
18 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`registerItem`** (item: Item) => void Registers a composite - item. -- **`unregisterItem`** (id: string) => void Unregisters a - composite item. -- **`next`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the next item. -- **`previous`** (unstable_allTheWay?: boolean | undefined) => - void Moves focus to the previous item. -- **`up`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item above. -- **`down`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item below. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`visible`** boolean Whether it's visible or not. -- **`hide`** () => void Changes the `visible` state to `false` -- **`setSelectedValue`** (value: SetStateAction<string | null>) - => void Sets `values`. +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`registerItem`** | (item: Item) => void | Registers a composite item. | +| **`unregisterItem`** | (id: string) => void | Unregisters a composite item. | +| **`next`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the next item. | +| **`previous`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the previous item. | +| **`up`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item above. | +| **`down`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item below. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`hide`** | () => void | Changes the `visible` state to `false` | +| **`setSelectedValue`** | (value: SetStateAction<string \| null>) => void | Sets `values`. |
### `SelectPopover` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`hideOnEsc`** boolean | undefined When enabled, user can hide - the dialog by pressing `Escape`. -- **`hideOnClickOutside`** boolean | undefined When enabled, user - can hide the dialog by clicking outside it. -- **`preventBodyScroll`** boolean | undefined When enabled, user - can't scroll on body when the dialog is visible. This option doesn't work if - the dialog isn't modal. -- **`unstable_initialFocusRef`** ⚠️ - RefObject<HTMLElement> | undefined The element that will - be focused when the dialog shows. When not set, the first tabbable element - within the dialog will be used. -- **`unstable_finalFocusRef`** ⚠️ - RefObject<HTMLElement> | undefined The element that will - be focused when the dialog hides. When not set, the disclosure component will - be used. -- **`unstable_orphan`** ⚠️ boolean | -undefined Whether or not the dialog should be a child of its parent. -Opening a nested orphan dialog will close its parent dialog if -`hideOnClickOutside` is set to `true` on the parent. It will be set to `false` -if `modal` is `false`. +| Name | Type | Description | +| :------------------------------------------------------------------ | :------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`hideOnEsc`** | boolean \| undefined | When enabled, user can hide the dialog by pressing `Escape`. | +| **`hideOnClickOutside`** | boolean \| undefined | When enabled, user can hide the dialog by clicking outside it. | +| **`preventBodyScroll`** | boolean \| undefined | When enabled, user can't scroll on body when the dialog is visible.This option doesn't work if the dialog isn't modal. | +| **`unstable_initialFocusRef`** ⚠️ | RefObject<HTMLElement> \| undefined | The element that will be focused when the dialog shows.When not set, the first tabbable element within the dialog will be used. | +| **`unstable_finalFocusRef`** ⚠️ | RefObject<HTMLElement> \| undefined | The element that will be focused when the dialog hides.When not set, the disclosure component will be used. | +| **`unstable_orphan`** ⚠️ | boolean \| undefined | Whether or not the dialog should be a child of its parent.Opening a nested orphan dialog will close its parent dialog if`hideOnClickOutside` is set to `true` on the parent.It will be set to `false` if `modal` is `false`. | +
22 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`groups`** Group[] Lists all the composite groups with their - `id` and DOM `ref`. This state is automatically updated when `registerGroup` - and `unregisterGroup` are called. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`move`** (id: string | null) => void Moves focus to a given - item ID. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`menuRole`** "listbox" | "tree" | "grid" | - "dialog" Indicates the type of the suggestions popup. -- **`visible`** boolean Whether it's visible or not. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`animating`** boolean Whether it's animating or not. -- **`stopAnimation`** () => void Stops animation. It's called - automatically if there's a CSS transition. -- **`modal`** boolean Toggles Dialog's `modal` state. - - Non-modal: `preventBodyScroll` doesn't work and focus is free. - - Modal: `preventBodyScroll` is automatically enabled, focus is trapped within - the dialog and the dialog is rendered within a `Portal` by default. -- **`hide`** () => void Changes the `visible` state to `false` -- **`values`** string[] Options/values provided. -- **`valuesById`** { id: string; value: string; }[] Initial value - to be selected -- **`currentValue`** string | undefined Initial value to be - selected +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`menuRole`** | "listbox" \| "tree" \| "grid" \| "dialog" | Indicates the type of the suggestions popup. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`animating`** | boolean | Whether it's animating or not. | +| **`stopAnimation`** | () => void | Stops animation. It's called automatically if there's a CSS transition. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`hide`** | () => void | Changes the `visible` state to `false` | +| **`values`** | string[] | Options/values provided. | +| **`valuesById`** | { id: string; value: string; }[] | Initial value to be selected | +| **`currentValue`** | string \| undefined | Initial value to be selected |
diff --git a/docs/slider.md b/docs/slider.md index 320d7fc1b..f26a5a0cf 100644 --- a/docs/slider.md +++ b/docs/slider.md @@ -117,97 +117,73 @@ export default App; ### `useSliderState` -- **`values`** number[] The `value` of the slider indicator. - - If `undefined`/`not valid` the slider bar will be the optimum of min & max - -- **`min`** number The minimum value of the slider -- **`max`** number The maximum value of the slider -- **`step`** number The step in which increments/decrements have to - be made -- **`isDisabled`** boolean If `true`, the slider will be disabled -- **`orientation`** "horizontal" | "vertical" - Orientation of the slider -- **`reversed`** boolean Direction of the slider -- **`defaultValues`** number[] | undefined The `defaultValue` of - the slider indicator. -- **`onChange`** ((value: number[]) => void) | undefined - Handler that is called when the value changes. -- **`onChangeEnd`** ((value: number[]) => void) | undefined Get - the value when dragging is started -- **`onChangeStart`** ((value: number[]) => void) | undefined - Get the value when dragging is stopped -- **`formatOptions`** NumberFormatOptions | undefined Get the - formated value based on number format options +| Name | Type | Description | +| :------------------ | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | +| **`values`** | number[] | The `value` of the slider indicator.If `undefined`/`not valid` the slider bar will be the optimum of min & max | +| **`min`** | number | The minimum value of the slider | +| **`max`** | number | The maximum value of the slider | +| **`step`** | number | The step in which increments/decrements have to be made | +| **`isDisabled`** | boolean | If `true`, the slider will be disabled | +| **`orientation`** | "horizontal" \| "vertical" | Orientation of the slider | +| **`reversed`** | boolean | Direction of the slider | +| **`defaultValues`** | number[] \| undefined | The `defaultValue` of the slider indicator. | +| **`onChange`** | ((value: number[]) => void) \| undefined | Handler that is called when the value changes. | +| **`onChangeEnd`** | ((value: number[]) => void) \| undefined | Get the value when dragging is started | +| **`onChangeStart`** | ((value: number[]) => void) \| undefined | Get the value when dragging is stopped | +| **`formatOptions`** | NumberFormatOptions \| undefined | Get the formated value based on number format options | ### `SliderInput` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`id`** string | undefined Same as the HTML attribute. -- **`index`** number +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`id`** | string \| undefined | Same as the HTML attribute. | +| **`index`** | number | |
10 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`step`** number The step in which increments/decrements have to - be made -- **`isDisabled`** boolean If `true`, the slider will be disabled -- **`orientation`** "horizontal" | "vertical" - Orientation of the slider -- **`getThumbMinValue`** (index: number) => number Returns the - min values for the index -- **`getThumbMaxValue`** (index: number) => number Returns the - max values for the index -- **`getThumbValueLabel`** (index: number) => string Returns - the formatted thumb value based on it's index -- **`registerInput`** (item: Item) => void Register the inputs - on mount -- **`unregisterInput`** (id: string) => void Unregister the - inputs on mount -- **`setFocusedThumb`** (index: number | undefined) => void Set - currently Focused Thumb -- **`setThumbValue`** (index: number, value: number) => void - Sets value for thumb. The actually value set will be clamped and rounded - according to min/max/step +| Name | Type | Description | +| :----------------------- | :------------------------------------------------------ | :------------------------------------------------------------------------------------------------ | +| **`step`** | number | The step in which increments/decrements have to be made | +| **`isDisabled`** | boolean | If `true`, the slider will be disabled | +| **`orientation`** | "horizontal" \| "vertical" | Orientation of the slider | +| **`getThumbMinValue`** | (index: number) => number | Returns the min values for the index | +| **`getThumbMaxValue`** | (index: number) => number | Returns the max values for the index | +| **`getThumbValueLabel`** | (index: number) => string | Returns the formatted thumb value based on it's index | +| **`registerInput`** | (item: Item) => void | Register the inputs on mount | +| **`unregisterInput`** | (id: string) => void | Unregister the inputs on mount | +| **`setFocusedThumb`** | (index: number \| undefined) => void | Set currently Focused Thumb | +| **`setThumbValue`** | (index: number, value: number) => void | Sets value for thumb. The actually value set will be clamped androunded according to min/max/step |
### `SliderThumb` -- **`index`** number +| Name | Type | Description | +| :---------- | :------------------ | :---------- | +| **`index`** | number | |
13 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`step`** number The step in which increments/decrements have to - be made -- **`isDisabled`** boolean If `true`, the slider will be disabled -- **`orientation`** "horizontal" | "vertical" - Orientation of the slider -- **`reversed`** boolean Direction of the slider -- **`trackRef`** RefObject<HTMLElement | null> The track - slider element. -- **`focusedThumb`** number | undefined Currently focused thumb -- **`getThumbValue`** (index: number) => number Get Thumb value - based on its index -- **`getThumbPercent`** (index: number) => number Returns the - value offset as a percentage from 0 to 1. -- **`inputs`** Item[] Get all the inputs in the DOM -- **`setThumbValue`** (index: number, value: number) => void - Sets value for thumb. The actually value set will be clamped and rounded - according to min/max/step -- **`setThumbEditable`** (index: number, editable: boolean) => - void Set true if the thumb registered is editable -- **`setThumbDragging`** (index: number, dragging: boolean) => - void set dragging true if the thumb registered is being currently - dragged -- **`setThumbPercent`** (index: number, percent: number) => - void Sets value for thumb by percent offset (between 0 and 1) +| Name | Type | Description | +| :--------------------- | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | +| **`step`** | number | The step in which increments/decrements have to be made | +| **`isDisabled`** | boolean | If `true`, the slider will be disabled | +| **`orientation`** | "horizontal" \| "vertical" | Orientation of the slider | +| **`reversed`** | boolean | Direction of the slider | +| **`trackRef`** | RefObject<HTMLElement \| null> | The track slider element. | +| **`focusedThumb`** | number \| undefined | Currently focused thumb | +| **`getThumbValue`** | (index: number) => number | Get Thumb value based on its index | +| **`getThumbPercent`** | (index: number) => number | Returns the value offset as a percentage from 0 to 1. | +| **`inputs`** | Item[] | Get all the inputs in the DOM | +| **`setThumbValue`** | (index: number, value: number) => void | Sets value for thumb. The actually value set will be clamped androunded according to min/max/step | +| **`setThumbEditable`** | (index: number, editable: boolean) => void | Set true if the thumb registered is editable | +| **`setThumbDragging`** | (index: number, dragging: boolean) => void | set dragging true if the thumb registered is being currently dragged | +| **`setThumbPercent`** | (index: number, percent: number) => void | Sets value for thumb by percent offset (between 0 and 1) |
@@ -216,33 +192,20 @@ export default App;
13 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`values`** number[] The `value` of the slider indicator. - - If `undefined`/`not valid` the slider bar will be the optimum of min & max - -- **`isDisabled`** boolean If `true`, the slider will be disabled -- **`orientation`** "horizontal" | "vertical" - Orientation of the slider -- **`reversed`** boolean Direction of the slider -- **`trackRef`** RefObject<HTMLElement | null> The track - slider element. -- **`getThumbPercent`** (index: number) => number Returns the - value offset as a percentage from 0 to 1. -- **`getPercentValue`** (percent: number) => number Converts a - percent along track (between 0 and 1) to the corresponding value -- **`isThumbEditable`** (index: number) => boolean Get - editableThumb based on the index -- **`isThumbDragging`** (index: number) => boolean Whether a - specific index is being dragged -- **`setFocusedThumb`** (index: number | undefined) => void Set - currently Focused Thumb -- **`setThumbValue`** (index: number, value: number) => void - Sets value for thumb. The actually value set will be clamped and rounded - according to min/max/step -- **`setThumbDragging`** (index: number, dragging: boolean) => - void set dragging true if the thumb registered is being currently - dragged -- **`setThumbPercent`** (index: number, percent: number) => - void Sets value for thumb by percent offset (between 0 and 1) +| Name | Type | Description | +| :--------------------- | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | +| **`values`** | number[] | The `value` of the slider indicator.If `undefined`/`not valid` the slider bar will be the optimum of min & max | +| **`isDisabled`** | boolean | If `true`, the slider will be disabled | +| **`orientation`** | "horizontal" \| "vertical" | Orientation of the slider | +| **`reversed`** | boolean | Direction of the slider | +| **`trackRef`** | RefObject<HTMLElement \| null> | The track slider element. | +| **`getThumbPercent`** | (index: number) => number | Returns the value offset as a percentage from 0 to 1. | +| **`getPercentValue`** | (percent: number) => number | Converts a percent along track (between 0 and 1) to the corresponding value | +| **`isThumbEditable`** | (index: number) => boolean | Get editableThumb based on the index | +| **`isThumbDragging`** | (index: number) => boolean | Whether a specific index is being dragged | +| **`setFocusedThumb`** | (index: number \| undefined) => void | Set currently Focused Thumb | +| **`setThumbValue`** | (index: number, value: number) => void | Sets value for thumb. The actually value set will be clamped androunded according to min/max/step | +| **`setThumbDragging`** | (index: number, dragging: boolean) => void | set dragging true if the thumb registered is being currently dragged | +| **`setThumbPercent`** | (index: number, percent: number) => void | Sets value for thumb by percent offset (between 0 and 1) |
diff --git a/docs/timepicker.md b/docs/timepicker.md index ac8a803cf..25b44f4bd 100644 --- a/docs/timepicker.md +++ b/docs/timepicker.md @@ -10,6 +10,7 @@ for the keyboard navigation & accessibility features. - [Usage](#usage) - [Composition](#composition) - [Props](#props) + - [`useTimePickerState`](#usetimepickerstate) - [`TimePicker`](#timepicker) - [`TimePickerColumn`](#timepickercolumn) - [`TimePickerColumnValue`](#timepickercolumnvalue) @@ -127,502 +128,250 @@ export default App; ## Props +### `useTimePickerState` + +| Name | Type | Description | +| :------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`placement`** | "auto-start" \| "auto" \| "auto-end" \| "top-start... | Actual `placement`. | +| **`unstable_fixed`** ⚠️ | boolean \| undefined | Whether or not the popover should have `position` set to `fixed`. | +| **`unstable_flip`** ⚠️ | boolean \| undefined | Flip the popover's placement when it starts to overlap its referenceelement. | +| **`unstable_offset`** ⚠️ | [string \| number, string \| number] \| undefined | Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`. | +| **`gutter`** | number \| undefined | Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`. | +| **`unstable_preventOverflow`** ⚠️ | boolean \| undefined | Prevents popover from being positioned outside the boundary. | +| **`isDisabled`** | boolean \| undefined | Whether the input is disabled. | +| **`isReadOnly`** | boolean \| undefined | Whether the input can be selected but not changed by the user. | +| **`pickerId`** | string \| undefined | Picker wrapper Id | +| **`dialogId`** | string \| undefined | Dialog Id | +| **`segmentFocus`** | (() => void) \| undefined | Function to be called on picker mousedownfor focusing first tabbable element | +| **`value`** | T \| undefined | The current value (controlled). | +| **`defaultValue`** | T \| undefined | The default value (uncontrolled). | +| **`onChange`** | ((value: T) => void) \| undefined | Handler that is called when the value changes. | +| **`formatOptions`** | DateTimeFormatOpts \| undefined | Sets formmating of date based on Intl.DateFormatOptionshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat | +| **`placeholderDate`** | Date \| undefined | Placeholder date | +| **`autoFocus`** | boolean \| undefined | Whether the element should receive focus on render. | + ### `TimePicker`
7 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`visible`** boolean Whether it's visible or not. -- **`pickerId`** string | undefined - -- **`dialogId`** string | undefined - -- **`isDisabled`** boolean | undefined - -- **`isReadOnly`** boolean | undefined - -- **`segmentFocus`** (() => void) | undefined - -- **`show`** () => void Changes the `visible` state to `true` +| Name | Type | Description | +| :----------------- | :----------------------------------------- | :------------------------------------ | +| **`visible`** | boolean | Whether it's visible or not. | +| **`pickerId`** | string \| undefined | | +| **`dialogId`** | string \| undefined | | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | | +| **`segmentFocus`** | (() => void) \| undefined | | +| **`show`** | () => void | Changes the `visible` state to `true` |
### `TimePickerColumn` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +
13 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`groups`** Group[] Lists all the composite groups with their - `id` and DOM `ref`. This state is automatically updated when `registerGroup` - and `unregisterGroup` are called. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`move`** (id: string | null) => void Moves focus to a given - item ID. -- **`columnType`** "hour" | "minute" | - "meridian" +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. | +| **`columnType`** | "hour" \| "minute" \| "meridian" | |
### `TimePickerColumnValue` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`id`** string | undefined Same as the HTML attribute. -- **`value`** number +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`id`** | string \| undefined | Same as the HTML attribute. | +| **`value`** | number | |
19 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`registerItem`** (item: Item) => void Registers a composite - item. -- **`unregisterItem`** (id: string) => void Unregisters a - composite item. -- **`next`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the next item. -- **`previous`** (unstable_allTheWay?: boolean | undefined) => - void Moves focus to the previous item. -- **`up`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item above. -- **`down`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item below. -- **`visible`** boolean | undefined - -- **`move`** (id: string | null) => void Moves focus to a given - item ID. -- **`selected`** number - -- **`setSelected`** (value: number) => void +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`registerItem`** | (item: Item) => void | Registers a composite item. | +| **`unregisterItem`** | (id: string) => void | Unregisters a composite item. | +| **`next`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the next item. | +| **`previous`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the previous item. | +| **`up`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item above. | +| **`down`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item below. | +| **`visible`** | boolean \| undefined | | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. | +| **`selected`** | number | | +| **`setSelected`** | (value: number) => void | |
### `TimePickerContent` -- **`hideOnEsc`** boolean | undefined When enabled, user can hide - the dialog by pressing `Escape`. -- **`hideOnClickOutside`** boolean | undefined When enabled, user - can hide the dialog by clicking outside it. -- **`preventBodyScroll`** boolean | undefined When enabled, user - can't scroll on body when the dialog is visible. This option doesn't work if - the dialog isn't modal. -- **`unstable_initialFocusRef`** ⚠️ - RefObject<HTMLElement> | undefined The element that will - be focused when the dialog shows. When not set, the first tabbable element - within the dialog will be used. -- **`unstable_finalFocusRef`** ⚠️ - RefObject<HTMLElement> | undefined The element that will - be focused when the dialog hides. When not set, the disclosure component will - be used. -- **`unstable_orphan`** ⚠️ boolean | -undefined Whether or not the dialog should be a child of its parent. -Opening a nested orphan dialog will close its parent dialog if -`hideOnClickOutside` is set to `true` on the parent. It will be set to `false` -if `modal` is `false`. +| Name | Type | Description | +| :------------------------------------------------------------------ | :------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`hideOnEsc`** | boolean \| undefined | When enabled, user can hide the dialog by pressing `Escape`. | +| **`hideOnClickOutside`** | boolean \| undefined | When enabled, user can hide the dialog by clicking outside it. | +| **`preventBodyScroll`** | boolean \| undefined | When enabled, user can't scroll on body when the dialog is visible.This option doesn't work if the dialog isn't modal. | +| **`unstable_initialFocusRef`** ⚠️ | RefObject<HTMLElement> \| undefined | The element that will be focused when the dialog shows.When not set, the first tabbable element within the dialog will be used. | +| **`unstable_finalFocusRef`** ⚠️ | RefObject<HTMLElement> \| undefined | The element that will be focused when the dialog hides.When not set, the disclosure component will be used. | +| **`unstable_orphan`** ⚠️ | boolean \| undefined | Whether or not the dialog should be a child of its parent.Opening a nested orphan dialog will close its parent dialog if`hideOnClickOutside` is set to `true` on the parent.It will be set to `false` if `modal` is `false`. | +
8 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`visible`** boolean Whether it's visible or not. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`animating`** boolean Whether it's animating or not. -- **`stopAnimation`** () => void Stops animation. It's called - automatically if there's a CSS transition. -- **`modal`** boolean Toggles Dialog's `modal` state. - - Non-modal: `preventBodyScroll` doesn't work and focus is free. - - Modal: `preventBodyScroll` is automatically enabled, focus is trapped within - the dialog and the dialog is rendered within a `Portal` by default. -- **`hide`** () => void Changes the `visible` state to `false` -- **`dialogId`** string | undefined +| Name | Type | Description | +| :------------------ | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`visible`** | boolean | Whether it's visible or not. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`animating`** | boolean | Whether it's animating or not. | +| **`stopAnimation`** | () => void | Stops animation. It's called automatically if there's a CSS transition. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`hide`** | () => void | Changes the `visible` state to `false` | +| **`dialogId`** | string \| undefined | |
### `TimePickerSegment` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is - `disabled`, it may still be `focusable`. It works similarly to `readOnly` on - form elements. In this case, only `aria-disabled` will be set. -- **`id`** string | undefined Same as the HTML attribute. -- **`segment`** DateSegment - -- **`isRequired`** boolean | undefined +| Name | Type | Description | +| :--------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +| **`id`** | string \| undefined | Same as the HTML attribute. | +| **`segment`** | DateSegment | | +| **`isRequired`** | boolean \| undefined | |
68 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`registerItem`** (item: Item) => void Registers a composite - item. -- **`unregisterItem`** (id: string) => void Unregisters a - composite item. -- **`next`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the next item. -- **`previous`** (unstable_allTheWay?: boolean | undefined) => - void Moves focus to the previous item. -- **`up`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item above. -- **`down`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item below. -- **`fieldValue`** Date - -- **`setSegment`** (part: DateTimeFormatPartTypes, v: number) => - void - -- **`increment`** (part: DateTimeFormatPartTypes) => void - -- **`decrement`** (part: DateTimeFormatPartTypes) => void - -- **`incrementPage`** (part: DateTimeFormatPartTypes) => void - -- **`decrementPage`** (part: DateTimeFormatPartTypes) => void - -- **`dateFormatter`** DateTimeFormat - -- **`confirmPlaceholder`** (part: DateTimeFormatPartTypes) => - void - -- **`isDisabled`** boolean | undefined - -- **`isReadOnly`** boolean | undefined - -- **`setFieldValue`** (value: Date) => void - -- **`segments`** DateSegment[] - -- **`setBaseId`** (value: SetStateAction<string>) => - void Sets `baseId`. -- **`rtl`** boolean Determines how `next` and `previous` functions - will behave. If `rtl` is set to `true`, they will be inverted. This only - affects the composite widget behavior. You still need to set `dir="rtl"` on - HTML/CSS. -- **`groups`** Group[] Lists all the composite groups with their - `id` and DOM `ref`. This state is automatically updated when `registerGroup` - and `unregisterGroup` are called. -- **`loop`** boolean | "horizontal" | "vertical" On - one-dimensional composites: - - - `true` loops from the last item to the first item and vice-versa. - - `horizontal` loops only if `orientation` is `horizontal` or not set. - - `vertical` loops only if `orientation` is `vertical` or not set. - - If `currentId` is initially set to `null`, the composite element will be - focused in between the last and first items. - - On two-dimensional composites: - - - `true` loops from the last row/column item to the first item in the same - row/column and vice-versa. If it's the last item in the last row, it moves - to the first item in the first row and vice-versa. - - `horizontal` loops only from the last row item to the first item in the same - row. - - `vertical` loops only from the last column item to the first item in the - column row. - - If `currentId` is initially set to `null`, vertical loop will have no effect - as moving down from the last row or up from the first row will focus the - composite element. - - If `wrap` matches the value of `loop`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. - -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`shift`** boolean **Has effect only on two-dimensional - composites**. If enabled, moving up or down when there's no next item or the - next item is disabled will shift to the item right before it. -- **`registerGroup`** (group: Group) => void Registers a - composite group. -- **`unregisterGroup`** (id: string) => void Unregisters a - composite group. -- **`move`** (id: string | null) => void Moves focus to a given - item ID. -- **`sort`** () => void Sorts the `composite.items` based on - the items position in the DOM. This is especially useful after modifying the - composite items order in the DOM. Most of the time, though, you don't need to - manually call this function as the re-ordering happens automatically. -- **`unstable_setVirtual`** ⚠️ (value: - SetStateAction<boolean>) => void Sets `virtual`. -- **`setRTL`** (value: SetStateAction<boolean>) => void - Sets `rtl`. -- **`setOrientation`** - (value: - SetStateAction<"horizontal" | "vertical... Sets - `orientation`. -- **`setLoop`** - (value: - SetStateAction<boolean | "horizontal" |... Sets `loop`. -- **`setWrap`** - (value: - SetStateAction<boolean | "horizontal" |... Sets `wrap`. -- **`setShift`** (value: SetStateAction<boolean>) => - void Sets `shift`. -- **`reset`** () => void Resets to initial state. -- **`visible`** boolean Whether it's visible or not. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`animating`** boolean Whether it's animating or not. -- **`show`** () => void Changes the `visible` state to `true` -- **`hide`** () => void Changes the `visible` state to `false` -- **`toggle`** () => void Toggles the `visible` state -- **`setVisible`** (value: SetStateAction<boolean>) => - void Sets `visible`. -- **`setAnimated`** (value: SetStateAction<number | boolean>) - => void Sets `animated`. -- **`stopAnimation`** () => void Stops animation. It's called - automatically if there's a CSS transition. -- **`modal`** boolean Toggles Dialog's `modal` state. - - Non-modal: `preventBodyScroll` doesn't work and focus is free. - - Modal: `preventBodyScroll` is automatically enabled, focus is trapped within - the dialog and the dialog is rendered within a `Portal` by default. -- **`setModal`** (value: SetStateAction<boolean>) => - void Sets `modal`. -- **`unstable_referenceRef`** ⚠️ - RefObject<HTMLElement | null> The reference element. -- **`placement`** - "auto-start" - | "auto" | "auto-end" | "top-start... Actual - `placement`. -- **`place`** (value: SetStateAction<Placement>) => - void Change the `placement` state. -- **`pickerId`** string | undefined - -- **`dialogId`** string | undefined - -- **`segmentFocus`** (() => void) | undefined - -- **`time`** Date - -- **`hours`** number[] - -- **`minutes`** number[] - -- **`meridies`** string[] - -- **`hourState`** - { - baseId: string; unstable_idCountRef: MutableR... - -- **`minuteState`** - { - baseId: string; unstable_idCountRef: MutableR... - -- **`meridiesState`** - { - baseId: string; unstable_idCountRef: MutableR... +| Name | Type | Description | +| :--------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`registerItem`** | (item: Item) => void | Registers a composite item. | +| **`unregisterItem`** | (id: string) => void | Unregisters a composite item. | +| **`next`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the next item. | +| **`previous`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the previous item. | +| **`up`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item above. | +| **`down`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item below. | +| **`fieldValue`** | Date | | +| **`setSegment`** | (part: DateTimeFormatPartTypes, v: number) => void | | +| **`increment`** | (part: DateTimeFormatPartTypes) => void | | +| **`decrement`** | (part: DateTimeFormatPartTypes) => void | | +| **`incrementPage`** | (part: DateTimeFormatPartTypes) => void | | +| **`decrementPage`** | (part: DateTimeFormatPartTypes) => void | | +| **`dateFormatter`** | DateTimeFormat | | +| **`confirmPlaceholder`** | (part: DateTimeFormatPartTypes) => void | | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | | +| **`setFieldValue`** | (value: Date) => void | | +| **`segments`** | DateSegment[] | | +| **`setBaseId`** | (value: SetStateAction<string>) => void | Sets `baseId`. | +| **`rtl`** | boolean | Determines how `next` and `previous` functions will behave. If `rtl` isset to `true`, they will be inverted. This only affects the compositewidget behavior. You still need to set `dir="rtl"` on HTML/CSS. | +| **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`loop`** | boolean \| "horizontal" \| "vertical" | On one-dimensional composites: - `true` loops from the last item to the first item and vice-versa. - `horizontal` loops only if `orientation` is `horizontal` or not set. - `vertical` loops only if `orientation` is `vertical` or not set. - If `currentId` is initially set to `null`, the composite element willbe focused in between the last and first items.On two-dimensional composites: - `true` loops from the last row/column item to the first item in thesame row/column and vice-versa. If it's the last item in the last row, itmoves to the first item in the first row and vice-versa. - `horizontal` loops only from the last row item to the first item inthe same row. - `vertical` loops only from the last column item to the first item inthe column row. - If `currentId` is initially set to `null`, vertical loop will have noeffect as moving down from the last row or up from the first row willfocus the composite element. - If `wrap` matches the value of `loop`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`shift`** | boolean | **Has effect only on two-dimensional composites**. If enabled, moving upor down when there's no next item or the next item is disabled will shiftto the item right before it. | +| **`registerGroup`** | (group: Group) => void | Registers a composite group. | +| **`unregisterGroup`** | (id: string) => void | Unregisters a composite group. | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. | +| **`sort`** | () => void | Sorts the `composite.items` based on the items position in the DOM. Thisis especially useful after modifying the composite items order in the DOM.Most of the time, though, you don't need to manually call this function asthe re-ordering happens automatically. | +| **`unstable_setVirtual`** ⚠️ | (value: SetStateAction<boolean>) => void | Sets `virtual`. | +| **`setRTL`** | (value: SetStateAction<boolean>) => void | Sets `rtl`. | +| **`setOrientation`** | (value: SetStateAction<"horizontal" \| "vertical... | Sets `orientation`. | +| **`setLoop`** | (value: SetStateAction<boolean \| "horizontal" \|... | Sets `loop`. | +| **`setWrap`** | (value: SetStateAction<boolean \| "horizontal" \|... | Sets `wrap`. | +| **`setShift`** | (value: SetStateAction<boolean>) => void | Sets `shift`. | +| **`reset`** | () => void | Resets to initial state. | +| **`visible`** | boolean | Whether it's visible or not. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`animating`** | boolean | Whether it's animating or not. | +| **`show`** | () => void | Changes the `visible` state to `true` | +| **`hide`** | () => void | Changes the `visible` state to `false` | +| **`toggle`** | () => void | Toggles the `visible` state | +| **`setVisible`** | (value: SetStateAction<boolean>) => void | Sets `visible`. | +| **`setAnimated`** | (value: SetStateAction<number \| boolean>) => void | Sets `animated`. | +| **`stopAnimation`** | () => void | Stops animation. It's called automatically if there's a CSS transition. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`setModal`** | (value: SetStateAction<boolean>) => void | Sets `modal`. | +| **`unstable_referenceRef`** ⚠️ | RefObject<HTMLElement \| null> | The reference element. | +| **`placement`** | "auto-start" \| "auto" \| "auto-end" \| "top-start... | Actual `placement`. | +| **`place`** | (value: SetStateAction<Placement>) => void | Change the `placement` state. | +| **`pickerId`** | string \| undefined | | +| **`dialogId`** | string \| undefined | | +| **`segmentFocus`** | (() => void) \| undefined | | +| **`time`** | Date | | +| **`hours`** | number[] | | +| **`minutes`** | number[] | | +| **`meridies`** | string[] | | +| **`hourState`** | { baseId: string; unstable_idCountRef: MutableR... | | +| **`minuteState`** | { baseId: string; unstable_idCountRef: MutableR... | | +| **`meridiesState`** | { baseId: string; unstable_idCountRef: MutableR... | |
### `TimePickerSegmentField` -- **`disabled`** boolean | undefined Same as the HTML attribute. -- **`focusable`** boolean | undefined When an element is -`disabled`, it may still be `focusable`. It works similarly to `readOnly` on -form elements. In this case, only `aria-disabled` will be set. +| Name | Type | Description | +| :-------------- | :-------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`disabled`** | boolean \| undefined | Same as the HTML attribute. | +| **`focusable`** | boolean \| undefined | When an element is `disabled`, it may still be `focusable`. It workssimilarly to `readOnly` on form elements. In this case, only`aria-disabled` will be set. | +
12 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`groups`** Group[] Lists all the composite groups with their - `id` and DOM `ref`. This state is automatically updated when `registerGroup` - and `unregisterGroup` are called. -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`move`** (id: string | null) => void Moves focus to a given - item ID. +| Name | Type | Description | +| :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. |
@@ -631,212 +380,75 @@ form elements. In this case, only `aria-disabled` will be set.
68 state props > These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. -- **`visible`** boolean Whether it's visible or not. -- **`pickerId`** string | undefined - -- **`dialogId`** string | undefined - -- **`isDisabled`** boolean | undefined - -- **`isReadOnly`** boolean | undefined - -- **`segmentFocus`** (() => void) | undefined - -- **`show`** () => void Changes the `visible` state to `true` -- **`fieldValue`** Date - -- **`setFieldValue`** (value: Date) => void - -- **`segments`** DateSegment[] - -- **`dateFormatter`** DateTimeFormat - -- **`increment`** (part: DateTimeFormatPartTypes) => void - -- **`decrement`** (part: DateTimeFormatPartTypes) => void - -- **`incrementPage`** (part: DateTimeFormatPartTypes) => void - -- **`decrementPage`** (part: DateTimeFormatPartTypes) => void - -- **`setSegment`** (part: DateTimeFormatPartTypes, v: number) => - void - -- **`confirmPlaceholder`** (part: DateTimeFormatPartTypes) => - void - -- **`baseId`** string ID that will serve as a base for all the - items IDs. -- **`setBaseId`** (value: SetStateAction<string>) => - void Sets `baseId`. -- **`unstable_virtual`** ⚠️ - boolean If enabled, the composite element will act as an - [aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) - container instead of - [roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex). - DOM focus will remain on the composite while its items receive virtual focus. -- **`rtl`** boolean Determines how `next` and `previous` functions - will behave. If `rtl` is set to `true`, they will be inverted. This only - affects the composite widget behavior. You still need to set `dir="rtl"` on - HTML/CSS. -- **`orientation`** "horizontal" | "vertical" | - undefined Defines the orientation of the composite widget. If the - composite has a single row or column (one-dimensional), the `orientation` - value determines which arrow keys can be used to move focus: - - - `undefined`: all arrow keys work. - - `horizontal`: only left and right arrow keys work. - - `vertical`: only up and down arrow keys work. - - It doesn't have any effect on two-dimensional composites. - -- **`items`** Item[] Lists all the composite items with their `id`, - DOM `ref`, `disabled` state and `groupId` if any. This state is automatically - updated when `registerItem` and `unregisterItem` are called. -- **`groups`** Group[] Lists all the composite groups with their - `id` and DOM `ref`. This state is automatically updated when `registerGroup` - and `unregisterGroup` are called. -- **`currentId`** string | null | undefined The current focused - item `id`. - - `undefined` will automatically focus the first enabled composite item. - - `null` will focus the base composite element and users will be able to - navigate out of it using arrow keys. - - If `currentId` is initially set to `null`, the base composite element itself - will have focus and users will be able to navigate to it using arrow keys. -- **`loop`** boolean | "horizontal" | "vertical" On - one-dimensional composites: - - - `true` loops from the last item to the first item and vice-versa. - - `horizontal` loops only if `orientation` is `horizontal` or not set. - - `vertical` loops only if `orientation` is `vertical` or not set. - - If `currentId` is initially set to `null`, the composite element will be - focused in between the last and first items. - - On two-dimensional composites: - - - `true` loops from the last row/column item to the first item in the same - row/column and vice-versa. If it's the last item in the last row, it moves - to the first item in the first row and vice-versa. - - `horizontal` loops only from the last row item to the first item in the same - row. - - `vertical` loops only from the last column item to the first item in the - column row. - - If `currentId` is initially set to `null`, vertical loop will have no effect - as moving down from the last row or up from the first row will focus the - composite element. - - If `wrap` matches the value of `loop`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. - -- **`wrap`** boolean | "horizontal" | "vertical" - **Has effect only on two-dimensional composites**. If enabled, moving to the - next item from the last one in a row or column will focus the first item in - the next row or column and vice-versa. - - `true` wraps between rows and columns. - - `horizontal` wraps only between rows. - - `vertical` wraps only between columns. - - If `loop` matches the value of `wrap`, it'll wrap between the last item in - the last row or column and the first item in the first row or column and - vice-versa. -- **`shift`** boolean **Has effect only on two-dimensional - composites**. If enabled, moving up or down when there's no next item or the - next item is disabled will shift to the item right before it. -- **`unstable_moves`** ⚠️ number - Stores the number of moves that have been performed by calling `move`, `next`, - `previous`, `up`, `down`, `first` or `last`. -- **`registerItem`** (item: Item) => void Registers a composite - item. -- **`unregisterItem`** (id: string) => void Unregisters a - composite item. -- **`registerGroup`** (group: Group) => void Registers a - composite group. -- **`unregisterGroup`** (id: string) => void Unregisters a - composite group. -- **`move`** (id: string | null) => void Moves focus to a given - item ID. -- **`next`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the next item. -- **`previous`** (unstable_allTheWay?: boolean | undefined) => - void Moves focus to the previous item. -- **`up`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item above. -- **`down`** (unstable_allTheWay?: boolean | undefined) => void - Moves focus to the item below. -- **`first`** () => void Moves focus to the first item. -- **`last`** () => void Moves focus to the last item. -- **`sort`** () => void Sorts the `composite.items` based on - the items position in the DOM. This is especially useful after modifying the - composite items order in the DOM. Most of the time, though, you don't need to - manually call this function as the re-ordering happens automatically. -- **`unstable_setVirtual`** ⚠️ (value: - SetStateAction<boolean>) => void Sets `virtual`. -- **`setRTL`** (value: SetStateAction<boolean>) => void - Sets `rtl`. -- **`setOrientation`** - (value: - SetStateAction<"horizontal" | "vertical... Sets - `orientation`. -- **`setCurrentId`** - (value: - SetStateAction<string | null | undefine... Sets `currentId`. This - is different from `composite.move` as this only updates the `currentId` state - without moving focus. When the composite widget gets focused by the user, the - item referred by the `currentId` state will get focus. -- **`setLoop`** - (value: - SetStateAction<boolean | "horizontal" |... Sets `loop`. -- **`setWrap`** - (value: - SetStateAction<boolean | "horizontal" |... Sets `wrap`. -- **`setShift`** (value: SetStateAction<boolean>) => - void Sets `shift`. -- **`reset`** () => void Resets to initial state. -- **`animated`** number | boolean If `true`, `animating` will be - set to `true` when `visible` is updated. It'll wait for `stopAnimation` to be - called or a CSS transition ends. If `animated` is set to a `number`, - `stopAnimation` will be called only after the same number of milliseconds have - passed. -- **`animating`** boolean Whether it's animating or not. -- **`hide`** () => void Changes the `visible` state to `false` -- **`toggle`** () => void Toggles the `visible` state -- **`setVisible`** (value: SetStateAction<boolean>) => - void Sets `visible`. -- **`setAnimated`** (value: SetStateAction<number | boolean>) - => void Sets `animated`. -- **`stopAnimation`** () => void Stops animation. It's called - automatically if there's a CSS transition. -- **`modal`** boolean Toggles Dialog's `modal` state. - - Non-modal: `preventBodyScroll` doesn't work and focus is free. - - Modal: `preventBodyScroll` is automatically enabled, focus is trapped within - the dialog and the dialog is rendered within a `Portal` by default. -- **`setModal`** (value: SetStateAction<boolean>) => - void Sets `modal`. -- **`unstable_referenceRef`** ⚠️ - RefObject<HTMLElement | null> The reference element. -- **`placement`** - "auto-start" - | "auto" | "auto-end" | "top-start... Actual - `placement`. -- **`place`** (value: SetStateAction<Placement>) => - void Change the `placement` state. -- **`time`** Date - -- **`hours`** number[] - -- **`minutes`** number[] - -- **`meridies`** string[] - -- **`hourState`** - { - baseId: string; unstable_idCountRef: MutableR... - -- **`minuteState`** - { - baseId: string; unstable_idCountRef: MutableR... - -- **`meridiesState`** - { - baseId: string; unstable_idCountRef: MutableR... +| Name | Type | Description | +| :--------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`visible`** | boolean | Whether it's visible or not. | +| **`pickerId`** | string \| undefined | | +| **`dialogId`** | string \| undefined | | +| **`isDisabled`** | boolean \| undefined | | +| **`isReadOnly`** | boolean \| undefined | | +| **`segmentFocus`** | (() => void) \| undefined | | +| **`show`** | () => void | Changes the `visible` state to `true` | +| **`fieldValue`** | Date | | +| **`setFieldValue`** | (value: Date) => void | | +| **`segments`** | DateSegment[] | | +| **`dateFormatter`** | DateTimeFormat | | +| **`increment`** | (part: DateTimeFormatPartTypes) => void | | +| **`decrement`** | (part: DateTimeFormatPartTypes) => void | | +| **`incrementPage`** | (part: DateTimeFormatPartTypes) => void | | +| **`decrementPage`** | (part: DateTimeFormatPartTypes) => void | | +| **`setSegment`** | (part: DateTimeFormatPartTypes, v: number) => void | | +| **`confirmPlaceholder`** | (part: DateTimeFormatPartTypes) => void | | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`setBaseId`** | (value: SetStateAction<string>) => void | Sets `baseId`. | +| **`unstable_virtual`** ⚠️ | boolean | If enabled, the composite element will act as an[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)container instead of[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).DOM focus will remain on the composite while its items receive virtual focus. | +| **`rtl`** | boolean | Determines how `next` and `previous` functions will behave. If `rtl` isset to `true`, they will be inverted. This only affects the compositewidget behavior. You still need to set `dir="rtl"` on HTML/CSS. | +| **`orientation`** | "horizontal" \| "vertical" \| undefined | Defines the orientation of the composite widget. If the composite has asingle row or column (one-dimensional), the `orientation` value determineswhich arrow keys can be used to move focus: - `undefined`: all arrow keys work. - `horizontal`: only left and right arrow keys work. - `vertical`: only up and down arrow keys work.It doesn't have any effect on two-dimensional composites. | +| **`items`** | Item[] | Lists all the composite items with their `id`, DOM `ref`, `disabled` stateand `groupId` if any. This state is automatically updated when`registerItem` and `unregisterItem` are called. | +| **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`currentId`** | string \| null \| undefined | The current focused item `id`. - `undefined` will automatically focus the first enabled composite item. - `null` will focus the base composite element and users will be able tonavigate out of it using arrow keys. - If `currentId` is initially set to `null`, the base composite elementitself will have focus and users will be able to navigate to it usingarrow keys. | +| **`loop`** | boolean \| "horizontal" \| "vertical" | On one-dimensional composites: - `true` loops from the last item to the first item and vice-versa. - `horizontal` loops only if `orientation` is `horizontal` or not set. - `vertical` loops only if `orientation` is `vertical` or not set. - If `currentId` is initially set to `null`, the composite element willbe focused in between the last and first items.On two-dimensional composites: - `true` loops from the last row/column item to the first item in thesame row/column and vice-versa. If it's the last item in the last row, itmoves to the first item in the first row and vice-versa. - `horizontal` loops only from the last row item to the first item inthe same row. - `vertical` loops only from the last column item to the first item inthe column row. - If `currentId` is initially set to `null`, vertical loop will have noeffect as moving down from the last row or up from the first row willfocus the composite element. - If `wrap` matches the value of `loop`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`wrap`** | boolean \| "horizontal" \| "vertical" | **Has effect only on two-dimensional composites**. If enabled, moving tothe next item from the last one in a row or column will focus the firstitem in the next row or column and vice-versa. - `true` wraps between rows and columns. - `horizontal` wraps only between rows. - `vertical` wraps only between columns. - If `loop` matches the value of `wrap`, it'll wrap between the lastitem in the last row or column and the first item in the first row orcolumn and vice-versa. | +| **`shift`** | boolean | **Has effect only on two-dimensional composites**. If enabled, moving upor down when there's no next item or the next item is disabled will shiftto the item right before it. | +| **`unstable_moves`** ⚠️ | number | Stores the number of moves that have been performed by calling `move`,`next`, `previous`, `up`, `down`, `first` or `last`. | +| **`registerItem`** | (item: Item) => void | Registers a composite item. | +| **`unregisterItem`** | (id: string) => void | Unregisters a composite item. | +| **`registerGroup`** | (group: Group) => void | Registers a composite group. | +| **`unregisterGroup`** | (id: string) => void | Unregisters a composite group. | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. | +| **`next`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the next item. | +| **`previous`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the previous item. | +| **`up`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item above. | +| **`down`** | (unstable_allTheWay?: boolean \| undefined) => void | Moves focus to the item below. | +| **`first`** | () => void | Moves focus to the first item. | +| **`last`** | () => void | Moves focus to the last item. | +| **`sort`** | () => void | Sorts the `composite.items` based on the items position in the DOM. Thisis especially useful after modifying the composite items order in the DOM.Most of the time, though, you don't need to manually call this function asthe re-ordering happens automatically. | +| **`unstable_setVirtual`** ⚠️ | (value: SetStateAction<boolean>) => void | Sets `virtual`. | +| **`setRTL`** | (value: SetStateAction<boolean>) => void | Sets `rtl`. | +| **`setOrientation`** | (value: SetStateAction<"horizontal" \| "vertical... | Sets `orientation`. | +| **`setCurrentId`** | (value: SetStateAction<string \| null \| undefine... | Sets `currentId`. This is different from `composite.move` as this onlyupdates the `currentId` state without moving focus. When the compositewidget gets focused by the user, the item referred by the `currentId`state will get focus. | +| **`setLoop`** | (value: SetStateAction<boolean \| "horizontal" \|... | Sets `loop`. | +| **`setWrap`** | (value: SetStateAction<boolean \| "horizontal" \|... | Sets `wrap`. | +| **`setShift`** | (value: SetStateAction<boolean>) => void | Sets `shift`. | +| **`reset`** | () => void | Resets to initial state. | +| **`animated`** | number \| boolean | If `true`, `animating` will be set to `true` when `visible` is updated.It'll wait for `stopAnimation` to be called or a CSS transition ends.If `animated` is set to a `number`, `stopAnimation` will be called onlyafter the same number of milliseconds have passed. | +| **`animating`** | boolean | Whether it's animating or not. | +| **`hide`** | () => void | Changes the `visible` state to `false` | +| **`toggle`** | () => void | Toggles the `visible` state | +| **`setVisible`** | (value: SetStateAction<boolean>) => void | Sets `visible`. | +| **`setAnimated`** | (value: SetStateAction<number \| boolean>) => void | Sets `animated`. | +| **`stopAnimation`** | () => void | Stops animation. It's called automatically if there's a CSS transition. | +| **`modal`** | boolean | Toggles Dialog's `modal` state. - Non-modal: `preventBodyScroll` doesn't work and focus is free. - Modal: `preventBodyScroll` is automatically enabled, focus istrapped within the dialog and the dialog is rendered within a `Portal`by default. | +| **`setModal`** | (value: SetStateAction<boolean>) => void | Sets `modal`. | +| **`unstable_referenceRef`** ⚠️ | RefObject<HTMLElement \| null> | The reference element. | +| **`placement`** | "auto-start" \| "auto" \| "auto-end" \| "top-start... | Actual `placement`. | +| **`place`** | (value: SetStateAction<Placement>) => void | Change the `placement` state. | +| **`time`** | Date | | +| **`hours`** | number[] | | +| **`minutes`** | number[] | | +| **`meridies`** | string[] | | +| **`hourState`** | { baseId: string; unstable_idCountRef: MutableR... | | +| **`minuteState`** | { baseId: string; unstable_idCountRef: MutableR... | | +| **`meridiesState`** | { baseId: string; unstable_idCountRef: MutableR... | |
diff --git a/docs/toast.md b/docs/toast.md index 69b540eaf..816dccb2b 100644 --- a/docs/toast.md +++ b/docs/toast.md @@ -101,10 +101,10 @@ We also have to add the `animationTimeout` inorder to specify a delay before removing the toast from the state, this would ensure the CSS or any other animations has the chance to finish without being interrupted. -[Toast Basic - Open On Sandbox](https://codesandbox.io/s/2z7hj) +[Toast Basic - Open On Sandbox](https://codesandbox.io/s/yf6i7) -[Toast Styled - Open On Sandbox](https://codesandbox.io/s/k9rki) +[Toast Styled - Open On Sandbox](https://codesandbox.io/s/1297l) -[Toast CSS Animated - Open On Sandbox](https://codesandbox.io/s/8vkcv) +[Toast CSS Animated - Open On Sandbox](https://codesandbox.io/s/i0emy) -[Toast React Spring - Open On Sandbox](https://codesandbox.io/s/2hr08) +[Toast React Spring - Open On Sandbox](https://codesandbox.io/s/2uhsj) diff --git a/scripts/utils/inject-props.js b/scripts/utils/inject-props.js index 0d709d48d..d40f16ff8 100644 --- a/scripts/utils/inject-props.js +++ b/scripts/utils/inject-props.js @@ -135,6 +135,8 @@ function isInitialStateDeclaration(node) { */ function getComment(symbol) { const jsDocs = getJsDocs(symbol); + console.log("%c jsDocs", "color: #731d6d", jsDocs); + if (!jsDocs) return ""; return jsDocs.getDescription().trim(); } @@ -154,19 +156,24 @@ function getPropTypesRow(prop) { ? ' ⚠️' : ""; const name = `**\`${prop.name}\`**${symbol} `; + const desc = prop.description.replace(/\r?\n|\r/g, ""); return outdent` - - ${name} - ${prop.type} - ${prop.description.split("\n\n").join("\n\n ")} + | ${name} | ${prop.type.replace(/\|/g, "\\|")} | ${desc} | `; } +const tableHeader = outdent` +| Name | Type | Description | +| :--- |:---|:---| +`; + function getSummaryDetails(stateProps) { return outdent`
${stateProps.length} state props > These props are returned by the state hook. You can spread them into this component (\`{...state}\`) or pass them separately. You can also provide these props from your own state logic. + ${tableHeader} ${stateProps.map(getPropTypesRow).join("\n")}
@@ -184,9 +191,16 @@ function getPropTypesMarkdown(types) { const stateProps = props.stateProps || []; const hiddenRows = stateProps.length ? getSummaryDetails(stateProps) : ""; + const table = outdent` + ${tableHeader} + ${rows} + `; + return outdent` ### \`${title}\` - ${rows || (hiddenRows ? "" : "No props to show")} + + ${rows.length < 1 ? (hiddenRows ? "" : "No props to show") : table} + ${hiddenRows} `; }) diff --git a/src/datepicker/DatePickerState.ts b/src/datepicker/DatePickerState.ts index 2cedae594..ac375e339 100644 --- a/src/datepicker/DatePickerState.ts +++ b/src/datepicker/DatePickerState.ts @@ -18,17 +18,16 @@ import { RangeValueBase } from "../utils/types"; import { SegmentInitialState, useSegmentState } from "../segment"; import { PickerBaseInitialState, usePickerBaseState } from "../picker-base"; -export interface DatePickerInitialState - extends ValueBase, - RangeValueBase, - Validation, - PickerBaseInitialState, - Pick, "formatOptions" | "placeholderDate"> { - /** - * Whether the element should receive focus on render. - */ - autoFocus?: boolean; -} +export type DatePickerInitialState = ValueBase & + RangeValueBase & + Validation & + PickerBaseInitialState & + Pick, "formatOptions" | "placeholderDate"> & { + /** + * Whether the element should receive focus on render. + */ + autoFocus?: boolean; + }; export const useDatePickerState = (props: DatePickerInitialState = {}) => { const { diff --git a/src/datepicker/DateRangePickerState.ts b/src/datepicker/DateRangePickerState.ts index 12ea26cd8..7f47e977b 100644 --- a/src/datepicker/DateRangePickerState.ts +++ b/src/datepicker/DateRangePickerState.ts @@ -26,17 +26,16 @@ import { useRangeCalendarState } from "../calendar"; import { SegmentInitialState, useSegmentState } from "../segment"; import { PickerBaseInitialState, usePickerBaseState } from "../picker-base"; -export interface DateRangePickerInitialState - extends ValueBase>, - RangeValueBase, - Validation, - PickerBaseInitialState, - Pick, "formatOptions" | "placeholderDate"> { - /** - * Whether the element should receive focus on render. - */ - autoFocus?: boolean; -} +export type DateRangePickerInitialState = ValueBase> & + RangeValueBase & + Validation & + PickerBaseInitialState & + Pick, "formatOptions" | "placeholderDate"> & { + /** + * Whether the element should receive focus on render. + */ + autoFocus?: boolean; + }; export const useDateRangePickerState = ( props: DateRangePickerInitialState = {}, diff --git a/src/picker-base/PickerBaseState.ts b/src/picker-base/PickerBaseState.ts index 08b36e304..c2d724b7d 100644 --- a/src/picker-base/PickerBaseState.ts +++ b/src/picker-base/PickerBaseState.ts @@ -1,25 +1,26 @@ import { - PopoverInitialState, usePopoverState, + PopoverInitialState, unstable_useId as useId, } from "reakit"; import { InputBase } from "@react-types/shared"; -export interface PickerBaseInitialState extends PopoverInitialState, InputBase { - /** - * Picker wrapper Id - */ - pickerId?: string; - /** - * Dialog Id - */ - dialogId?: string; - /** - * Function to be called on picker mousedown - * for focusing first tabbable element - */ - segmentFocus?: () => void; -} +export type PickerBaseInitialState = PopoverInitialState & + InputBase & { + /** + * Picker wrapper Id + */ + pickerId?: string; + /** + * Dialog Id + */ + dialogId?: string; + /** + * Function to be called on picker mousedown + * for focusing first tabbable element + */ + segmentFocus?: () => void; + }; export const usePickerBaseState = (props: PickerBaseInitialState = {}) => { const { diff --git a/src/segment/SegmentState.ts b/src/segment/SegmentState.ts index 1d3530218..9e23cd496 100644 --- a/src/segment/SegmentState.ts +++ b/src/segment/SegmentState.ts @@ -45,7 +45,7 @@ const TYPE_MAPPING = { dayperiod: "dayPeriod", }; -export interface SegmentInitialState { +export type SegmentInitialState = { /** * Default segment value */ @@ -77,7 +77,7 @@ export interface SegmentInitialState { * Placeholder date */ placeholderDate?: Date; -} +}; export function useSegmentState(props: SegmentInitialState) { const [validSegments, setValidSegments] = useState( diff --git a/src/timepicker/TimePickerState.ts b/src/timepicker/TimePickerState.ts index d3171d982..05362aaaa 100644 --- a/src/timepicker/TimePickerState.ts +++ b/src/timepicker/TimePickerState.ts @@ -7,17 +7,16 @@ import { SegmentInitialState, useSegmentState } from "../segment"; import { useTimePickerColumnState } from "./TimePickerColumnState"; import { PickerBaseInitialState, usePickerBaseState } from "../picker-base"; -export interface TimePickerStateProps - extends PickerBaseInitialState, - ValueBase, - Pick, "formatOptions" | "placeholderDate"> { - /** - * Whether the element should receive focus on render. - */ - autoFocus?: boolean; -} - -export const useTimePickerState = (props: TimePickerStateProps = {}) => { +export type TimePickerInitialState = PickerBaseInitialState & + ValueBase & + Pick, "formatOptions" | "placeholderDate"> & { + /** + * Whether the element should receive focus on render. + */ + autoFocus?: boolean; + }; + +export const useTimePickerState = (props: TimePickerInitialState = {}) => { const { value: initialValue, defaultValue: defaultValueProp = stringifyTime(new Date()),