@ark-ui/react 2.0.2 → 2.1.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.
- package/CHANGELOG.md +34 -3
- package/clipboard/clipboard-context.cjs +15 -0
- package/clipboard/clipboard-context.d.ts +6 -0
- package/clipboard/clipboard-context.mjs +10 -0
- package/clipboard/clipboard-control.cjs +19 -0
- package/clipboard/clipboard-control.d.ts +6 -0
- package/clipboard/clipboard-control.mjs +15 -0
- package/clipboard/clipboard-indicator.cjs +22 -0
- package/clipboard/clipboard-indicator.d.ts +6 -0
- package/clipboard/clipboard-indicator.mjs +18 -0
- package/clipboard/clipboard-input.cjs +19 -0
- package/clipboard/clipboard-input.d.ts +6 -0
- package/clipboard/clipboard-input.mjs +15 -0
- package/clipboard/clipboard-label.cjs +19 -0
- package/clipboard/clipboard-label.d.ts +6 -0
- package/clipboard/clipboard-label.mjs +15 -0
- package/clipboard/clipboard-root.cjs +27 -0
- package/clipboard/clipboard-root.d.ts +9 -0
- package/clipboard/clipboard-root.mjs +23 -0
- package/clipboard/clipboard-trigger.cjs +21 -0
- package/clipboard/clipboard-trigger.d.ts +6 -0
- package/clipboard/clipboard-trigger.mjs +17 -0
- package/clipboard/clipboard.cjs +19 -0
- package/clipboard/clipboard.d.ts +7 -0
- package/clipboard/clipboard.mjs +6 -0
- package/clipboard/index.d.ts +11 -0
- package/clipboard/use-clipboard.cjs +43 -0
- package/clipboard/use-clipboard.d.ts +8 -0
- package/clipboard/use-clipboard.mjs +20 -0
- package/color-picker/use-color-picker.cjs +2 -1
- package/color-picker/use-color-picker.d.ts +1 -1
- package/color-picker/use-color-picker.mjs +2 -1
- package/date-picker/date-picker-input.cjs +3 -1
- package/date-picker/date-picker-input.d.ts +3 -1
- package/date-picker/date-picker-input.mjs +3 -1
- package/date-picker/date-picker-preset-trigger.cjs +25 -0
- package/date-picker/date-picker-preset-trigger.d.ts +8 -0
- package/date-picker/date-picker-preset-trigger.mjs +21 -0
- package/date-picker/date-picker.cjs +2 -0
- package/date-picker/date-picker.d.ts +2 -1
- package/date-picker/date-picker.mjs +1 -0
- package/date-picker/index.cjs +2 -0
- package/date-picker/index.d.ts +3 -2
- package/date-picker/index.mjs +1 -0
- package/date-picker/use-date-picker.cjs +2 -1
- package/date-picker/use-date-picker.d.ts +1 -1
- package/date-picker/use-date-picker.mjs +2 -1
- package/dialog/dialog-root.cjs +2 -2
- package/dialog/dialog-root.mjs +1 -1
- package/dialog/use-dialog.cjs +2 -1
- package/dialog/use-dialog.d.ts +1 -1
- package/dialog/use-dialog.mjs +2 -1
- package/factory.cjs +2 -2
- package/factory.mjs +1 -1
- package/hover-card/use-hover-card.cjs +2 -1
- package/hover-card/use-hover-card.d.ts +1 -1
- package/hover-card/use-hover-card.mjs +2 -1
- package/index.cjs +24 -0
- package/index.d.ts +2 -0
- package/index.mjs +13 -0
- package/locale/index.cjs +11 -0
- package/locale/index.d.ts +2 -0
- package/locale/index.mjs +2 -0
- package/locale/locale-context.cjs +18 -0
- package/locale/locale-context.d.ts +6 -0
- package/locale/locale-context.mjs +13 -0
- package/locale/locale.cjs +31 -0
- package/locale/locale.d.ts +14 -0
- package/locale/locale.mjs +27 -0
- package/menu/use-menu.cjs +2 -1
- package/menu/use-menu.d.ts +1 -1
- package/menu/use-menu.mjs +2 -1
- package/package.json +60 -51
- package/popover/use-popover.cjs +2 -1
- package/popover/use-popover.d.ts +1 -1
- package/popover/use-popover.mjs +2 -1
- package/select/use-select.cjs +2 -1
- package/select/use-select.d.ts +1 -1
- package/select/use-select.mjs +2 -1
- package/tooltip/use-tooltip.cjs +2 -1
- package/tooltip/use-tooltip.d.ts +1 -1
- package/tooltip/use-tooltip.mjs +2 -1
- package/tree-view/index.cjs +2 -0
- package/tree-view/index.d.ts +3 -2
- package/tree-view/index.mjs +1 -0
- package/tree-view/tree-view-branch-content.cjs +3 -7
- package/tree-view/tree-view-branch-content.d.ts +1 -3
- package/tree-view/tree-view-branch-content.mjs +3 -7
- package/tree-view/tree-view-branch-context.cjs +15 -0
- package/tree-view/tree-view-branch-context.d.ts +8 -0
- package/tree-view/tree-view-branch-context.mjs +10 -0
- package/tree-view/tree-view-branch-control.cjs +3 -7
- package/tree-view/tree-view-branch-control.d.ts +1 -3
- package/tree-view/tree-view-branch-control.mjs +3 -7
- package/tree-view/tree-view-branch-indicator.cjs +4 -7
- package/tree-view/tree-view-branch-indicator.d.ts +1 -3
- package/tree-view/tree-view-branch-indicator.mjs +4 -7
- package/tree-view/tree-view-branch-text.cjs +3 -7
- package/tree-view/tree-view-branch-text.d.ts +1 -3
- package/tree-view/tree-view-branch-text.mjs +3 -7
- package/tree-view/tree-view-branch-trigger.cjs +3 -7
- package/tree-view/tree-view-branch-trigger.d.ts +1 -3
- package/tree-view/tree-view-branch-trigger.mjs +3 -7
- package/tree-view/tree-view-branch.cjs +8 -5
- package/tree-view/tree-view-branch.d.ts +3 -2
- package/tree-view/tree-view-branch.mjs +8 -5
- package/tree-view/tree-view-context.d.ts +0 -16
- package/tree-view/tree-view-depth-context.cjs +17 -0
- package/tree-view/tree-view-depth-context.d.ts +4 -0
- package/tree-view/tree-view-depth-context.mjs +12 -0
- package/tree-view/tree-view-item-context.cjs +15 -0
- package/tree-view/tree-view-item-context.d.ts +8 -0
- package/tree-view/tree-view-item-context.mjs +10 -0
- package/tree-view/tree-view-item-indicator.cjs +23 -0
- package/tree-view/tree-view-item-indicator.d.ts +6 -0
- package/tree-view/tree-view-item-indicator.mjs +19 -0
- package/tree-view/tree-view-item-text.cjs +3 -12
- package/tree-view/tree-view-item-text.d.ts +1 -3
- package/tree-view/tree-view-item-text.mjs +3 -12
- package/tree-view/tree-view-item.cjs +6 -3
- package/tree-view/tree-view-item.d.ts +2 -1
- package/tree-view/tree-view-item.mjs +6 -3
- package/tree-view/tree-view-root.cjs +2 -2
- package/tree-view/tree-view-root.mjs +2 -2
- package/tree-view/tree-view-tree.cjs +2 -1
- package/tree-view/tree-view-tree.mjs +2 -1
- package/tree-view/tree-view.cjs +2 -0
- package/tree-view/tree-view.d.ts +2 -1
- package/tree-view/tree-view.mjs +1 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { mergeProps } from '@zag-js/react';
|
|
4
|
+
import { forwardRef } from 'react';
|
|
5
|
+
import { createSplitProps } from '../create-split-props.mjs';
|
|
6
|
+
import { ark } from '../factory.mjs';
|
|
7
|
+
import { useDatePickerContext } from './date-picker-context.mjs';
|
|
8
|
+
|
|
9
|
+
const DatePickerPresetTrigger = forwardRef(
|
|
10
|
+
(props, ref) => {
|
|
11
|
+
const [presetTriggerProps, localProps] = createSplitProps()(props, [
|
|
12
|
+
"value"
|
|
13
|
+
]);
|
|
14
|
+
const api = useDatePickerContext();
|
|
15
|
+
const mergedProps = mergeProps(api.getPresetTriggerProps(presetTriggerProps), localProps);
|
|
16
|
+
return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
DatePickerPresetTrigger.displayName = "DatePickerPresetTrigger";
|
|
20
|
+
|
|
21
|
+
export { DatePickerPresetTrigger };
|
|
@@ -10,6 +10,7 @@ const datePickerLabel = require('./date-picker-label.cjs');
|
|
|
10
10
|
const datePickerMonthSelect = require('./date-picker-month-select.cjs');
|
|
11
11
|
const datePickerNextTrigger = require('./date-picker-next-trigger.cjs');
|
|
12
12
|
const datePickerPositioner = require('./date-picker-positioner.cjs');
|
|
13
|
+
const datePickerPresetTrigger = require('./date-picker-preset-trigger.cjs');
|
|
13
14
|
const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
|
|
14
15
|
const datePickerRangeText = require('./date-picker-range-text.cjs');
|
|
15
16
|
const datePickerRoot = require('./date-picker-root.cjs');
|
|
@@ -36,6 +37,7 @@ exports.Label = datePickerLabel.DatePickerLabel;
|
|
|
36
37
|
exports.MonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
|
|
37
38
|
exports.NextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
|
|
38
39
|
exports.Positioner = datePickerPositioner.DatePickerPositioner;
|
|
40
|
+
exports.PresetTrigger = datePickerPresetTrigger.DatePickerPresetTrigger;
|
|
39
41
|
exports.PrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
|
|
40
42
|
exports.RangeText = datePickerRangeText.DatePickerRangeText;
|
|
41
43
|
exports.Root = datePickerRoot.DatePickerRoot;
|
|
@@ -6,6 +6,7 @@ import { DatePickerLabel as Label } from './date-picker-label';
|
|
|
6
6
|
import { DatePickerMonthSelect as MonthSelect } from './date-picker-month-select';
|
|
7
7
|
import { DatePickerNextTrigger as NextTrigger } from './date-picker-next-trigger';
|
|
8
8
|
import { DatePickerPositioner as Positioner } from './date-picker-positioner';
|
|
9
|
+
import { DatePickerPresetTrigger as PresetTrigger } from './date-picker-preset-trigger';
|
|
9
10
|
import { DatePickerPrevTrigger as PrevTrigger } from './date-picker-prev-trigger';
|
|
10
11
|
import { DatePickerRangeText as RangeText } from './date-picker-range-text';
|
|
11
12
|
import { DatePickerRoot as Root } from './date-picker-root';
|
|
@@ -21,4 +22,4 @@ import { DatePickerView as View } from './date-picker-view';
|
|
|
21
22
|
import { DatePickerViewControl as ViewControl } from './date-picker-view-control';
|
|
22
23
|
import { DatePickerViewTrigger as ViewTrigger } from './date-picker-view-trigger';
|
|
23
24
|
import { DatePickerYearSelect as YearSelect } from './date-picker-year-select';
|
|
24
|
-
export { ClearTrigger, Content, Control, Input, Label, MonthSelect, NextTrigger, Positioner, PrevTrigger, RangeText, Root, Table, TableBody, TableCell, TableCellTrigger, TableHead, TableHeader, TableRow, Trigger, View, ViewControl, ViewTrigger, YearSelect, };
|
|
25
|
+
export { ClearTrigger, Content, Control, Input, Label, MonthSelect, NextTrigger, Positioner, PresetTrigger, PrevTrigger, RangeText, Root, Table, TableBody, TableCell, TableCellTrigger, TableHead, TableHeader, TableRow, Trigger, View, ViewControl, ViewTrigger, YearSelect, };
|
|
@@ -6,6 +6,7 @@ export { DatePickerLabel as Label } from './date-picker-label.mjs';
|
|
|
6
6
|
export { DatePickerMonthSelect as MonthSelect } from './date-picker-month-select.mjs';
|
|
7
7
|
export { DatePickerNextTrigger as NextTrigger } from './date-picker-next-trigger.mjs';
|
|
8
8
|
export { DatePickerPositioner as Positioner } from './date-picker-positioner.mjs';
|
|
9
|
+
export { DatePickerPresetTrigger as PresetTrigger } from './date-picker-preset-trigger.mjs';
|
|
9
10
|
export { DatePickerPrevTrigger as PrevTrigger } from './date-picker-prev-trigger.mjs';
|
|
10
11
|
export { DatePickerRangeText as RangeText } from './date-picker-range-text.mjs';
|
|
11
12
|
export { DatePickerRoot as Root } from './date-picker-root.mjs';
|
package/date-picker/index.cjs
CHANGED
|
@@ -11,6 +11,7 @@ const datePickerLabel = require('./date-picker-label.cjs');
|
|
|
11
11
|
const datePickerMonthSelect = require('./date-picker-month-select.cjs');
|
|
12
12
|
const datePickerNextTrigger = require('./date-picker-next-trigger.cjs');
|
|
13
13
|
const datePickerPositioner = require('./date-picker-positioner.cjs');
|
|
14
|
+
const datePickerPresetTrigger = require('./date-picker-preset-trigger.cjs');
|
|
14
15
|
const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
|
|
15
16
|
const datePickerRangeText = require('./date-picker-range-text.cjs');
|
|
16
17
|
const datePickerRoot = require('./date-picker-root.cjs');
|
|
@@ -42,6 +43,7 @@ exports.DatePickerLabel = datePickerLabel.DatePickerLabel;
|
|
|
42
43
|
exports.DatePickerMonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
|
|
43
44
|
exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
|
|
44
45
|
exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
|
|
46
|
+
exports.DatePickerPresetTrigger = datePickerPresetTrigger.DatePickerPresetTrigger;
|
|
45
47
|
exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
|
|
46
48
|
exports.DatePickerRangeText = datePickerRangeText.DatePickerRangeText;
|
|
47
49
|
exports.DatePickerRoot = datePickerRoot.DatePickerRoot;
|
package/date-picker/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ import { DatePickerLabel, type DatePickerLabelProps } from './date-picker-label'
|
|
|
8
8
|
import { DatePickerMonthSelect, type DatePickerMonthSelectProps } from './date-picker-month-select';
|
|
9
9
|
import { DatePickerNextTrigger, type DatePickerNextTriggerProps } from './date-picker-next-trigger';
|
|
10
10
|
import { DatePickerPositioner, type DatePickerPositionerProps } from './date-picker-positioner';
|
|
11
|
+
import { DatePickerPresetTrigger, type DatePickerPresetTriggerProps } from './date-picker-preset-trigger';
|
|
11
12
|
import { DatePickerPrevTrigger, type DatePickerPrevTriggerProps } from './date-picker-prev-trigger';
|
|
12
13
|
import { DatePickerRangeText, type DatePickerRangeTextProps } from './date-picker-range-text';
|
|
13
14
|
import { DatePickerRoot, type DatePickerRootProps } from './date-picker-root';
|
|
@@ -27,5 +28,5 @@ import { DatePickerViewControl, type DatePickerViewControlProps } from './date-p
|
|
|
27
28
|
import { DatePickerViewTrigger, type DatePickerViewTriggerProps } from './date-picker-view-trigger';
|
|
28
29
|
import { DatePickerYearSelect, type DatePickerYearSelectProps } from './date-picker-year-select';
|
|
29
30
|
export * as DatePicker from './date-picker';
|
|
30
|
-
export { DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
|
|
31
|
-
export type { DatePickerClearTriggerProps, DatePickerContentProps, DatePickerContext, DatePickerControlProps, DatePickerFocusChangeDetails, DatePickerInputProps, DatePickerLabelProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerOpenChangeDetails, DatePickerPositionerProps, DatePickerPrevTriggerProps, DatePickerRangeTextProps, DatePickerRootProps, DatePickerTableBodyProps, DatePickerTableCellContext, DatePickerTableCellProps, DatePickerTableCellTriggerProps, DatePickerTableContext, DatePickerTableHeadProps, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRowProps, DatePickerTriggerProps, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerViewContext, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTriggerProps, DatePickerYearSelectProps, };
|
|
31
|
+
export { DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
|
|
32
|
+
export type { DatePickerClearTriggerProps, DatePickerContentProps, DatePickerContext, DatePickerControlProps, DatePickerFocusChangeDetails, DatePickerInputProps, DatePickerLabelProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerOpenChangeDetails, DatePickerPositionerProps, DatePickerPresetTriggerProps, DatePickerPrevTriggerProps, DatePickerRangeTextProps, DatePickerRootProps, DatePickerTableBodyProps, DatePickerTableCellContext, DatePickerTableCellProps, DatePickerTableCellTriggerProps, DatePickerTableContext, DatePickerTableHeadProps, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRowProps, DatePickerTriggerProps, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerViewContext, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTriggerProps, DatePickerYearSelectProps, };
|
package/date-picker/index.mjs
CHANGED
|
@@ -7,6 +7,7 @@ export { DatePickerLabel } from './date-picker-label.mjs';
|
|
|
7
7
|
export { DatePickerMonthSelect } from './date-picker-month-select.mjs';
|
|
8
8
|
export { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
|
|
9
9
|
export { DatePickerPositioner } from './date-picker-positioner.mjs';
|
|
10
|
+
export { DatePickerPresetTrigger } from './date-picker-preset-trigger.mjs';
|
|
10
11
|
export { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
|
|
11
12
|
export { DatePickerRangeText } from './date-picker-range-text.mjs';
|
|
12
13
|
export { DatePickerRoot } from './date-picker-root.mjs';
|
|
@@ -34,7 +34,8 @@ const useDatePicker = (props = {}) => {
|
|
|
34
34
|
getRootNode: environmentContext.useEnvironmentContext(),
|
|
35
35
|
...props,
|
|
36
36
|
focusedValue: props.focusedValue ? datePicker__namespace.parse(props.focusedValue) : void 0,
|
|
37
|
-
value: props.defaultValue ? datePicker__namespace.parse(props.defaultValue) : void 0
|
|
37
|
+
value: props.defaultValue ? datePicker__namespace.parse(props.defaultValue) : void 0,
|
|
38
|
+
"open.controlled": props.open !== void 0
|
|
38
39
|
};
|
|
39
40
|
const context = {
|
|
40
41
|
...initialContext,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as datePicker from '@zag-js/date-picker';
|
|
2
2
|
import { type PropTypes } from '@zag-js/react';
|
|
3
3
|
import type { Optional } from '../types';
|
|
4
|
-
export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'value' | 'focusedValue'>, 'id'> {
|
|
4
|
+
export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'value' | 'focusedValue' | 'open.controlled'>, 'id'> {
|
|
5
5
|
/**
|
|
6
6
|
* The initial value of the date picker
|
|
7
7
|
*/
|
|
@@ -11,7 +11,8 @@ const useDatePicker = (props = {}) => {
|
|
|
11
11
|
getRootNode: useEnvironmentContext(),
|
|
12
12
|
...props,
|
|
13
13
|
focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : void 0,
|
|
14
|
-
value: props.defaultValue ? datePicker.parse(props.defaultValue) : void 0
|
|
14
|
+
value: props.defaultValue ? datePicker.parse(props.defaultValue) : void 0,
|
|
15
|
+
"open.controlled": props.open !== void 0
|
|
15
16
|
};
|
|
16
17
|
const context = {
|
|
17
18
|
...initialContext,
|
package/dialog/dialog-root.cjs
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
5
|
|
|
6
6
|
const jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
const
|
|
7
|
+
const react = require('@zag-js/react');
|
|
8
8
|
require('react');
|
|
9
9
|
const presenceContext = require('../presence/presence-context.cjs');
|
|
10
10
|
const presencePropsContext = require('../presence/presence-props-context.cjs');
|
|
@@ -17,7 +17,7 @@ const useDialog = require('./use-dialog.cjs');
|
|
|
17
17
|
const DialogRoot = (props) => {
|
|
18
18
|
const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
|
|
19
19
|
const api = useDialog.useDialog(localProps);
|
|
20
|
-
const presenceApi = usePresence.usePresence(
|
|
20
|
+
const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
|
|
21
21
|
const view = runIfFn.runIfFn(children, api);
|
|
22
22
|
return /* @__PURE__ */ jsxRuntime.jsx(dialogContext.DialogProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) });
|
|
23
23
|
};
|
package/dialog/dialog-root.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { mergeProps } from '@zag-js/
|
|
3
|
+
import { mergeProps } from '@zag-js/react';
|
|
4
4
|
import 'react';
|
|
5
5
|
import { PresenceProvider } from '../presence/presence-context.mjs';
|
|
6
6
|
import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
|
package/dialog/use-dialog.cjs
CHANGED
|
@@ -33,7 +33,8 @@ const useDialog = (props = {}) => {
|
|
|
33
33
|
id: react.useId(),
|
|
34
34
|
getRootNode: environmentContext.useEnvironmentContext(),
|
|
35
35
|
...props,
|
|
36
|
-
open: props.defaultOpen ?? props.open
|
|
36
|
+
open: props.defaultOpen ?? props.open,
|
|
37
|
+
"open.controlled": props.open !== void 0
|
|
37
38
|
};
|
|
38
39
|
const context = {
|
|
39
40
|
...initialContext,
|
package/dialog/use-dialog.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as dialog from '@zag-js/dialog';
|
|
2
2
|
import { type PropTypes } from '@zag-js/react';
|
|
3
3
|
import { type Optional } from '../types';
|
|
4
|
-
export interface UseDialogProps extends Optional<dialog.Context, 'id'> {
|
|
4
|
+
export interface UseDialogProps extends Omit<Optional<dialog.Context, 'id'>, 'open.controlled'> {
|
|
5
5
|
/**
|
|
6
6
|
* The initial open state of the dialog.
|
|
7
7
|
*/
|
package/dialog/use-dialog.mjs
CHANGED
|
@@ -10,7 +10,8 @@ const useDialog = (props = {}) => {
|
|
|
10
10
|
id: useId(),
|
|
11
11
|
getRootNode: useEnvironmentContext(),
|
|
12
12
|
...props,
|
|
13
|
-
open: props.defaultOpen ?? props.open
|
|
13
|
+
open: props.defaultOpen ?? props.open,
|
|
14
|
+
"open.controlled": props.open !== void 0
|
|
14
15
|
};
|
|
15
16
|
const context = {
|
|
16
17
|
...initialContext,
|
package/factory.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const react$1 = require('@zag-js/react');
|
|
6
6
|
const react = require('react');
|
|
7
7
|
const composeRefs = require('./compose-refs.cjs');
|
|
8
8
|
|
|
@@ -14,7 +14,7 @@ const withAsChild = (Component) => {
|
|
|
14
14
|
}
|
|
15
15
|
const onlyChild = react.Children.only(children);
|
|
16
16
|
return react.isValidElement(onlyChild) ? react.cloneElement(onlyChild, {
|
|
17
|
-
...
|
|
17
|
+
...react$1.mergeProps(restProps, onlyChild.props),
|
|
18
18
|
ref: ref ? composeRefs.composeRefs(ref, onlyChild.ref) : onlyChild.ref
|
|
19
19
|
}) : null;
|
|
20
20
|
});
|
package/factory.mjs
CHANGED
|
@@ -33,7 +33,8 @@ const useHoverCard = (props = {}) => {
|
|
|
33
33
|
id: react.useId(),
|
|
34
34
|
getRootNode: environmentContext.useEnvironmentContext(),
|
|
35
35
|
...props,
|
|
36
|
-
open: props.defaultOpen ?? props.open
|
|
36
|
+
open: props.defaultOpen ?? props.open,
|
|
37
|
+
"open.controlled": props.open !== void 0
|
|
37
38
|
};
|
|
38
39
|
const context = {
|
|
39
40
|
...initialContext,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as hoverCard from '@zag-js/hover-card';
|
|
2
2
|
import { type PropTypes } from '@zag-js/react';
|
|
3
3
|
import { type Optional } from '../types';
|
|
4
|
-
export interface UseHoverCardProps extends Optional<hoverCard.Context, 'id'> {
|
|
4
|
+
export interface UseHoverCardProps extends Omit<Optional<hoverCard.Context, 'id'>, 'open.controlled'> {
|
|
5
5
|
/**
|
|
6
6
|
* The initial open state of the hover card.
|
|
7
7
|
*/
|
|
@@ -10,7 +10,8 @@ const useHoverCard = (props = {}) => {
|
|
|
10
10
|
id: useId(),
|
|
11
11
|
getRootNode: useEnvironmentContext(),
|
|
12
12
|
...props,
|
|
13
|
-
open: props.defaultOpen ?? props.open
|
|
13
|
+
open: props.defaultOpen ?? props.open,
|
|
14
|
+
"open.controlled": props.open !== void 0
|
|
14
15
|
};
|
|
15
16
|
const context = {
|
|
16
17
|
...initialContext,
|
package/index.cjs
CHANGED
|
@@ -83,6 +83,7 @@ const datePickerLabel = require('./date-picker/date-picker-label.cjs');
|
|
|
83
83
|
const datePickerMonthSelect = require('./date-picker/date-picker-month-select.cjs');
|
|
84
84
|
const datePickerNextTrigger = require('./date-picker/date-picker-next-trigger.cjs');
|
|
85
85
|
const datePickerPositioner = require('./date-picker/date-picker-positioner.cjs');
|
|
86
|
+
const datePickerPresetTrigger = require('./date-picker/date-picker-preset-trigger.cjs');
|
|
86
87
|
const datePickerPrevTrigger = require('./date-picker/date-picker-prev-trigger.cjs');
|
|
87
88
|
const datePickerRangeText = require('./date-picker/date-picker-range-text.cjs');
|
|
88
89
|
const datePickerRoot = require('./date-picker/date-picker-root.cjs');
|
|
@@ -147,6 +148,8 @@ const hoverCardPositioner = require('./hover-card/hover-card-positioner.cjs');
|
|
|
147
148
|
const hoverCardRoot = require('./hover-card/hover-card-root.cjs');
|
|
148
149
|
const hoverCardTrigger = require('./hover-card/hover-card-trigger.cjs');
|
|
149
150
|
const hoverCard = require('./hover-card/hover-card.cjs');
|
|
151
|
+
const locale = require('./locale/locale.cjs');
|
|
152
|
+
const localeContext = require('./locale/locale-context.cjs');
|
|
150
153
|
const menuArrow = require('./menu/menu-arrow.cjs');
|
|
151
154
|
const menuArrowTip = require('./menu/menu-arrow-tip.cjs');
|
|
152
155
|
const menuContent = require('./menu/menu-content.cjs');
|
|
@@ -325,11 +328,20 @@ const treeViewBranchText = require('./tree-view/tree-view-branch-text.cjs');
|
|
|
325
328
|
const treeViewBranchTrigger = require('./tree-view/tree-view-branch-trigger.cjs');
|
|
326
329
|
const treeViewContext = require('./tree-view/tree-view-context.cjs');
|
|
327
330
|
const treeViewItem = require('./tree-view/tree-view-item.cjs');
|
|
331
|
+
const treeViewItemIndicator = require('./tree-view/tree-view-item-indicator.cjs');
|
|
328
332
|
const treeViewItemText = require('./tree-view/tree-view-item-text.cjs');
|
|
329
333
|
const treeViewLabel = require('./tree-view/tree-view-label.cjs');
|
|
330
334
|
const treeViewRoot = require('./tree-view/tree-view-root.cjs');
|
|
331
335
|
const treeViewTree = require('./tree-view/tree-view-tree.cjs');
|
|
332
336
|
const treeView = require('./tree-view/tree-view.cjs');
|
|
337
|
+
const clipboard = require('./clipboard/clipboard.cjs');
|
|
338
|
+
const clipboardControl = require('./clipboard/clipboard-control.cjs');
|
|
339
|
+
const clipboardIndicator = require('./clipboard/clipboard-indicator.cjs');
|
|
340
|
+
const clipboardInput = require('./clipboard/clipboard-input.cjs');
|
|
341
|
+
const clipboardLabel = require('./clipboard/clipboard-label.cjs');
|
|
342
|
+
const clipboardRoot = require('./clipboard/clipboard-root.cjs');
|
|
343
|
+
const clipboardTrigger = require('./clipboard/clipboard-trigger.cjs');
|
|
344
|
+
const clipboardContext = require('./clipboard/clipboard-context.cjs');
|
|
333
345
|
|
|
334
346
|
|
|
335
347
|
|
|
@@ -414,6 +426,7 @@ exports.DatePickerLabel = datePickerLabel.DatePickerLabel;
|
|
|
414
426
|
exports.DatePickerMonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
|
|
415
427
|
exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
|
|
416
428
|
exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
|
|
429
|
+
exports.DatePickerPresetTrigger = datePickerPresetTrigger.DatePickerPresetTrigger;
|
|
417
430
|
exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
|
|
418
431
|
exports.DatePickerRangeText = datePickerRangeText.DatePickerRangeText;
|
|
419
432
|
exports.DatePickerRoot = datePickerRoot.DatePickerRoot;
|
|
@@ -479,6 +492,8 @@ exports.HoverCardPositioner = hoverCardPositioner.HoverCardPositioner;
|
|
|
479
492
|
exports.HoverCardRoot = hoverCardRoot.HoverCardRoot;
|
|
480
493
|
exports.HoverCardTrigger = hoverCardTrigger.HoverCardTrigger;
|
|
481
494
|
exports.HoverCard = hoverCard;
|
|
495
|
+
exports.LocaleProvider = locale.LocaleProvider;
|
|
496
|
+
exports.useLocaleContext = localeContext.useLocaleContext;
|
|
482
497
|
exports.MenuArrow = menuArrow.MenuArrow;
|
|
483
498
|
exports.MenuArrowTip = menuArrowTip.MenuArrowTip;
|
|
484
499
|
exports.MenuContent = menuContent.MenuContent;
|
|
@@ -659,8 +674,17 @@ exports.TreeViewBranchText = treeViewBranchText.TreeViewBranchText;
|
|
|
659
674
|
exports.TreeViewBranchTrigger = treeViewBranchTrigger.TreeViewBranchTrigger;
|
|
660
675
|
exports.useTreeViewContext = treeViewContext.useTreeViewContext;
|
|
661
676
|
exports.TreeViewItem = treeViewItem.TreeViewItem;
|
|
677
|
+
exports.TreeViewItemIndicator = treeViewItemIndicator.TreeViewItemIndicator;
|
|
662
678
|
exports.TreeViewItemText = treeViewItemText.TreeViewItemText;
|
|
663
679
|
exports.TreeViewLabel = treeViewLabel.TreeViewLabel;
|
|
664
680
|
exports.TreeViewRoot = treeViewRoot.TreeViewRoot;
|
|
665
681
|
exports.TreeViewTree = treeViewTree.TreeViewTree;
|
|
666
682
|
exports.TreeView = treeView;
|
|
683
|
+
exports.Clipboard = clipboard;
|
|
684
|
+
exports.ClipboardControl = clipboardControl.ClipboardControl;
|
|
685
|
+
exports.ClipboardIndicator = clipboardIndicator.ClipboardIndicator;
|
|
686
|
+
exports.ClipboardInput = clipboardInput.ClipboardInput;
|
|
687
|
+
exports.ClipboardLabel = clipboardLabel.ClipboardLabel;
|
|
688
|
+
exports.ClipboardRoot = clipboardRoot.ClipboardRoot;
|
|
689
|
+
exports.ClipboardTrigger = clipboardTrigger.ClipboardTrigger;
|
|
690
|
+
exports.useClipboardContext = clipboardContext.useClipboardContext;
|
package/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from './accordion';
|
|
|
2
2
|
export * from './avatar';
|
|
3
3
|
export * from './carousel';
|
|
4
4
|
export * from './checkbox';
|
|
5
|
+
export * from './clipboard';
|
|
5
6
|
export * from './color-picker';
|
|
6
7
|
export * from './combobox';
|
|
7
8
|
export * from './date-picker';
|
|
@@ -11,6 +12,7 @@ export * from './environment';
|
|
|
11
12
|
export * from './factory';
|
|
12
13
|
export * from './file-upload';
|
|
13
14
|
export * from './hover-card';
|
|
15
|
+
export * from './locale';
|
|
14
16
|
export * from './menu';
|
|
15
17
|
export * from './number-input';
|
|
16
18
|
export * from './pagination';
|
package/index.mjs
CHANGED
|
@@ -85,6 +85,7 @@ export { DatePickerLabel } from './date-picker/date-picker-label.mjs';
|
|
|
85
85
|
export { DatePickerMonthSelect } from './date-picker/date-picker-month-select.mjs';
|
|
86
86
|
export { DatePickerNextTrigger } from './date-picker/date-picker-next-trigger.mjs';
|
|
87
87
|
export { DatePickerPositioner } from './date-picker/date-picker-positioner.mjs';
|
|
88
|
+
export { DatePickerPresetTrigger } from './date-picker/date-picker-preset-trigger.mjs';
|
|
88
89
|
export { DatePickerPrevTrigger } from './date-picker/date-picker-prev-trigger.mjs';
|
|
89
90
|
export { DatePickerRangeText } from './date-picker/date-picker-range-text.mjs';
|
|
90
91
|
export { DatePickerRoot } from './date-picker/date-picker-root.mjs';
|
|
@@ -154,6 +155,8 @@ export { HoverCardRoot } from './hover-card/hover-card-root.mjs';
|
|
|
154
155
|
export { HoverCardTrigger } from './hover-card/hover-card-trigger.mjs';
|
|
155
156
|
import * as hoverCard from './hover-card/hover-card.mjs';
|
|
156
157
|
export { hoverCard as HoverCard };
|
|
158
|
+
export { LocaleProvider } from './locale/locale.mjs';
|
|
159
|
+
export { useLocaleContext } from './locale/locale-context.mjs';
|
|
157
160
|
export { MenuArrow } from './menu/menu-arrow.mjs';
|
|
158
161
|
export { MenuArrowTip } from './menu/menu-arrow-tip.mjs';
|
|
159
162
|
export { MenuContent } from './menu/menu-content.mjs';
|
|
@@ -350,9 +353,19 @@ export { TreeViewBranchText } from './tree-view/tree-view-branch-text.mjs';
|
|
|
350
353
|
export { TreeViewBranchTrigger } from './tree-view/tree-view-branch-trigger.mjs';
|
|
351
354
|
export { useTreeViewContext } from './tree-view/tree-view-context.mjs';
|
|
352
355
|
export { TreeViewItem } from './tree-view/tree-view-item.mjs';
|
|
356
|
+
export { TreeViewItemIndicator } from './tree-view/tree-view-item-indicator.mjs';
|
|
353
357
|
export { TreeViewItemText } from './tree-view/tree-view-item-text.mjs';
|
|
354
358
|
export { TreeViewLabel } from './tree-view/tree-view-label.mjs';
|
|
355
359
|
export { TreeViewRoot } from './tree-view/tree-view-root.mjs';
|
|
356
360
|
export { TreeViewTree } from './tree-view/tree-view-tree.mjs';
|
|
357
361
|
import * as treeView from './tree-view/tree-view.mjs';
|
|
358
362
|
export { treeView as TreeView };
|
|
363
|
+
import * as clipboard from './clipboard/clipboard.mjs';
|
|
364
|
+
export { clipboard as Clipboard };
|
|
365
|
+
export { ClipboardControl } from './clipboard/clipboard-control.mjs';
|
|
366
|
+
export { ClipboardIndicator } from './clipboard/clipboard-indicator.mjs';
|
|
367
|
+
export { ClipboardInput } from './clipboard/clipboard-input.mjs';
|
|
368
|
+
export { ClipboardLabel } from './clipboard/clipboard-label.mjs';
|
|
369
|
+
export { ClipboardRoot } from './clipboard/clipboard-root.mjs';
|
|
370
|
+
export { ClipboardTrigger } from './clipboard/clipboard-trigger.mjs';
|
|
371
|
+
export { useClipboardContext } from './clipboard/clipboard-context.mjs';
|
package/locale/index.cjs
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const locale = require('./locale.cjs');
|
|
6
|
+
const localeContext = require('./locale-context.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.LocaleProvider = locale.LocaleProvider;
|
|
11
|
+
exports.useLocaleContext = localeContext.useLocaleContext;
|
package/locale/index.mjs
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
5
|
+
|
|
6
|
+
require('@zag-js/i18n-utils');
|
|
7
|
+
const createContext = require('../create-context.cjs');
|
|
8
|
+
|
|
9
|
+
const [LocaleContextProvider, useLocaleContext] = createContext.createContext({
|
|
10
|
+
name: "EnvironmentContext",
|
|
11
|
+
hookName: "useEnvironmentContext",
|
|
12
|
+
providerName: "<EnvironmentProvider />",
|
|
13
|
+
strict: false,
|
|
14
|
+
defaultValue: { dir: "ltr", locale: "en-US" }
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
exports.LocaleContextProvider = LocaleContextProvider;
|
|
18
|
+
exports.useLocaleContext = useLocaleContext;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Provider } from 'react';
|
|
2
|
+
/// <reference types="react" />
|
|
3
|
+
import { type Locale } from '@zag-js/i18n-utils';
|
|
4
|
+
export interface LocaleContext extends Locale {
|
|
5
|
+
}
|
|
6
|
+
export declare const LocaleContextProvider: Provider<LocaleContext>, useLocaleContext: () => LocaleContext;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import '@zag-js/i18n-utils';
|
|
3
|
+
import { createContext } from '../create-context.mjs';
|
|
4
|
+
|
|
5
|
+
const [LocaleContextProvider, useLocaleContext] = createContext({
|
|
6
|
+
name: "EnvironmentContext",
|
|
7
|
+
hookName: "useEnvironmentContext",
|
|
8
|
+
providerName: "<EnvironmentProvider />",
|
|
9
|
+
strict: false,
|
|
10
|
+
defaultValue: { dir: "ltr", locale: "en-US" }
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
export { LocaleContextProvider, useLocaleContext };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
const i18nUtils = require('@zag-js/i18n-utils');
|
|
7
|
+
const react = require('react');
|
|
8
|
+
const environmentContext = require('../environment/environment-context.cjs');
|
|
9
|
+
const localeContext = require('./locale-context.cjs');
|
|
10
|
+
|
|
11
|
+
const LocaleProvider = (props) => {
|
|
12
|
+
const { children, locale: localeProps, defaultLocale = "en-US" } = props;
|
|
13
|
+
const [locale, setLocale] = react.useState(localeProps || defaultLocale);
|
|
14
|
+
const getRootNode = environmentContext.useEnvironmentContext();
|
|
15
|
+
react.useEffect(
|
|
16
|
+
() => i18nUtils.trackLocale({
|
|
17
|
+
locale: localeProps,
|
|
18
|
+
getRootNode,
|
|
19
|
+
onLocaleChange(locale2) {
|
|
20
|
+
setLocale(locale2.locale);
|
|
21
|
+
}
|
|
22
|
+
})
|
|
23
|
+
);
|
|
24
|
+
const context = {
|
|
25
|
+
locale,
|
|
26
|
+
dir: i18nUtils.isRTL(locale) ? "rtl" : "ltr"
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ jsxRuntime.jsx(localeContext.LocaleContextProvider, { value: context, children });
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
exports.LocaleProvider = LocaleProvider;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { JSX } from 'react/jsx-runtime';
|
|
2
|
+
/// <reference types="react" />
|
|
3
|
+
import { type LocaleOptions } from '@zag-js/i18n-utils';
|
|
4
|
+
export interface LocaleProviderProps extends LocaleOptions {
|
|
5
|
+
/**
|
|
6
|
+
* The default locale to use if no locale is provided via props.
|
|
7
|
+
*/
|
|
8
|
+
defaultLocale?: string;
|
|
9
|
+
/**
|
|
10
|
+
* The children to render.
|
|
11
|
+
*/
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export declare const LocaleProvider: (props: LocaleProviderProps) => JSX.Element;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { trackLocale, isRTL } from '@zag-js/i18n-utils';
|
|
3
|
+
import { useState, useEffect } from 'react';
|
|
4
|
+
import { useEnvironmentContext } from '../environment/environment-context.mjs';
|
|
5
|
+
import { LocaleContextProvider } from './locale-context.mjs';
|
|
6
|
+
|
|
7
|
+
const LocaleProvider = (props) => {
|
|
8
|
+
const { children, locale: localeProps, defaultLocale = "en-US" } = props;
|
|
9
|
+
const [locale, setLocale] = useState(localeProps || defaultLocale);
|
|
10
|
+
const getRootNode = useEnvironmentContext();
|
|
11
|
+
useEffect(
|
|
12
|
+
() => trackLocale({
|
|
13
|
+
locale: localeProps,
|
|
14
|
+
getRootNode,
|
|
15
|
+
onLocaleChange(locale2) {
|
|
16
|
+
setLocale(locale2.locale);
|
|
17
|
+
}
|
|
18
|
+
})
|
|
19
|
+
);
|
|
20
|
+
const context = {
|
|
21
|
+
locale,
|
|
22
|
+
dir: isRTL(locale) ? "rtl" : "ltr"
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ jsx(LocaleContextProvider, { value: context, children });
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { LocaleProvider };
|
package/menu/use-menu.cjs
CHANGED
|
@@ -35,7 +35,8 @@ const useMenu = (props = {}) => {
|
|
|
35
35
|
...props,
|
|
36
36
|
onOpenChange: useEvent.useEvent(props.onOpenChange),
|
|
37
37
|
onSelect: useEvent.useEvent(props.onSelect),
|
|
38
|
-
onValueChange: useEvent.useEvent(props.onValueChange, { sync: true })
|
|
38
|
+
onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
|
|
39
|
+
"open.controlled": props.open !== void 0
|
|
39
40
|
};
|
|
40
41
|
const [state, send, machine] = react$1.useMachine(menu__namespace.machine(context), { context });
|
|
41
42
|
const api = menu__namespace.connect(state, send, react$1.normalizeProps);
|
package/menu/use-menu.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as menu from '@zag-js/menu';
|
|
2
2
|
import { type Optional } from '../types';
|
|
3
|
-
export interface UseMenuProps extends Optional<menu.Context, 'id'> {
|
|
3
|
+
export interface UseMenuProps extends Omit<Optional<menu.Context, 'id'>, 'open.controlled'> {
|
|
4
4
|
}
|
|
5
5
|
export interface UseMenuReturn {
|
|
6
6
|
machine: ReturnType<typeof menu.machine>;
|
package/menu/use-menu.mjs
CHANGED
|
@@ -12,7 +12,8 @@ const useMenu = (props = {}) => {
|
|
|
12
12
|
...props,
|
|
13
13
|
onOpenChange: useEvent(props.onOpenChange),
|
|
14
14
|
onSelect: useEvent(props.onSelect),
|
|
15
|
-
onValueChange: useEvent(props.onValueChange, { sync: true })
|
|
15
|
+
onValueChange: useEvent(props.onValueChange, { sync: true }),
|
|
16
|
+
"open.controlled": props.open !== void 0
|
|
16
17
|
};
|
|
17
18
|
const [state, send, machine] = useMachine(menu.machine(context), { context });
|
|
18
19
|
const api = menu.connect(state, send, normalizeProps);
|