@ark-ui/react 5.3.1 → 5.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/combobox/combobox-root.cjs +1 -0
  2. package/dist/components/combobox/combobox-root.js +1 -0
  3. package/dist/components/menu/menu-item.cjs +5 -1
  4. package/dist/components/menu/menu-item.d.cts +10 -2
  5. package/dist/components/menu/menu-item.d.ts +10 -2
  6. package/dist/components/menu/menu-item.js +6 -2
  7. package/dist/components/presence/split-presence-props.cjs +8 -1
  8. package/dist/components/presence/split-presence-props.d.cts +1 -1
  9. package/dist/components/presence/split-presence-props.d.ts +1 -1
  10. package/dist/components/presence/split-presence-props.js +8 -1
  11. package/dist/components/presence/use-presence.cjs +2 -2
  12. package/dist/components/presence/use-presence.d.cts +6 -1
  13. package/dist/components/presence/use-presence.d.ts +6 -1
  14. package/dist/components/presence/use-presence.js +2 -2
  15. package/package.json +65 -65
package/dist/components/combobox/combobox-root.cjs CHANGED
@@ -46,6 +46,7 @@ const ComboboxImpl = (props, ref) => {
46
46
  "onOpenChange",
47
47
  "onOpenChange",
48
48
  "onPointerDownOutside",
49
+ "onSelect",
49
50
  "onValueChange",
50
51
  "open",
51
52
  "openOnChange",
package/dist/components/combobox/combobox-root.js CHANGED
@@ -42,6 +42,7 @@ const ComboboxImpl = (props, ref) => {
42
42
  "onOpenChange",
43
43
  "onOpenChange",
44
44
  "onPointerDownOutside",
45
+ "onSelect",
45
46
  "onValueChange",
46
47
  "open",
47
48
  "openOnChange",
package/dist/components/menu/menu-item.cjs CHANGED
@@ -16,11 +16,15 @@ const MenuItem = react.forwardRef((props, ref) => {
16
16
  "closeOnSelect",
17
17
  "disabled",
18
18
  "value",
19
- "valueText"
19
+ "valueText",
20
+ "onSelect"
20
21
  ]);
21
22
  const menu = useMenuContext.useMenuContext();
22
23
  const mergedProps = react$1.mergeProps(menu.getItemProps(itemProps), localProps);
23
24
  const itemState = menu.getItemState(itemProps);
25
+ react.useEffect(() => {
26
+ return menu.addItemListener({ id: itemState.id, onSelect: itemProps.onSelect });
27
+ }, [itemState.id, itemProps.onSelect]);
24
28
  return /* @__PURE__ */ jsxRuntime.jsx(useMenuItemContext.MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
25
29
  });
26
30
  MenuItem.displayName = "MenuItem";
package/dist/components/menu/menu-item.d.cts CHANGED
@@ -1,8 +1,16 @@
1
1
  import { ItemProps } from '@zag-js/menu';
2
+ import { Assign } from '../../types';
2
3
  import { HTMLProps, PolymorphicProps } from '../factory';
3
4
  import { ForwardRefExoticComponent, RefAttributes } from 'react';
4
- export interface MenuItemBaseProps extends ItemProps, PolymorphicProps {
5
+ interface ItemBaseProps extends ItemProps {
6
+ /**
7
+ * The function to call when the item is selected
8
+ */
9
+ onSelect?: VoidFunction;
5
10
  }
6
- export interface MenuItemProps extends HTMLProps<'div'>, MenuItemBaseProps {
11
+ export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps {
12
+ }
13
+ export interface MenuItemProps extends Assign<HTMLProps<'div'>, MenuItemBaseProps> {
7
14
  }
8
15
  export declare const MenuItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLDivElement>>;
16
+ export {};
package/dist/components/menu/menu-item.d.ts CHANGED
@@ -1,8 +1,16 @@
1
1
  import { ItemProps } from '@zag-js/menu';
2
+ import { Assign } from '../../types';
2
3
  import { HTMLProps, PolymorphicProps } from '../factory';
3
4
  import { ForwardRefExoticComponent, RefAttributes } from 'react';
4
- export interface MenuItemBaseProps extends ItemProps, PolymorphicProps {
5
+ interface ItemBaseProps extends ItemProps {
6
+ /**
7
+ * The function to call when the item is selected
8
+ */
9
+ onSelect?: VoidFunction;
5
10
  }
6
- export interface MenuItemProps extends HTMLProps<'div'>, MenuItemBaseProps {
11
+ export interface MenuItemBaseProps extends ItemBaseProps, PolymorphicProps {
12
+ }
13
+ export interface MenuItemProps extends Assign<HTMLProps<'div'>, MenuItemBaseProps> {
7
14
  }
8
15
  export declare const MenuItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLDivElement>>;
16
+ export {};
package/dist/components/menu/menu-item.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
  import { mergeProps } from '@zag-js/react';
4
- import { forwardRef } from 'react';
4
+ import { forwardRef, useEffect } from 'react';
5
5
  import { createSplitProps } from '../../utils/create-split-props.js';
6
6
  import { ark } from '../factory.js';
7
7
  import { useMenuContext } from './use-menu-context.js';
@@ -12,11 +12,15 @@ const MenuItem = forwardRef((props, ref) => {
12
12
  "closeOnSelect",
13
13
  "disabled",
14
14
  "value",
15
- "valueText"
15
+ "valueText",
16
+ "onSelect"
16
17
  ]);
17
18
  const menu = useMenuContext();
18
19
  const mergedProps = mergeProps(menu.getItemProps(itemProps), localProps);
19
20
  const itemState = menu.getItemState(itemProps);
21
+ useEffect(() => {
22
+ return menu.addItemListener({ id: itemState.id, onSelect: itemProps.onSelect });
23
+ }, [itemState.id, itemProps.onSelect]);
20
24
  return /* @__PURE__ */ jsx(MenuItemProvider, { value: itemState, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
21
25
  });
22
26
  MenuItem.displayName = "MenuItem";
package/dist/components/presence/split-presence-props.cjs CHANGED
@@ -5,6 +5,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
 
6
6
  const createSplitProps = require('../../utils/create-split-props.cjs');
7
7
 
8
- const splitPresenceProps = (props) => createSplitProps.createSplitProps()(props, ["immediate", "lazyMount", "onExitComplete", "present", "unmountOnExit"]);
8
+ const splitPresenceProps = (props) => createSplitProps.createSplitProps()(props, [
9
+ "immediate",
10
+ "lazyMount",
11
+ "onExitComplete",
12
+ "present",
13
+ "skipAnimationOnMount",
14
+ "unmountOnExit"
15
+ ]);
9
16
 
10
17
  exports.splitPresenceProps = splitPresenceProps;
package/dist/components/presence/split-presence-props.d.cts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { UsePresenceProps } from './use-presence';
2
- export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [UsePresenceProps, Omit<T, "lazyMount" | "unmountOnExit" | "onExitComplete" | "present" | "immediate">];
2
+ export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [UsePresenceProps, Omit<T, "lazyMount" | "unmountOnExit" | "onExitComplete" | "present" | "immediate" | "skipAnimationOnMount">];
package/dist/components/presence/split-presence-props.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { UsePresenceProps } from './use-presence';
2
- export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [UsePresenceProps, Omit<T, "lazyMount" | "unmountOnExit" | "onExitComplete" | "present" | "immediate">];
2
+ export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [UsePresenceProps, Omit<T, "lazyMount" | "unmountOnExit" | "onExitComplete" | "present" | "immediate" | "skipAnimationOnMount">];
package/dist/components/presence/split-presence-props.js CHANGED
@@ -1,6 +1,13 @@
1
1
  'use client';
2
2
  import { createSplitProps } from '../../utils/create-split-props.js';
3
3
 
4
- const splitPresenceProps = (props) => createSplitProps()(props, ["immediate", "lazyMount", "onExitComplete", "present", "unmountOnExit"]);
4
+ const splitPresenceProps = (props) => createSplitProps()(props, [
5
+ "immediate",
6
+ "lazyMount",
7
+ "onExitComplete",
8
+ "present",
9
+ "skipAnimationOnMount",
10
+ "unmountOnExit"
11
+ ]);
5
12
 
6
13
  export { splitPresenceProps };
package/dist/components/presence/use-presence.cjs CHANGED
@@ -28,7 +28,7 @@ function _interopNamespaceDefault(e) {
28
28
  const presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
29
29
 
30
30
  const usePresence = (props = {}) => {
31
- const { lazyMount, unmountOnExit, present, ...rest } = props;
31
+ const { lazyMount, unmountOnExit, present, skipAnimationOnMount = false, ...rest } = props;
32
32
  const wasEverPresent = react.useRef(false);
33
33
  const machineProps = {
34
34
  ...rest,
@@ -42,7 +42,7 @@ const usePresence = (props = {}) => {
42
42
  }
43
43
  const unmounted = !api.present && !wasEverPresent.current && lazyMount || unmountOnExit && !api.present && wasEverPresent.current;
44
44
  const getPresenceProps = () => ({
45
- "data-state": present ? "open" : "closed",
45
+ "data-state": api.skip && skipAnimationOnMount ? void 0 : present ? "open" : "closed",
46
46
  hidden: !api.present
47
47
  });
48
48
  return {
package/dist/components/presence/use-presence.d.cts CHANGED
@@ -2,12 +2,17 @@ import { Optional } from '../../types';
2
2
  import { RenderStrategyProps } from '../../utils/render-strategy';
3
3
  import * as presence from '@zag-js/presence';
4
4
  export interface UsePresenceProps extends Optional<presence.Props, 'present'>, RenderStrategyProps {
5
+ /**
6
+ * Whether to allow the initial presence animation.
7
+ * @default false
8
+ */
9
+ skipAnimationOnMount?: boolean;
5
10
  }
6
11
  export type UsePresenceReturn = ReturnType<typeof usePresence>;
7
12
  export declare const usePresence: (props?: UsePresenceProps) => {
8
13
  ref: (node: HTMLElement | null) => void;
9
14
  getPresenceProps: () => {
10
- 'data-state': string;
15
+ 'data-state': string | undefined;
11
16
  hidden: boolean;
12
17
  };
13
18
  present: boolean;
package/dist/components/presence/use-presence.d.ts CHANGED
@@ -2,12 +2,17 @@ import { Optional } from '../../types';
2
2
  import { RenderStrategyProps } from '../../utils/render-strategy';
3
3
  import * as presence from '@zag-js/presence';
4
4
  export interface UsePresenceProps extends Optional<presence.Props, 'present'>, RenderStrategyProps {
5
+ /**
6
+ * Whether to allow the initial presence animation.
7
+ * @default false
8
+ */
9
+ skipAnimationOnMount?: boolean;
5
10
  }
6
11
  export type UsePresenceReturn = ReturnType<typeof usePresence>;
7
12
  export declare const usePresence: (props?: UsePresenceProps) => {
8
13
  ref: (node: HTMLElement | null) => void;
9
14
  getPresenceProps: () => {
10
- 'data-state': string;
15
+ 'data-state': string | undefined;
11
16
  hidden: boolean;
12
17
  };
13
18
  present: boolean;
package/dist/components/presence/use-presence.js CHANGED
@@ -5,7 +5,7 @@ import { useRef } from 'react';
5
5
  import { useEvent } from '../../utils/use-event.js';
6
6
 
7
7
  const usePresence = (props = {}) => {
8
- const { lazyMount, unmountOnExit, present, ...rest } = props;
8
+ const { lazyMount, unmountOnExit, present, skipAnimationOnMount = false, ...rest } = props;
9
9
  const wasEverPresent = useRef(false);
10
10
  const machineProps = {
11
11
  ...rest,
@@ -19,7 +19,7 @@ const usePresence = (props = {}) => {
19
19
  }
20
20
  const unmounted = !api.present && !wasEverPresent.current && lazyMount || unmountOnExit && !api.present && wasEverPresent.current;
21
21
  const getPresenceProps = () => ({
22
- "data-state": present ? "open" : "closed",
22
+ "data-state": api.skip && skipAnimationOnMount ? void 0 : present ? "open" : "closed",
23
23
  hidden: !api.present
24
24
  });
25
25
  return {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ark-ui/react",
3
3
  "type": "module",
4
- "version": "5.3.1",
4
+ "version": "5.5.0",
5
5
  "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
6
6
  "keywords": [
7
7
  "accordion",
@@ -148,67 +148,67 @@
148
148
  "sideEffects": false,
149
149
  "dependencies": {
150
150
  "@internationalized/date": "3.7.0",
151
- "@zag-js/accordion": "1.6.0",
152
- "@zag-js/anatomy": "1.6.0",
153
- "@zag-js/auto-resize": "1.6.0",
154
- "@zag-js/avatar": "1.6.0",
155
- "@zag-js/carousel": "1.6.0",
156
- "@zag-js/checkbox": "1.6.0",
157
- "@zag-js/clipboard": "1.6.0",
158
- "@zag-js/collapsible": "1.6.0",
159
- "@zag-js/collection": "1.6.0",
160
- "@zag-js/color-picker": "1.6.0",
161
- "@zag-js/color-utils": "1.6.0",
162
- "@zag-js/combobox": "1.6.0",
163
- "@zag-js/core": "1.6.0",
164
- "@zag-js/date-picker": "1.6.0",
165
- "@zag-js/date-utils": "1.6.0",
166
- "@zag-js/dialog": "1.6.0",
167
- "@zag-js/dom-query": "1.6.0",
168
- "@zag-js/editable": "1.6.0",
169
- "@zag-js/file-upload": "1.6.0",
170
- "@zag-js/file-utils": "1.6.0",
171
- "@zag-js/focus-trap": "1.6.0",
172
- "@zag-js/highlight-word": "1.6.0",
173
- "@zag-js/hover-card": "1.6.0",
174
- "@zag-js/i18n-utils": "1.6.0",
175
- "@zag-js/menu": "1.6.0",
176
- "@zag-js/number-input": "1.6.0",
177
- "@zag-js/pagination": "1.6.0",
178
- "@zag-js/pin-input": "1.6.0",
179
- "@zag-js/popover": "1.6.0",
180
- "@zag-js/presence": "1.6.0",
181
- "@zag-js/progress": "1.6.0",
182
- "@zag-js/qr-code": "1.6.0",
183
- "@zag-js/radio-group": "1.6.0",
184
- "@zag-js/rating-group": "1.6.0",
185
- "@zag-js/react": "1.6.0",
186
- "@zag-js/select": "1.6.0",
187
- "@zag-js/signature-pad": "1.6.0",
188
- "@zag-js/slider": "1.6.0",
189
- "@zag-js/splitter": "1.6.0",
190
- "@zag-js/steps": "1.6.0",
191
- "@zag-js/switch": "1.6.0",
192
- "@zag-js/tabs": "1.6.0",
193
- "@zag-js/tags-input": "1.6.0",
194
- "@zag-js/time-picker": "1.6.0",
195
- "@zag-js/timer": "1.6.0",
196
- "@zag-js/toast": "1.6.0",
197
- "@zag-js/toggle": "1.6.0",
198
- "@zag-js/toggle-group": "1.6.0",
199
- "@zag-js/tooltip": "1.6.0",
200
- "@zag-js/tour": "1.6.0",
201
- "@zag-js/tree-view": "1.6.0",
202
- "@zag-js/types": "1.6.0",
203
- "@zag-js/utils": "1.6.0"
151
+ "@zag-js/accordion": "1.8.2",
152
+ "@zag-js/anatomy": "1.8.2",
153
+ "@zag-js/auto-resize": "1.8.2",
154
+ "@zag-js/avatar": "1.8.2",
155
+ "@zag-js/carousel": "1.8.2",
156
+ "@zag-js/checkbox": "1.8.2",
157
+ "@zag-js/clipboard": "1.8.2",
158
+ "@zag-js/collapsible": "1.8.2",
159
+ "@zag-js/collection": "1.8.2",
160
+ "@zag-js/color-picker": "1.8.2",
161
+ "@zag-js/color-utils": "1.8.2",
162
+ "@zag-js/combobox": "1.8.2",
163
+ "@zag-js/core": "1.8.2",
164
+ "@zag-js/date-picker": "1.8.2",
165
+ "@zag-js/date-utils": "1.8.2",
166
+ "@zag-js/dialog": "1.8.2",
167
+ "@zag-js/dom-query": "1.8.2",
168
+ "@zag-js/editable": "1.8.2",
169
+ "@zag-js/file-upload": "1.8.2",
170
+ "@zag-js/file-utils": "1.8.1",
171
+ "@zag-js/focus-trap": "1.8.2",
172
+ "@zag-js/highlight-word": "1.8.2",
173
+ "@zag-js/hover-card": "1.8.2",
174
+ "@zag-js/i18n-utils": "1.8.2",
175
+ "@zag-js/menu": "1.8.2",
176
+ "@zag-js/number-input": "1.8.2",
177
+ "@zag-js/pagination": "1.8.2",
178
+ "@zag-js/pin-input": "1.8.2",
179
+ "@zag-js/popover": "1.8.2",
180
+ "@zag-js/presence": "1.8.2",
181
+ "@zag-js/progress": "1.8.2",
182
+ "@zag-js/qr-code": "1.8.2",
183
+ "@zag-js/radio-group": "1.8.2",
184
+ "@zag-js/rating-group": "1.8.2",
185
+ "@zag-js/react": "1.8.2",
186
+ "@zag-js/select": "1.8.2",
187
+ "@zag-js/signature-pad": "1.8.2",
188
+ "@zag-js/slider": "1.8.2",
189
+ "@zag-js/splitter": "1.8.2",
190
+ "@zag-js/steps": "1.8.2",
191
+ "@zag-js/switch": "1.8.2",
192
+ "@zag-js/tabs": "1.8.2",
193
+ "@zag-js/tags-input": "1.8.2",
194
+ "@zag-js/time-picker": "1.8.2",
195
+ "@zag-js/timer": "1.8.2",
196
+ "@zag-js/toast": "1.8.2",
197
+ "@zag-js/toggle": "1.8.2",
198
+ "@zag-js/toggle-group": "1.8.2",
199
+ "@zag-js/tooltip": "1.8.2",
200
+ "@zag-js/tour": "1.8.2",
201
+ "@zag-js/tree-view": "1.8.2",
202
+ "@zag-js/types": "1.8.2",
203
+ "@zag-js/utils": "1.8.2"
204
204
  },
205
205
  "devDependencies": {
206
206
  "@biomejs/biome": "1.9.4",
207
207
  "@release-it/keep-a-changelog": "6.0.0",
208
- "@storybook/addon-a11y": "8.6.9",
209
- "@storybook/addon-essentials": "8.6.9",
210
- "@storybook/react": "8.6.9",
211
- "@storybook/react-vite": "8.6.9",
208
+ "@storybook/addon-a11y": "8.6.11",
209
+ "@storybook/addon-essentials": "8.6.11",
210
+ "@storybook/react": "8.6.11",
211
+ "@storybook/react-vite": "8.6.11",
212
212
  "@testing-library/dom": "10.4.0",
213
213
  "@testing-library/jest-dom": "6.6.3",
214
214
  "@testing-library/react": "16.2.0",
@@ -217,23 +217,23 @@
217
217
  "@types/react": "19.0.12",
218
218
  "@types/react-dom": "19.0.4",
219
219
  "@vitejs/plugin-react": "4.3.4",
220
- "@zag-js/stringify-state": "1.6.0",
220
+ "@zag-js/stringify-state": "1.8.2",
221
221
  "clean-package": "2.2.0",
222
222
  "globby": "14.1.0",
223
223
  "happy-dom": "17.4.4",
224
- "lucide-react": "0.483.0",
224
+ "lucide-react": "0.486.0",
225
225
  "react": "19.0.0",
226
226
  "react-dom": "19.0.0",
227
227
  "react-frame-component": "5.2.7",
228
- "react-hook-form": "7.54.2",
228
+ "react-hook-form": "7.55.0",
229
229
  "release-it": "18.1.2",
230
230
  "resize-observer-polyfill": "1.5.1",
231
- "storybook": "8.6.9",
231
+ "storybook": "8.6.11",
232
232
  "typescript": "5.8.2",
233
- "vite": "6.2.3",
233
+ "vite": "6.2.4",
234
234
  "vite-plugin-dts": "4.5.3",
235
- "vitest": "3.0.9",
236
- "@vitest/coverage-v8": "3.0.9",
235
+ "vitest": "3.1.1",
236
+ "@vitest/coverage-v8": "3.1.1",
237
237
  "vitest-axe": "1.0.0-pre.5"
238
238
  },
239
239
  "peerDependencies": {