diff --git a/.eslintignore b/.eslintignore index f6f8bb616..08906c4c0 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,3 +9,7 @@ package.json package-lock.json yarn.lock storybook-static + +__js +templates.ts +docs diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 382757c4a..c52894876 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -39,7 +39,5 @@ jobs: - name: Install deps run: yarn - - name: Check Types - run: yarn check-types - name: Test run: yarn test diff --git a/.prettierignore b/.prettierignore index d81a8c5e9..08906c4c0 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,5 +1,15 @@ -dist node_modules -coverage .next +.cache build +public +dist +coverage +package.json +package-lock.json +yarn.lock +storybook-static + +__js +templates.ts +docs diff --git a/@types-tests/types.test-d.ts b/@types-tests/types.test-d.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/docs-templates/toast.md b/docs-templates/toast.md index d5701c605..804464c7d 100644 --- a/docs-templates/toast.md +++ b/docs-templates/toast.md @@ -52,7 +52,7 @@ link_title: Toast CSS Animated js: src/toast/stories/__js/ToastCSSAnimated.component.jsx utils: src/toast/stories/__js/Utils.component.jsx css: src/toast/stories/ToastStyled.css -deps: ["react-transition-group"] +deps: ["react-transition-group", "@chakra-ui/utils"] --> diff --git a/docs/accordion.md b/docs/accordion.md index f1d7f687c..e84a36c1a 100644 --- a/docs/accordion.md +++ b/docs/accordion.md @@ -14,6 +14,8 @@ for - [Accessibility Requirements](#accessibility-requirements) - [Composition](#composition) - [Props](#props) + - [`useAccordionBaseState`](#useaccordionbasestate) + - [`useAccordionMultiState`](#useaccordionmultistate) - [`useAccordionState`](#useaccordionstate) - [`Accordion`](#accordion) - [`AccordionPanel`](#accordionpanel) @@ -55,9 +57,15 @@ export function App(props) { Panel 4

- Trigger 5 + + Trigger 5 +

Panel 5 +

+ Trigger 6 +

+ Panel 6 ); } @@ -65,7 +73,7 @@ export function App(props) { export default App; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Accordion%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/scil2) +[![Edit CodeSandbox](https://img.shields.io/badge/Accordion%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/clr2u) [![Edit CodeSandbox](https://img.shields.io/badge/Accordion%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/lonmk) @@ -84,21 +92,55 @@ export default App; ## Props +### `useAccordionBaseState` + +| 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. | +| **`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`** | Orientation \| 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 \| Orientation | 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 \| Orientation | **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. | + +### `useAccordionMultiState` + +| Name | Type | Description | +| :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`manual`** | boolean | Whether the accodion selection should be manual. | +| **`selectedIds`** | string[] | The current selected accordion's `id`. | +| **`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`** | Orientation \| 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 \| Orientation | 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 \| Orientation | **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. | +| **`defaultSelectedIds`** | string[] \| (() => string[]) \| undefined | The initial value to be used, in uncontrolled mode | +| **`onSelectedIdsChange`** | ((value: string[]) => void) \| undefined | The callback fired when the value changes | +| **`shouldUpdate`** | ((prev: string[], next: string[]) => boolean) \|... | The function that determines if the state should be updated | + ### `useAccordionState` -| 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. | +| Name | Type | Description | +| :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`manual`** | boolean | Whether the accodion selection should be manual. | +| **`allowToggle`** | boolean | Allow to toggle accordion items | +| **`selectedId`** | string \| null | The current selected accordion's `id`. | +| **`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`** | Orientation \| 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 \| Orientation | 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 \| Orientation | **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. | +| **`defaultSelectedId`** | StringOrNull \| (() => StringOrNull) \| undefined | The initial value to be used, in uncontrolled mode | +| **`onSelectedIdChange`** | ((value: StringOrNull) => void) \| undefined | The callback fired when the value changes | +| **`shouldUpdate`** | ((prev: StringOrNull, next: StringOrNull) => bo... | The function that determines if the state should be updated | ### `Accordion` @@ -114,16 +156,16 @@ export default App; | :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`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. | +| **`orientation`** | Orientation \| 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`. | +| **`wrap`** | boolean \| Orientation | **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. | | **`groups`** | Group[] | Lists all the composite groups with their `id` and DOM `ref`. This stateis automatically updated when `registerGroup` and `unregisterGroup` arecalled. | +| **`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: 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. | +| **`move`** | (id: string \| null) => void | Moves focus to a given item ID. | @@ -141,16 +183,16 @@ export default App;
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. -| 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. | +| Name | Type | Description | +| :-------------------- | :------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **`baseId`** | string | ID that will serve as a base for all the items IDs. | +| **`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. | +| **`panels`** | Item[] | Lists all the panels. | +| **`allowMultiple`** | boolean | Allow to open multiple accordion items | +| **`selectedId`** | string \| null | The current selected accordion's `id`. | +| **`registerPanel`** | (item: Item) => void | Registers a accordion panel. | +| **`unregisterPanel`** | (id: string) => void | Unregisters a accordion panel. | +| **`selectedIds`** | string[] | The current selected accordion's `id`. |
@@ -162,14 +204,14 @@ export default App; | **`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 +
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. | 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. | +| **`orientation`** | Orientation \| 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. | @@ -183,12 +225,11 @@ export default App; | **`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. | +| **`panels`** | Item[] | Lists all the panels. | | **`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. | +| **`selectedId`** | string \| null | The current selected accordion's `id`. | +| **`select`** | (id: string) => void | Moves into and selects an accordion by its `id`. | +| **`selectedIds`** | string[] | The current selected accordion's `id`. |
diff --git a/docs/calendar.md b/docs/calendar.md index 2947bd3ba..48c0a6de2 100644 --- a/docs/calendar.md +++ b/docs/calendar.md @@ -141,7 +141,7 @@ Also we can customize and style the ranges with CSS attribute selectors } ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/9hpbv) +[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/vyh0d) [![Edit CodeSandbox](https://img.shields.io/badge/RangeCalendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/ngv58) @@ -292,9 +292,9 @@ Also we can customize and style the ranges with CSS attribute selectors ### `CalendarHeader` -| Name | Type | Description | -| :----------- | :------------------------------------------- | :---------- | -| **`format`** | DateTimeFormatOpts \| undefined | | +| Name | Type | Description | +| :----------- | :---------------------------------------------- | :---------- | +| **`format`** | DateTimeFormatOptions \| 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. diff --git a/docs/datepicker.md b/docs/datepicker.md index 795e06571..3935acdfe 100644 --- a/docs/datepicker.md +++ b/docs/datepicker.md @@ -301,7 +301,7 @@ const RangeCalendar = state => { | **`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. | +| **`validationState`** | ValidationState \| 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. | @@ -318,7 +318,7 @@ const RangeCalendar = state => { | **`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 | +| **`formatOptions`** | DateTimeFormatOptions \| 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. | @@ -331,7 +331,7 @@ const RangeCalendar = state => { | **`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. | +| **`validationState`** | ValidationState \| 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. | @@ -348,7 +348,7 @@ const RangeCalendar = state => { | **`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 | +| **`formatOptions`** | DateTimeFormatOptions \| 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. | @@ -404,7 +404,7 @@ const RangeCalendar = state => { | :---------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`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. | +| **`orientation`** | Orientation \| 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. | diff --git a/docs/meter.md b/docs/meter.md index 36a560243..54261a3f6 100644 --- a/docs/meter.md +++ b/docs/meter.md @@ -51,7 +51,7 @@ const background = { [![Edit CodeSandbox](https://img.shields.io/badge/Meter%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/b9ri6) -[![Edit CodeSandbox](https://img.shields.io/badge/Meter%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/8mxwv) +[![Edit CodeSandbox](https://img.shields.io/badge/Meter%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/xv2oq) ## Accessibility Requirement diff --git a/docs/number-input.md b/docs/number-input.md index 77037186b..a1433982e 100644 --- a/docs/number-input.md +++ b/docs/number-input.md @@ -38,6 +38,7 @@ export const App = props => {