@ark-ui/react 5.3.1 → 5.4.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 (5) hide show
  1. package/dist/components/menu/menu-item.cjs +5 -1
  2. package/dist/components/menu/menu-item.d.cts +10 -2
  3. package/dist/components/menu/menu-item.d.ts +10 -2
  4. package/dist/components/menu/menu-item.js +6 -2
  5. package/package.json +61 -61
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/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.4.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.7.0",
152
+ "@zag-js/anatomy": "1.7.0",
153
+ "@zag-js/auto-resize": "1.7.0",
154
+ "@zag-js/avatar": "1.7.0",
155
+ "@zag-js/carousel": "1.7.0",
156
+ "@zag-js/checkbox": "1.7.0",
157
+ "@zag-js/clipboard": "1.7.0",
158
+ "@zag-js/collapsible": "1.7.0",
159
+ "@zag-js/collection": "1.7.0",
160
+ "@zag-js/color-picker": "1.7.0",
161
+ "@zag-js/color-utils": "1.7.0",
162
+ "@zag-js/combobox": "1.7.0",
163
+ "@zag-js/core": "1.7.0",
164
+ "@zag-js/date-picker": "1.7.0",
165
+ "@zag-js/date-utils": "1.7.0",
166
+ "@zag-js/dialog": "1.7.0",
167
+ "@zag-js/dom-query": "1.7.0",
168
+ "@zag-js/editable": "1.7.0",
169
+ "@zag-js/file-upload": "1.7.0",
170
+ "@zag-js/file-utils": "1.7.0",
171
+ "@zag-js/focus-trap": "1.7.0",
172
+ "@zag-js/highlight-word": "1.7.0",
173
+ "@zag-js/hover-card": "1.7.0",
174
+ "@zag-js/i18n-utils": "1.7.0",
175
+ "@zag-js/menu": "1.7.0",
176
+ "@zag-js/number-input": "1.7.0",
177
+ "@zag-js/pagination": "1.7.0",
178
+ "@zag-js/pin-input": "1.7.0",
179
+ "@zag-js/popover": "1.7.0",
180
+ "@zag-js/presence": "1.7.0",
181
+ "@zag-js/progress": "1.7.0",
182
+ "@zag-js/qr-code": "1.7.0",
183
+ "@zag-js/radio-group": "1.7.0",
184
+ "@zag-js/rating-group": "1.7.0",
185
+ "@zag-js/react": "1.7.0",
186
+ "@zag-js/select": "1.7.0",
187
+ "@zag-js/signature-pad": "1.7.0",
188
+ "@zag-js/slider": "1.7.0",
189
+ "@zag-js/splitter": "1.7.0",
190
+ "@zag-js/steps": "1.7.0",
191
+ "@zag-js/switch": "1.7.0",
192
+ "@zag-js/tabs": "1.7.0",
193
+ "@zag-js/tags-input": "1.7.0",
194
+ "@zag-js/time-picker": "1.7.0",
195
+ "@zag-js/timer": "1.7.0",
196
+ "@zag-js/toast": "1.7.0",
197
+ "@zag-js/toggle": "1.7.0",
198
+ "@zag-js/toggle-group": "1.7.0",
199
+ "@zag-js/tooltip": "1.7.0",
200
+ "@zag-js/tour": "1.7.0",
201
+ "@zag-js/tree-view": "1.7.0",
202
+ "@zag-js/types": "1.7.0",
203
+ "@zag-js/utils": "1.7.0"
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,18 +217,18 @@
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.7.0",
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.484.0",
225
225
  "react": "19.0.0",
226
226
  "react-dom": "19.0.0",
227
227
  "react-frame-component": "5.2.7",
228
228
  "react-hook-form": "7.54.2",
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
233
  "vite": "6.2.3",
234
234
  "vite-plugin-dts": "4.5.3",