@astryxdesign/core 0.7.2-canary.405bb94 → 0.7.2-canary.411cbed
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/AspectRatio/AspectRatio.d.ts +6 -8
- package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +44 -3
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +5 -2
- package/dist/CommandPalette/CommandPaletteInput.d.ts +1 -1
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +37 -5
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +5 -2
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +46 -3
- package/dist/DropdownMenu/DropdownMenuContext.d.ts +17 -0
- package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuContext.js +21 -0
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +15 -4
- package/dist/EmptyState/EmptyState.d.ts.map +1 -1
- package/dist/EmptyState/EmptyState.js +4 -10
- package/dist/Field/Field.d.ts +1 -1
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +8 -4
- package/dist/Grid/GridSpan.d.ts.map +1 -1
- package/dist/Grid/GridSpan.js +1 -0
- package/dist/MetadataList/MetadataList.d.ts.map +1 -1
- package/dist/MetadataList/MetadataList.js +5 -1
- package/dist/MetadataList/MetadataListContext.d.ts +1 -1
- package/dist/MetadataList/MetadataListContext.d.ts.map +1 -1
- package/dist/RadioList/RadioList.d.ts +1 -1
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +6 -2
- package/dist/ToggleButton/ToggleButton.d.ts +3 -2
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +12 -1
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +1 -0
- package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
- package/dist/TreeList/TreeListBranches.js +2 -2
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +57 -9
- package/dist/astryx.css +11 -1
- package/dist/hooks/useMenuHover.d.ts.map +1 -1
- package/dist/hooks/useMenuHover.js +18 -13
- package/package.json +3 -3
- package/src/AspectRatio/AspectRatio.test.tsx +44 -43
- package/src/AspectRatio/AspectRatio.tsx +38 -18
- package/src/AspectRatio/__tests__/AspectRatioFitLayers.a11y.browser.spec.ts +157 -0
- package/src/Avatar/Avatar.doc.mjs +5 -3
- package/src/AvatarGroup/AvatarGroup.doc.mjs +3 -2
- package/src/Breadcrumbs/BreadcrumbItem.tsx +4 -1
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +30 -1
- package/src/Chat/__tests__/ChatMessageMetadata.a11y.chromium.spec.ts +3 -1
- package/src/CommandPalette/CommandPaletteInput.test.tsx +53 -4
- package/src/CommandPalette/CommandPaletteInput.tsx +33 -3
- package/src/CommandPalette/__tests__/CommandPaletteInputAudit.a11y.chromium.spec.ts +335 -0
- package/src/CommandPalette/__tests__/CommandPaletteItemAudit.a11y.chromium.spec.ts +292 -0
- package/src/ContextMenu/ContextMenu.doc.mjs +2 -3
- package/src/ContextMenu/ContextMenu.tsx +4 -1
- package/src/ContextMenu/__tests__/ContextMenuAudit.a11y.chromium.spec.ts +438 -0
- package/src/DropdownMenu/DropdownMenu.test.tsx +41 -1
- package/src/DropdownMenu/DropdownMenu.tsx +45 -2
- package/src/DropdownMenu/DropdownMenuContext.tsx +24 -0
- package/src/DropdownMenu/DropdownMenuDivider.spec.md +192 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +185 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +17 -3
- package/src/DropdownMenu/__tests__/DropdownMenuDividerAudit.a11y.chromium.spec.ts +280 -0
- package/src/EmptyState/EmptyState.doc.mjs +3 -2
- package/src/EmptyState/EmptyState.spec.md +189 -0
- package/src/EmptyState/EmptyState.test.tsx +74 -3
- package/src/EmptyState/EmptyState.tsx +4 -8
- package/src/Field/Field.doc.mjs +14 -8
- package/src/Field/Field.spec.md +217 -0
- package/src/Field/Field.test.tsx +60 -2
- package/src/Field/Field.tsx +17 -8
- package/src/Grid/GridSpan.tsx +3 -0
- package/src/MetadataList/MetadataList.doc.mjs +2 -2
- package/src/MetadataList/MetadataList.test.tsx +38 -0
- package/src/MetadataList/MetadataList.tsx +8 -1
- package/src/MetadataList/MetadataListContext.tsx +1 -1
- package/src/RadioList/RadioList.fr10.test.tsx +45 -2
- package/src/RadioList/RadioList.tsx +4 -1
- package/src/Slider/Slider.spec.md +39 -18
- package/src/TimeInput/TimeInput.fr10.test.tsx +15 -0
- package/src/ToggleButton/ToggleButton.test.tsx +95 -0
- package/src/ToggleButton/ToggleButton.tsx +12 -1
- package/src/TreeList/TreeList.doc.mjs +1 -0
- package/src/TreeList/TreeList.test.tsx +327 -6
- package/src/TreeList/TreeList.tsx +5 -1
- package/src/TreeList/TreeListBranches.tsx +6 -0
- package/src/TreeList/TreeListItem.tsx +88 -13
- package/src/docPropLiterals.test.ts +36 -10
- package/src/hooks/useMenuHover.ts +18 -13
- package/src/reset.css +0 -29
- package/src/theme/derivedVarRegistry.test.ts +4 -0
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
* SYNC: When modified, update these files to stay in sync:
|
|
8
8
|
* - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
|
|
9
9
|
* - /packages/core/src/AspectRatio/AspectRatio.test.tsx
|
|
10
|
-
* - /packages/core/src/reset.css (AspectRatio fit baseline rules)
|
|
11
10
|
* - /apps/storybook/stories/AspectRatio.stories.tsx
|
|
12
11
|
* - /packages/cli/assets/templates/blocks/components/AspectRatio/ (showcase blocks)
|
|
13
12
|
*/
|
|
@@ -80,13 +79,12 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
|
|
|
80
79
|
* (`object-fit: contain`).
|
|
81
80
|
* - `center`: child keeps its natural size, centered in the box.
|
|
82
81
|
*
|
|
83
|
-
* `cover`/`contain` child
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
* so it is not exposed on the theming surface.
|
|
82
|
+
* `cover`/`contain` size the child from the component's own styles, in
|
|
83
|
+
* the `astryx-base` cascade layer. Styles in a later layer (Tailwind
|
|
84
|
+
* utilities, `astryx-theme`), unlayered CSS, and inline styles on the
|
|
85
|
+
* child still win. When omitted, the child is left unstyled (the
|
|
86
|
+
* pre-existing contract). `fit` is structural, not visual, so it is not
|
|
87
|
+
* exposed on the theming surface.
|
|
90
88
|
*
|
|
91
89
|
* @example
|
|
92
90
|
* ```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB;;;;;;;OAOG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAmB,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAgClB;yBA1Ce,WAAW"}
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
* SYNC: When modified, update these files to stay in sync:
|
|
10
10
|
* - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
|
|
11
11
|
* - /packages/core/src/AspectRatio/AspectRatio.test.tsx
|
|
12
|
-
* - /packages/core/src/reset.css (AspectRatio fit baseline rules)
|
|
13
12
|
* - /apps/storybook/stories/AspectRatio.stories.tsx
|
|
14
13
|
* - /packages/cli/assets/templates/blocks/components/AspectRatio/ (showcase blocks)
|
|
15
14
|
*/
|
|
@@ -132,10 +131,52 @@ export function AspectRatio({
|
|
|
132
131
|
0: {
|
|
133
132
|
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d"
|
|
134
133
|
},
|
|
135
|
-
|
|
134
|
+
8: {
|
|
136
135
|
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k"
|
|
136
|
+
},
|
|
137
|
+
4: {
|
|
138
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d xyz6fim x1m6kvgq"
|
|
139
|
+
},
|
|
140
|
+
12: {
|
|
141
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k xyz6fim x1m6kvgq"
|
|
142
|
+
},
|
|
143
|
+
2: {
|
|
144
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x492jj3"
|
|
145
|
+
},
|
|
146
|
+
10: {
|
|
147
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k x492jj3"
|
|
148
|
+
},
|
|
149
|
+
6: {
|
|
150
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d xyz6fim x1m6kvgq x492jj3"
|
|
151
|
+
},
|
|
152
|
+
14: {
|
|
153
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k xyz6fim x1m6kvgq x492jj3"
|
|
154
|
+
},
|
|
155
|
+
1: {
|
|
156
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x16lv2iq"
|
|
157
|
+
},
|
|
158
|
+
9: {
|
|
159
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k x16lv2iq"
|
|
160
|
+
},
|
|
161
|
+
5: {
|
|
162
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d xyz6fim x1m6kvgq x16lv2iq"
|
|
163
|
+
},
|
|
164
|
+
13: {
|
|
165
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k xyz6fim x1m6kvgq x16lv2iq"
|
|
166
|
+
},
|
|
167
|
+
3: {
|
|
168
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x16lv2iq"
|
|
169
|
+
},
|
|
170
|
+
11: {
|
|
171
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k x16lv2iq"
|
|
172
|
+
},
|
|
173
|
+
7: {
|
|
174
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d xyz6fim x1m6kvgq x16lv2iq"
|
|
175
|
+
},
|
|
176
|
+
15: {
|
|
177
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k xyz6fim x1m6kvgq x16lv2iq"
|
|
137
178
|
}
|
|
138
|
-
}[!!(fit === 'center') << 0],
|
|
179
|
+
}[!!(fit === 'center') << 3 | !!(fit === 'cover' || fit === 'contain') << 2 | !!(fit === 'cover') << 1 | !!(fit === 'contain') << 0],
|
|
139
180
|
children: children
|
|
140
181
|
})
|
|
141
182
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAsID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAgMrB;yBA/Me,cAAc"}
|
|
@@ -37,7 +37,7 @@ import { useListFocus } from "../hooks/useListFocus.js";
|
|
|
37
37
|
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
38
38
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
39
39
|
import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
|
|
40
|
-
import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
|
|
40
|
+
import { DropdownMenuContext, DropdownMenuRootOpenContext } from "../DropdownMenu/DropdownMenuContext.js";
|
|
41
41
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
|
|
42
42
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
43
43
|
// =============================================================================
|
|
@@ -454,7 +454,10 @@ function BreadcrumbMenuTrigger({
|
|
|
454
454
|
}),
|
|
455
455
|
children: /*#__PURE__*/_jsx(DropdownMenuContext, {
|
|
456
456
|
value: contextValue,
|
|
457
|
-
children:
|
|
457
|
+
children: /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
|
|
458
|
+
value: popover.isOpen,
|
|
459
|
+
children: menuContent
|
|
460
|
+
})
|
|
458
461
|
})
|
|
459
462
|
}), {
|
|
460
463
|
placement: 'below',
|
|
@@ -68,7 +68,7 @@ export interface CommandPaletteInputProps extends Omit<BaseProps<HTMLInputElemen
|
|
|
68
68
|
* </CommandPalette>
|
|
69
69
|
* ```
|
|
70
70
|
*/
|
|
71
|
-
export declare function CommandPaletteInput({ value: controlledValue, onValueChange, placeholder: placeholderFromProps, label, hasAutoFocus, endContent, onChange, onKeyDown, ref, xstyle, className, style, ...props }: CommandPaletteInputProps): import("react").JSX.Element;
|
|
71
|
+
export declare function CommandPaletteInput({ value: controlledValue, onValueChange, placeholder: placeholderFromProps, label, hasAutoFocus, endContent, onChange, onKeyDown, onFocus, onBlur, ref, xstyle, className, style, ...props }: CommandPaletteInputProps): import("react").JSX.Element;
|
|
72
72
|
export declare namespace CommandPaletteInput {
|
|
73
73
|
var displayName: string;
|
|
74
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsE5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,KAAK,EACL,YAAmB,EACnB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAmK1B;yBAnLe,mBAAmB"}
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
* - /apps/storybook/stories/CommandPaletteInput.stories.tsx
|
|
14
14
|
* - /packages/cli/assets/templates/blocks/components/CommandPalette/ (showcase blocks)
|
|
15
15
|
*/
|
|
16
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
16
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
17
17
|
import * as stylex from '@stylexjs/stylex';
|
|
18
18
|
import { Icon } from "../Icon/index.js";
|
|
19
19
|
import { Spinner } from "../Spinner/index.js";
|
|
@@ -23,6 +23,8 @@ import { colorVars, typeScaleVars, spacingVars, typographyVars } from "../theme/
|
|
|
23
23
|
import { useCommandPaletteContext } from "./CommandPaletteContext.js";
|
|
24
24
|
import { useDialogContext } from "../Dialog/DialogContext.js";
|
|
25
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
26
|
+
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
27
|
+
import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
26
28
|
import { useTranslator } from "../i18n/index.js";
|
|
27
29
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
28
30
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -35,6 +37,20 @@ const styles = {
|
|
|
35
37
|
k8WAf4: "x8o8v82",
|
|
36
38
|
kmuXW: "x2lah0s",
|
|
37
39
|
$$css: true
|
|
40
|
+
},
|
|
41
|
+
input: {
|
|
42
|
+
kUk6DE: "x98rzlu",
|
|
43
|
+
k7Eaqz: "xeuugli",
|
|
44
|
+
kMzoRj: "xc342km",
|
|
45
|
+
ksu8eU: "xng3xce",
|
|
46
|
+
kWkggS: "xjbqb8w",
|
|
47
|
+
kMwMTN: "x1tgivj0",
|
|
48
|
+
kMv6JI: "x9ynric",
|
|
49
|
+
kGuDYH: "xjm74w1 xf9zqsd",
|
|
50
|
+
kLWn49: "xw6l6zx",
|
|
51
|
+
kmVPX3: "x1717udv",
|
|
52
|
+
k8Qsv1: "xeyghm5",
|
|
53
|
+
$$css: true
|
|
38
54
|
}
|
|
39
55
|
};
|
|
40
56
|
/**
|
|
@@ -65,6 +81,8 @@ export function CommandPaletteInput({
|
|
|
65
81
|
endContent,
|
|
66
82
|
onChange,
|
|
67
83
|
onKeyDown,
|
|
84
|
+
onFocus,
|
|
85
|
+
onBlur,
|
|
68
86
|
ref,
|
|
69
87
|
xstyle,
|
|
70
88
|
className,
|
|
@@ -79,6 +97,20 @@ export function CommandPaletteInput({
|
|
|
79
97
|
const hasListbox = ctx ? ctx.selectableItems.length > 0 : true;
|
|
80
98
|
const dialogContext = useDialogContext();
|
|
81
99
|
const inputRef = useRef(null);
|
|
100
|
+
const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
|
|
101
|
+
|
|
102
|
+
// Text-entry controls match :focus-visible after pointer focus in Chromium.
|
|
103
|
+
// Keep the shared selector, but narrow its ring to focus acquired through
|
|
104
|
+
// keyboard navigation so a click or pointer-opened palette stays unringed.
|
|
105
|
+
useInteractionModalityTracking();
|
|
106
|
+
const handleFocus = useCallback(event => {
|
|
107
|
+
setIsKeyboardFocus(getInteractionModality() === 'keyboard');
|
|
108
|
+
onFocus?.(event);
|
|
109
|
+
}, [onFocus]);
|
|
110
|
+
const handleBlur = useCallback(event => {
|
|
111
|
+
setIsKeyboardFocus(false);
|
|
112
|
+
onBlur?.(event);
|
|
113
|
+
}, [onBlur]);
|
|
82
114
|
|
|
83
115
|
// Use context values as fallback
|
|
84
116
|
const value = controlledValue ?? ctx?.search;
|
|
@@ -134,9 +166,7 @@ export function CommandPaletteInput({
|
|
|
134
166
|
}), /*#__PURE__*/_jsx("input", {
|
|
135
167
|
...props,
|
|
136
168
|
ref: useMergedRefs(ref, inputRef),
|
|
137
|
-
...
|
|
138
|
-
className: "x98rzlu xeuugli xc342km xng3xce x1a2a7pz xjbqb8w x1tgivj0 x9ynric xjm74w1 xf9zqsd xw6l6zx x1717udv xeyghm5"
|
|
139
|
-
},
|
|
169
|
+
...(isKeyboardFocus ? focusOutlineProps.focusVisible(styles.input) : focusOutlineProps.suppressed(styles.input)),
|
|
140
170
|
type: "text",
|
|
141
171
|
role: ctx ? 'combobox' : standaloneRole,
|
|
142
172
|
"aria-expanded": ctx ? ctx.isOpen && hasListbox : callerSets('aria-expanded') ? props['aria-expanded'] : callerOwnsPopup || undefined,
|
|
@@ -153,7 +183,9 @@ export function CommandPaletteInput({
|
|
|
153
183
|
handleValueChange?.(e.target.value);
|
|
154
184
|
onChange?.(e);
|
|
155
185
|
},
|
|
156
|
-
onKeyDown: handleKeyDown
|
|
186
|
+
onKeyDown: handleKeyDown,
|
|
187
|
+
onFocus: handleFocus,
|
|
188
|
+
onBlur: handleBlur
|
|
157
189
|
}), (ctx?.isBusy || hasEndContent) && /*#__PURE__*/_jsxs("span", {
|
|
158
190
|
...{
|
|
159
191
|
className: "x78zum5 x6s0dn4 xzye2dw x2lah0s"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqCrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AA6G1C,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,uBAAuB,CAAC;AAE7D,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,YAAwB,EACxB,SAAiB,EACjB,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,iBAAiB,EAChC,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAselB;yBA3fe,WAAW"}
|
|
@@ -43,7 +43,7 @@ import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
|
43
43
|
import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
44
44
|
import { MenuBottomSheetActionList } from "../DropdownMenu/MenuBottomSheetActionList.js";
|
|
45
45
|
import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
|
|
46
|
-
import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
|
|
46
|
+
import { DropdownMenuContext, DropdownMenuRootOpenContext } from "../DropdownMenu/DropdownMenuContext.js";
|
|
47
47
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "../DropdownMenu/menuItemRoles.js";
|
|
48
48
|
import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
|
|
49
49
|
import { useMenuDrillIn } from "../DropdownMenu/useMenuDrillIn.js";
|
|
@@ -505,7 +505,10 @@ export function ContextMenu({
|
|
|
505
505
|
...mergeProps(themeProps('context-menu'), stylex.props(usesBottomSheet ? styles.sheetMenu : styles.menu, !usesBottomSheet && (hasOverflow ? styles.touchPanYPinchZoom : styles.touchPinchZoom), xstyle), className, style),
|
|
506
506
|
children: /*#__PURE__*/_jsx(DropdownMenuContext, {
|
|
507
507
|
value: contextValue,
|
|
508
|
-
children:
|
|
508
|
+
children: /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
|
|
509
|
+
value: isOpen,
|
|
510
|
+
children: resolvedMenuContent
|
|
511
|
+
})
|
|
509
512
|
})
|
|
510
513
|
});
|
|
511
514
|
const renderedBottomSheetContent = itemsProp !== undefined ? /*#__PURE__*/_jsxs("div", {
|
|
@@ -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 } from "./DropdownMenuContext.js";
|
|
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";
|
|
@@ -693,6 +693,43 @@ function DropdownMenuPopover({
|
|
|
693
693
|
// above it ends the gesture in flight through this ref.
|
|
694
694
|
const cancelMenuPressRef = useRef(() => {});
|
|
695
695
|
|
|
696
|
+
// Submenu flyouts are `popover="manual"` elements nested inside the menu's
|
|
697
|
+
// `popover="auto"` element, so the browser's light dismiss of the menu never
|
|
698
|
+
// reaches them: without a sweep they keep their open state and their
|
|
699
|
+
// top-layer entry while the menu is hidden, and re-anchor to the viewport
|
|
700
|
+
// corner when the menu reopens (#6893). Closing them through the popover
|
|
701
|
+
// API lets useLayer's toggle handling reset their state. Only flyouts that
|
|
702
|
+
// are actually open are touched: `:popover-open` ships wherever
|
|
703
|
+
// `hidePopover` does (they are one API), and the display fallback keeps its
|
|
704
|
+
// own open signal (`display: block`) so it is guarded the same way.
|
|
705
|
+
const hideOpenFlyouts = useCallback(() => {
|
|
706
|
+
const menuPopover = contentRef.current;
|
|
707
|
+
if (!menuPopover) {
|
|
708
|
+
return;
|
|
709
|
+
}
|
|
710
|
+
// Innermost first: hiding a flyout may unmount the flyouts nested inside
|
|
711
|
+
// it, and a detached element no longer has the toggle listener that
|
|
712
|
+
// resets its open state.
|
|
713
|
+
const flyouts = [...menuPopover.querySelectorAll('[popover]')].reverse();
|
|
714
|
+
for (const flyout of flyouts) {
|
|
715
|
+
if (typeof flyout.hidePopover === 'function') {
|
|
716
|
+
if (flyout.matches(':popover-open')) {
|
|
717
|
+
flyout.hidePopover();
|
|
718
|
+
}
|
|
719
|
+
} else if (flyout.style.display === 'block') {
|
|
720
|
+
flyout.style.display = 'none';
|
|
721
|
+
const toggle = new Event('toggle', {
|
|
722
|
+
bubbles: false
|
|
723
|
+
});
|
|
724
|
+
Object.defineProperty(toggle, 'newState', {
|
|
725
|
+
value: 'closed',
|
|
726
|
+
configurable: true
|
|
727
|
+
});
|
|
728
|
+
flyout.dispatchEvent(toggle);
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
}, []);
|
|
732
|
+
|
|
696
733
|
// Focus lands somewhere stated when the menu closes. A press outside that
|
|
697
734
|
// landed on a focusable control has already moved focus there; leave it.
|
|
698
735
|
// Otherwise — a row acted, Escape, a press on nothing — focus returns to
|
|
@@ -700,6 +737,9 @@ function DropdownMenuPopover({
|
|
|
700
737
|
// keyboard (the modality tracker decides; the suppressed style hides the
|
|
701
738
|
// pointer case, which Safari would otherwise paint after a touch pick).
|
|
702
739
|
const handleLayerHide = useCallback(() => {
|
|
740
|
+
// Whatever closed the menu — light dismiss, the dismissal stack, Escape
|
|
741
|
+
// or a controlled close — its flyouts close with it.
|
|
742
|
+
hideOpenFlyouts();
|
|
703
743
|
if (suppressControlledRollbackHideRef.current) {
|
|
704
744
|
suppressControlledRollbackHideRef.current = false;
|
|
705
745
|
return;
|
|
@@ -728,7 +768,7 @@ function DropdownMenuPopover({
|
|
|
728
768
|
focusForLastInput(trigger, {
|
|
729
769
|
preventScroll: true
|
|
730
770
|
});
|
|
731
|
-
}, [isControlled, onOpenChange, prepareFocusReturn]);
|
|
771
|
+
}, [hideOpenFlyouts, isControlled, onOpenChange, prepareFocusReturn]);
|
|
732
772
|
|
|
733
773
|
// Defer item focus until the layer has committed open, so focus restore
|
|
734
774
|
// captures the trigger instead of the first menu item.
|
|
@@ -1260,7 +1300,10 @@ function DropdownMenuPopover({
|
|
|
1260
1300
|
value: hasRegions,
|
|
1261
1301
|
children: /*#__PURE__*/_jsx(DropdownMenuContext, {
|
|
1262
1302
|
value: contextValue,
|
|
1263
|
-
children:
|
|
1303
|
+
children: /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
|
|
1304
|
+
value: isOpen,
|
|
1305
|
+
children: menuContent
|
|
1306
|
+
})
|
|
1264
1307
|
})
|
|
1265
1308
|
})
|
|
1266
1309
|
})), {
|
|
@@ -43,6 +43,23 @@ export interface DropdownMenuContextValue {
|
|
|
43
43
|
*/
|
|
44
44
|
menuLabel?: string;
|
|
45
45
|
}
|
|
46
|
+
/**
|
|
47
|
+
* Whether the root menu of this layer tree is open; internal companion to
|
|
48
|
+
* `DropdownMenuContext`, on its own unexported context so the public
|
|
49
|
+
* `DropdownMenuContextValue` surface stays unchanged. A sub-menu's hover
|
|
50
|
+
* intent must die with the menu: a hover-open scheduled on its trigger
|
|
51
|
+
* before the menu closed from elsewhere would otherwise fire into the
|
|
52
|
+
* hidden menu and reopen the flyout behind it (#6893). `null` means no
|
|
53
|
+
* signal, treated as open, matching providers that have no state to give.
|
|
54
|
+
* @internal
|
|
55
|
+
*/
|
|
56
|
+
export declare const DropdownMenuRootOpenContext: import("react").Context<boolean | null>;
|
|
57
|
+
/**
|
|
58
|
+
* Whether the root menu backing these compound items is open. True when no
|
|
59
|
+
* provider gave a signal.
|
|
60
|
+
* @internal
|
|
61
|
+
*/
|
|
62
|
+
export declare function useDropdownMenuRootOpen(): boolean;
|
|
46
63
|
export declare const DropdownMenuContext: import("react").Context<DropdownMenuContextValue | null>;
|
|
47
64
|
/**
|
|
48
65
|
* Hook for compound menu items to access menu state.
|
|
@@ -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,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,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"}
|
|
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,6 +32,27 @@ import { createLayerScopedContext } from "../Layer/layerScopedContext.js";
|
|
|
32
32
|
* @internal
|
|
33
33
|
*/
|
|
34
34
|
|
|
35
|
+
/**
|
|
36
|
+
* Whether the root menu of this layer tree is open; internal companion to
|
|
37
|
+
* `DropdownMenuContext`, on its own unexported context so the public
|
|
38
|
+
* `DropdownMenuContextValue` surface stays unchanged. A sub-menu's hover
|
|
39
|
+
* intent must die with the menu: a hover-open scheduled on its trigger
|
|
40
|
+
* before the menu closed from elsewhere would otherwise fire into the
|
|
41
|
+
* hidden menu and reopen the flyout behind it (#6893). `null` means no
|
|
42
|
+
* signal, treated as open, matching providers that have no state to give.
|
|
43
|
+
* @internal
|
|
44
|
+
*/
|
|
45
|
+
export const DropdownMenuRootOpenContext = createLayerScopedContext(null);
|
|
46
|
+
DropdownMenuRootOpenContext.displayName = 'DropdownMenuRootOpenContext';
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Whether the root menu backing these compound items is open. True when no
|
|
50
|
+
* provider gave a signal.
|
|
51
|
+
* @internal
|
|
52
|
+
*/
|
|
53
|
+
export function useDropdownMenuRootOpen() {
|
|
54
|
+
return use(DropdownMenuRootOpenContext) !== false;
|
|
55
|
+
}
|
|
35
56
|
export const DropdownMenuContext = createLayerScopedContext(null);
|
|
36
57
|
DropdownMenuContext.displayName = 'DropdownMenuContext';
|
|
37
58
|
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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"}
|
|
@@ -71,7 +71,7 @@ import { composeEventHandlers, mergeProps, rtlStyles } from "../utils/index.js";
|
|
|
71
71
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
72
72
|
import { themeProps } from "../utils/themeProps.js";
|
|
73
73
|
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "./menuItemRoles.js";
|
|
74
|
-
import { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
74
|
+
import { DropdownMenuContext, DropdownMenuRootOpenContext, useDropdownMenuContext, useDropdownMenuRootOpen } from "./DropdownMenuContext.js";
|
|
75
75
|
import { focusMenuItemOnHover } from "./menuItemHover.js";
|
|
76
76
|
import { DropdownMenuItem } from "./DropdownMenuItem.js";
|
|
77
77
|
import { useTranslator } from "../i18n/index.js";
|
|
@@ -280,7 +280,11 @@ export function DropdownMenuSubMenu(props) {
|
|
|
280
280
|
// Hover intent and the shared hover→click guard only: this level owns its own
|
|
281
281
|
// click handling, roving focus and typeahead. popover="manual", so the
|
|
282
282
|
// invoker wiring other consumers need does not apply. A drill-in row has no
|
|
283
|
-
// hover: a finger drives it, and a press opens it.
|
|
283
|
+
// hover: a finger drives it, and a press opens it. Hover is also gated on
|
|
284
|
+
// the root menu being open, so a hover-open scheduled before the menu
|
|
285
|
+
// closed from elsewhere is cancelled instead of firing into the hidden
|
|
286
|
+
// menu (#6893).
|
|
287
|
+
const isRootMenuOpen = useDropdownMenuRootOpen();
|
|
284
288
|
const {
|
|
285
289
|
triggerProps,
|
|
286
290
|
contentProps,
|
|
@@ -289,7 +293,7 @@ export function DropdownMenuSubMenu(props) {
|
|
|
289
293
|
show: showLayer,
|
|
290
294
|
hide: hideLayer,
|
|
291
295
|
isOpen: isFlyoutOpen,
|
|
292
|
-
isEnabled: canOpen && !isDrillIn,
|
|
296
|
+
isEnabled: canOpen && !isDrillIn && isRootMenuOpen,
|
|
293
297
|
// The safe triangle toward the flyout's near edge is built from the
|
|
294
298
|
// flyout this component renders, not the hook's own list ref.
|
|
295
299
|
flyoutRef: menuRef
|
|
@@ -565,7 +569,7 @@ export function DropdownMenuSubMenu(props) {
|
|
|
565
569
|
});
|
|
566
570
|
const resolvedMenuWidth = menuWidth ? resolveMenuWidth(menuWidth, layerViewportInset.maxInlineSizeFallback) : null;
|
|
567
571
|
const popoverXstyle = resolvedMenuWidth ? resolvedMenuWidth.property === 'inlineSize' ? flyoutStyles.popoverCustomIntrinsicWidth(resolvedMenuWidth.value) : flyoutStyles.popoverCustomWidth(resolvedMenuWidth.value) : flyoutStyles.popover;
|
|
568
|
-
const
|
|
572
|
+
const nestedRows = /*#__PURE__*/_jsxs(DropdownMenuContext, {
|
|
569
573
|
value: nestedMenuContext,
|
|
570
574
|
children: [isDrillIn && /*#__PURE__*/_jsx(DropdownMenuItem, {
|
|
571
575
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
@@ -581,6 +585,13 @@ export function DropdownMenuSubMenu(props) {
|
|
|
581
585
|
})
|
|
582
586
|
}), children]
|
|
583
587
|
});
|
|
588
|
+
// Nested rows live in this level's flyout, a layer of their own where the
|
|
589
|
+
// layer-scoped signal resets; re-provide it so their pending hover intent
|
|
590
|
+
// dies with the root menu too.
|
|
591
|
+
const nestedContent = /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
|
|
592
|
+
value: isRootMenuOpen,
|
|
593
|
+
children: nestedRows
|
|
594
|
+
});
|
|
584
595
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
585
596
|
children: [/*#__PURE__*/_jsx(Item
|
|
586
597
|
// Host attributes and handlers first: the row's role, tab stop, popup
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAgB,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4D5C,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAgB,EAChB,SAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAoDjB;yBAhEe,UAAU"}
|
|
@@ -18,7 +18,7 @@ import { createElement } from 'react';
|
|
|
18
18
|
import * as stylex from '@stylexjs/stylex';
|
|
19
19
|
import "../theme/tokens.stylex.js";
|
|
20
20
|
import { colorVars, spacingVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
21
|
-
import { mergeProps } from "../utils/index.js";
|
|
21
|
+
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
22
22
|
import { themeProps } from "../utils/themeProps.js";
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
const styles = {
|
|
@@ -82,7 +82,7 @@ export function EmptyState({
|
|
|
82
82
|
...mergeProps(themeProps('empty-state', {
|
|
83
83
|
variant: isCompact ? 'compact' : null
|
|
84
84
|
}), stylex.props(styles.container, isCompact && styles.containerCompact, xstyle), className, style),
|
|
85
|
-
children: [icon
|
|
85
|
+
children: [isRenderable(icon) && /*#__PURE__*/_jsx("div", {
|
|
86
86
|
"aria-hidden": "true",
|
|
87
87
|
children: icon
|
|
88
88
|
}), /*#__PURE__*/_jsxs("div", {
|
|
@@ -98,13 +98,7 @@ export function EmptyState({
|
|
|
98
98
|
1: {
|
|
99
99
|
className: "x1ghz6dp xjb2p0i x2mo6ok xf74fhv x1tgivj0 xcr08ib"
|
|
100
100
|
}
|
|
101
|
-
}[!!isCompact << 0]), title), description
|
|
102
|
-
/*#__PURE__*/
|
|
103
|
-
// Rendered as <div> (not <p>): description accepts ReactNode and a
|
|
104
|
-
// <p> cannot legally contain block children, which causes hydration
|
|
105
|
-
// mismatches. The StyleX style sets margin: 0, so appearance is
|
|
106
|
-
// unchanged.
|
|
107
|
-
_jsx("div", {
|
|
101
|
+
}[!!isCompact << 0]), title), isRenderable(description) && /*#__PURE__*/_jsx("div", {
|
|
108
102
|
...mergeProps(themeProps('empty-state-description', {
|
|
109
103
|
variant: isCompact ? 'compact' : null
|
|
110
104
|
}), {
|
|
@@ -117,7 +111,7 @@ export function EmptyState({
|
|
|
117
111
|
}[!!isCompact << 0]),
|
|
118
112
|
children: description
|
|
119
113
|
})]
|
|
120
|
-
}), actions
|
|
114
|
+
}), isRenderable(actions) && /*#__PURE__*/_jsx("div", {
|
|
121
115
|
...{
|
|
122
116
|
0: {
|
|
123
117
|
className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj xcsaf9d"
|
package/dist/Field/Field.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Field.tsx
|
|
3
|
-
* @input Uses React,
|
|
3
|
+
* @input Uses React, StyleX, BaseProps, FieldLabel/FieldStatus, FormLayoutContext, Text, VisuallyHidden, theme/status utilities
|
|
4
4
|
* @output Exports Field component, FieldProps
|
|
5
5
|
* @position Core implementation; consumed by index.ts, tested by Field.test.tsx
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AAGnE,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AAGnE,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AA+DtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BA0HZ;yBAhJe,KAAK"}
|
package/dist/Field/Field.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Field.tsx
|
|
7
|
-
* @input Uses React,
|
|
7
|
+
* @input Uses React, StyleX, BaseProps, FieldLabel/FieldStatus, FormLayoutContext, Text, VisuallyHidden, theme/status utilities
|
|
8
8
|
* @output Exports Field component, FieldProps
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by Field.test.tsx
|
|
10
10
|
*
|
|
@@ -26,6 +26,7 @@ import { mergeProps } from "../utils/index.js";
|
|
|
26
26
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
27
27
|
import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
|
|
28
28
|
import { Text } from "../Text/index.js";
|
|
29
|
+
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
29
30
|
import { themeProps } from "../utils/themeProps.js";
|
|
30
31
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
31
32
|
const styles = {
|
|
@@ -140,10 +141,10 @@ export function Field({
|
|
|
140
141
|
if (isHorizontalLabels) {
|
|
141
142
|
return /*#__PURE__*/_jsxs("div", {
|
|
142
143
|
ref: ref,
|
|
144
|
+
...props,
|
|
143
145
|
...mergeProps(themeProps('field', {
|
|
144
146
|
layout: 'horizontal-labels'
|
|
145
147
|
}), stylex.props(styles.horizontalLabels, xstyle), className, style),
|
|
146
|
-
...props,
|
|
147
148
|
children: [/*#__PURE__*/_jsx("div", {
|
|
148
149
|
...{
|
|
149
150
|
className: "x1enrzb7"
|
|
@@ -153,12 +154,15 @@ export function Field({
|
|
|
153
154
|
...{
|
|
154
155
|
className: "x78zum5 xdt5ytf xc8icb0 x19nvjgn xlumz0n x1qs65gq"
|
|
155
156
|
},
|
|
156
|
-
children: [description && /*#__PURE__*/_jsx(
|
|
157
|
+
children: [description && (isLabelHidden ? /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
158
|
+
id: resolvedDescriptionID,
|
|
159
|
+
children: description
|
|
160
|
+
}) : /*#__PURE__*/_jsx(Text, {
|
|
157
161
|
type: "supporting",
|
|
158
162
|
display: "block",
|
|
159
163
|
id: resolvedDescriptionID,
|
|
160
164
|
children: description
|
|
161
|
-
}), children, statusNode]
|
|
165
|
+
})), children, statusNode]
|
|
162
166
|
})]
|
|
163
167
|
});
|
|
164
168
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridSpan.d.ts","sourceRoot":"","sources":["../../src/Grid/GridSpan.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;
|
|
1
|
+
{"version":3,"file":"GridSpan.d.ts","sourceRoot":"","sources":["../../src/Grid/GridSpan.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BAwBf;yBAjCe,QAAQ"}
|