@astryxdesign/core 0.7.9-canary.cfd25ce → 0.7.9-canary.d0cf29a
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/AppShell/observeMainOverflow.d.ts.map +1 -1
- package/dist/AppShell/observeMainOverflow.js +9 -6
- package/dist/Layout/LayoutContent.d.ts +3 -1
- package/dist/Layout/LayoutContent.d.ts.map +1 -1
- package/dist/Layout/LayoutContent.js +12 -4
- package/dist/Layout/LayoutPanel.d.ts +4 -1
- package/dist/Layout/LayoutPanel.d.ts.map +1 -1
- package/dist/Layout/LayoutPanel.js +13 -4
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +5 -0
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +6 -1
- package/dist/Stack/StackItem.d.ts +8 -4
- package/dist/Stack/StackItem.d.ts.map +1 -1
- package/dist/Stack/StackItem.js +17 -4
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +13 -10
- package/dist/Tokenizer/Tokenizer.d.ts +14 -10
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +189 -89
- package/dist/astryx.css +9 -9
- package/dist/hooks/StackItemScrollRegion.d.ts +31 -0
- package/dist/hooks/StackItemScrollRegion.d.ts.map +1 -0
- package/dist/hooks/StackItemScrollRegion.js +40 -0
- package/dist/hooks/useScrollRegionProps.d.ts +35 -0
- package/dist/hooks/useScrollRegionProps.d.ts.map +1 -0
- package/dist/hooks/useScrollRegionProps.js +51 -0
- package/dist/i18n/generated-english/hooks/useScrollRegionProps.generated.d.ts +8 -0
- package/dist/i18n/generated-english/hooks/useScrollRegionProps.generated.d.ts.map +1 -0
- package/dist/i18n/generated-english/hooks/useScrollRegionProps.generated.js +12 -0
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +1 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +1 -0
- package/dist/motion/uikit/timing.d.ts +14 -10
- package/dist/motion/uikit/timing.d.ts.map +1 -1
- package/dist/motion/uikit/timing.js +7 -5
- package/dist/privateAttributes/press.stylex.d.ts +2 -2
- package/dist/privateAttributes/press.stylex.d.ts.map +1 -1
- package/dist/privateAttributes/press.stylex.js +12 -13
- package/dist/theme/themeMotion.d.ts +3 -2
- package/dist/theme/themeMotion.d.ts.map +1 -1
- package/dist/theme/themeMotion.js +3 -2
- package/dist/utils/interactionOverlay.stylex.d.ts +3 -8
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +27 -34
- package/dist/utils/pressFeedback.d.ts +3 -2
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +8 -8
- package/dist/utils/pressGesture.d.ts +6 -6
- package/dist/utils/pressGesture.d.ts.map +1 -1
- package/dist/utils/pressGesture.js +9 -8
- package/locales/en.json +4 -0
- package/locales/pseudo.json +3 -0
- package/package.json +4 -4
- package/src/AppShell/observeMainOverflow.ts +9 -6
- package/src/Layout/LayoutContent.doc.mjs +6 -3
- package/src/Layout/LayoutContent.tsx +10 -4
- package/src/Layout/LayoutPanel.doc.mjs +6 -3
- package/src/Layout/LayoutPanel.tsx +11 -4
- package/src/MobileNav/MobileNav.tsx +5 -0
- package/src/PowerSearch/PowerSearch.tsx +14 -1
- package/src/Stack/Stack.doc.mjs +1 -1
- package/src/Stack/StackItem.tsx +27 -13
- package/src/Switch/Switch.tsx +7 -6
- package/src/Tokenizer/Tokenizer.doc.mjs +3 -3
- package/src/Tokenizer/Tokenizer.tsx +252 -115
- package/src/hooks/StackItemScrollRegion.tsx +57 -0
- package/src/hooks/useScrollRegionProps.ts +76 -0
- package/src/i18n/generated-english/hooks/useScrollRegionProps.generated.ts +13 -0
- package/src/i18n/generated-locales/en.generated.ts +1 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +1 -0
- package/src/motion/uikit/timing.ts +7 -5
- package/src/privateAttributes/press.stylex.ts +9 -10
- package/src/theme/themeMotion.ts +3 -2
- package/src/utils/interactionOverlay.stylex.ts +17 -25
- package/src/utils/pressFeedback.ts +15 -8
- package/src/utils/pressGesture.ts +11 -8
- package/dist/utils/rowPressLayer.stylex.d.ts +0 -14
- package/dist/utils/rowPressLayer.stylex.d.ts.map +0 -1
- package/dist/utils/rowPressLayer.stylex.js +0 -25
- package/src/utils/rowPressLayer.stylex.ts +0 -27
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"observeMainOverflow.d.ts","sourceRoot":"","sources":["../../src/AppShell/observeMainOverflow.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"observeMainOverflow.d.ts","sourceRoot":"","sources":["../../src/AppShell/observeMainOverflow.ts"],"names":[],"mappings":"AA4CA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GACrC,MAAM,IAAI,CA2FZ"}
|
|
@@ -4,20 +4,23 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file observeMainOverflow.ts
|
|
7
|
-
* @input
|
|
8
|
-
*
|
|
7
|
+
* @input A scroll container that holds its content as direct children with
|
|
8
|
+
* no wrapper: AppShell's main region under `height="fill"`, or a scrolling
|
|
9
|
+
* LayoutContent, LayoutPanel or StackItem
|
|
9
10
|
* @output observeMainOverflow(main, onChange): reports whether main's content
|
|
10
11
|
* overflows it on either axis, once at the start and on every change, and
|
|
11
12
|
* returns the function that stops observing
|
|
12
|
-
* @position Internal
|
|
13
|
+
* @position Internal and never exported. AppShell makes main a
|
|
13
14
|
* keyboard stop only while it overflows (`spec:AST-025` FR12,
|
|
14
|
-
* `component:AppShell` FR4 and PR1).
|
|
15
|
-
*
|
|
16
|
-
*
|
|
15
|
+
* `component:AppShell` FR4 and PR1). useScrollRegionProps names a
|
|
16
|
+
* scrolling region only while it overflows. Main has no inner content
|
|
17
|
+
* box, so its content grows inside it without resizing it: its direct
|
|
18
|
+
* children's sizes are watched instead.
|
|
17
19
|
*
|
|
18
20
|
* SYNC: When modified, update:
|
|
19
21
|
* - /packages/core/src/AppShell/AppShell.tsx
|
|
20
22
|
* - /packages/core/src/AppShell/observeMainOverflow.test.ts
|
|
23
|
+
* - /packages/core/src/hooks/useScrollRegionProps.ts
|
|
21
24
|
*/
|
|
22
25
|
import { getLogicalAxisMapping, measureLogicalScrollAxis } from "../hooks/scrollGeometry.js";
|
|
23
26
|
import { observeMutations } from "../utils/sharedMutationObserver.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file LayoutContent.tsx
|
|
3
|
-
* @input Uses React StyleX, LayoutSlotsContext
|
|
3
|
+
* @input Uses React StyleX, LayoutSlotsContext, useScrollRegionProps
|
|
4
4
|
* @output Exports LayoutContent component and LayoutContentProps
|
|
5
5
|
* @position Scrollable main content area for Layout. Wraps the primary body content
|
|
6
6
|
* with automatic scroll containment and context-aware padding.
|
|
@@ -35,6 +35,8 @@ export interface LayoutContentProps extends BaseProps<HTMLDivElement> {
|
|
|
35
35
|
/**
|
|
36
36
|
* Accessible label for the landmark.
|
|
37
37
|
* Required when role is set and multiple landmarks of the same type exist.
|
|
38
|
+
* While the content scrolls, it also names the scrolling region, which
|
|
39
|
+
* otherwise takes a translated "Content".
|
|
38
40
|
*/
|
|
39
41
|
label?: string;
|
|
40
42
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutContent.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutContent.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"LayoutContent.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutContent.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAqFhD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAmB,EACnB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAoDpB;yBA/De,aAAa"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file LayoutContent.tsx
|
|
7
|
-
* @input Uses React StyleX, LayoutSlotsContext
|
|
7
|
+
* @input Uses React StyleX, LayoutSlotsContext, useScrollRegionProps
|
|
8
8
|
* @output Exports LayoutContent component and LayoutContentProps
|
|
9
9
|
* @position Scrollable main content area for Layout. Wraps the primary body content
|
|
10
10
|
* with automatic scroll containment and context-aware padding.
|
|
@@ -19,6 +19,8 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
19
19
|
import "../theme/tokens.stylex.js";
|
|
20
20
|
import { spacingVars } from "../theme/tokens.stylex.js";
|
|
21
21
|
import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
|
|
22
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
23
|
+
import { useScrollRegionProps } from "../hooks/useScrollRegionProps.js";
|
|
22
24
|
import { mergeProps } from "../utils/mergeProps.js";
|
|
23
25
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
26
|
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
|
|
@@ -146,10 +148,16 @@ export function LayoutContent({
|
|
|
146
148
|
hasEnd
|
|
147
149
|
} = use(LayoutSlotsContext);
|
|
148
150
|
const isZeroPadding = padding === 0;
|
|
151
|
+
const region = useScrollRegionProps({
|
|
152
|
+
isScrollable,
|
|
153
|
+
role,
|
|
154
|
+
label
|
|
155
|
+
});
|
|
156
|
+
const mergedRef = useMergedRefs(ref, region.ref);
|
|
149
157
|
return /*#__PURE__*/_jsx("div", {
|
|
150
|
-
ref:
|
|
151
|
-
role: role,
|
|
152
|
-
"aria-label": label,
|
|
158
|
+
ref: mergedRef,
|
|
159
|
+
role: region.role,
|
|
160
|
+
"aria-label": region['aria-label'],
|
|
153
161
|
...mergeProps(themeProps('layout-content'), stylex.props(styles.content,
|
|
154
162
|
// Outer padding on container edges (unless content is full bleed)
|
|
155
163
|
!hasStart && !isZeroPadding && padding == null && styles.noStart, !hasEnd && !isZeroPadding && padding == null && styles.noEnd, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], !hasStart && !hasEnd && !isZeroPadding && styles.constrainedNoPanelsStart, !hasStart && !hasEnd && !isZeroPadding && styles.constrainedNoPanelsEnd, hasStart && !hasEnd && !isZeroPadding && styles.constrainedSingleStartPanel, !hasStart && hasEnd && !isZeroPadding && styles.constrainedSingleEndPanel, xstyle), className, style),
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file LayoutPanel.tsx
|
|
3
|
-
* @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext
|
|
3
|
+
* @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext,
|
|
4
|
+
* useScrollRegionProps
|
|
4
5
|
* @output Exports LayoutPanel component and LayoutPanelProps
|
|
5
6
|
* @position Sidebar panel for Layout start/end slots. Use for navigation panels,
|
|
6
7
|
* settings sidebars, detail panels, or any fixed-width side content.
|
|
@@ -47,6 +48,8 @@ export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
|
|
|
47
48
|
/**
|
|
48
49
|
* Accessible label for the landmark.
|
|
49
50
|
* Required when role is set and multiple landmarks of the same type exist.
|
|
51
|
+
* While the panel scrolls, it also names the scrolling region, which
|
|
52
|
+
* otherwise takes a translated "Content".
|
|
50
53
|
*/
|
|
51
54
|
label?: string;
|
|
52
55
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutPanel.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutPanel.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"LayoutPanel.d.ts","sourceRoot":"","sources":["../../src/Layout/LayoutPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAmF9D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,UAAkB,EAClB,YAAmB,EACnB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAoElB;yBAlFe,WAAW"}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file LayoutPanel.tsx
|
|
7
|
-
* @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext
|
|
7
|
+
* @input Uses React StyleX, LayoutAreaContext, LayoutSlotsContext,
|
|
8
|
+
* useScrollRegionProps
|
|
8
9
|
* @output Exports LayoutPanel component and LayoutPanelProps
|
|
9
10
|
* @position Sidebar panel for Layout start/end slots. Use for navigation panels,
|
|
10
11
|
* settings sidebars, detail panels, or any fixed-width side content.
|
|
@@ -20,6 +21,8 @@ import "../theme/tokens.stylex.js";
|
|
|
20
21
|
import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
21
22
|
import { LayoutAreaContext } from "./LayoutAreaContext.js";
|
|
22
23
|
import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
|
|
24
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
25
|
+
import { useScrollRegionProps } from "../hooks/useScrollRegionProps.js";
|
|
23
26
|
import { mergeProps } from "../utils/index.js";
|
|
24
27
|
import { themeProps } from "../utils/themeProps.js";
|
|
25
28
|
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
|
|
@@ -160,6 +163,12 @@ export function LayoutPanel({
|
|
|
160
163
|
|
|
161
164
|
// When no divider, collapse spacing for seamless visual flow
|
|
162
165
|
const shouldCollapseSpacing = !hasDivider && !isZeroPadding && padding == null;
|
|
166
|
+
const region = useScrollRegionProps({
|
|
167
|
+
isScrollable,
|
|
168
|
+
role,
|
|
169
|
+
label
|
|
170
|
+
});
|
|
171
|
+
const mergedRef = useMergedRefs(ref, region.ref);
|
|
163
172
|
|
|
164
173
|
// Select divider style based on position
|
|
165
174
|
const dividerStyle = isStartPanel ? styles.dividerEnd : isEndPanel ? styles.dividerStart : null;
|
|
@@ -167,9 +176,9 @@ export function LayoutPanel({
|
|
|
167
176
|
// Select collapse style based on position (collapse the side where divider would be)
|
|
168
177
|
const collapseStyle = isStartPanel ? styles.collapseEnd : isEndPanel ? styles.collapseStart : null;
|
|
169
178
|
return /*#__PURE__*/_jsx("div", {
|
|
170
|
-
ref:
|
|
171
|
-
role: role,
|
|
172
|
-
"aria-label": label,
|
|
179
|
+
ref: mergedRef,
|
|
180
|
+
role: region.role,
|
|
181
|
+
"aria-label": region['aria-label'],
|
|
173
182
|
...mergeProps(themeProps('layout-panel'), stylex.props(styles.panel, dynamicStyles.sizing(effectiveWidth ?? null),
|
|
174
183
|
// Outer padding on container edges (unless component is full bleed)
|
|
175
184
|
isStartPanel && !isZeroPadding && padding == null && styles.startPanel, isEndPanel && !isZeroPadding && padding == null && styles.endPanel, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], hasDivider && dividerStyle, shouldCollapseSpacing && collapseStyle, xstyle), className, style),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,EAOL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAuBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,EAOL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAuBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0M5C;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,MAAM,CAAC;AAI/B;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AA+DD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAgShB;yBA/Se,SAAS"}
|
|
@@ -63,6 +63,7 @@ import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
|
63
63
|
import { themeProps } from "../utils/themeProps.js";
|
|
64
64
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
65
65
|
import { useScrollLock } from "../hooks/useScrollLock.js";
|
|
66
|
+
import { useFocusRegionContainment } from "../hooks/useFocusTrap.js";
|
|
66
67
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
67
68
|
import english from "../i18n/generated-english/MobileNav/MobileNav.generated.js";
|
|
68
69
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -328,6 +329,10 @@ export function MobileNav({
|
|
|
328
329
|
}
|
|
329
330
|
}), [onOpenChangeProp, appShellMobile]);
|
|
330
331
|
const dialogRef = useRef(null);
|
|
332
|
+
// Native showModal() lets Tab leave for the browser's own UI, so the shared
|
|
333
|
+
// module wraps it. A closing drawer stops containing as soon as it starts to
|
|
334
|
+
// slide out.
|
|
335
|
+
useFocusRegionContainment(dialogRef, isOpen);
|
|
331
336
|
const drawerRef = useRef(null);
|
|
332
337
|
const closeTimeoutRef = useRef(null);
|
|
333
338
|
// The input hold on the drawer's layer while it slides in under a coarse
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAUZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAY1C,OAAO,EACL,KAAK,oBAAoB,EAE1B,MAAM,kCAAkC,CAAC;AA2B1C,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EAIjB,qBAAqB,EACrB,iBAAiB,EAGjB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AAQjB,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1032,7 +1032,12 @@ export function PowerSearch({
|
|
|
1032
1032
|
className: "xjyslct xfoc8du xkh2ocl x78zum5 x6s0dn4 xt970qd x7a5moj x1ghz6dp xc342km xng3xce xjbqb8w xv1l7n4 x9ynric xjm74w1 xw6l6zx x1yc453h xuxw1ft x1ypdohk xvivl9a x1a2a7pz x10l6tqk x10a8y8t xeuugli x1717udv"
|
|
1033
1033
|
}
|
|
1034
1034
|
}[!!(filters.length > 0) << 0],
|
|
1035
|
-
children: filters.length === 0 ?
|
|
1035
|
+
children: filters.length === 0 ? /*#__PURE__*/_jsx("span", {
|
|
1036
|
+
...{
|
|
1037
|
+
className: "xeuugli xb3r6kr xlyipyv xuxw1ft"
|
|
1038
|
+
},
|
|
1039
|
+
children: placeholder
|
|
1040
|
+
}) : null
|
|
1036
1041
|
})]
|
|
1037
1042
|
}), (endContent || isRenderable(resultCountText)) && /*#__PURE__*/_jsxs("div", {
|
|
1038
1043
|
ref: endLaneRef,
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file StackItem.tsx
|
|
3
|
-
* @input Uses React, ElementType, stackItem utility
|
|
3
|
+
* @input Uses React, ElementType, stackItem utility, StackItemScrollRegion
|
|
4
4
|
* @output Exports StackItem polymorphic component and StackItemProps
|
|
5
|
-
* @position Layout/Stack component; uses stackItem.stylex.ts
|
|
5
|
+
* @position Layout/Stack component; uses stackItem.stylex.ts. A scrollable
|
|
6
|
+
* `div` or `span` item renders through StackItemScrollRegion, which names
|
|
7
|
+
* it while it scrolls.
|
|
6
8
|
*
|
|
7
9
|
* SYNC: When modified, update these files to stay in sync:
|
|
8
10
|
* - /packages/core/src/Stack/Stack.doc.mjs
|
|
@@ -34,7 +36,9 @@ export interface StackItemProps extends BaseProps<HTMLElement> {
|
|
|
34
36
|
* reset, so `<StackItem size="fill" isScrollable>` is a complete scroll
|
|
35
37
|
* region — it grows to fill the stack and scrolls its own overflow with
|
|
36
38
|
* no extra style plumbing. Matches `isScrollable` on `LayoutContent`
|
|
37
|
-
* and `LayoutPanel`.
|
|
39
|
+
* and `LayoutPanel`. While its content overflows, a `div` or `span` item
|
|
40
|
+
* is a group named by the caller's `aria-label`, or by a translated
|
|
41
|
+
* "Content". Another element keeps its own role.
|
|
38
42
|
* @default false
|
|
39
43
|
*/
|
|
40
44
|
isScrollable?: boolean;
|
|
@@ -62,7 +66,7 @@ export interface StackItemProps extends BaseProps<HTMLElement> {
|
|
|
62
66
|
* </HStack>
|
|
63
67
|
* ```
|
|
64
68
|
*/
|
|
65
|
-
export declare function StackItem({ crossAlignSelf, size, isScrollable, as: element, xstyle, className, style, children, ref, ...props }: StackItemProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any
|
|
69
|
+
export declare function StackItem({ crossAlignSelf, size, isScrollable, as: element, xstyle, className, style, children, ref, ...props }: StackItemProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").FunctionComponentElement<import("../hooks/StackItemScrollRegion.js").StackItemScrollRegionProps>;
|
|
66
70
|
export declare namespace StackItem {
|
|
67
71
|
var displayName: string;
|
|
68
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../src/Stack/StackItem.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../src/Stack/StackItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAW5B,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAC;IAEzC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,EAAE,EAAE,OAAe,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,0MA8BhB;yBAzCe,SAAS"}
|
package/dist/Stack/StackItem.js
CHANGED
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* @file StackItem.tsx
|
|
5
|
-
* @input Uses React, ElementType, stackItem utility
|
|
5
|
+
* @input Uses React, ElementType, stackItem utility, StackItemScrollRegion
|
|
6
6
|
* @output Exports StackItem polymorphic component and StackItemProps
|
|
7
|
-
* @position Layout/Stack component; uses stackItem.stylex.ts
|
|
7
|
+
* @position Layout/Stack component; uses stackItem.stylex.ts. A scrollable
|
|
8
|
+
* `div` or `span` item renders through StackItemScrollRegion, which names
|
|
9
|
+
* it while it scrolls.
|
|
8
10
|
*
|
|
9
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
10
12
|
* - /packages/core/src/Stack/Stack.doc.mjs
|
|
@@ -16,6 +18,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
16
18
|
import { stackItem } from "./stackItem.stylex.js";
|
|
17
19
|
import { mergeProps } from "../utils/mergeProps.js";
|
|
18
20
|
import { themeProps } from "../utils/themeProps.js";
|
|
21
|
+
import { StackItemScrollRegion } from "../hooks/StackItemScrollRegion.js";
|
|
19
22
|
const overflowStyles = {
|
|
20
23
|
scrollable: {
|
|
21
24
|
kVQacm: "xysyzu8",
|
|
@@ -52,12 +55,22 @@ export function StackItem({
|
|
|
52
55
|
crossAlignSelf,
|
|
53
56
|
size
|
|
54
57
|
}), isScrollable && overflowStyles.scrollable, xstyle);
|
|
55
|
-
|
|
56
|
-
ref: ref,
|
|
58
|
+
const elementProps = {
|
|
57
59
|
...mergeProps(themeProps('stack-item', {
|
|
58
60
|
size
|
|
59
61
|
}), stylexProps, className, style),
|
|
60
62
|
...props
|
|
63
|
+
};
|
|
64
|
+
if (isScrollable && (element === 'div' || element === 'span')) {
|
|
65
|
+
return /*#__PURE__*/createElement(StackItemScrollRegion, {
|
|
66
|
+
as: element,
|
|
67
|
+
ref,
|
|
68
|
+
elementProps
|
|
69
|
+
}, children);
|
|
70
|
+
}
|
|
71
|
+
return /*#__PURE__*/createElement(element, {
|
|
72
|
+
ref: ref,
|
|
73
|
+
...elementProps
|
|
61
74
|
}, children);
|
|
62
75
|
}
|
|
63
76
|
StackItem.displayName = 'StackItem';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAQL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|
package/dist/Switch/Switch.js
CHANGED
|
@@ -33,8 +33,10 @@ import { usePressFeedback } from "../hooks/usePressFeedback.js";
|
|
|
33
33
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
34
34
|
import english from "../i18n/generated-english/Switch/Switch.generated.js";
|
|
35
35
|
registerEnglishFallback(english);
|
|
36
|
+
import "../motion/reducedMotion.stylex.js";
|
|
37
|
+
import { reducedMotionFadeConsts } from "../motion/reducedMotion.stylex.js";
|
|
36
38
|
import "../utils/interactionOverlay.stylex.js";
|
|
37
|
-
import { interactionOverlayStyles,
|
|
39
|
+
import { interactionOverlayStyles, pressVars } from "../utils/interactionOverlay.stylex.js";
|
|
38
40
|
import { pressHoldsDragProps } from "../privateAttributes/pressHoldsDrag.stylex.js";
|
|
39
41
|
import { useSwitchTouch } from "./useSwitchTouch.js";
|
|
40
42
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
@@ -65,14 +67,15 @@ const PRESS_FADING = '[data-astryx-press="fading"]';
|
|
|
65
67
|
|
|
66
68
|
/**
|
|
67
69
|
* The shared press release, for the press layers the switch fades on the
|
|
68
|
-
* compositor
|
|
69
|
-
*
|
|
70
|
+
* compositor: the theme's exit motion tokens, no longer than the Reduce
|
|
71
|
+
* Motion fade under Reduce Motion. Switch.test.tsx compares them with
|
|
72
|
+
* the overlay's.
|
|
70
73
|
* SYNC: utils/interactionOverlay.stylex.ts PRESS_RELEASE_DURATION,
|
|
71
74
|
* PRESS_RELEASE_DURATION_REDUCED and RELEASE_EASE.
|
|
72
75
|
*/
|
|
73
|
-
const PRESS_RELEASE_DURATION =
|
|
74
|
-
const PRESS_RELEASE_DURATION_REDUCED = `min(${
|
|
75
|
-
const PRESS_RELEASE_EASE = '
|
|
76
|
+
const PRESS_RELEASE_DURATION = durationVars['--duration-exit'];
|
|
77
|
+
const PRESS_RELEASE_DURATION_REDUCED = `min(${durationVars['--duration-exit']}, ${reducedMotionFadeConsts.duration})`;
|
|
78
|
+
const PRESS_RELEASE_EASE = easeVars['--ease-exit'];
|
|
76
79
|
|
|
77
80
|
// The measured hit insets (utils/hitArea), 0 until measured.
|
|
78
81
|
const HIT_TOP = 'var(--astryx-hit-inset-top, 0px)';
|
|
@@ -262,8 +265,8 @@ const styles = {
|
|
|
262
265
|
kLkRvE: "x1my3e5g",
|
|
263
266
|
k5QlbN: "x2huugr x1ccaw7f",
|
|
264
267
|
k7EzDT: "xxhzo2e",
|
|
265
|
-
kQZAMR: "
|
|
266
|
-
kZiNAr: "
|
|
268
|
+
kQZAMR: "xs8z9ty x1e7l4zx",
|
|
269
|
+
kZiNAr: "x15baseh",
|
|
267
270
|
k8Tatv: "xq2jpp1",
|
|
268
271
|
k5JduY: "x1s928wv",
|
|
269
272
|
kc3QkE: "x1h1zc6f x1ep27e9",
|
|
@@ -320,8 +323,8 @@ const styles = {
|
|
|
320
323
|
kLkRvE: "x1my3e5g",
|
|
321
324
|
k5QlbN: "x2huugr x1ccaw7f",
|
|
322
325
|
k7EzDT: "xxhzo2e",
|
|
323
|
-
kQZAMR: "
|
|
324
|
-
kZiNAr: "
|
|
326
|
+
kQZAMR: "xs8z9ty x1e7l4zx",
|
|
327
|
+
kZiNAr: "x15baseh",
|
|
325
328
|
k8Tatv: "xq2jpp1",
|
|
326
329
|
k5JduY: "x1s928wv",
|
|
327
330
|
kc3QkE: "x1h1zc6f x1ep27e9",
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* useAdaptivePresentation, and TokenizerBottomSheet (lazy)
|
|
5
5
|
* @output Exports Tokenizer multi-select typeahead component
|
|
6
6
|
* @position Composed component; forwards DOM ref and exposes focus control via
|
|
7
|
-
* handleRef. The `presentation` prop swaps the inline combobox for a
|
|
8
|
-
* trigger
|
|
7
|
+
* handleRef. The `presentation` prop swaps the inline combobox for a field
|
|
8
|
+
* box whose trigger opens TokenizerBottomSheet.
|
|
9
9
|
*
|
|
10
10
|
* SYNC: When modified, update:
|
|
11
11
|
* - /packages/core/src/Tokenizer/index.ts
|
|
@@ -207,8 +207,8 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<FieldInpu
|
|
|
207
207
|
* How the field presents its choices.
|
|
208
208
|
* - `'popover'`: the inline combobox with its anchored suggestion menu, on
|
|
209
209
|
* every device.
|
|
210
|
-
* - `'bottom-sheet'`: a
|
|
211
|
-
* tall modal sheet: a search row on top, full-width checkbox rows that
|
|
210
|
+
* - `'bottom-sheet'`: a field showing the selected tokens, whose trigger
|
|
211
|
+
* opens one tall modal sheet: a search row on top, full-width checkbox rows that
|
|
212
212
|
* keep their place while the sheet is open, a create row with
|
|
213
213
|
* `hasCreate`, and a footer pinned in every state with a confirmed Clear
|
|
214
214
|
* all and Save. The sheet edits a draft: `onChange` fires once, when Save
|
|
@@ -219,12 +219,16 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<FieldInpu
|
|
|
219
219
|
* otherwise the popover — the same resolution Selector uses. The server
|
|
220
220
|
* render and the hydrating render are the popover.
|
|
221
221
|
*
|
|
222
|
-
* In the sheet presentation the
|
|
223
|
-
*
|
|
224
|
-
* `endContent
|
|
225
|
-
* `
|
|
226
|
-
*
|
|
227
|
-
*
|
|
222
|
+
* In the sheet presentation the field's box keeps the inline field's box,
|
|
223
|
+
* theming target and focus ring, and holds the trigger, the tokens and
|
|
224
|
+
* `endContent`. The trigger is the control: `ref`, `id`, `aria-*`, and
|
|
225
|
+
* `data-*` reach it. `endContent` renders at the field's
|
|
226
|
+
* inline end and `renderToken` renders the field's tokens, as in the inline
|
|
227
|
+
* field. `renderItem`, `hasClear` (the sheet has its own Clear all),
|
|
228
|
+
* `hasEntriesOnFocus`, `menuWidth`, `tokenOverflowBehavior` (the field
|
|
229
|
+
* wraps its tokens), and `hasAutoFocus` have no surface to act on and warn
|
|
230
|
+
* once in development. Pass `'popover'` to keep the inline field and those
|
|
231
|
+
* props on every device.
|
|
228
232
|
* @default 'adaptive'
|
|
229
233
|
*/
|
|
230
234
|
presentation?: TokenizerPresentation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAYZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAUf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}
|