diff --git a/packages/react/src/components/accordion/accordion.stories.tsx b/packages/react/src/components/accordion/accordion.stories.tsx index 40d41549a..bf90fcfe2 100644 --- a/packages/react/src/components/accordion/accordion.stories.tsx +++ b/packages/react/src/components/accordion/accordion.stories.tsx @@ -18,3 +18,7 @@ export { Provider } from './examples/provider' export { RenderProp } from './examples/render-prop' export { Vertical } from './examples/vertical' export { WithSlider } from './examples/with-slider' +export { ContextFocusedValue } from './examples/context/focusedValue' +export { ContextValue } from './examples/context/value' +export { ContextSetValue } from './examples/context/setValue' +export { ContextGetItemState } from './examples/context/getItemState' diff --git a/packages/react/src/components/accordion/examples/context/focusedValue.tsx b/packages/react/src/components/accordion/examples/context/focusedValue.tsx new file mode 100644 index 000000000..6c7d59599 --- /dev/null +++ b/packages/react/src/components/accordion/examples/context/focusedValue.tsx @@ -0,0 +1,25 @@ +import { Accordion } from '@ark-ui/react/accordion' +import { ChevronDownIcon } from 'lucide-react' + +export const ContextFocusedValue = () => { + return ( + + + {(context) => Focused item: {context.focusedValue}} + + {['React', 'Solid', 'Vue'].map((item) => ( + + + What is {item}? + + + + + + {item} is a JavaScript library for building user interfaces. + + + ))} + + ) +} diff --git a/packages/react/src/components/accordion/examples/context/getItemState.tsx b/packages/react/src/components/accordion/examples/context/getItemState.tsx new file mode 100644 index 000000000..057a7be3e --- /dev/null +++ b/packages/react/src/components/accordion/examples/context/getItemState.tsx @@ -0,0 +1,36 @@ +import { Accordion } from '@ark-ui/react/accordion' +import { ChevronDownIcon } from 'lucide-react' + +export const ContextGetItemState = () => { + const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }] + return ( + + + {(context) => { + const itemState = context.getItemState(items[2]) + return ( + <> + Vue State: + Disabled: {itemState.disabled ? 'Y' : 'N'} + Expanded: {itemState.expanded ? 'Y' : 'N'} + Focused: {itemState.focused ? 'Y' : 'N'} + + ) + }} + + {items.map((item) => ( + + + What is {item.value}? + + + + + + {item.value} is a JavaScript library for building user interfaces. + + + ))} + + ) +} diff --git a/packages/react/src/components/accordion/examples/context/setValue.tsx b/packages/react/src/components/accordion/examples/context/setValue.tsx new file mode 100644 index 000000000..7fa45554b --- /dev/null +++ b/packages/react/src/components/accordion/examples/context/setValue.tsx @@ -0,0 +1,25 @@ +import { Accordion } from '@ark-ui/react/accordion' +import { ChevronDownIcon } from 'lucide-react' + +export const ContextSetValue = () => { + return ( + + + {(context) => } + + {['React', 'Solid', 'Vue'].map((item) => ( + + + What is {item}? + + + + + + {item} is a JavaScript library for building user interfaces. + + + ))} + + ) +} diff --git a/packages/react/src/components/accordion/examples/context/value.tsx b/packages/react/src/components/accordion/examples/context/value.tsx new file mode 100644 index 000000000..ed914df1b --- /dev/null +++ b/packages/react/src/components/accordion/examples/context/value.tsx @@ -0,0 +1,25 @@ +import { Accordion } from '@ark-ui/react/accordion' +import { ChevronDownIcon } from 'lucide-react' + +export const ContextValue = () => { + return ( + + + {(context) => Selected items: {context.value.join(', ')}} + + {['React', 'Solid', 'Vue'].map((item) => ( + + + What is {item}? + + + + + + {item} is a JavaScript library for building user interfaces. + + + ))} + + ) +} diff --git a/packages/solid/src/components/accordion/accordion.stories.tsx b/packages/solid/src/components/accordion/accordion.stories.tsx index fbe2339e3..ec8b871c8 100644 --- a/packages/solid/src/components/accordion/accordion.stories.tsx +++ b/packages/solid/src/components/accordion/accordion.stories.tsx @@ -16,3 +16,7 @@ export { Multiple } from './examples/multiple' export { Provider } from './examples/provider' export { RenderProp } from './examples/render-prop' export { Vertical } from './examples/vertical' +export { ContextFocusedValue } from './examples/context/focusedValue' +export { ContextValue } from './examples/context/value' +export { ContextSetValue } from './examples/context/setValue' +export { ContextGetItemState } from './examples/context/getItemState' diff --git a/packages/solid/src/components/accordion/examples/context/focusedValue.tsx b/packages/solid/src/components/accordion/examples/context/focusedValue.tsx new file mode 100644 index 000000000..17b213dac --- /dev/null +++ b/packages/solid/src/components/accordion/examples/context/focusedValue.tsx @@ -0,0 +1,28 @@ +import { Accordion } from '@ark-ui/solid/accordion' +import { ChevronDownIcon } from 'lucide-solid' +import { Index } from 'solid-js' + +export const ContextFocusedValue = () => { + return ( + + + {(context) => Focused item: {context().focusedValue}} + + + {(item) => ( + + + What is {item()}? + + + + + + {item()} is a JavaScript library for building user interfaces. + + + )} + + + ) +} diff --git a/packages/solid/src/components/accordion/examples/context/getItemState.tsx b/packages/solid/src/components/accordion/examples/context/getItemState.tsx new file mode 100644 index 000000000..76a213fa5 --- /dev/null +++ b/packages/solid/src/components/accordion/examples/context/getItemState.tsx @@ -0,0 +1,39 @@ +import { Accordion } from '@ark-ui/solid/accordion' +import { ChevronDownIcon } from 'lucide-solid' +import { Index } from 'solid-js' + +export const ContextGetItemState = () => { + const items = [{ value: 'React' }, { value: 'Solid', disabled: true }, { value: 'Vue' }] + return ( + + + {(context) => { + const itemState = context().getItemState(items[2]) + return ( + <> + Vue State: + Disabled: {itemState.disabled ? 'Y' : 'N'} + Expanded: {itemState.expanded ? 'Y' : 'N'} + Focused: {itemState.focused ? 'Y' : 'N'} + + ) + }} + + + {(item) => ( + + + What is {item().value}? + + + + + + {item().value} is a JavaScript library for building user interfaces. + + + )} + + + ) +} diff --git a/packages/solid/src/components/accordion/examples/context/setValue.tsx b/packages/solid/src/components/accordion/examples/context/setValue.tsx new file mode 100644 index 000000000..e1c2120e0 --- /dev/null +++ b/packages/solid/src/components/accordion/examples/context/setValue.tsx @@ -0,0 +1,28 @@ +import { Accordion } from '@ark-ui/solid/accordion' +import { ChevronDownIcon } from 'lucide-solid' +import { Index } from 'solid-js' + +export const ContextSetValue = () => { + return ( + + + {(context) => } + + + {(item) => ( + + + What is {item()}? + + + + + + {item()} is a JavaScript library for building user interfaces. + + + )} + + + ) +} diff --git a/packages/solid/src/components/accordion/examples/context/value.tsx b/packages/solid/src/components/accordion/examples/context/value.tsx new file mode 100644 index 000000000..ac6c9897d --- /dev/null +++ b/packages/solid/src/components/accordion/examples/context/value.tsx @@ -0,0 +1,28 @@ +import { Accordion } from '@ark-ui/solid/accordion' +import { ChevronDownIcon } from 'lucide-solid' +import { Index } from 'solid-js' + +export const ContextValue = () => { + return ( + + + {(context) => Selected items: {context().value.join(', ')}} + + + {(item) => ( + + + What is {item()}? + + + + + + {item()} is a JavaScript library for building user interfaces. + + + )} + + + ) +} diff --git a/packages/vue/src/components/accordion/accordion.stories.vue b/packages/vue/src/components/accordion/accordion.stories.vue index aa90097a7..a9cc0cd07 100644 --- a/packages/vue/src/components/accordion/accordion.stories.vue +++ b/packages/vue/src/components/accordion/accordion.stories.vue @@ -2,6 +2,10 @@ import Accordion from './examples/accordion.vue' import Basic from './examples/basic.vue' import Collapsible from './examples/collapsible.vue' +import ContextFocusedValue from './examples/context/focusedValue.vue' +import ContextGetItemState from './examples/context/getItemState.vue' +import ContextSetValue from './examples/context/setValue.vue' +import ContextValue from './examples/context/value.vue' import Controlled from './examples/controlled.vue' import Disabled from './examples/disabled.vue' import Horizontal from './examples/horizontal.vue' @@ -42,5 +46,17 @@ import Vertical from './examples/vertical.vue' + + + + + + + + + + + + diff --git a/packages/vue/src/components/accordion/examples/context/focusedValue.vue b/packages/vue/src/components/accordion/examples/context/focusedValue.vue new file mode 100644 index 000000000..3883522ac --- /dev/null +++ b/packages/vue/src/components/accordion/examples/context/focusedValue.vue @@ -0,0 +1,26 @@ + + + diff --git a/packages/vue/src/components/accordion/examples/context/getItemState.vue b/packages/vue/src/components/accordion/examples/context/getItemState.vue new file mode 100644 index 000000000..b7629c86a --- /dev/null +++ b/packages/vue/src/components/accordion/examples/context/getItemState.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/vue/src/components/accordion/examples/context/setValue.vue b/packages/vue/src/components/accordion/examples/context/setValue.vue new file mode 100644 index 000000000..687575ab5 --- /dev/null +++ b/packages/vue/src/components/accordion/examples/context/setValue.vue @@ -0,0 +1,26 @@ + + + diff --git a/packages/vue/src/components/accordion/examples/context/value.vue b/packages/vue/src/components/accordion/examples/context/value.vue new file mode 100644 index 000000000..fe5f8ed4f --- /dev/null +++ b/packages/vue/src/components/accordion/examples/context/value.vue @@ -0,0 +1,26 @@ + + + diff --git a/website/src/content/pages/components/accordion.mdx b/website/src/content/pages/components/accordion.mdx index 5d0a1c155..8b401b749 100644 --- a/website/src/content/pages/components/accordion.mdx +++ b/website/src/content/pages/components/accordion.mdx @@ -76,11 +76,11 @@ Use the `--height` and/or `--width` CSS variables to animate the size of the con } } -[data-scope="accordion"][data-part="item-content"][data-state="open"] { +[data-scope='accordion'][data-part='item-content'][data-state='open'] { animation: slideDown 250ms ease-in-out; } -[data-scope="accordion"][data-part="item-content"][data-state="closed"] { +[data-scope='accordion'][data-part='item-content'][data-state='closed'] { animation: slideUp 200ms ease-in-out; } ``` @@ -94,6 +94,30 @@ You can leverage it to access the component state and methods from outside the a > If you're using the `RootProvider` component, you don't need to use the `Root` component. +### Acessing the focused item + +Use the `focusedValue` property to get the value of the focused accordion item. + + + +### Acessing the selected items + +Use the `value` property to get the selected accordion items. + + + +### Setting the selected items + +Use the `setValue` method to set the selected accordion items. + + + +### Accessing an item's state + +Use the `getItemState` method to get the state of an accordion item. + + + ## API Reference @@ -104,4 +128,4 @@ This component complies with the [Accordion WAI-ARIA design pattern](https://www ### Keyboard Support - \ No newline at end of file +