@cdx-ui/primitives 0.1.5 → 0.1.7
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/lib/commonjs/dialog/DialogContent.js +13 -5
- package/lib/commonjs/dialog/DialogContent.js.map +1 -1
- package/lib/commonjs/dialog/DialogPopup.js +7 -1
- package/lib/commonjs/dialog/DialogPopup.js.map +1 -1
- package/lib/commonjs/dialog/DialogRoot.js +3 -1
- package/lib/commonjs/dialog/DialogRoot.js.map +1 -1
- package/lib/commonjs/index.js +12 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/portal/portal.js +4 -2
- package/lib/commonjs/portal/portal.js.map +1 -1
- package/lib/commonjs/select/SelectContent.js +1 -0
- package/lib/commonjs/select/SelectContent.js.map +1 -1
- package/lib/commonjs/toggle-button/ToggleButtonGroup.js +185 -0
- package/lib/commonjs/toggle-button/ToggleButtonGroup.js.map +1 -0
- package/lib/commonjs/toggle-button/ToggleButtonRoot.js +131 -0
- package/lib/commonjs/toggle-button/ToggleButtonRoot.js.map +1 -0
- package/lib/commonjs/toggle-button/ToggleButtonRoot.web.js +180 -0
- package/lib/commonjs/toggle-button/ToggleButtonRoot.web.js.map +1 -0
- package/lib/commonjs/toggle-button/context.js +27 -0
- package/lib/commonjs/toggle-button/context.js.map +1 -0
- package/lib/commonjs/toggle-button/index.js +45 -0
- package/lib/commonjs/toggle-button/index.js.map +1 -0
- package/lib/commonjs/toggle-button/toggleState.js +23 -0
- package/lib/commonjs/toggle-button/toggleState.js.map +1 -0
- package/lib/commonjs/toggle-button/types.js +6 -0
- package/lib/commonjs/toggle-button/types.js.map +1 -0
- package/lib/commonjs/toggle-button/useToggleButtonGroupNavigation.js +80 -0
- package/lib/commonjs/toggle-button/useToggleButtonGroupNavigation.js.map +1 -0
- package/lib/module/dialog/DialogContent.js +13 -5
- package/lib/module/dialog/DialogContent.js.map +1 -1
- package/lib/module/dialog/DialogPopup.js +7 -1
- package/lib/module/dialog/DialogPopup.js.map +1 -1
- package/lib/module/dialog/DialogRoot.js +4 -2
- package/lib/module/dialog/DialogRoot.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/portal/portal.js +4 -2
- package/lib/module/portal/portal.js.map +1 -1
- package/lib/module/select/SelectContent.js +2 -1
- package/lib/module/select/SelectContent.js.map +1 -1
- package/lib/module/toggle-button/ToggleButtonGroup.js +181 -0
- package/lib/module/toggle-button/ToggleButtonGroup.js.map +1 -0
- package/lib/module/toggle-button/ToggleButtonRoot.js +127 -0
- package/lib/module/toggle-button/ToggleButtonRoot.js.map +1 -0
- package/lib/module/toggle-button/ToggleButtonRoot.web.js +176 -0
- package/lib/module/toggle-button/ToggleButtonRoot.web.js.map +1 -0
- package/lib/module/toggle-button/context.js +18 -0
- package/lib/module/toggle-button/context.js.map +1 -0
- package/lib/module/toggle-button/index.js +6 -0
- package/lib/module/toggle-button/index.js.map +1 -0
- package/lib/module/toggle-button/toggleState.js +19 -0
- package/lib/module/toggle-button/toggleState.js.map +1 -0
- package/lib/module/toggle-button/types.js +4 -0
- package/lib/module/toggle-button/types.js.map +1 -0
- package/lib/module/toggle-button/useToggleButtonGroupNavigation.js +75 -0
- package/lib/module/toggle-button/useToggleButtonGroupNavigation.js.map +1 -0
- package/lib/typescript/breadcrumbs/types.d.ts +13 -0
- package/lib/typescript/breadcrumbs/types.d.ts.map +1 -1
- package/lib/typescript/checkbox/types.d.ts +4 -0
- package/lib/typescript/checkbox/types.d.ts.map +1 -1
- package/lib/typescript/dialog/DialogContent.d.ts +1 -1
- package/lib/typescript/dialog/DialogContent.d.ts.map +1 -1
- package/lib/typescript/dialog/DialogPopup.d.ts.map +1 -1
- package/lib/typescript/dialog/DialogRoot.d.ts.map +1 -1
- package/lib/typescript/dialog/types.d.ts +12 -0
- package/lib/typescript/dialog/types.d.ts.map +1 -1
- package/lib/typescript/field/types.d.ts +1 -1
- package/lib/typescript/field/types.d.ts.map +1 -1
- package/lib/typescript/form/types.d.ts +6 -0
- package/lib/typescript/form/types.d.ts.map +1 -1
- package/lib/typescript/index.d.ts +1 -0
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/input/types.d.ts +1 -0
- package/lib/typescript/input/types.d.ts.map +1 -1
- package/lib/typescript/link/types.d.ts +2 -2
- package/lib/typescript/list-item/types.d.ts +3 -2
- package/lib/typescript/list-item/types.d.ts.map +1 -1
- package/lib/typescript/portal/portal.d.ts +13 -2
- package/lib/typescript/portal/portal.d.ts.map +1 -1
- package/lib/typescript/progress-bar/types.d.ts +9 -4
- package/lib/typescript/progress-bar/types.d.ts.map +1 -1
- package/lib/typescript/radio/types.d.ts +2 -0
- package/lib/typescript/radio/types.d.ts.map +1 -1
- package/lib/typescript/select/SelectContent.d.ts.map +1 -1
- package/lib/typescript/switch/types.d.ts +4 -4
- package/lib/typescript/tabs/types.d.ts +7 -2
- package/lib/typescript/tabs/types.d.ts.map +1 -1
- package/lib/typescript/toggle-button/ToggleButtonGroup.d.ts +5 -0
- package/lib/typescript/toggle-button/ToggleButtonGroup.d.ts.map +1 -0
- package/lib/typescript/toggle-button/ToggleButtonRoot.d.ts +5 -0
- package/lib/typescript/toggle-button/ToggleButtonRoot.d.ts.map +1 -0
- package/lib/typescript/toggle-button/ToggleButtonRoot.web.d.ts +5 -0
- package/lib/typescript/toggle-button/ToggleButtonRoot.web.d.ts.map +1 -0
- package/lib/typescript/toggle-button/context.d.ts +27 -0
- package/lib/typescript/toggle-button/context.d.ts.map +1 -0
- package/lib/typescript/toggle-button/index.d.ts +5 -0
- package/lib/typescript/toggle-button/index.d.ts.map +1 -0
- package/lib/typescript/toggle-button/toggleState.d.ts +14 -0
- package/lib/typescript/toggle-button/toggleState.d.ts.map +1 -0
- package/lib/typescript/toggle-button/types.d.ts +87 -0
- package/lib/typescript/toggle-button/types.d.ts.map +1 -0
- package/lib/typescript/toggle-button/useToggleButtonGroupNavigation.d.ts +19 -0
- package/lib/typescript/toggle-button/useToggleButtonGroupNavigation.d.ts.map +1 -0
- package/package.json +3 -3
- package/src/breadcrumbs/types.ts +13 -0
- package/src/checkbox/types.ts +4 -0
- package/src/dialog/DialogContent.tsx +13 -5
- package/src/dialog/DialogPopup.tsx +7 -1
- package/src/dialog/DialogRoot.tsx +3 -1
- package/src/dialog/types.ts +12 -0
- package/src/field/types.tsx +1 -1
- package/src/form/types.tsx +6 -0
- package/src/index.ts +1 -0
- package/src/input/types.ts +1 -0
- package/src/link/types.ts +2 -2
- package/src/list-item/types.ts +3 -2
- package/src/portal/portal.tsx +17 -2
- package/src/progress-bar/types.ts +9 -4
- package/src/radio/types.ts +2 -0
- package/src/select/SelectContent.tsx +2 -1
- package/src/switch/types.ts +4 -4
- package/src/tabs/types.ts +7 -2
- package/src/toggle-button/ToggleButtonGroup.tsx +260 -0
- package/src/toggle-button/ToggleButtonRoot.tsx +151 -0
- package/src/toggle-button/ToggleButtonRoot.web.tsx +225 -0
- package/src/toggle-button/context.tsx +30 -0
- package/src/toggle-button/index.ts +16 -0
- package/src/toggle-button/toggleState.ts +19 -0
- package/src/toggle-button/types.ts +94 -0
- package/src/toggle-button/useToggleButtonGroupNavigation.ts +112 -0
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ToggleButtonRoot = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _utils = require("@cdx-ui/utils");
|
|
10
|
+
var _focus = require("@react-native-aria/focus");
|
|
11
|
+
var _interactions = require("@react-native-aria/interactions");
|
|
12
|
+
var _slot = require("../slot");
|
|
13
|
+
var _dataAttributes = require("../utils/dataAttributes");
|
|
14
|
+
var _context = require("./context");
|
|
15
|
+
var _toggleState = require("./toggleState");
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
const ToggleButtonRoot = exports.ToggleButtonRoot = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
18
|
+
asChild = false,
|
|
19
|
+
value,
|
|
20
|
+
isSelected: controlledSelected,
|
|
21
|
+
defaultSelected,
|
|
22
|
+
onSelectedChange,
|
|
23
|
+
isDisabled: isDisabledProp = false,
|
|
24
|
+
children,
|
|
25
|
+
onPress,
|
|
26
|
+
onFocus,
|
|
27
|
+
onBlur,
|
|
28
|
+
style,
|
|
29
|
+
...rest
|
|
30
|
+
}, ref) => {
|
|
31
|
+
const group = (0, _context.useOptionalToggleButtonGroupContext)();
|
|
32
|
+
const [standaloneSelected = false, setStandaloneSelected] = (0, _utils.useControllableState)({
|
|
33
|
+
prop: controlledSelected,
|
|
34
|
+
defaultProp: defaultSelected ?? false,
|
|
35
|
+
onChange: next => {
|
|
36
|
+
onSelectedChange?.(next);
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
const isSelected = group ? group.isSelected(value) : standaloneSelected;
|
|
40
|
+
const isDisabled = (group?.isGroupDisabled ?? false) || isDisabledProp;
|
|
41
|
+
const {
|
|
42
|
+
focusProps,
|
|
43
|
+
isFocused
|
|
44
|
+
} = (0, _focus.useFocus)();
|
|
45
|
+
const {
|
|
46
|
+
isFocusVisible,
|
|
47
|
+
focusProps: focusRingProps
|
|
48
|
+
} = (0, _focus.useFocusRing)();
|
|
49
|
+
const {
|
|
50
|
+
pressProps,
|
|
51
|
+
isPressed
|
|
52
|
+
} = (0, _interactions.usePress)({
|
|
53
|
+
isDisabled
|
|
54
|
+
});
|
|
55
|
+
const {
|
|
56
|
+
hoverProps,
|
|
57
|
+
isHovered
|
|
58
|
+
} = (0, _interactions.useHover)();
|
|
59
|
+
const selectionType = group ? group.type : 'standalone';
|
|
60
|
+
const role = selectionType === 'single' ? 'radio' : 'button';
|
|
61
|
+
const accessibilityState = (0, _react.useMemo)(() => ({
|
|
62
|
+
disabled: isDisabled,
|
|
63
|
+
...(selectionType === 'single' ? {
|
|
64
|
+
checked: isSelected,
|
|
65
|
+
selected: isSelected
|
|
66
|
+
} : {
|
|
67
|
+
selected: isSelected
|
|
68
|
+
})
|
|
69
|
+
}), [isDisabled, isSelected, selectionType]);
|
|
70
|
+
const ariaProps = selectionType === 'single' ? {
|
|
71
|
+
'aria-checked': isSelected
|
|
72
|
+
} : {
|
|
73
|
+
'aria-pressed': isSelected
|
|
74
|
+
};
|
|
75
|
+
const toggleButtonContext = (0, _react.useMemo)(() => ({
|
|
76
|
+
value,
|
|
77
|
+
isSelected,
|
|
78
|
+
isDisabled,
|
|
79
|
+
selectionType,
|
|
80
|
+
hover: isHovered,
|
|
81
|
+
active: isPressed,
|
|
82
|
+
focus: isFocused,
|
|
83
|
+
focusVisible: isFocusVisible
|
|
84
|
+
}), [value, isSelected, isDisabled, selectionType, isHovered, isPressed, isFocused, isFocusVisible]);
|
|
85
|
+
const composedOnPress = (0, _utils.composeEventHandlers)(onPress, () => {
|
|
86
|
+
if (isDisabled) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
if (group) {
|
|
90
|
+
group.toggleValue(value);
|
|
91
|
+
} else {
|
|
92
|
+
setStandaloneSelected(!standaloneSelected);
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
const Comp = asChild ? _slot.Slot : _reactNative.Pressable;
|
|
96
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ToggleButtonProvider, {
|
|
97
|
+
value: toggleButtonContext,
|
|
98
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
|
|
99
|
+
ref: ref,
|
|
100
|
+
accessibilityRole: role,
|
|
101
|
+
role: role,
|
|
102
|
+
accessibilityState: accessibilityState,
|
|
103
|
+
...ariaProps,
|
|
104
|
+
...(isDisabled ? {
|
|
105
|
+
'aria-disabled': true
|
|
106
|
+
} : {}),
|
|
107
|
+
disabled: isDisabled,
|
|
108
|
+
...rest,
|
|
109
|
+
...(0, _dataAttributes.mergeDataAttributes)(rest, (0, _dataAttributes.dataAttributes)({
|
|
110
|
+
selected: isSelected,
|
|
111
|
+
disabled: isDisabled,
|
|
112
|
+
active: isPressed,
|
|
113
|
+
hover: isHovered,
|
|
114
|
+
focus: isFocused,
|
|
115
|
+
focusVisible: isFocusVisible,
|
|
116
|
+
toggleState: (0, _toggleState.getToggleState)(isSelected, isPressed, isHovered)
|
|
117
|
+
})),
|
|
118
|
+
style: style,
|
|
119
|
+
onPress: isDisabled ? undefined : composedOnPress,
|
|
120
|
+
onPressIn: (0, _utils.composeEventHandlers)(rest.onPressIn, pressProps.onPressIn),
|
|
121
|
+
onPressOut: (0, _utils.composeEventHandlers)(rest.onPressOut, pressProps.onPressOut),
|
|
122
|
+
onHoverIn: (0, _utils.composeEventHandlers)(rest.onHoverIn, hoverProps.onHoverIn),
|
|
123
|
+
onHoverOut: (0, _utils.composeEventHandlers)(rest.onHoverOut, hoverProps.onHoverOut),
|
|
124
|
+
onFocus: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onFocus, focusProps.onFocus), focusRingProps.onFocus),
|
|
125
|
+
onBlur: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onBlur, focusProps.onBlur), focusRingProps.onBlur),
|
|
126
|
+
children: children
|
|
127
|
+
})
|
|
128
|
+
});
|
|
129
|
+
});
|
|
130
|
+
ToggleButtonRoot.displayName = 'ToggleButtonRoot';
|
|
131
|
+
//# sourceMappingURL=ToggleButtonRoot.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_utils","_focus","_interactions","_slot","_dataAttributes","_context","_toggleState","_jsxRuntime","ToggleButtonRoot","exports","forwardRef","asChild","value","isSelected","controlledSelected","defaultSelected","onSelectedChange","isDisabled","isDisabledProp","children","onPress","onFocus","onBlur","style","rest","ref","group","useOptionalToggleButtonGroupContext","standaloneSelected","setStandaloneSelected","useControllableState","prop","defaultProp","onChange","next","isGroupDisabled","focusProps","isFocused","useFocus","isFocusVisible","focusRingProps","useFocusRing","pressProps","isPressed","usePress","hoverProps","isHovered","useHover","selectionType","type","role","accessibilityState","useMemo","disabled","checked","selected","ariaProps","toggleButtonContext","hover","active","focus","focusVisible","composedOnPress","composeEventHandlers","toggleValue","Comp","Slot","Pressable","jsx","ToggleButtonProvider","accessibilityRole","mergeDataAttributes","dataAttributes","toggleState","getToggleState","undefined","onPressIn","onPressOut","onHoverIn","onHoverOut","displayName"],"sourceRoot":"../../../src","sources":["toggle-button/ToggleButtonRoot.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ToggleButtonRoot = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _utils = require("@cdx-ui/utils");
|
|
10
|
+
var _focus = require("@react-native-aria/focus");
|
|
11
|
+
var _interactions = require("@react-native-aria/interactions");
|
|
12
|
+
var _slot = require("../slot");
|
|
13
|
+
var _dataAttributes = require("../utils/dataAttributes");
|
|
14
|
+
var _context = require("./context");
|
|
15
|
+
var _toggleState = require("./toggleState");
|
|
16
|
+
var _useToggleButtonGroupNavigation = require("./useToggleButtonGroupNavigation");
|
|
17
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
+
const ToggleButtonRoot = exports.ToggleButtonRoot = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
19
|
+
asChild = false,
|
|
20
|
+
value,
|
|
21
|
+
isSelected: controlledSelected,
|
|
22
|
+
defaultSelected,
|
|
23
|
+
onSelectedChange,
|
|
24
|
+
isDisabled: isDisabledProp = false,
|
|
25
|
+
children,
|
|
26
|
+
onPress,
|
|
27
|
+
onFocus,
|
|
28
|
+
onBlur,
|
|
29
|
+
style,
|
|
30
|
+
...rest
|
|
31
|
+
}, ref) => {
|
|
32
|
+
const group = (0, _context.useOptionalToggleButtonGroupContext)();
|
|
33
|
+
const [standaloneSelected = false, setStandaloneSelected] = (0, _utils.useControllableState)({
|
|
34
|
+
prop: controlledSelected,
|
|
35
|
+
defaultProp: defaultSelected ?? false,
|
|
36
|
+
onChange: next => {
|
|
37
|
+
onSelectedChange?.(next);
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
const isSelected = group ? group.isSelected(value) : standaloneSelected;
|
|
41
|
+
const isDisabled = (group?.isGroupDisabled ?? false) || isDisabledProp;
|
|
42
|
+
const {
|
|
43
|
+
focusProps,
|
|
44
|
+
isFocused
|
|
45
|
+
} = (0, _focus.useFocus)();
|
|
46
|
+
const {
|
|
47
|
+
isFocusVisible,
|
|
48
|
+
focusProps: focusRingProps
|
|
49
|
+
} = (0, _focus.useFocusRing)();
|
|
50
|
+
const {
|
|
51
|
+
pressProps,
|
|
52
|
+
isPressed
|
|
53
|
+
} = (0, _interactions.usePress)({
|
|
54
|
+
isDisabled
|
|
55
|
+
});
|
|
56
|
+
const {
|
|
57
|
+
hoverProps,
|
|
58
|
+
isHovered
|
|
59
|
+
} = (0, _interactions.useHover)();
|
|
60
|
+
const selectionType = group ? group.type : 'standalone';
|
|
61
|
+
const role = selectionType === 'single' ? 'radio' : 'button';
|
|
62
|
+
const accessibilityState = (0, _react.useMemo)(() => ({
|
|
63
|
+
disabled: isDisabled,
|
|
64
|
+
...(selectionType === 'single' ? {
|
|
65
|
+
checked: isSelected,
|
|
66
|
+
selected: isSelected
|
|
67
|
+
} : {
|
|
68
|
+
selected: isSelected
|
|
69
|
+
})
|
|
70
|
+
}), [isDisabled, isSelected, selectionType]);
|
|
71
|
+
const ariaProps = selectionType === 'single' ? {
|
|
72
|
+
'aria-checked': isSelected
|
|
73
|
+
} : {
|
|
74
|
+
'aria-pressed': isSelected
|
|
75
|
+
};
|
|
76
|
+
const nodeRef = (0, _react.useRef)(null);
|
|
77
|
+
const setRefs = (0, _utils.mergeRefs)(ref, nodeRef);
|
|
78
|
+
const registerItem = group?.registerItem;
|
|
79
|
+
const unregisterItem = group?.unregisterItem;
|
|
80
|
+
const getItems = group?.getItems;
|
|
81
|
+
const focusedValue = group?.focusedValue;
|
|
82
|
+
const anchorValue = group?.type === 'single' ? typeof group.value === 'string' ? group.value : undefined : Array.isArray(group?.value) && group.value.length > 0 ? group.value[0] : undefined;
|
|
83
|
+
(0, _react.useEffect)(() => {
|
|
84
|
+
if (!registerItem || !unregisterItem) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
registerItem(value, {
|
|
88
|
+
disabled: !!isDisabled,
|
|
89
|
+
node: nodeRef.current
|
|
90
|
+
});
|
|
91
|
+
return () => unregisterItem(value);
|
|
92
|
+
}, [value, isDisabled, registerItem, unregisterItem]);
|
|
93
|
+
const isRovingTabStop = (0, _react.useMemo)(() => {
|
|
94
|
+
if (!group || isDisabled) {
|
|
95
|
+
return !group;
|
|
96
|
+
}
|
|
97
|
+
const enabledItems = getItems?.().filter(([, entry]) => !entry.disabled) ?? [];
|
|
98
|
+
const rovingValue = (0, _useToggleButtonGroupNavigation.getRovingFocusValue)(focusedValue, anchorValue, enabledItems);
|
|
99
|
+
return value === rovingValue;
|
|
100
|
+
}, [anchorValue, focusedValue, getItems, group, isDisabled, value]);
|
|
101
|
+
const toggleButtonContext = (0, _react.useMemo)(() => ({
|
|
102
|
+
value,
|
|
103
|
+
isSelected,
|
|
104
|
+
isDisabled,
|
|
105
|
+
selectionType,
|
|
106
|
+
hover: isHovered,
|
|
107
|
+
active: isPressed,
|
|
108
|
+
focus: isFocused,
|
|
109
|
+
focusVisible: isFocusVisible
|
|
110
|
+
}), [value, isSelected, isDisabled, selectionType, isHovered, isPressed, isFocused, isFocusVisible]);
|
|
111
|
+
const markRovingFocus = () => {
|
|
112
|
+
if (!isDisabled) {
|
|
113
|
+
group?.setFocusedValue?.(value);
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
const toggle = () => {
|
|
117
|
+
if (isDisabled) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
if (group) {
|
|
121
|
+
markRovingFocus();
|
|
122
|
+
group.toggleValue(value);
|
|
123
|
+
} else {
|
|
124
|
+
setStandaloneSelected(!standaloneSelected);
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
const composedOnPress = (0, _utils.composeEventHandlers)(onPress, toggle);
|
|
128
|
+
|
|
129
|
+
// RNW's press responder already turns Space into a press for role="button", but ignores
|
|
130
|
+
// it for role="radio", so only single-select items handle Space here.
|
|
131
|
+
const handleKeyDown = event => {
|
|
132
|
+
if (selectionType !== 'single') {
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
if (event.key === ' ' || event.key === 'Spacebar') {
|
|
136
|
+
event.preventDefault();
|
|
137
|
+
if (!event.repeat) {
|
|
138
|
+
toggle();
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
const Comp = asChild ? _slot.Slot : _reactNative.Pressable;
|
|
143
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ToggleButtonProvider, {
|
|
144
|
+
value: toggleButtonContext,
|
|
145
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
|
|
146
|
+
ref: setRefs,
|
|
147
|
+
accessibilityRole: role,
|
|
148
|
+
role: role,
|
|
149
|
+
accessibilityState: accessibilityState,
|
|
150
|
+
...ariaProps,
|
|
151
|
+
...(isDisabled ? {
|
|
152
|
+
'aria-disabled': true
|
|
153
|
+
} : {}),
|
|
154
|
+
disabled: isDisabled,
|
|
155
|
+
tabIndex: group ? isDisabled ? -1 : isRovingTabStop ? 0 : -1 : undefined,
|
|
156
|
+
...rest,
|
|
157
|
+
...(0, _dataAttributes.mergeDataAttributes)(rest, (0, _dataAttributes.dataAttributes)({
|
|
158
|
+
selected: isSelected,
|
|
159
|
+
disabled: isDisabled,
|
|
160
|
+
active: isPressed,
|
|
161
|
+
hover: isHovered,
|
|
162
|
+
focus: isFocused,
|
|
163
|
+
focusVisible: isFocusVisible,
|
|
164
|
+
toggleState: (0, _toggleState.getToggleState)(isSelected, isPressed, isHovered)
|
|
165
|
+
})),
|
|
166
|
+
style: style,
|
|
167
|
+
onPress: isDisabled ? undefined : composedOnPress,
|
|
168
|
+
onKeyDown: (0, _utils.composeEventHandlers)(rest.onKeyDown, handleKeyDown),
|
|
169
|
+
onPressIn: (0, _utils.composeEventHandlers)(rest.onPressIn, pressProps.onPressIn),
|
|
170
|
+
onPressOut: (0, _utils.composeEventHandlers)(rest.onPressOut, pressProps.onPressOut),
|
|
171
|
+
onHoverIn: (0, _utils.composeEventHandlers)(rest.onHoverIn, hoverProps.onHoverIn),
|
|
172
|
+
onHoverOut: (0, _utils.composeEventHandlers)(rest.onHoverOut, hoverProps.onHoverOut),
|
|
173
|
+
onFocus: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onFocus, markRovingFocus), (0, _utils.composeEventHandlers)(focusProps.onFocus, focusRingProps.onFocus)),
|
|
174
|
+
onBlur: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onBlur, focusProps.onBlur), focusRingProps.onBlur),
|
|
175
|
+
children: children
|
|
176
|
+
})
|
|
177
|
+
});
|
|
178
|
+
});
|
|
179
|
+
ToggleButtonRoot.displayName = 'ToggleButtonRoot';
|
|
180
|
+
//# sourceMappingURL=ToggleButtonRoot.web.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_utils","_focus","_interactions","_slot","_dataAttributes","_context","_toggleState","_useToggleButtonGroupNavigation","_jsxRuntime","ToggleButtonRoot","exports","forwardRef","asChild","value","isSelected","controlledSelected","defaultSelected","onSelectedChange","isDisabled","isDisabledProp","children","onPress","onFocus","onBlur","style","rest","ref","group","useOptionalToggleButtonGroupContext","standaloneSelected","setStandaloneSelected","useControllableState","prop","defaultProp","onChange","next","isGroupDisabled","focusProps","isFocused","useFocus","isFocusVisible","focusRingProps","useFocusRing","pressProps","isPressed","usePress","hoverProps","isHovered","useHover","selectionType","type","role","accessibilityState","useMemo","disabled","checked","selected","ariaProps","nodeRef","useRef","setRefs","mergeRefs","registerItem","unregisterItem","getItems","focusedValue","anchorValue","undefined","Array","isArray","length","useEffect","node","current","isRovingTabStop","enabledItems","filter","entry","rovingValue","getRovingFocusValue","toggleButtonContext","hover","active","focus","focusVisible","markRovingFocus","setFocusedValue","toggle","toggleValue","composedOnPress","composeEventHandlers","handleKeyDown","event","key","preventDefault","repeat","Comp","Slot","Pressable","jsx","ToggleButtonProvider","accessibilityRole","tabIndex","mergeDataAttributes","dataAttributes","toggleState","getToggleState","onKeyDown","onPressIn","onPressOut","onHoverIn","onHoverOut","displayName"],"sourceRoot":"../../../src","sources":["toggle-button/ToggleButtonRoot.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ToggleButtonProvider = exports.ToggleButtonGroupContextProvider = void 0;
|
|
7
|
+
exports.useOptionalToggleButtonGroupContext = useOptionalToggleButtonGroupContext;
|
|
8
|
+
exports.useToggleButtonContext = void 0;
|
|
9
|
+
exports.useToggleButtonGroupContext = useToggleButtonGroupContext;
|
|
10
|
+
var _react = require("react");
|
|
11
|
+
var _utils = require("@cdx-ui/utils");
|
|
12
|
+
const [ToggleButtonProvider, useToggleButtonContext] = (0, _utils.createContext)('ToggleButtonContext');
|
|
13
|
+
exports.useToggleButtonContext = useToggleButtonContext;
|
|
14
|
+
exports.ToggleButtonProvider = ToggleButtonProvider;
|
|
15
|
+
const ToggleButtonGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
16
|
+
const ToggleButtonGroupContextProvider = exports.ToggleButtonGroupContextProvider = ToggleButtonGroupContext.Provider;
|
|
17
|
+
function useToggleButtonGroupContext() {
|
|
18
|
+
const ctx = (0, _react.useContext)(ToggleButtonGroupContext);
|
|
19
|
+
if (!ctx) {
|
|
20
|
+
throw new Error('ToggleButton must be used within ToggleButtonGroup');
|
|
21
|
+
}
|
|
22
|
+
return ctx;
|
|
23
|
+
}
|
|
24
|
+
function useOptionalToggleButtonGroupContext() {
|
|
25
|
+
return (0, _react.useContext)(ToggleButtonGroupContext);
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_utils","ToggleButtonProvider","useToggleButtonContext","createContext","exports","ToggleButtonGroupContext","createReactContext","ToggleButtonGroupContextProvider","Provider","useToggleButtonGroupContext","ctx","useContext","Error","useOptionalToggleButtonGroupContext"],"sourceRoot":"../../../src","sources":["toggle-button/context.tsx"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAGO,MAAM,CAACE,oBAAoB,EAAEC,sBAAsB,CAAC,GAAG,IAAAC,oBAAa,EASxE,qBAAqB,CAAC;AAACC,OAAA,CAAAF,sBAAA,GAAAA,sBAAA;AAAAE,OAAA,CAAAH,oBAAA,GAAAA,oBAAA;AAE1B,MAAMI,wBAAwB,gBAAG,IAAAC,oBAAkB,EAAwC,IAAI,CAAC;AAEzF,MAAMC,gCAAgC,GAAAH,OAAA,CAAAG,gCAAA,GAAGF,wBAAwB,CAACG,QAAQ;AAE1E,SAASC,2BAA2BA,CAAA,EAAmC;EAC5E,MAAMC,GAAG,GAAG,IAAAC,iBAAU,EAACN,wBAAwB,CAAC;EAChD,IAAI,CAACK,GAAG,EAAE;IACR,MAAM,IAAIE,KAAK,CAAC,oDAAoD,CAAC;EACvE;EACA,OAAOF,GAAG;AACZ;AAEO,SAASG,mCAAmCA,CAAA,EAA0C;EAC3F,OAAO,IAAAF,iBAAU,EAACN,wBAAwB,CAAC;AAC7C","ignoreList":[]}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "ToggleButtonGroup", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _ToggleButtonGroup.ToggleButtonGroup;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "ToggleButtonProvider", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _context.ToggleButtonProvider;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "ToggleButtonRoot", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _ToggleButtonRoot.ToggleButtonRoot;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "useOptionalToggleButtonGroupContext", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _context.useOptionalToggleButtonGroupContext;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "useToggleButtonContext", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _context.useToggleButtonContext;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(exports, "useToggleButtonGroupContext", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return _context.useToggleButtonGroupContext;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
var _ToggleButtonRoot = require("./ToggleButtonRoot");
|
|
43
|
+
var _ToggleButtonGroup = require("./ToggleButtonGroup");
|
|
44
|
+
var _context = require("./context");
|
|
45
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_ToggleButtonRoot","require","_ToggleButtonGroup","_context"],"sourceRoot":"../../../src","sources":["toggle-button/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA","ignoreList":[]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getToggleState = getToggleState;
|
|
7
|
+
// Keyed `selected:active:hover`. Press outranks hover so each combination maps to exactly one
|
|
8
|
+
// value, letting the styled layer use single-condition selectors that also work on native.
|
|
9
|
+
const TOGGLE_STATES = {
|
|
10
|
+
'false:false:false': 'idle',
|
|
11
|
+
'false:false:true': 'hover',
|
|
12
|
+
'false:true:false': 'active',
|
|
13
|
+
'false:true:true': 'active',
|
|
14
|
+
'true:false:false': 'selected',
|
|
15
|
+
'true:false:true': 'selected-hover',
|
|
16
|
+
'true:true:false': 'selected-active',
|
|
17
|
+
'true:true:true': 'selected-active'
|
|
18
|
+
};
|
|
19
|
+
function getToggleState(selected, active, hover) {
|
|
20
|
+
const key = [selected, active, hover].map(flag => flag ? 'true' : 'false').join(':');
|
|
21
|
+
return TOGGLE_STATES[key];
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=toggleState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["TOGGLE_STATES","getToggleState","selected","active","hover","key","map","flag","join"],"sourceRoot":"../../../src","sources":["toggle-button/toggleState.ts"],"mappings":";;;;;;AAAA;AACA;AACA,MAAMA,aAAa,GAAG;EACpB,mBAAmB,EAAE,MAAM;EAC3B,kBAAkB,EAAE,OAAO;EAC3B,kBAAkB,EAAE,QAAQ;EAC5B,iBAAiB,EAAE,QAAQ;EAC3B,kBAAkB,EAAE,UAAU;EAC9B,iBAAiB,EAAE,gBAAgB;EACnC,iBAAiB,EAAE,iBAAiB;EACpC,gBAAgB,EAAE;AACpB,CAAU;AAIH,SAASC,cAAcA,CAACC,QAAiB,EAAEC,MAAe,EAAEC,KAAc,EAAe;EAC9F,MAAMC,GAAG,GAAG,CAACH,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC,CAACE,GAAG,CAAEC,IAAI,IAAMA,IAAI,GAAG,MAAM,GAAG,OAAQ,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;EACxF,OAAOR,aAAa,CAACK,GAAG,CAA+B;AACzD","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["toggle-button/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getRovingFocusValue = getRovingFocusValue;
|
|
7
|
+
exports.useToggleButtonGroupNavigation = useToggleButtonGroupNavigation;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
function isEnabledItemValue(value, enabledItems) {
|
|
10
|
+
return value != null && enabledItems.some(([itemValue]) => itemValue === value);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/** Resolves which item value should hold the roving tab stop / keyboard focus anchor. */
|
|
14
|
+
function getRovingFocusValue(focusedValue, anchorValue, enabledItems) {
|
|
15
|
+
const defaultFocusValue = isEnabledItemValue(anchorValue, enabledItems) ? anchorValue : enabledItems[0]?.[0];
|
|
16
|
+
const resolvedFocusedValue = isEnabledItemValue(focusedValue, enabledItems) ? focusedValue : undefined;
|
|
17
|
+
return resolvedFocusedValue ?? defaultFocusValue;
|
|
18
|
+
}
|
|
19
|
+
function useToggleButtonGroupNavigation({
|
|
20
|
+
type,
|
|
21
|
+
orientation,
|
|
22
|
+
getItems,
|
|
23
|
+
focusedValue,
|
|
24
|
+
setFocusedValue,
|
|
25
|
+
anchorValue,
|
|
26
|
+
selectOnFocus
|
|
27
|
+
}) {
|
|
28
|
+
const selectOnFocusRef = (0, _react.useRef)(selectOnFocus);
|
|
29
|
+
selectOnFocusRef.current = selectOnFocus;
|
|
30
|
+
const getEnabledItems = (0, _react.useCallback)(() => getItems().filter(([, entry]) => !entry.disabled), [getItems]);
|
|
31
|
+
const moveFocus = (0, _react.useCallback)(([targetValue, targetEntry], shouldSelect) => {
|
|
32
|
+
setFocusedValue(targetValue);
|
|
33
|
+
targetEntry.node?.focus?.();
|
|
34
|
+
if (shouldSelect) {
|
|
35
|
+
selectOnFocusRef.current?.(targetValue);
|
|
36
|
+
}
|
|
37
|
+
}, [setFocusedValue]);
|
|
38
|
+
const handleKeyDown = (0, _react.useCallback)(e => {
|
|
39
|
+
const enabledItems = getEnabledItems();
|
|
40
|
+
if (enabledItems.length === 0) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
const currentValue = getRovingFocusValue(focusedValue, anchorValue, enabledItems);
|
|
44
|
+
const idx = enabledItems.findIndex(([value]) => value === currentValue);
|
|
45
|
+
const shouldSelectOnFocus = type === 'single';
|
|
46
|
+
const nextKeys = orientation === 'vertical' ? ['ArrowDown'] : ['ArrowRight', 'ArrowDown'];
|
|
47
|
+
const prevKeys = orientation === 'vertical' ? ['ArrowUp'] : ['ArrowLeft', 'ArrowUp'];
|
|
48
|
+
if (nextKeys.includes(e.key)) {
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
moveFocus(enabledItems[idx < enabledItems.length - 1 ? idx + 1 : 0], shouldSelectOnFocus);
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
if (prevKeys.includes(e.key)) {
|
|
54
|
+
e.preventDefault();
|
|
55
|
+
moveFocus(enabledItems[idx > 0 ? idx - 1 : enabledItems.length - 1], shouldSelectOnFocus);
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
switch (e.key) {
|
|
59
|
+
case 'Home':
|
|
60
|
+
{
|
|
61
|
+
e.preventDefault();
|
|
62
|
+
moveFocus(enabledItems[0], shouldSelectOnFocus);
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
case 'End':
|
|
66
|
+
{
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
const last = enabledItems.at(-1);
|
|
69
|
+
if (last) {
|
|
70
|
+
moveFocus(last, shouldSelectOnFocus);
|
|
71
|
+
}
|
|
72
|
+
break;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}, [anchorValue, focusedValue, getEnabledItems, moveFocus, orientation, type]);
|
|
76
|
+
return {
|
|
77
|
+
handleKeyDown
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
//# sourceMappingURL=useToggleButtonGroupNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","isEnabledItemValue","value","enabledItems","some","itemValue","getRovingFocusValue","focusedValue","anchorValue","defaultFocusValue","resolvedFocusedValue","undefined","useToggleButtonGroupNavigation","type","orientation","getItems","setFocusedValue","selectOnFocus","selectOnFocusRef","useRef","current","getEnabledItems","useCallback","filter","entry","disabled","moveFocus","targetValue","targetEntry","shouldSelect","node","focus","handleKeyDown","e","length","currentValue","idx","findIndex","shouldSelectOnFocus","nextKeys","prevKeys","includes","key","preventDefault","last","at"],"sourceRoot":"../../../src","sources":["toggle-button/useToggleButtonGroupNavigation.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
13
13
|
* - ARIA role, aria-modal, aria-labelledby/describedby
|
|
14
14
|
* - FocusScope (focus trap + restore + auto-focus)
|
|
15
15
|
* - Escape key dismissal (web)
|
|
16
|
-
* - Android hardware back button
|
|
16
|
+
* - Android hardware back button: calls the context `backHandlerRef` when set, otherwise dismisses (native)
|
|
17
17
|
* - data-state attribute for CSS transition targeting
|
|
18
18
|
*
|
|
19
19
|
* Unstyled — the styled layer applies centering, background, border-radius, etc.
|
|
@@ -29,12 +29,19 @@ export const DialogContent = /*#__PURE__*/forwardRef(({
|
|
|
29
29
|
onOpenChange,
|
|
30
30
|
closeOnEscKey,
|
|
31
31
|
nativeID,
|
|
32
|
-
role
|
|
32
|
+
role,
|
|
33
|
+
backHandlerRef
|
|
33
34
|
} = useDialog();
|
|
34
35
|
const handleClose = useCallback(() => {
|
|
35
36
|
onOpenChange(false);
|
|
36
37
|
}, [onOpenChange]);
|
|
37
|
-
|
|
38
|
+
const handleEscape = useCallback(() => {
|
|
39
|
+
if (closeOnEscKey) onOpenChange(false);
|
|
40
|
+
}, [closeOnEscKey, onOpenChange]);
|
|
41
|
+
|
|
42
|
+
// Registered regardless of `closeOnEscKey` so a non-dismissible dialog still
|
|
43
|
+
// owns Escape while topmost instead of letting it reach the overlay beneath.
|
|
44
|
+
useEscapeKey(open, handleEscape, {
|
|
38
45
|
id: nativeID,
|
|
39
46
|
groupId: nativeID,
|
|
40
47
|
layer: 'modal'
|
|
@@ -53,13 +60,14 @@ export const DialogContent = /*#__PURE__*/forwardRef(({
|
|
|
53
60
|
if (!open || Platform.OS === 'web') return;
|
|
54
61
|
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
|
|
55
62
|
if (!isTopmost('back')) return false;
|
|
56
|
-
|
|
63
|
+
const onBack = backHandlerRef.current;
|
|
64
|
+
if (onBack) onBack();else handleClose();
|
|
57
65
|
return true;
|
|
58
66
|
});
|
|
59
67
|
return () => {
|
|
60
68
|
backHandler.remove();
|
|
61
69
|
};
|
|
62
|
-
}, [handleClose, isTopmost, open]);
|
|
70
|
+
}, [backHandlerRef, handleClose, isTopmost, open]);
|
|
63
71
|
if (!forceMount && !open) {
|
|
64
72
|
return null;
|
|
65
73
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useCallback","useEffect","BackHandler","Platform","View","FocusScope","Slot","useEscapeKey","useOverlayStackRegistration","dataAttributes","mergeDataAttributes","useDialog","jsx","_jsx","DialogContent","asChild","forceMount","children","props","ref","open","onOpenChange","closeOnEscKey","nativeID","role","handleClose","id","groupId","layer","isTopmost","active","OS","capabilities","backHandler","addEventListener","remove","Comp","ariaProps","contain","restoreFocus","autoFocus","undefined","state","displayName"],"sourceRoot":"../../../src","sources":["dialog/DialogContent.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,WAAW,EAAEC,SAAS,QAA2B,OAAO;AAC7E,SAASC,WAAW,EAAEC,QAAQ,EAAEC,IAAI,QAAwB,cAAc;AAC1E,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,YAAY,EAAEC,2BAA2B,QAAQ,YAAY;AACtE,SAASC,cAAc,EAAEC,mBAAmB,QAAQ,yBAAyB;AAC7E,SAASC,SAAS,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,gBAAGf,UAAU,CACrC,CAAC;EAAEgB,OAAO,GAAG,KAAK;EAAEC,UAAU,GAAG,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACpE,MAAM;IAAEC,IAAI;IAAEC,YAAY;IAAEC,aAAa;IAAEC,QAAQ;IAAEC;
|
|
1
|
+
{"version":3,"names":["forwardRef","useCallback","useEffect","BackHandler","Platform","View","FocusScope","Slot","useEscapeKey","useOverlayStackRegistration","dataAttributes","mergeDataAttributes","useDialog","jsx","_jsx","DialogContent","asChild","forceMount","children","props","ref","open","onOpenChange","closeOnEscKey","nativeID","role","backHandlerRef","handleClose","handleEscape","id","groupId","layer","isTopmost","active","OS","capabilities","backHandler","addEventListener","onBack","current","remove","Comp","ariaProps","contain","restoreFocus","autoFocus","undefined","state","displayName"],"sourceRoot":"../../../src","sources":["dialog/DialogContent.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -30,7 +30,13 @@ export const DialogPopup = /*#__PURE__*/forwardRef(({
|
|
|
30
30
|
const handleClose = useCallback(() => {
|
|
31
31
|
onOpenChange(false);
|
|
32
32
|
}, [onOpenChange]);
|
|
33
|
-
|
|
33
|
+
const handleEscape = useCallback(() => {
|
|
34
|
+
if (closeOnEscKey) onOpenChange(false);
|
|
35
|
+
}, [closeOnEscKey, onOpenChange]);
|
|
36
|
+
|
|
37
|
+
// Registered regardless of `closeOnEscKey` so a non-dismissible dialog still
|
|
38
|
+
// owns Escape while topmost instead of letting it reach the overlay beneath.
|
|
39
|
+
useEscapeKey(open, handleEscape, {
|
|
34
40
|
id: nativeID,
|
|
35
41
|
groupId: nativeID,
|
|
36
42
|
layer: 'modal'
|