@astryxdesign/core 0.7.2-canary.621784f → 0.7.2-canary.64e1dde
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/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +4 -1
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.js +1 -0
- package/dist/CheckboxList/CheckboxList.d.ts +1 -1
- package/dist/CheckboxList/CheckboxList.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxList.js +6 -2
- package/dist/DropdownMenu/DropdownMenu.d.ts +1 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +36 -7
- package/dist/DropdownMenu/DropdownMenuGroup.d.ts +6 -4
- package/dist/DropdownMenu/DropdownMenuGroup.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuGroup.js +4 -3
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts +24 -0
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts.map +1 -0
- package/dist/DropdownMenu/lazyMenuBottomSheet.js +46 -0
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +45 -11
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +6 -2
- package/package.json +3 -3
- package/scripts/agent-doc-state.mjs +38 -0
- package/scripts/postinstall.mjs +1 -1
- package/src/AvatarGroup/AvatarGroupOverflow.test.tsx +24 -1
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +2 -0
- package/src/Chat/ChatLayoutScrollButton.test.tsx +13 -0
- package/src/Chat/ChatLayoutScrollButton.tsx +4 -2
- package/src/Chat/__tests__/ChatLayoutScrollButton.a11y.chromium.spec.ts +64 -19
- package/src/CheckboxList/CheckboxList.fr10.test.tsx +29 -2
- package/src/CheckboxList/CheckboxList.tsx +4 -1
- package/src/Code/Code.doc.mjs +1 -0
- package/src/CommandPalette/CommandPalette.doc.mjs +2 -0
- package/src/ContextMenu/ContextMenu.test.tsx +6 -1
- package/src/Drawer/Drawer.doc.mjs +1 -0
- package/src/DropdownMenu/DropdownMenu.ssr.test.tsx +57 -0
- package/src/DropdownMenu/DropdownMenu.test.tsx +17 -5
- package/src/DropdownMenu/DropdownMenu.tsx +36 -8
- package/src/DropdownMenu/DropdownMenuGroup.doc.mjs +169 -10
- package/src/DropdownMenu/DropdownMenuGroup.tsx +6 -4
- package/src/DropdownMenu/DropdownMenuLazySheet.test.tsx +126 -0
- package/src/DropdownMenu/__tests__/DropdownMenuGroupAudit.a11y.chromium.spec.ts +334 -0
- package/src/DropdownMenu/__tests__/warmMenuBottomSheet.tsx +43 -0
- package/src/DropdownMenu/lazyMenuBottomSheet.ts +71 -0
- package/src/Field/FieldLabel.doc.mjs +133 -26
- package/src/Field/FieldLabel.spec.md +172 -0
- package/src/Field/__tests__/FieldLabelAudit.a11y.chromium.spec.ts +296 -0
- package/src/Icon/Icon.doc.mjs +36 -0
- package/src/Layout/LayoutHeader.doc.mjs +5 -0
- package/src/MetadataList/MetadataList.doc.mjs +1 -1
- package/src/MoreMenu/MoreMenu.test.tsx +5 -1
- package/src/PowerSearch/PowerSearchValueEditor.test.tsx +71 -0
- package/src/PowerSearch/PowerSearchValueEditor.tsx +45 -0
- package/src/ProgressBar/ProgressBar.doc.mjs +1 -0
- package/src/Resizable/useResizable.doc.mjs +2 -0
- package/src/ScrollableArea/ScrollableArea.doc.mjs +1 -1
- package/src/SideNav/SideNav.spec.md +227 -0
- package/src/SideNav/SideNav.test.tsx +41 -0
- package/src/SideNav/SideNavItem.tsx +5 -2
- package/src/Spinner/Spinner.doc.mjs +1 -1
- package/src/Timestamp/Timestamp.doc.mjs +1 -1
- package/src/ToggleButton/ToggleButtonGroup.doc.mjs +4 -0
- package/src/Toolbar/Toolbar.test.tsx +0 -8
- package/src/Toolbar/__tests__/Toolbar.a11y.chromium.spec.ts +163 -0
- package/src/Toolbar/__tests__/Toolbar.a11y.renders.tsx +63 -0
- package/src/Toolbar/__tests__/Toolbar.a11y.states.ts +142 -0
- package/src/Toolbar/__tests__/Toolbar.a11y.test.tsx +126 -0
- package/src/postinstall.test.mjs +46 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAuEtC;yBAhFe,mBAAmB"}
|
|
@@ -142,7 +142,10 @@ export function AvatarGroupOverflow({
|
|
|
142
142
|
});
|
|
143
143
|
}
|
|
144
144
|
return /*#__PURE__*/_jsx("span", {
|
|
145
|
-
ref: ref
|
|
145
|
+
ref: ref
|
|
146
|
+
// Before the caller's props so a caller-supplied role still wins.
|
|
147
|
+
,
|
|
148
|
+
role: "img",
|
|
146
149
|
...rest,
|
|
147
150
|
"aria-label": label,
|
|
148
151
|
...mergeProps(themeProps('avatar-group-overflow', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAuED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,qBAwC7B;yBAjDe,sBAAsB"}
|
|
@@ -89,6 +89,7 @@ export function ChatLayoutScrollButton({
|
|
|
89
89
|
...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
|
|
90
90
|
...rest,
|
|
91
91
|
children: /*#__PURE__*/_jsx("div", {
|
|
92
|
+
inert: !isVisible,
|
|
92
93
|
...mergeProps(themeProps('chat-layout-scroll-button'), {
|
|
93
94
|
0: {
|
|
94
95
|
className: "xawy1a7 xb3r6kr xjspbzw x1prclbq x14hfi27 x1ueg155 xrgg2z9 xlr8y92 x2rcmwa x12w9bfk xg01cxk x47corl xlshs6z x1jys5uj"
|
|
@@ -115,7 +115,7 @@ export interface CheckboxListProps extends Omit<FieldInputBaseProps<HTMLDivEleme
|
|
|
115
115
|
* </CheckboxList>
|
|
116
116
|
* ```
|
|
117
117
|
*/
|
|
118
|
-
export declare function CheckboxList({ label, isLabelHidden, description, status, value, onChange, changeAction, density, hasDividers, isDisabled, disabledMessage, isReadOnly, children, ref, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, 'aria-describedby': ariaDescribedByProp, ...restProps }: CheckboxListProps): import("react").JSX.Element;
|
|
118
|
+
export declare function CheckboxList({ label, isLabelHidden, description, status, value, onChange, changeAction, density, hasDividers, isDisabled, disabledMessage, isReadOnly, children, ref, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: CheckboxListProps): import("react").JSX.Element;
|
|
119
119
|
export declare namespace CheckboxList {
|
|
120
120
|
var displayName: string;
|
|
121
121
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAarD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,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;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAoB,EACpB,WAAmB,EACnB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EAAE,kBAAkB,EACrC,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,iBAAiB,+BA2InB;yBApKe,YAAY"}
|
|
@@ -24,6 +24,7 @@ import { useTooltip } from "../Tooltip/index.js";
|
|
|
24
24
|
import * as stylex from '@stylexjs/stylex';
|
|
25
25
|
import { mergeProps } from "../utils/index.js";
|
|
26
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
27
|
+
import { joinAriaIDs } from "../utils/inputAria.js";
|
|
27
28
|
import { CheckboxListContext } from "./CheckboxListContext.js";
|
|
28
29
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
29
30
|
const EMPTY_ARRAY = [];
|
|
@@ -67,6 +68,7 @@ export function CheckboxList({
|
|
|
67
68
|
controlXstyle,
|
|
68
69
|
controlClassName,
|
|
69
70
|
controlStyle,
|
|
71
|
+
'aria-labelledby': ariaLabelledByProp,
|
|
70
72
|
'aria-describedby': ariaDescribedByProp,
|
|
71
73
|
...restProps
|
|
72
74
|
}) {
|
|
@@ -152,8 +154,10 @@ export function CheckboxList({
|
|
|
152
154
|
// internally by isEnabled, so attaching unconditionally is safe.
|
|
153
155
|
ref: useMergedRefs(ref, disabledMessageTooltip.ref),
|
|
154
156
|
...mergeProps(stylex.props(controlXstyle), controlClassName, controlStyle),
|
|
155
|
-
role: "group"
|
|
156
|
-
|
|
157
|
+
role: "group"
|
|
158
|
+
// A caller aria-labelledby names the group together with its label.
|
|
159
|
+
,
|
|
160
|
+
"aria-labelledby": joinAriaIDs(labelID, ariaLabelledByProp),
|
|
157
161
|
"aria-describedby": [ariaDescribedByProp, description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
|
|
158
162
|
children: /*#__PURE__*/_jsx(List, {
|
|
159
163
|
density: density,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file DropdownMenu.tsx
|
|
3
|
-
* @input Uses React, StyleX, usePopover, MenuBottomSheet, Button, List,
|
|
3
|
+
* @input Uses React, StyleX, usePopover, MenuBottomSheet (lazy), Button, List,
|
|
4
4
|
* useListFocus, and the shared viewport-safe menu-width resolver
|
|
5
5
|
* @output Exports DropdownMenu with caller-selected popover or bottom-sheet
|
|
6
6
|
* presentation
|
|
@@ -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;AA0B9D,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file DropdownMenu.tsx
|
|
7
|
-
* @input Uses React, StyleX, usePopover, MenuBottomSheet, Button, List,
|
|
7
|
+
* @input Uses React, StyleX, usePopover, MenuBottomSheet (lazy), Button, List,
|
|
8
8
|
* useListFocus, and the shared viewport-safe menu-width resolver
|
|
9
9
|
* @output Exports DropdownMenu with caller-selected popover or bottom-sheet
|
|
10
10
|
* presentation
|
|
@@ -58,8 +58,8 @@ import { resolveMenuWidth } from "./menuWidth.js";
|
|
|
58
58
|
import "../Layer/layerViewportInset.stylex.js";
|
|
59
59
|
import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
|
|
60
60
|
import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
|
|
61
|
-
|
|
62
|
-
import { MenuBottomSheetActionList } from "./
|
|
61
|
+
// Loaded on demand: only the bottom-sheet presentation renders the sheet.
|
|
62
|
+
import { MenuBottomSheet, MenuBottomSheetActionList } from "./lazyMenuBottomSheet.js";
|
|
63
63
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
64
64
|
import "../theme/tokens.stylex.js";
|
|
65
65
|
import { spacingVars, colorVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
@@ -491,12 +491,41 @@ function DropdownMenuBottomSheet({
|
|
|
491
491
|
if (!isOpen || openModalityRef.current !== 'keyboard') {
|
|
492
492
|
return;
|
|
493
493
|
}
|
|
494
|
-
const
|
|
495
|
-
|
|
496
|
-
|
|
494
|
+
const findFirstAction = () => actionListRef.current?.querySelector('button:not(:disabled), a[href]') ?? null;
|
|
495
|
+
let observer = null;
|
|
496
|
+
let frame = requestAnimationFrame(() => {
|
|
497
|
+
const action = findFirstAction();
|
|
498
|
+
if (action != null) {
|
|
499
|
+
action.focus({
|
|
500
|
+
preventScroll: true
|
|
501
|
+
});
|
|
502
|
+
return;
|
|
503
|
+
}
|
|
504
|
+
// The sheet loads on demand, so a keyboard open can arrive before its
|
|
505
|
+
// rows exist. Wait for them, then focus a frame later so the sheet's
|
|
506
|
+
// own open-focus has already run.
|
|
507
|
+
observer = new MutationObserver(() => {
|
|
508
|
+
const loaded = findFirstAction();
|
|
509
|
+
if (loaded == null) {
|
|
510
|
+
return;
|
|
511
|
+
}
|
|
512
|
+
observer?.disconnect();
|
|
513
|
+
observer = null;
|
|
514
|
+
frame = requestAnimationFrame(() => {
|
|
515
|
+
loaded.focus({
|
|
516
|
+
preventScroll: true
|
|
517
|
+
});
|
|
518
|
+
});
|
|
519
|
+
});
|
|
520
|
+
observer.observe(document.body, {
|
|
521
|
+
childList: true,
|
|
522
|
+
subtree: true
|
|
497
523
|
});
|
|
498
524
|
});
|
|
499
|
-
return () =>
|
|
525
|
+
return () => {
|
|
526
|
+
cancelAnimationFrame(frame);
|
|
527
|
+
observer?.disconnect();
|
|
528
|
+
};
|
|
500
529
|
}, [currentItems, isOpen]);
|
|
501
530
|
useEffect(() => {
|
|
502
531
|
if (!isOpen) {
|
|
@@ -23,7 +23,8 @@ import type { BaseProps } from '../BaseProps';
|
|
|
23
23
|
export interface DropdownMenuGroupProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
|
|
24
24
|
/**
|
|
25
25
|
* Heading shown above the group's rows and used as the group's accessible
|
|
26
|
-
* name (`aria-labelledby`). Omit it for an unnamed group.
|
|
26
|
+
* name (`aria-labelledby`). Omit it for an unnamed group. Keep this content
|
|
27
|
+
* non-interactive; controls belong in DropdownMenu's `header` or `footer`.
|
|
27
28
|
*/
|
|
28
29
|
title?: ReactNode;
|
|
29
30
|
/** The rows of the group: menu items, selectable items, sub-menus. */
|
|
@@ -34,9 +35,10 @@ export interface DropdownMenuGroupProps extends Pick<BaseProps, 'xstyle' | 'clas
|
|
|
34
35
|
/**
|
|
35
36
|
* A titled group of menu rows.
|
|
36
37
|
*
|
|
37
|
-
* Renders `role="group"` named by its heading. The heading is
|
|
38
|
-
*
|
|
39
|
-
*
|
|
38
|
+
* Renders `role="group"` named by its heading. The heading is not a
|
|
39
|
+
* `menuitem`, so arrow-key navigation and typeahead skip it. Keep heading
|
|
40
|
+
* content non-interactive; place controls in DropdownMenu's `header` or
|
|
41
|
+
* `footer`. The compound peer of
|
|
40
42
|
* `{type: 'section', title, items}` in the `items` data API.
|
|
41
43
|
*
|
|
42
44
|
* @example
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC
|
|
1
|
+
{"version":3,"file":"DropdownMenuGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,sBAAsB,+BAuBxB;yBA9Be,iBAAiB"}
|
|
@@ -32,9 +32,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
32
32
|
/**
|
|
33
33
|
* A titled group of menu rows.
|
|
34
34
|
*
|
|
35
|
-
* Renders `role="group"` named by its heading. The heading is
|
|
36
|
-
*
|
|
37
|
-
*
|
|
35
|
+
* Renders `role="group"` named by its heading. The heading is not a
|
|
36
|
+
* `menuitem`, so arrow-key navigation and typeahead skip it. Keep heading
|
|
37
|
+
* content non-interactive; place controls in DropdownMenu's `header` or
|
|
38
|
+
* `footer`. The compound peer of
|
|
38
39
|
* `{type: 'section', title, items}` in the `items` data API.
|
|
39
40
|
*
|
|
40
41
|
* @example
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file lazyMenuBottomSheet.ts
|
|
3
|
+
* @input Uses React lazy and Suspense, useIsHydrating, MenuBottomSheet, and
|
|
4
|
+
* MenuBottomSheetActionList
|
|
5
|
+
* @output Exports MenuBottomSheet and MenuBottomSheetActionList wrappers that
|
|
6
|
+
* load the touch sheet on first render
|
|
7
|
+
* @position Internal to DropdownMenu
|
|
8
|
+
*
|
|
9
|
+
* The touch sheet (BottomSheet, its gestures, and the touch action list) only
|
|
10
|
+
* renders for the bottom-sheet presentation. Loading it on demand keeps it out
|
|
11
|
+
* of pages whose dropdowns only open as anchored popovers. Each wrapper keeps
|
|
12
|
+
* the wrapped component's props and renders nothing until its module loads.
|
|
13
|
+
*
|
|
14
|
+
* Neither wrapper renders on the server or in the render that hydrates server
|
|
15
|
+
* HTML (spec:AST-013 FR9): a lazy component that has not loaded yet would
|
|
16
|
+
* leave server markup incomplete and abort hydration. The closed sheet has no
|
|
17
|
+
* visible markup, so it first renders right after hydration.
|
|
18
|
+
*/
|
|
19
|
+
import { type ComponentProps, type ReactElement } from 'react';
|
|
20
|
+
import type { MenuBottomSheet as EagerMenuBottomSheet } from './MenuBottomSheet';
|
|
21
|
+
import type { MenuBottomSheetActionList as EagerMenuBottomSheetActionList } from './MenuBottomSheetActionList';
|
|
22
|
+
export declare function MenuBottomSheet(props: ComponentProps<typeof EagerMenuBottomSheet>): ReactElement | null;
|
|
23
|
+
export declare function MenuBottomSheetActionList(props: ComponentProps<typeof EagerMenuBottomSheetActionList>): ReactElement | null;
|
|
24
|
+
//# sourceMappingURL=lazyMenuBottomSheet.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lazyMenuBottomSheet.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/lazyMenuBottomSheet.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,eAAe,IAAI,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,KAAK,EAAC,yBAAyB,IAAI,8BAA8B,EAAC,MAAM,6BAA6B,CAAC;AAc7G,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,oBAAoB,CAAC,GACjD,YAAY,GAAG,IAAI,CASrB;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,cAAc,CAAC,OAAO,8BAA8B,CAAC,GAC3D,YAAY,GAAG,IAAI,CASrB"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file lazyMenuBottomSheet.ts
|
|
7
|
+
* @input Uses React lazy and Suspense, useIsHydrating, MenuBottomSheet, and
|
|
8
|
+
* MenuBottomSheetActionList
|
|
9
|
+
* @output Exports MenuBottomSheet and MenuBottomSheetActionList wrappers that
|
|
10
|
+
* load the touch sheet on first render
|
|
11
|
+
* @position Internal to DropdownMenu
|
|
12
|
+
*
|
|
13
|
+
* The touch sheet (BottomSheet, its gestures, and the touch action list) only
|
|
14
|
+
* renders for the bottom-sheet presentation. Loading it on demand keeps it out
|
|
15
|
+
* of pages whose dropdowns only open as anchored popovers. Each wrapper keeps
|
|
16
|
+
* the wrapped component's props and renders nothing until its module loads.
|
|
17
|
+
*
|
|
18
|
+
* Neither wrapper renders on the server or in the render that hydrates server
|
|
19
|
+
* HTML (spec:AST-013 FR9): a lazy component that has not loaded yet would
|
|
20
|
+
* leave server markup incomplete and abort hydration. The closed sheet has no
|
|
21
|
+
* visible markup, so it first renders right after hydration.
|
|
22
|
+
*/
|
|
23
|
+
import { createElement, lazy, Suspense } from 'react';
|
|
24
|
+
import { useIsHydrating } from "../hooks/useIsHydrating.js";
|
|
25
|
+
const LazyMenuBottomSheet = /*#__PURE__*/lazy(async () => import("./MenuBottomSheet.js").then(module => ({
|
|
26
|
+
default: module.MenuBottomSheet
|
|
27
|
+
})));
|
|
28
|
+
const LazyMenuBottomSheetActionList = /*#__PURE__*/lazy(async () => import("./MenuBottomSheetActionList.js").then(module => ({
|
|
29
|
+
default: module.MenuBottomSheetActionList
|
|
30
|
+
})));
|
|
31
|
+
export function MenuBottomSheet(props) {
|
|
32
|
+
if (useIsHydrating()) {
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
return /*#__PURE__*/createElement(Suspense, {
|
|
36
|
+
fallback: null
|
|
37
|
+
}, /*#__PURE__*/createElement(LazyMenuBottomSheet, props));
|
|
38
|
+
}
|
|
39
|
+
export function MenuBottomSheetActionList(props) {
|
|
40
|
+
if (useIsHydrating()) {
|
|
41
|
+
return null;
|
|
42
|
+
}
|
|
43
|
+
return /*#__PURE__*/createElement(Suspense, {
|
|
44
|
+
fallback: null
|
|
45
|
+
}, /*#__PURE__*/createElement(LazyMenuBottomSheetActionList, props));
|
|
46
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PowerSearchValueEditor.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchValueEditor.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EAIZ,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAqBxD,MAAM,WAAW,2BAA2B;IAC1C,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"PowerSearchValueEditor.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchValueEditor.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EAIZ,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAqBxD,MAAM,WAAW,2BAA2B;IAC1C,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA4rBD,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,UAAU,GACX,EAAE,2BAA2B,4BA0I7B"}
|
|
@@ -59,7 +59,8 @@ function StringEditor({
|
|
|
59
59
|
filterValue,
|
|
60
60
|
onChange,
|
|
61
61
|
onEnter: _onEnter,
|
|
62
|
-
maxMenuItems
|
|
62
|
+
maxMenuItems,
|
|
63
|
+
isDisabled
|
|
63
64
|
}) {
|
|
64
65
|
const t = useTranslator();
|
|
65
66
|
const currentValue = filterValue?.type === 'string' ? filterValue.value : '';
|
|
@@ -74,6 +75,7 @@ function StringEditor({
|
|
|
74
75
|
return /*#__PURE__*/_jsx(Typeahead, {
|
|
75
76
|
label: t('@astryx.powersearch.valueEditor.value'),
|
|
76
77
|
isLabelHidden: true,
|
|
78
|
+
isDisabled: isDisabled,
|
|
77
79
|
searchSource: operatorValue.searchSource,
|
|
78
80
|
value: selectedItem,
|
|
79
81
|
onChange: item => {
|
|
@@ -97,6 +99,7 @@ function StringEditor({
|
|
|
97
99
|
return /*#__PURE__*/_jsx(TextInput, {
|
|
98
100
|
label: t('@astryx.powersearch.valueEditor.value'),
|
|
99
101
|
isLabelHidden: true,
|
|
102
|
+
isDisabled: isDisabled,
|
|
100
103
|
value: currentValue,
|
|
101
104
|
placeholder: t('@astryx.powersearch.valueEditor.enterValuePlaceholder'),
|
|
102
105
|
onChange: value => {
|
|
@@ -111,7 +114,8 @@ function StringListEditor({
|
|
|
111
114
|
operatorValue,
|
|
112
115
|
filterValue,
|
|
113
116
|
onChange,
|
|
114
|
-
maxMenuItems
|
|
117
|
+
maxMenuItems,
|
|
118
|
+
isDisabled
|
|
115
119
|
}) {
|
|
116
120
|
const t = useTranslator();
|
|
117
121
|
const currentValue = useMemo(() => {
|
|
@@ -140,6 +144,7 @@ function StringListEditor({
|
|
|
140
144
|
return /*#__PURE__*/_jsx(Tokenizer, {
|
|
141
145
|
label: t('@astryx.powersearch.valueEditor.values'),
|
|
142
146
|
isLabelHidden: true,
|
|
147
|
+
isDisabled: isDisabled,
|
|
143
148
|
searchSource: source,
|
|
144
149
|
value: currentValue,
|
|
145
150
|
onChange: items => {
|
|
@@ -212,7 +217,8 @@ function IntegerEditor({
|
|
|
212
217
|
operatorValue,
|
|
213
218
|
filterValue,
|
|
214
219
|
onChange,
|
|
215
|
-
onEnter
|
|
220
|
+
onEnter,
|
|
221
|
+
isDisabled
|
|
216
222
|
}) {
|
|
217
223
|
const t = useTranslator();
|
|
218
224
|
const currentValue = filterValue?.type === 'integer' ? filterValue.value : undefined;
|
|
@@ -227,6 +233,7 @@ function IntegerEditor({
|
|
|
227
233
|
return /*#__PURE__*/_jsx(NumberInput, {
|
|
228
234
|
label: t('@astryx.powersearch.valueEditor.value'),
|
|
229
235
|
isLabelHidden: true,
|
|
236
|
+
isDisabled: isDisabled,
|
|
230
237
|
value: currentValue ?? null,
|
|
231
238
|
onChange: handlers.handleChange,
|
|
232
239
|
onFocus: handlers.handleFocus,
|
|
@@ -244,7 +251,8 @@ function FloatEditor({
|
|
|
244
251
|
operatorValue,
|
|
245
252
|
filterValue,
|
|
246
253
|
onChange,
|
|
247
|
-
onEnter
|
|
254
|
+
onEnter,
|
|
255
|
+
isDisabled
|
|
248
256
|
}) {
|
|
249
257
|
const t = useTranslator();
|
|
250
258
|
const currentValue = filterValue?.type === 'float' ? filterValue.value : undefined;
|
|
@@ -259,6 +267,7 @@ function FloatEditor({
|
|
|
259
267
|
return /*#__PURE__*/_jsx(NumberInput, {
|
|
260
268
|
label: t('@astryx.powersearch.valueEditor.value'),
|
|
261
269
|
isLabelHidden: true,
|
|
270
|
+
isDisabled: isDisabled,
|
|
262
271
|
value: currentValue ?? null,
|
|
263
272
|
onChange: handlers.handleChange,
|
|
264
273
|
onFocus: handlers.handleFocus,
|
|
@@ -274,13 +283,15 @@ function FloatEditor({
|
|
|
274
283
|
function TimeEditor({
|
|
275
284
|
operatorValue,
|
|
276
285
|
filterValue,
|
|
277
|
-
onChange
|
|
286
|
+
onChange,
|
|
287
|
+
isDisabled
|
|
278
288
|
}) {
|
|
279
289
|
const t = useTranslator();
|
|
280
290
|
const currentValue = filterValue?.type === 'time' ? filterValue.value : undefined;
|
|
281
291
|
return /*#__PURE__*/_jsx(TimeInput, {
|
|
282
292
|
label: t('@astryx.powersearch.valueEditor.time'),
|
|
283
293
|
isLabelHidden: true,
|
|
294
|
+
isDisabled: isDisabled,
|
|
284
295
|
value: currentValue,
|
|
285
296
|
onChange: value => {
|
|
286
297
|
if (value != null) {
|
|
@@ -296,7 +307,8 @@ function TimeEditor({
|
|
|
296
307
|
}
|
|
297
308
|
function DateAbsoluteEditor({
|
|
298
309
|
filterValue,
|
|
299
|
-
onChange
|
|
310
|
+
onChange,
|
|
311
|
+
isDisabled
|
|
300
312
|
}) {
|
|
301
313
|
const t = useTranslator();
|
|
302
314
|
// Convert unixSeconds to ISO date string for the date input
|
|
@@ -310,6 +322,7 @@ function DateAbsoluteEditor({
|
|
|
310
322
|
return /*#__PURE__*/_jsx(DateInput, {
|
|
311
323
|
label: t('@astryx.powersearch.valueEditor.date'),
|
|
312
324
|
isLabelHidden: true,
|
|
325
|
+
isDisabled: isDisabled,
|
|
313
326
|
value: currentValue,
|
|
314
327
|
onChange: value => {
|
|
315
328
|
if (value != null) {
|
|
@@ -325,7 +338,8 @@ function DateAbsoluteEditor({
|
|
|
325
338
|
function DateRelativeEditor({
|
|
326
339
|
operatorValue,
|
|
327
340
|
filterValue,
|
|
328
|
-
onChange
|
|
341
|
+
onChange,
|
|
342
|
+
isDisabled
|
|
329
343
|
}) {
|
|
330
344
|
const t = useTranslator();
|
|
331
345
|
const currentValue = filterValue?.type === 'date_relative' ? filterValue.value : undefined;
|
|
@@ -366,6 +380,7 @@ function DateRelativeEditor({
|
|
|
366
380
|
return /*#__PURE__*/_jsx(Selector, {
|
|
367
381
|
label: t('@astryx.powersearch.valueEditor.relativeDate'),
|
|
368
382
|
isLabelHidden: true,
|
|
383
|
+
isDisabled: isDisabled,
|
|
369
384
|
options: options,
|
|
370
385
|
value: currentValue,
|
|
371
386
|
onChange: value => {
|
|
@@ -378,7 +393,8 @@ function DateRelativeEditor({
|
|
|
378
393
|
}
|
|
379
394
|
function DateRangeEditor({
|
|
380
395
|
filterValue,
|
|
381
|
-
onChange
|
|
396
|
+
onChange,
|
|
397
|
+
isDisabled
|
|
382
398
|
}) {
|
|
383
399
|
const t = useTranslator();
|
|
384
400
|
const currentValue = useMemo(() => {
|
|
@@ -425,6 +441,7 @@ function DateRangeEditor({
|
|
|
425
441
|
children: /*#__PURE__*/_jsx(DateRangeInput, {
|
|
426
442
|
label: t('@astryx.powersearch.valueEditor.dateRange'),
|
|
427
443
|
isLabelHidden: true,
|
|
444
|
+
isDisabled: isDisabled,
|
|
428
445
|
value: currentValue,
|
|
429
446
|
onChange: handleChange,
|
|
430
447
|
hasClear: false
|
|
@@ -434,7 +451,8 @@ function DateRangeEditor({
|
|
|
434
451
|
function EnumEditor({
|
|
435
452
|
operatorValue,
|
|
436
453
|
filterValue,
|
|
437
|
-
onChange
|
|
454
|
+
onChange,
|
|
455
|
+
isDisabled
|
|
438
456
|
}) {
|
|
439
457
|
const t = useTranslator();
|
|
440
458
|
const currentValue = filterValue?.type === 'enum' ? filterValue.value : undefined;
|
|
@@ -445,6 +463,7 @@ function EnumEditor({
|
|
|
445
463
|
return /*#__PURE__*/_jsx(Selector, {
|
|
446
464
|
label: t('@astryx.powersearch.valueEditor.value'),
|
|
447
465
|
isLabelHidden: true,
|
|
466
|
+
isDisabled: isDisabled,
|
|
448
467
|
options: options,
|
|
449
468
|
value: currentValue,
|
|
450
469
|
onChange: value => {
|
|
@@ -458,7 +477,8 @@ function EnumEditor({
|
|
|
458
477
|
function EnumListEditor({
|
|
459
478
|
operatorValue,
|
|
460
479
|
filterValue,
|
|
461
|
-
onChange
|
|
480
|
+
onChange,
|
|
481
|
+
isDisabled
|
|
462
482
|
}) {
|
|
463
483
|
const t = useTranslator();
|
|
464
484
|
const items = useMemo(() => enumItemsToSearchableItems(operatorValue.values), [operatorValue.values]);
|
|
@@ -478,6 +498,7 @@ function EnumListEditor({
|
|
|
478
498
|
return /*#__PURE__*/_jsx(Tokenizer, {
|
|
479
499
|
label: t('@astryx.powersearch.valueEditor.values'),
|
|
480
500
|
isLabelHidden: true,
|
|
501
|
+
isDisabled: isDisabled,
|
|
481
502
|
searchSource: source,
|
|
482
503
|
value: currentValue,
|
|
483
504
|
onChange: selectedItems => {
|
|
@@ -500,7 +521,8 @@ function EntityListEditor({
|
|
|
500
521
|
operatorValue,
|
|
501
522
|
filterValue,
|
|
502
523
|
onChange,
|
|
503
|
-
maxMenuItems
|
|
524
|
+
maxMenuItems,
|
|
525
|
+
isDisabled
|
|
504
526
|
}) {
|
|
505
527
|
const t = useTranslator();
|
|
506
528
|
const source = useMemo(() => {
|
|
@@ -529,6 +551,7 @@ function EntityListEditor({
|
|
|
529
551
|
return /*#__PURE__*/_jsx(Tokenizer, {
|
|
530
552
|
label: t('@astryx.powersearch.valueEditor.entities'),
|
|
531
553
|
isLabelHidden: true,
|
|
554
|
+
isDisabled: isDisabled,
|
|
532
555
|
searchSource: source,
|
|
533
556
|
value: currentValue,
|
|
534
557
|
onChange: items => {
|
|
@@ -594,6 +617,7 @@ export function PowerSearchValueEditor({
|
|
|
594
617
|
return null;
|
|
595
618
|
case 'string':
|
|
596
619
|
return /*#__PURE__*/_jsx(StringEditor, {
|
|
620
|
+
isDisabled: isDisabled,
|
|
597
621
|
operatorValue: operatorValue,
|
|
598
622
|
filterValue: filterValue,
|
|
599
623
|
onChange: onChange,
|
|
@@ -602,6 +626,7 @@ export function PowerSearchValueEditor({
|
|
|
602
626
|
});
|
|
603
627
|
case 'string_list':
|
|
604
628
|
return /*#__PURE__*/_jsx(StringListEditor, {
|
|
629
|
+
isDisabled: isDisabled,
|
|
605
630
|
operatorValue: operatorValue,
|
|
606
631
|
filterValue: filterValue,
|
|
607
632
|
onChange: onChange,
|
|
@@ -609,6 +634,7 @@ export function PowerSearchValueEditor({
|
|
|
609
634
|
});
|
|
610
635
|
case 'integer':
|
|
611
636
|
return /*#__PURE__*/_jsx(IntegerEditor, {
|
|
637
|
+
isDisabled: isDisabled,
|
|
612
638
|
operatorValue: operatorValue,
|
|
613
639
|
filterValue: filterValue,
|
|
614
640
|
onChange: onChange,
|
|
@@ -616,6 +642,7 @@ export function PowerSearchValueEditor({
|
|
|
616
642
|
});
|
|
617
643
|
case 'float':
|
|
618
644
|
return /*#__PURE__*/_jsx(FloatEditor, {
|
|
645
|
+
isDisabled: isDisabled,
|
|
619
646
|
operatorValue: operatorValue,
|
|
620
647
|
filterValue: filterValue,
|
|
621
648
|
onChange: onChange,
|
|
@@ -623,42 +650,49 @@ export function PowerSearchValueEditor({
|
|
|
623
650
|
});
|
|
624
651
|
case 'time':
|
|
625
652
|
return /*#__PURE__*/_jsx(TimeEditor, {
|
|
653
|
+
isDisabled: isDisabled,
|
|
626
654
|
operatorValue: operatorValue,
|
|
627
655
|
filterValue: filterValue,
|
|
628
656
|
onChange: onChange
|
|
629
657
|
});
|
|
630
658
|
case 'date_absolute':
|
|
631
659
|
return /*#__PURE__*/_jsx(DateAbsoluteEditor, {
|
|
660
|
+
isDisabled: isDisabled,
|
|
632
661
|
operatorValue: operatorValue,
|
|
633
662
|
filterValue: filterValue,
|
|
634
663
|
onChange: onChange
|
|
635
664
|
});
|
|
636
665
|
case 'date_relative':
|
|
637
666
|
return /*#__PURE__*/_jsx(DateRelativeEditor, {
|
|
667
|
+
isDisabled: isDisabled,
|
|
638
668
|
operatorValue: operatorValue,
|
|
639
669
|
filterValue: filterValue,
|
|
640
670
|
onChange: onChange
|
|
641
671
|
});
|
|
642
672
|
case 'date_range':
|
|
643
673
|
return /*#__PURE__*/_jsx(DateRangeEditor, {
|
|
674
|
+
isDisabled: isDisabled,
|
|
644
675
|
operatorValue: operatorValue,
|
|
645
676
|
filterValue: filterValue,
|
|
646
677
|
onChange: onChange
|
|
647
678
|
});
|
|
648
679
|
case 'enum':
|
|
649
680
|
return /*#__PURE__*/_jsx(EnumEditor, {
|
|
681
|
+
isDisabled: isDisabled,
|
|
650
682
|
operatorValue: operatorValue,
|
|
651
683
|
filterValue: filterValue,
|
|
652
684
|
onChange: onChange
|
|
653
685
|
});
|
|
654
686
|
case 'enum_list':
|
|
655
687
|
return /*#__PURE__*/_jsx(EnumListEditor, {
|
|
688
|
+
isDisabled: isDisabled,
|
|
656
689
|
operatorValue: operatorValue,
|
|
657
690
|
filterValue: filterValue,
|
|
658
691
|
onChange: onChange
|
|
659
692
|
});
|
|
660
693
|
case 'entity_list':
|
|
661
694
|
return /*#__PURE__*/_jsx(EntityListEditor, {
|
|
695
|
+
isDisabled: isDisabled,
|
|
662
696
|
operatorValue: operatorValue,
|
|
663
697
|
filterValue: filterValue,
|
|
664
698
|
onChange: onChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4ShF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4ShF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAqalB;yBAvbe,WAAW"}
|
|
@@ -405,7 +405,9 @@ export function SideNavItem({
|
|
|
405
405
|
size,
|
|
406
406
|
selected: isSelected ? 'selected' : null,
|
|
407
407
|
disabled: isDisabled ? 'disabled' : null
|
|
408
|
-
}), focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled)
|
|
408
|
+
}), focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], styles.itemCollapsed, size === 'sm' && styles.itemCollapsedSm, size === 'lg' && styles.itemCollapsedLg, isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled),
|
|
409
|
+
// Spread after `rest`, so keep the caller's class beside these.
|
|
410
|
+
rest.className),
|
|
409
411
|
...pressable
|
|
410
412
|
};
|
|
411
413
|
const collapsedAccessibleLabel = rest['aria-label'] != null && rest['aria-label'].trim() !== '' ? rest['aria-label'] : label;
|
|
@@ -512,8 +514,10 @@ export function SideNavItem({
|
|
|
512
514
|
|
|
513
515
|
// The indent is a runtime value, so it reaches the element as an inline
|
|
514
516
|
// style. These props are spread after `rest`, so fold the caller's `style`
|
|
515
|
-
// back in (caller wins) rather than letting the indent replace it
|
|
517
|
+
// back in (caller wins) rather than letting the indent replace it, and the
|
|
518
|
+
// caller's `className` beside the row's own classes.
|
|
516
519
|
const callerStyle = {
|
|
520
|
+
className: rest.className,
|
|
517
521
|
style: rest.style
|
|
518
522
|
};
|
|
519
523
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.7.2-canary.
|
|
3
|
+
"version": "0.7.2-canary.64e1dde",
|
|
4
4
|
"displayName": "Astryx Core",
|
|
5
5
|
"description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -792,8 +792,8 @@
|
|
|
792
792
|
"react-dom": ">=19.0.0"
|
|
793
793
|
},
|
|
794
794
|
"devDependencies": {
|
|
795
|
-
"@astryxdesign/a11y-spec": "0.7.2-canary.
|
|
796
|
-
"@astryxdesign/cli": "0.7.2-canary.
|
|
795
|
+
"@astryxdesign/a11y-spec": "0.7.2-canary.64e1dde",
|
|
796
|
+
"@astryxdesign/cli": "0.7.2-canary.64e1dde",
|
|
797
797
|
"@babel/cli": "^7.29.7",
|
|
798
798
|
"@babel/core": "^7.29.7",
|
|
799
799
|
"@babel/preset-react": "^7.29.7",
|