@astryxdesign/core 0.7.3-canary.cb489ff → 0.7.3-canary.e9694dc
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/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +24 -19
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +10 -52
- package/dist/DropdownMenu/DropdownMenuContext.d.ts +1 -34
- package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuContext.js +0 -15
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts +2 -21
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +42 -375
- package/dist/DropdownMenu/menuRegionStops.d.ts +2 -2
- package/dist/DropdownMenu/menuRegionStops.js +2 -2
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +12 -14
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +14 -7
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +14 -12
- package/dist/Switch/switch.markers.stylex.d.ts +0 -2
- package/dist/Switch/switch.markers.stylex.d.ts.map +1 -1
- package/dist/Switch/switch.markers.stylex.js +0 -6
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +14 -36
- package/dist/TopNav/TopNav.d.ts.map +1 -1
- package/dist/TopNav/TopNav.js +2 -2
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +0 -1
- package/dist/astryx.css +2 -3
- package/dist/hooks/useMenuPress.d.ts +1 -11
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +5 -43
- package/package.json +3 -3
- package/src/CheckboxInput/CheckboxInput.test.tsx +5 -44
- package/src/CheckboxInput/CheckboxInput.tsx +26 -16
- package/src/CheckboxInput/__tests__/Checkbox.a11y.states.ts +3 -3
- package/src/CheckboxList/CheckboxList.test.tsx +6 -9
- package/src/ContextMenu/ContextMenu.test.tsx +0 -41
- package/src/DropdownMenu/DropdownMenu.spec.md +2 -33
- package/src/DropdownMenu/DropdownMenu.tsx +8 -79
- package/src/DropdownMenu/DropdownMenuContext.tsx +1 -39
- package/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs +1 -16
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +1 -623
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +99 -556
- package/src/DropdownMenu/menuRegionStops.ts +2 -2
- package/src/DropdownMenu/modules/useMenuPress.spec.md +0 -9
- package/src/FileInput/FileInput.test.tsx +7 -30
- package/src/FileInput/FileInput.tsx +11 -21
- package/src/SideNav/SideNav.test.tsx +0 -35
- package/src/Slider/Slider.test.tsx +3 -3
- package/src/Slider/Slider.tsx +15 -8
- package/src/Switch/Switch.test.tsx +8 -29
- package/src/Switch/Switch.tsx +14 -13
- package/src/Switch/__tests__/Switch.a11y.states.ts +2 -2
- package/src/Switch/switch.markers.stylex.ts +0 -4
- package/src/Table/plugins/selection/useTableSelection.test.tsx +3 -5
- package/src/Tooltip/Tooltip.test.tsx +6 -51
- package/src/Tooltip/Tooltip.tsx +18 -41
- package/src/TopNav/TopNav.tsx +1 -11
- package/src/TopNav/TopNavHeading.tsx +0 -1
- package/src/hooks/useMenuPress.ts +7 -45
- package/src/DropdownMenu/DropdownMenuContext.public.test.ts +0 -22
- package/src/DropdownMenu/__tests__/SubMenuHeaderFooter.a11y.chromium.spec.ts +0 -267
- package/src/Tooltip/__tests__/Tooltip.a11y.chromium.spec.ts +0 -129
- package/src/Tooltip/__tests__/Tooltip.a11y.renders.tsx +0 -86
- package/src/Tooltip/__tests__/Tooltip.a11y.states.ts +0 -132
- package/src/Tooltip/__tests__/Tooltip.a11y.test.tsx +0 -126
- package/src/TopNav/__tests__/TopNavMobileLongHeading.a11y.chromium.spec.ts +0 -74
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* - /apps/storybook/stories/CheckboxInput.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/CheckboxInput/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useCallback, useOptimistic, useRef, useTransition } from 'react';
|
|
18
|
+
import { useId, useCallback, use, useOptimistic, useRef, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
21
|
import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
@@ -32,6 +32,7 @@ import { usePressFeedback } from "../hooks/usePressFeedback.js";
|
|
|
32
32
|
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
33
33
|
import { useIndicator } from "../Indicator/index.js";
|
|
34
34
|
import { themeProps } from "../utils/themeProps.js";
|
|
35
|
+
import { CheckboxListContext } from "../CheckboxList/CheckboxListContext.js";
|
|
35
36
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
36
37
|
|
|
37
38
|
// The touch press's paint, declared by the shared overlay styles on the
|
|
@@ -176,10 +177,18 @@ export function CheckboxInput({
|
|
|
176
177
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
177
178
|
const isBusy = isLoading || optimisticValue !== value;
|
|
178
179
|
|
|
179
|
-
//
|
|
180
|
-
//
|
|
181
|
-
//
|
|
180
|
+
// Disabled-reason tooltip. Disabled controls swallow pointer events, so the
|
|
181
|
+
// tooltip listeners attach to the checkbox row (which already exists) and the
|
|
182
|
+
// native checkbox stays perceivable via aria-disabled instead of the disabled
|
|
183
|
+
// attribute. Value mutation is blocked by the isDisabled guard in onChange.
|
|
182
184
|
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
185
|
+
// Keep the native checkbox focusable via aria-disabled either when it renders
|
|
186
|
+
// its own reason tooltip, or when it sits in a CheckboxList whose whole-group
|
|
187
|
+
// `disabledMessage` (shown on the group container) needs each checkbox to
|
|
188
|
+
// stay keyboard-perceivable. The group signals this through context rather
|
|
189
|
+
// than a public prop.
|
|
190
|
+
const checkboxListContext = use(CheckboxListContext);
|
|
191
|
+
const isFocusableDisabled = isDisabled && (showsDisabledMessage || (checkboxListContext?.hasDisabledMessage ?? false));
|
|
183
192
|
const disabledMessageTooltip = useTooltip({
|
|
184
193
|
placement: 'above',
|
|
185
194
|
// The container row is not naturally focusable; focusin bubbles up from the
|
|
@@ -197,7 +206,7 @@ export function CheckboxInput({
|
|
|
197
206
|
const indicatorRef = useRef(null);
|
|
198
207
|
const {
|
|
199
208
|
focusProps
|
|
200
|
-
} = useIndicatorFocusRing(indicatorRef);
|
|
209
|
+
} = useIndicatorFocusRing(indicatorRef, isDisabled);
|
|
201
210
|
const isIndeterminate = optimisticValue === 'indeterminate';
|
|
202
211
|
const isChecked = optimisticValue === true;
|
|
203
212
|
|
|
@@ -263,28 +272,24 @@ export function CheckboxInput({
|
|
|
263
272
|
ref: useMergedRefs(ref, indeterminateRef, disabledMessageTooltip.positionRef),
|
|
264
273
|
id: id,
|
|
265
274
|
type: "checkbox"
|
|
266
|
-
// Withhold the name while disabled:
|
|
267
|
-
// natively disabled), and a disabled
|
|
275
|
+
// Withhold the name while disabled: with a disabledMessage the
|
|
276
|
+
// input stays focusable (not natively disabled), and a disabled
|
|
277
|
+
// control must not submit.
|
|
268
278
|
,
|
|
269
279
|
name: isDisabled ? undefined : htmlName,
|
|
270
|
-
checked: isChecked
|
|
271
|
-
|
|
272
|
-
//
|
|
273
|
-
//
|
|
280
|
+
checked: isChecked
|
|
281
|
+
// With a disabledMessage the checkbox keeps focusability via
|
|
282
|
+
// aria-disabled so the reason is focus-discoverable; toggling is
|
|
283
|
+
// still blocked by the isDisabled guard in onChange below.
|
|
274
284
|
,
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
,
|
|
279
|
-
onClick: isDisabled ? undefined : rest.onClick,
|
|
285
|
+
disabled: isDisabled && !isFocusableDisabled,
|
|
286
|
+
"aria-disabled": isFocusableDisabled ? 'true' : undefined,
|
|
287
|
+
form: isFocusableDisabled ? '' : undefined,
|
|
280
288
|
readOnly: isReadOnly,
|
|
281
289
|
required: isRequired,
|
|
282
290
|
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
283
291
|
onChange: e => {
|
|
284
292
|
if (isDisabled || isBusy || isReadOnly) {
|
|
285
|
-
// Activation clears the native mixed state; React restores
|
|
286
|
-
// only `checked`, so restore `indeterminate` too.
|
|
287
|
-
e.target.indeterminate = isIndeterminate;
|
|
288
293
|
return;
|
|
289
294
|
}
|
|
290
295
|
const checked = e.target.checked;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAKnD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -42,7 +42,7 @@ import { Heading } from "../Heading/index.js";
|
|
|
42
42
|
import { Icon } from "../Icon/index.js";
|
|
43
43
|
import { renderDropdownItems } from "./renderDropdownItems.js";
|
|
44
44
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "./menuItemRoles.js";
|
|
45
|
-
import { DropdownMenuContext, DropdownMenuRootOpenContext
|
|
45
|
+
import { DropdownMenuContext, DropdownMenuRootOpenContext } from "./DropdownMenuContext.js";
|
|
46
46
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
47
47
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
48
48
|
import { useMenuPress } from "../hooks/useMenuPress.js";
|
|
@@ -76,13 +76,6 @@ const MENU_BLOCK_CAP = '300px';
|
|
|
76
76
|
const MENU_MAX_BLOCK_SIZE = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSize})`;
|
|
77
77
|
const MENU_MAX_BLOCK_SIZE_FALLBACK = `min(${MENU_BLOCK_CAP}, ${layerViewportInset.maxBlockSizeFallback})`;
|
|
78
78
|
const MENU_TRIGGER_OPEN_BACKGROUND = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
|
|
79
|
-
|
|
80
|
-
// A sub-menu's drilled-in view with a header or footer renders in the surface
|
|
81
|
-
// host that follows the menu, as the frame marked
|
|
82
|
-
// `data-astryx-submenu-regions="view"` (hidden while a deeper view shows).
|
|
83
|
-
// While one shows, the menu and its header and footer step aside. The rule
|
|
84
|
-
// reads that from the DOM, so no state mirrors which view shows.
|
|
85
|
-
const STEPS_ASIDE_FOR_VIEW = ':has(~ * > [data-astryx-submenu-regions="view"]:not([hidden]))';
|
|
86
79
|
const _temp = {
|
|
87
80
|
kzqmXN: "x1uyokj7",
|
|
88
81
|
"$$css": true
|
|
@@ -99,7 +92,7 @@ const styles = {
|
|
|
99
92
|
},
|
|
100
93
|
dropdown: {
|
|
101
94
|
kB7OPa: "x9f619",
|
|
102
|
-
k1xSpc: "x78zum5
|
|
95
|
+
k1xSpc: "x78zum5",
|
|
103
96
|
kXwgrk: "xdt5ytf",
|
|
104
97
|
kOIVth: "x1lsbc85",
|
|
105
98
|
kI3sdo: "x1a2a7pz",
|
|
@@ -1105,21 +1098,6 @@ function DropdownMenuPopover({
|
|
|
1105
1098
|
drillIn,
|
|
1106
1099
|
wrapContent
|
|
1107
1100
|
} = useMenuDrillIn(isOpen);
|
|
1108
|
-
// The surface host is owned through a ref. State keeps only a key that
|
|
1109
|
-
// changes whenever a host element attaches, the host included when it
|
|
1110
|
-
// moves (a header or footer coming or going), so sub-menus re-render into
|
|
1111
|
-
// the element that is mounted.
|
|
1112
|
-
const surfaceHostRef = useRef(null);
|
|
1113
|
-
const [surfaceHostKey, setSurfaceHostKey] = useState(0);
|
|
1114
|
-
const attachSurfaceHost = useCallback(node => {
|
|
1115
|
-
surfaceHostRef.current = node;
|
|
1116
|
-
if (node != null) {
|
|
1117
|
-
setSurfaceHostKey(key => key + 1);
|
|
1118
|
-
}
|
|
1119
|
-
}, []);
|
|
1120
|
-
const surfaceHost = useMemo(() => ({
|
|
1121
|
-
getElement: () => surfaceHostKey > 0 ? surfaceHostRef.current : null
|
|
1122
|
-
}), [surfaceHostKey]);
|
|
1123
1101
|
const resolvedMaxHeight = menuMaxHeight == null ? null : `${menuMaxHeight}px`;
|
|
1124
1102
|
// Context for compound items
|
|
1125
1103
|
const contextValue = useMemo(() => ({
|
|
@@ -1128,48 +1106,31 @@ function DropdownMenuPopover({
|
|
|
1128
1106
|
drillIn,
|
|
1129
1107
|
menuLabel
|
|
1130
1108
|
}), [closeMenu, menuSize, drillIn, menuLabel]);
|
|
1131
|
-
// What a sub-menu with a header or footer needs, on an internal context.
|
|
1132
|
-
const surfaceValue = useMemo(() => ({
|
|
1133
|
-
host: surfaceHost,
|
|
1134
|
-
ownerId: menuId,
|
|
1135
|
-
menuMaxHeight: resolvedMaxHeight ?? undefined
|
|
1136
|
-
}), [surfaceHost, menuId, resolvedMaxHeight]);
|
|
1137
1109
|
|
|
1138
1110
|
// Resolve menu content: data-driven items become components
|
|
1139
1111
|
const menuContent = wrapContent(props.items !== undefined ? renderDropdownItems(items) : children);
|
|
1140
1112
|
const hasOverflow = useMenuOverflow(listRef, menuContent, popover.isOpen);
|
|
1141
1113
|
|
|
1142
1114
|
// The header and footer sit beside the menu inside the popover, never inside
|
|
1143
|
-
// the role="menu" element: a menu holds only its rows.
|
|
1144
|
-
// follows the menu, so a sub-menu with a header or footer renders beside the
|
|
1145
|
-
// menu too; while such a sub-menu's drilled-in view shows there, the menu and
|
|
1146
|
-
// the regions step aside (STEPS_ASIDE_FOR_VIEW).
|
|
1147
|
-
const surfaceHostElement = /*#__PURE__*/_jsx("div", {
|
|
1148
|
-
ref: attachSurfaceHost,
|
|
1149
|
-
...{
|
|
1150
|
-
className: "xjp7ctv"
|
|
1151
|
-
}
|
|
1152
|
-
});
|
|
1115
|
+
// the role="menu" element: a menu holds only its rows.
|
|
1153
1116
|
const renderWithRegions = menu => hasRegions ? /*#__PURE__*/_jsxs("div", {
|
|
1154
1117
|
...stylex.props(styles.regionsFrame, resolvedMaxHeight != null && dynamicStyles.menuMaxHeight(resolvedMaxHeight)),
|
|
1155
1118
|
children: [isRenderable(header) && /*#__PURE__*/_jsx("div", {
|
|
1156
1119
|
ref: headerRef,
|
|
1157
1120
|
onKeyDown: handleRegionKeyDown,
|
|
1158
1121
|
...{
|
|
1159
|
-
className: "x2lah0s x9epnlk
|
|
1122
|
+
className: "x2lah0s x9epnlk"
|
|
1160
1123
|
},
|
|
1161
1124
|
children: header
|
|
1162
1125
|
}), menu, isRenderable(footer) && /*#__PURE__*/_jsx("div", {
|
|
1163
1126
|
ref: footerRef,
|
|
1164
1127
|
onKeyDown: handleRegionKeyDown,
|
|
1165
1128
|
...{
|
|
1166
|
-
className: "x2lah0s x9epnlk
|
|
1129
|
+
className: "x2lah0s x9epnlk"
|
|
1167
1130
|
},
|
|
1168
1131
|
children: footer
|
|
1169
|
-
})
|
|
1170
|
-
}) :
|
|
1171
|
-
children: [menu, surfaceHostElement]
|
|
1172
|
-
});
|
|
1132
|
+
})]
|
|
1133
|
+
}) : menu;
|
|
1173
1134
|
const triggerProps = {
|
|
1174
1135
|
ref: el => {
|
|
1175
1136
|
buttonRef.current = el;
|
|
@@ -1267,12 +1228,9 @@ function DropdownMenuPopover({
|
|
|
1267
1228
|
value: hasRegions,
|
|
1268
1229
|
children: /*#__PURE__*/_jsx(DropdownMenuContext, {
|
|
1269
1230
|
value: contextValue,
|
|
1270
|
-
children: /*#__PURE__*/_jsx(
|
|
1271
|
-
value:
|
|
1272
|
-
children:
|
|
1273
|
-
value: isOpen,
|
|
1274
|
-
children: menuContent
|
|
1275
|
-
})
|
|
1231
|
+
children: /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
|
|
1232
|
+
value: isOpen,
|
|
1233
|
+
children: menuContent
|
|
1276
1234
|
})
|
|
1277
1235
|
})
|
|
1278
1236
|
})
|
|
@@ -25,10 +25,7 @@ export interface DropdownMenuDrillIn {
|
|
|
25
25
|
viewStack: ReadonlyArray<string>;
|
|
26
26
|
/** The element a shown view renders its rows into (a portal target). */
|
|
27
27
|
host: HTMLElement | null;
|
|
28
|
-
/**
|
|
29
|
-
* Show a sub-menu's view in place of the current rows. A view with a header
|
|
30
|
-
* or footer renders into the root's surface host instead of `host`.
|
|
31
|
-
*/
|
|
28
|
+
/** Show a sub-menu's view in place of the current rows. */
|
|
32
29
|
push: (viewId: string) => void;
|
|
33
30
|
/** Return to the rows the shown view replaced. */
|
|
34
31
|
pop: () => void;
|
|
@@ -46,36 +43,6 @@ export interface DropdownMenuContextValue {
|
|
|
46
43
|
*/
|
|
47
44
|
menuLabel?: string;
|
|
48
45
|
}
|
|
49
|
-
/**
|
|
50
|
-
* The root's surface host. The root owns the element through a ref; this
|
|
51
|
-
* object is new whenever a new element attaches, so a sub-menu re-renders
|
|
52
|
-
* into it.
|
|
53
|
-
*/
|
|
54
|
-
export interface DropdownMenuSurfaceHost {
|
|
55
|
-
/** The host element, or `null` before it attaches. */
|
|
56
|
-
getElement: () => HTMLElement | null;
|
|
57
|
-
}
|
|
58
|
-
/** What a sub-menu with a header or footer needs from the root. Internal. */
|
|
59
|
-
export interface DropdownMenuSurfaceValue {
|
|
60
|
-
/**
|
|
61
|
-
* An element inside the root's popover but outside every `role="menu"`
|
|
62
|
-
* element, where such a sub-menu renders its surface (its flyout layer, or
|
|
63
|
-
* its drilled-in view, while which the root's menu and regions step aside).
|
|
64
|
-
*/
|
|
65
|
-
host: DropdownMenuSurfaceHost;
|
|
66
|
-
/**
|
|
67
|
-
* The root menu's `id`, which a sub-menu's menu in the host names so the
|
|
68
|
-
* press model counts it, and only it, as nested in the root.
|
|
69
|
-
*/
|
|
70
|
-
ownerId: string;
|
|
71
|
-
/** The root's resolved `menuMaxHeight`, which a drilled-in view caps at. */
|
|
72
|
-
menuMaxHeight?: string;
|
|
73
|
-
}
|
|
74
|
-
/**
|
|
75
|
-
* The root's surface; `null` under a root with none (ContextMenu). Internal,
|
|
76
|
-
* off the public menu context, and layer-scoped, so each flyout re-provides it.
|
|
77
|
-
*/
|
|
78
|
-
export declare const DropdownMenuSurfaceContext: import("react").Context<DropdownMenuSurfaceValue | null>;
|
|
79
46
|
/**
|
|
80
47
|
* Whether the root menu of this layer tree is open; internal companion to
|
|
81
48
|
* `DropdownMenuContext`, on its own unexported context so the public
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAmBA,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACjC,wEAAwE;IACxE,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB
|
|
1
|
+
{"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAmBA,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACjC,wEAAwE;IACxE,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,2DAA2D;IAC3D,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,kDAAkD;IAClD,GAAG,EAAE,MAAM,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,sEAAsE;IACtE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,yCAEjC,CAAC;AAGR;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD;AAED,eAAO,MAAM,mBAAmB,0DACiC,CAAC;AAGlE;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,kCAAkC;IACjD,iDAAiD;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,6BAA6B,oEACsB,CAAC;AAGjE;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,kCAAkC,GAAG,IAAI,CAE5F"}
|
|
@@ -32,21 +32,6 @@ import { createLayerScopedContext } from "../Layer/layerScopedContext.js";
|
|
|
32
32
|
* @internal
|
|
33
33
|
*/
|
|
34
34
|
|
|
35
|
-
/**
|
|
36
|
-
* The root's surface host. The root owns the element through a ref; this
|
|
37
|
-
* object is new whenever a new element attaches, so a sub-menu re-renders
|
|
38
|
-
* into it.
|
|
39
|
-
*/
|
|
40
|
-
|
|
41
|
-
/** What a sub-menu with a header or footer needs from the root. Internal. */
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* The root's surface; `null` under a root with none (ContextMenu). Internal,
|
|
45
|
-
* off the public menu context, and layer-scoped, so each flyout re-provides it.
|
|
46
|
-
*/
|
|
47
|
-
export const DropdownMenuSurfaceContext = createLayerScopedContext(null);
|
|
48
|
-
DropdownMenuSurfaceContext.displayName = 'DropdownMenuSurfaceContext';
|
|
49
|
-
|
|
50
35
|
/**
|
|
51
36
|
* Whether the root menu of this layer tree is open; internal companion to
|
|
52
37
|
* `DropdownMenuContext`, on its own unexported context so the public
|
|
@@ -5,9 +5,7 @@
|
|
|
5
5
|
* Spinner, and DropdownMenu context + item roles
|
|
6
6
|
* @output Exports DropdownMenuSubMenu — a single menu row that reveals a nested
|
|
7
7
|
* menu of its own children/items: a flyout beside the row, or, on a phone,
|
|
8
|
-
* a drilled-in view in place of the parent rows.
|
|
9
|
-
* that surface is a modal dialog rendered into the root's surface host,
|
|
10
|
-
* beside every menu element.
|
|
8
|
+
* a drilled-in view in place of the parent rows.
|
|
11
9
|
* @position Sub-component; place inside a DropdownMenu (or ContextMenu)
|
|
12
10
|
* alongside plain items.
|
|
13
11
|
*
|
|
@@ -85,30 +83,13 @@ interface DropdownMenuSubMenuBaseProps extends Omit<BaseProps, 'role' | 'tabInde
|
|
|
85
83
|
* 'adaptive'
|
|
86
84
|
*/
|
|
87
85
|
presentation?: DropdownMenuSubMenuPresentation;
|
|
88
|
-
/**
|
|
89
|
-
* Content above the sub-menu's rows: a field that filters them, say. Like
|
|
90
|
-
* the root menu's `header`, it sits beside the sub-menu's `role="menu"`
|
|
91
|
-
* element, never inside it, and keeps its own keys and presses. With a
|
|
92
|
-
* header or footer the sub-menu's surface (the flyout, or the drilled-in
|
|
93
|
-
* view on a phone) is a modal dialog named by the row: the row says
|
|
94
|
-
* `aria-haspopup="dialog"`, Tab and Shift+Tab walk the header's controls,
|
|
95
|
-
* the rows as one stop and the footer's controls and wrap, and Escape
|
|
96
|
-
* returns to the row. A pointer leaving the flyout does not close it while
|
|
97
|
-
* focus is inside. A `ContextMenu` does not show it.
|
|
98
|
-
*/
|
|
99
|
-
header?: ReactNode;
|
|
100
|
-
/**
|
|
101
|
-
* Content below the sub-menu's rows: a door to where the options are
|
|
102
|
-
* managed, say. Same rules as `header`.
|
|
103
|
-
*/
|
|
104
|
-
footer?: ReactNode;
|
|
105
86
|
/** Test id for the trigger row. */
|
|
106
87
|
'data-testid'?: string;
|
|
107
88
|
/** Test id for the flyout menu. */
|
|
108
89
|
menuDataTestId?: string;
|
|
109
90
|
/**
|
|
110
91
|
* Ref forwarded to the trigger row — the element carrying `role="menuitem"`
|
|
111
|
-
* and `aria-haspopup="menu"
|
|
92
|
+
* and `aria-haspopup="menu"`.
|
|
112
93
|
*/
|
|
113
94
|
ref?: React.Ref<HTMLElement>;
|
|
114
95
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AA0B5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4J5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CA4kBX;yBA9kBe,mBAAmB"}
|