@astryxdesign/core 0.7.0-canary.fe57f54 → 0.7.0
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/CHANGELOG.md +186 -0
- package/dist/BottomSheet/BottomSheet.d.ts +5 -4
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts +1 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +1 -1
- package/dist/Calendar/styles.d.ts +6 -6
- package/dist/Chat/ChatComposerInput.d.ts +0 -11
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +0 -11
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.js +1 -1
- package/dist/CommandPalette/CommandPaletteList.d.ts +3 -2
- package/dist/CommandPalette/CommandPaletteList.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteList.js +3 -2
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +4 -1
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.js +29 -13
- package/dist/DropdownMenu/DropdownMenu.d.ts +11 -0
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +173 -11
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +13 -2
- package/dist/DropdownMenu/menuRegionsContext.d.ts +2 -0
- package/dist/DropdownMenu/menuRegionsContext.d.ts.map +1 -0
- package/dist/DropdownMenu/menuRegionsContext.js +17 -0
- package/dist/Field/inputStyles.stylex.d.ts +3 -3
- package/dist/Layout/container.stylex.d.ts +18 -20
- package/dist/Layout/container.stylex.d.ts.map +1 -1
- package/dist/Layout/container.stylex.js +15 -25
- package/dist/Layout/padding.stylex.d.ts +231 -231
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +15 -6
- package/dist/Markdown/plugins/protocol.d.ts.map +1 -1
- package/dist/Markdown/plugins/protocol.js +33 -8
- package/dist/NavItem/navItemStyles.stylex.d.ts +5 -5
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +21 -1
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +30 -15
- package/dist/Stack/stack.stylex.d.ts +22 -22
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +89 -14
- package/dist/Table/table.stylex.d.ts +6 -6
- package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
- package/dist/TimeInput/TouchTimeField.js +4 -1
- package/dist/Tokenizer/Tokenizer.d.ts +1 -12
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +1 -13
- package/dist/Typeahead/BaseTypeahead.d.ts +0 -11
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +1 -9
- package/dist/Typeahead/Typeahead.d.ts +1 -12
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +1 -13
- package/dist/astryx.css +17 -12
- package/dist/hooks/useFocusTrap.d.ts +8 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +5 -1
- package/dist/hooks/useRenamedProp.d.ts +6 -6
- package/dist/hooks/useRenamedProp.js +6 -6
- package/dist/reset.a11y.chromium.spec.d.ts +2 -0
- package/dist/reset.a11y.chromium.spec.d.ts.map +1 -0
- package/dist/reset.a11y.chromium.spec.js +176 -0
- package/dist/theme/tokens.stylex.d.ts +30 -30
- package/dist/theme/tokens.stylex.d.ts.map +1 -1
- package/dist/theme/tokens.stylex.js +18 -15
- package/dist/theme/useTheme.d.ts +1 -1
- package/package.json +4 -4
- package/src/BottomSheet/BottomSheet.doc.mjs +4 -4
- package/src/BottomSheet/BottomSheet.tsx +5 -4
- package/src/BottomSheet/BottomSheetPanel.test.tsx +6 -9
- package/src/BottomSheet/BottomSheetPanel.tsx +2 -3
- package/src/Chat/ChatComposerInput.doc.mjs +3 -3
- package/src/Chat/ChatComposerInput.test.tsx +7 -55
- package/src/Chat/ChatComposerInput.tsx +0 -36
- package/src/Chat/useTriggerMenu.tsx +1 -4
- package/src/CommandPalette/CommandPalette.spec.md +2 -0
- package/src/CommandPalette/CommandPaletteList.spec.md +189 -0
- package/src/CommandPalette/CommandPaletteList.test.tsx +47 -0
- package/src/CommandPalette/CommandPaletteList.tsx +3 -2
- package/src/DateInput/TouchDateField.tsx +3 -1
- package/src/DateTimeInput/DateTimeInputTouch.test.tsx +60 -1
- package/src/DateTimeInput/TouchDateTimeField.tsx +31 -14
- package/src/DropdownMenu/DropdownMenu.doc.mjs +12 -0
- package/src/DropdownMenu/DropdownMenu.spec.md +65 -40
- package/src/DropdownMenu/DropdownMenu.test.tsx +457 -0
- package/src/DropdownMenu/DropdownMenu.tsx +278 -49
- package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs +6 -3
- package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs +2 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +11 -1
- package/src/DropdownMenu/__tests__/MenuHeaderFooter.a11y.chromium.spec.ts +195 -0
- package/src/DropdownMenu/menuRegionsContext.ts +17 -0
- package/src/Layout/container.stylex.ts +11 -21
- package/src/Lightbox/Lightbox.test.tsx +58 -0
- package/src/Lightbox/Lightbox.tsx +12 -6
- package/src/Markdown/plugins/protocol.ts +45 -12
- package/src/Markdown/plugins/sourceLines.test.tsx +121 -0
- package/src/PowerSearch/PowerSearch.tsx +28 -1
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +284 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +41 -13
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +33 -9
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +81 -18
- package/src/TimeInput/TouchTimeField.tsx +3 -1
- package/src/Tokenizer/Tokenizer.doc.mjs +0 -16
- package/src/Tokenizer/Tokenizer.test.tsx +12 -63
- package/src/Tokenizer/Tokenizer.tsx +1 -25
- package/src/Toolbar/Toolbar.test.tsx +29 -0
- package/src/Typeahead/BaseTypeahead.doc.mjs +0 -16
- package/src/Typeahead/BaseTypeahead.test.tsx +1 -1
- package/src/Typeahead/BaseTypeahead.tsx +1 -21
- package/src/Typeahead/Typeahead.doc.mjs +0 -7
- package/src/Typeahead/Typeahead.test.tsx +24 -42
- package/src/Typeahead/Typeahead.tsx +1 -25
- package/src/hooks/useFocusTrap.ts +5 -1
- package/src/hooks/useRenamedProp.ts +6 -6
- package/src/reset.a11y.chromium.spec.ts +178 -0
- package/src/reset.css +8 -8
- package/src/reset.test.ts +112 -0
- package/src/theme/__tests__/SpacingRootFontSize.a11y.chromium.spec.ts +198 -0
- package/src/theme/tokens.stylex.ts +18 -15
- package/src/theme/tokens.test.ts +1 -1
- package/src/theme/useTheme.test.tsx +4 -4
- package/src/theme/useTheme.ts +1 -1
|
@@ -177,38 +177,38 @@ export declare const colorVars: stylex.VarGroup<Readonly<{
|
|
|
177
177
|
readonly '--color-text-yellow': "light-dark(#753F07, #FBCE03)";
|
|
178
178
|
}>, symbol>;
|
|
179
179
|
export declare const spacingDefaults: {
|
|
180
|
-
readonly '--spacing-0': "
|
|
181
|
-
readonly '--spacing-0-5': "
|
|
182
|
-
readonly '--spacing-1': "
|
|
183
|
-
readonly '--spacing-1-5': "
|
|
184
|
-
readonly '--spacing-2': "
|
|
185
|
-
readonly '--spacing-3': "
|
|
186
|
-
readonly '--spacing-4': "
|
|
187
|
-
readonly '--spacing-5': "
|
|
188
|
-
readonly '--spacing-6': "
|
|
189
|
-
readonly '--spacing-7': "
|
|
190
|
-
readonly '--spacing-8': "
|
|
191
|
-
readonly '--spacing-9': "
|
|
192
|
-
readonly '--spacing-10': "
|
|
193
|
-
readonly '--spacing-11': "
|
|
194
|
-
readonly '--spacing-12': "
|
|
180
|
+
readonly '--spacing-0': "0rem";
|
|
181
|
+
readonly '--spacing-0-5': "0.125rem";
|
|
182
|
+
readonly '--spacing-1': "0.25rem";
|
|
183
|
+
readonly '--spacing-1-5': "0.375rem";
|
|
184
|
+
readonly '--spacing-2': "0.5rem";
|
|
185
|
+
readonly '--spacing-3': "0.75rem";
|
|
186
|
+
readonly '--spacing-4': "1rem";
|
|
187
|
+
readonly '--spacing-5': "1.25rem";
|
|
188
|
+
readonly '--spacing-6': "1.5rem";
|
|
189
|
+
readonly '--spacing-7': "1.75rem";
|
|
190
|
+
readonly '--spacing-8': "2rem";
|
|
191
|
+
readonly '--spacing-9': "2.25rem";
|
|
192
|
+
readonly '--spacing-10': "2.5rem";
|
|
193
|
+
readonly '--spacing-11': "2.75rem";
|
|
194
|
+
readonly '--spacing-12': "3rem";
|
|
195
195
|
};
|
|
196
196
|
export declare const spacingVars: stylex.VarGroup<Readonly<{
|
|
197
|
-
readonly '--spacing-0': "
|
|
198
|
-
readonly '--spacing-0-5': "
|
|
199
|
-
readonly '--spacing-1': "
|
|
200
|
-
readonly '--spacing-1-5': "
|
|
201
|
-
readonly '--spacing-2': "
|
|
202
|
-
readonly '--spacing-3': "
|
|
203
|
-
readonly '--spacing-4': "
|
|
204
|
-
readonly '--spacing-5': "
|
|
205
|
-
readonly '--spacing-6': "
|
|
206
|
-
readonly '--spacing-7': "
|
|
207
|
-
readonly '--spacing-8': "
|
|
208
|
-
readonly '--spacing-9': "
|
|
209
|
-
readonly '--spacing-10': "
|
|
210
|
-
readonly '--spacing-11': "
|
|
211
|
-
readonly '--spacing-12': "
|
|
197
|
+
readonly '--spacing-0': "0rem";
|
|
198
|
+
readonly '--spacing-0-5': "0.125rem";
|
|
199
|
+
readonly '--spacing-1': "0.25rem";
|
|
200
|
+
readonly '--spacing-1-5': "0.375rem";
|
|
201
|
+
readonly '--spacing-2': "0.5rem";
|
|
202
|
+
readonly '--spacing-3': "0.75rem";
|
|
203
|
+
readonly '--spacing-4': "1rem";
|
|
204
|
+
readonly '--spacing-5': "1.25rem";
|
|
205
|
+
readonly '--spacing-6': "1.5rem";
|
|
206
|
+
readonly '--spacing-7': "1.75rem";
|
|
207
|
+
readonly '--spacing-8': "2rem";
|
|
208
|
+
readonly '--spacing-9': "2.25rem";
|
|
209
|
+
readonly '--spacing-10': "2.5rem";
|
|
210
|
+
readonly '--spacing-11': "2.75rem";
|
|
211
|
+
readonly '--spacing-12': "3rem";
|
|
212
212
|
}>, symbol>;
|
|
213
213
|
export declare const sizeDefaults: {
|
|
214
214
|
readonly '--size-element-sm': "28px";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAM3C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAmC,CAAC;
|
|
1
|
+
{"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAM3C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAmC,CAAC;AAS1D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;WAAqC,CAAC;AAM9D,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;WAAkC,CAAC;AAMxD,eAAO,MAAM,cAAc;;CAEjB,CAAC;AAEX,eAAO,MAAM,UAAU;;WAAoC,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAWxD,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;WAAmC,CAAC;AAM1D,eAAO,MAAM,cAAc;;;;;;;;CAWjB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;WAAoC,CAAC;AAQ5D,eAAO,MAAM,cAAc;;;;;;;;;CAejB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;WAAoC,CAAC;AAU5D,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;WAAsC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,eAAO,MAAM,QAAQ;;WAAkC,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AAKpD,eAAO,MAAM,kBAAkB;;;;CAMrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;WAAwC,CAAC;AAMpE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAcnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;WAAsC,CAAC;AAMhE,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;WAAwC,CAAC;AAMpE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAehE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DpB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAuC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC"}
|
|
@@ -223,22 +223,25 @@ export const colorVars = {
|
|
|
223
223
|
// Spacing Tokens
|
|
224
224
|
// =============================================================================
|
|
225
225
|
|
|
226
|
+
// rem, like the type scale, so gaps and padding grow with the reader's root
|
|
227
|
+
// font size instead of tightening around larger text. At the default 16px
|
|
228
|
+
// root every step is still 4px × step: --spacing-2 is 8px, --spacing-4 16px.
|
|
226
229
|
export const spacingDefaults = {
|
|
227
|
-
'--spacing-0': '
|
|
228
|
-
'--spacing-0-5': '
|
|
229
|
-
'--spacing-1': '
|
|
230
|
-
'--spacing-1-5': '
|
|
231
|
-
'--spacing-2': '
|
|
232
|
-
'--spacing-3': '
|
|
233
|
-
'--spacing-4': '
|
|
234
|
-
'--spacing-5': '
|
|
235
|
-
'--spacing-6': '
|
|
236
|
-
'--spacing-7': '
|
|
237
|
-
'--spacing-8': '
|
|
238
|
-
'--spacing-9': '
|
|
239
|
-
'--spacing-10': '
|
|
240
|
-
'--spacing-11': '
|
|
241
|
-
'--spacing-12': '
|
|
230
|
+
'--spacing-0': '0rem',
|
|
231
|
+
'--spacing-0-5': '0.125rem',
|
|
232
|
+
'--spacing-1': '0.25rem',
|
|
233
|
+
'--spacing-1-5': '0.375rem',
|
|
234
|
+
'--spacing-2': '0.5rem',
|
|
235
|
+
'--spacing-3': '0.75rem',
|
|
236
|
+
'--spacing-4': '1rem',
|
|
237
|
+
'--spacing-5': '1.25rem',
|
|
238
|
+
'--spacing-6': '1.5rem',
|
|
239
|
+
'--spacing-7': '1.75rem',
|
|
240
|
+
'--spacing-8': '2rem',
|
|
241
|
+
'--spacing-9': '2.25rem',
|
|
242
|
+
'--spacing-10': '2.5rem',
|
|
243
|
+
'--spacing-11': '2.75rem',
|
|
244
|
+
'--spacing-12': '3rem'
|
|
242
245
|
};
|
|
243
246
|
export const spacingVars = {
|
|
244
247
|
"--spacing-0": "var(--spacing-0)",
|
package/dist/theme/useTheme.d.ts
CHANGED
|
@@ -35,7 +35,7 @@ export interface UseThemeReturn {
|
|
|
35
35
|
* @example
|
|
36
36
|
* ```
|
|
37
37
|
* const accent = token('--color-accent'); // "#0064E0" in light mode
|
|
38
|
-
* const spacing = token('--spacing-4'); // "
|
|
38
|
+
* const spacing = token('--spacing-4'); // "1rem"
|
|
39
39
|
* ```
|
|
40
40
|
*/
|
|
41
41
|
token: (name: string) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.7.0
|
|
3
|
+
"version": "0.7.0",
|
|
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",
|
|
@@ -787,8 +787,6 @@
|
|
|
787
787
|
"react-dom": ">=19.0.0"
|
|
788
788
|
},
|
|
789
789
|
"devDependencies": {
|
|
790
|
-
"@astryxdesign/a11y-spec": "0.7.0-canary.fe57f54",
|
|
791
|
-
"@astryxdesign/cli": "0.7.0-canary.fe57f54",
|
|
792
790
|
"@babel/cli": "^7.29.7",
|
|
793
791
|
"@babel/core": "^7.29.7",
|
|
794
792
|
"@babel/preset-react": "^7.29.7",
|
|
@@ -799,7 +797,9 @@
|
|
|
799
797
|
"@testing-library/jest-dom": "^6.6.0",
|
|
800
798
|
"@testing-library/react": "^16.3.2",
|
|
801
799
|
"@types/babel__core": "^7.20.5",
|
|
802
|
-
"tailwindcss": "^4.3.2"
|
|
800
|
+
"tailwindcss": "^4.3.2",
|
|
801
|
+
"@astryxdesign/a11y-spec": "0.0.0",
|
|
802
|
+
"@astryxdesign/cli": "0.7.0"
|
|
803
803
|
},
|
|
804
804
|
"dependencies": {
|
|
805
805
|
"intl-messageformat": "^11.2.9"
|
|
@@ -19,7 +19,7 @@ const anatomy = [
|
|
|
19
19
|
name: 'Content area',
|
|
20
20
|
required: true,
|
|
21
21
|
description:
|
|
22
|
-
'
|
|
22
|
+
'Padded, scrollable container that presents the caller-provided sheet content.',
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
name: 'Handle',
|
|
@@ -95,7 +95,7 @@ export const docs = {
|
|
|
95
95
|
derived: [{property: 'padding', expand: 'container'}],
|
|
96
96
|
},
|
|
97
97
|
description:
|
|
98
|
-
"A mobile touch sheet that rises from the bottom edge, with animated entrance and exit, a grab handle, optional drag-to-resize snap points, and purpose-controlled dismissal. Like Dialog, it is a container:
|
|
98
|
+
"A mobile touch sheet that rises from the bottom edge, with animated entrance and exit, a grab handle, optional drag-to-resize snap points, and purpose-controlled dismissal. Like Dialog, it is a padded container: content starts at the theme's bottom-sheet padding (--spacing-4 by default), and a lone Section child or bleed children such as Table and Divider align against it. A standalone sheet owns a native <dialog>; inside BottomSheetSwitcher it renders a panel in the switcher's shared dialog. In both modes, ref and shared DOM props target the visual panel <div>.",
|
|
99
99
|
props: [
|
|
100
100
|
{
|
|
101
101
|
name: 'isOpen',
|
|
@@ -146,7 +146,7 @@ export const docs = {
|
|
|
146
146
|
name: 'padding',
|
|
147
147
|
type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
|
|
148
148
|
description:
|
|
149
|
-
'Internal padding of the sheet content using the spacing scale, matching Dialog. When omitted, uses the theme default for bottom sheets
|
|
149
|
+
'Internal padding of the sheet content using the spacing scale, matching Dialog. When omitted, uses the theme default for bottom sheets (--spacing-4 unless the theme sets padding on bottom-sheet). A lone Section child escapes the padding, and bleed children such as Table and Divider compensate against it. Use 0 for edge-to-edge content that supplies its own inset.',
|
|
150
150
|
},
|
|
151
151
|
{
|
|
152
152
|
name: 'height',
|
|
@@ -320,7 +320,7 @@ export const docs = {
|
|
|
320
320
|
/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
|
|
321
321
|
export const docsDense = {
|
|
322
322
|
description:
|
|
323
|
-
'mobile touch sheet rising from the bottom edge (native <dialog>): grab handle, opt-in transform-based drag-to-resize snap points (snapPoints: viewport fraction, percent or px length), scrolling area resizes to the snapped visible height on release (a peek stop, a quarter of the sheet or less, keeps the full height and slides instead), Dialog-aligned dismissal purpose (info/form/required), purpose-gated swipe-to-dismiss, fully-expanded Tall visual-viewport mobile-keyboard handling, named height scale, Dialog-like container padding (padding prop
|
|
323
|
+
'mobile touch sheet rising from the bottom edge (native <dialog>): grab handle, opt-in transform-based drag-to-resize snap points (snapPoints: viewport fraction, percent or px length), scrolling area resizes to the snapped visible height on release (a peek stop, a quarter of the sheet or less, keeps the full height and slides instead), Dialog-aligned dismissal purpose (info/form/required), purpose-gated swipe-to-dismiss, fully-expanded Tall visual-viewport mobile-keyboard handling, named height scale, Dialog-like container padding (padding prop, theme bottom-sheet padding, default --spacing-4), modal (default) or non-modal (hasScrim={false}) presentation',
|
|
324
324
|
usage: {
|
|
325
325
|
anatomy,
|
|
326
326
|
description:
|
|
@@ -146,10 +146,11 @@ interface BottomSheetSharedProps extends BaseProps<HTMLDivElement> {
|
|
|
146
146
|
/**
|
|
147
147
|
* Internal padding of the sheet content using the spacing scale, matching
|
|
148
148
|
* Dialog. Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
|
|
149
|
-
* When omitted, uses the theme default for bottom sheets
|
|
150
|
-
* the theme sets `padding` on `bottom-sheet
|
|
151
|
-
* container: a Section that is its only child escapes the
|
|
152
|
-
* children such as Table and Divider compensate against
|
|
149
|
+
* When omitted, uses the theme default for bottom sheets (`--spacing-4`
|
|
150
|
+
* unless the theme sets `padding` on `bottom-sheet`), matching Dialog. The
|
|
151
|
+
* content box is a container: a Section that is its only child escapes the
|
|
152
|
+
* padding, and bleed children such as Table and Divider compensate against
|
|
153
|
+
* it. Pass `0` for content that supplies its own inset.
|
|
153
154
|
*/
|
|
154
155
|
padding?: SpacingStep;
|
|
155
156
|
|
|
@@ -432,7 +432,7 @@ describe('BottomSheetPanel', () => {
|
|
|
432
432
|
return getComputedStyle(screen.getByTestId('sheet-child').parentElement!);
|
|
433
433
|
}
|
|
434
434
|
|
|
435
|
-
it(
|
|
435
|
+
it("pads by Dialog's default chain and publishes the inset it applies", () => {
|
|
436
436
|
const computed = renderWithPadding();
|
|
437
437
|
for (const [edge, property] of EDGES) {
|
|
438
438
|
const published = computed
|
|
@@ -441,10 +441,8 @@ describe('BottomSheetPanel', () => {
|
|
|
441
441
|
expect(published, edge).toContain(
|
|
442
442
|
`var(--astryx-bottom-sheet-padding-${edge}`,
|
|
443
443
|
);
|
|
444
|
-
// No theme padding resolves to no inset, as before the sheet was a
|
|
445
|
-
// container.
|
|
446
444
|
expect(published, edge).toContain(
|
|
447
|
-
'var(--astryx-bottom-sheet-padding,
|
|
445
|
+
'var(--astryx-bottom-sheet-padding,var(--spacing-4))',
|
|
448
446
|
);
|
|
449
447
|
// Applied padding reads the published value, so bleed children
|
|
450
448
|
// subtract exactly the inset they sit in.
|
|
@@ -452,17 +450,16 @@ describe('BottomSheetPanel', () => {
|
|
|
452
450
|
`var(--container-padding-${edge})`,
|
|
453
451
|
);
|
|
454
452
|
}
|
|
455
|
-
// The Layout insets have no terminal value: unthemed, they stay invalid
|
|
456
|
-
// and a Layout inside the sheet keeps its own default padding.
|
|
457
453
|
for (const name of [
|
|
458
454
|
'--layout-padding-outer-x',
|
|
459
455
|
'--layout-padding-outer-y',
|
|
460
456
|
'--layout-padding-inner-x',
|
|
461
457
|
'--layout-padding-inner-y',
|
|
462
458
|
]) {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
459
|
+
expect(
|
|
460
|
+
computed.getPropertyValue(name).replace(/\s+/g, ''),
|
|
461
|
+
name,
|
|
462
|
+
).toContain('var(--astryx-bottom-sheet-padding,var(--spacing-4))');
|
|
466
463
|
}
|
|
467
464
|
});
|
|
468
465
|
|
|
@@ -256,7 +256,6 @@ const styles = stylex.create({
|
|
|
256
256
|
// observed box grow with async content beyond a fixed-height viewport.
|
|
257
257
|
// This box is also the sheet's container: it carries the padding and
|
|
258
258
|
// publishes it, so a lone Section child escapes it exactly as in Dialog.
|
|
259
|
-
// Unpadded unless the prop or the theme sets padding.
|
|
260
259
|
display: 'flow-root',
|
|
261
260
|
boxSizing: 'border-box',
|
|
262
261
|
height: '100%',
|
|
@@ -303,7 +302,7 @@ interface BottomSheetPanelProps extends BaseProps<HTMLDivElement> {
|
|
|
303
302
|
children: ReactNode;
|
|
304
303
|
/**
|
|
305
304
|
* Content padding on the spacing scale. Omitted, the content box reads the
|
|
306
|
-
* theme's bottom-sheet padding,
|
|
305
|
+
* theme's bottom-sheet padding, then --spacing-4 (Dialog's default).
|
|
307
306
|
*/
|
|
308
307
|
padding?: SpacingStep;
|
|
309
308
|
snapPoints?: ReadonlyArray<BottomSheetSnapPoint>;
|
|
@@ -627,7 +626,7 @@ export function BottomSheetPanel({
|
|
|
627
626
|
}, [motion]);
|
|
628
627
|
|
|
629
628
|
// Same lowering as Dialog: with no padding prop the content box reads the
|
|
630
|
-
// theme's --astryx-bottom-sheet-padding chain (
|
|
629
|
+
// theme's --astryx-bottom-sheet-padding chain (--spacing-4 when unset), else
|
|
631
630
|
// the explicit step.
|
|
632
631
|
const usesThemePadding = padding == null;
|
|
633
632
|
const effectivePadding = padding ?? 4;
|
|
@@ -98,7 +98,7 @@ export const docs = {
|
|
|
98
98
|
name: 'triggers',
|
|
99
99
|
type: 'ChatComposerTrigger[]',
|
|
100
100
|
description:
|
|
101
|
-
'Trigger definitions for typeahead menus. Each trigger specifies a character (@ or /), a search source, and an onSelect handler that returns the token to insert. Per-trigger emptySearchText (ReactNode) is the message when the query matched nothing
|
|
101
|
+
'Trigger definitions for typeahead menus. Each trigger specifies a character (@ or /), a search source, and an onSelect handler that returns the token to insert. Per-trigger emptySearchText (ReactNode) is the message when the query matched nothing.',
|
|
102
102
|
},
|
|
103
103
|
{
|
|
104
104
|
name: 'debounceMs',
|
|
@@ -174,7 +174,7 @@ export const docsZh = {
|
|
|
174
174
|
placeholder: '输入为空时显示的占位文本。',
|
|
175
175
|
maxRows: '滚动前的最大可见行数。紧凑布局中使用较小值。',
|
|
176
176
|
triggers:
|
|
177
|
-
'菜单的触发定义。每个触发器指定字符(@ 或 /)、搜索源和返回要插入标记的 onSelect 处理器。每个触发器的 emptySearchText(ReactNode
|
|
177
|
+
'菜单的触发定义。每个触发器指定字符(@ 或 /)、搜索源和返回要插入标记的 onSelect 处理器。每个触发器的 emptySearchText(ReactNode)用于查询无匹配结果时的提示。',
|
|
178
178
|
debounceMs: '异步搜索源的去抖动延迟,避免过多网络请求。',
|
|
179
179
|
hasHistory: '启用 ArrowUp/Down 回溯之前提交的消息。',
|
|
180
180
|
label: '屏幕阅读器播报的无障碍标签。',
|
|
@@ -205,7 +205,7 @@ export const docsDense = {
|
|
|
205
205
|
placeholder: 'placeholder when empty',
|
|
206
206
|
maxRows: 'max visible rows before scroll; lower for compact layouts',
|
|
207
207
|
triggers:
|
|
208
|
-
'typeahead trigger defs; character(@/)+searchSource+onSelect returning token; emptySearchText (ReactNode) for no matches
|
|
208
|
+
'typeahead trigger defs; character(@/)+searchSource+onSelect returning token; emptySearchText (ReactNode) for no matches',
|
|
209
209
|
debounceMs: 'debounce for async search to avoid excess requests',
|
|
210
210
|
hasHistory: 'ArrowUp/Down to recall previous submissions',
|
|
211
211
|
label: 'a11y label for screen readers',
|
|
@@ -1136,7 +1136,7 @@ describe('ChatComposerInput', () => {
|
|
|
1136
1136
|
|
|
1137
1137
|
it('supports configurable empty/loading text', () => {
|
|
1138
1138
|
const trigger = createMentionTrigger({
|
|
1139
|
-
|
|
1139
|
+
emptySearchText: 'Nobody found',
|
|
1140
1140
|
loadingText: 'Looking up...',
|
|
1141
1141
|
menuLabel: 'People',
|
|
1142
1142
|
});
|
|
@@ -1146,7 +1146,7 @@ describe('ChatComposerInput', () => {
|
|
|
1146
1146
|
|
|
1147
1147
|
// A trigger's `emptySearchResultsText` was renamed to `emptySearchText`
|
|
1148
1148
|
// and widened from `string` to `ReactNode` (`spec:AST-056` FR1). The
|
|
1149
|
-
//
|
|
1149
|
+
// overlap ended in a minor release (`CLN-0004`, `spec:AST-017` FR31).
|
|
1150
1150
|
it('renders an element emptySearchText when the query matched nothing', async () => {
|
|
1151
1151
|
const user = userEvent.setup();
|
|
1152
1152
|
const trigger = createMentionTrigger({
|
|
@@ -1166,72 +1166,24 @@ describe('ChatComposerInput', () => {
|
|
|
1166
1166
|
});
|
|
1167
1167
|
});
|
|
1168
1168
|
|
|
1169
|
-
it('
|
|
1170
|
-
const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
|
|
1171
|
-
const user = userEvent.setup();
|
|
1172
|
-
const trigger = createMentionTrigger({
|
|
1173
|
-
emptySearchResultsText: 'Nobody found',
|
|
1174
|
-
});
|
|
1175
|
-
render(<ChatComposerInput triggers={[trigger]} />);
|
|
1176
|
-
|
|
1177
|
-
await user.click(screen.getByRole('combobox'));
|
|
1178
|
-
await user.keyboard('@zzzzz');
|
|
1179
|
-
|
|
1180
|
-
await waitFor(() => {
|
|
1181
|
-
expect(screen.getByText('Nobody found')).toBeInTheDocument();
|
|
1182
|
-
});
|
|
1183
|
-
expect(warn).toHaveBeenCalledWith(
|
|
1184
|
-
expect.stringContaining(
|
|
1185
|
-
'ChatComposerInput: A trigger sets `emptySearchResultsText`, which is deprecated',
|
|
1186
|
-
),
|
|
1187
|
-
);
|
|
1188
|
-
warn.mockRestore();
|
|
1189
|
-
});
|
|
1190
|
-
|
|
1191
|
-
it('treats an explicit null key as not given, falling through to the old one', async () => {
|
|
1169
|
+
it('no longer reads the removed emptySearchResultsText key (CLN-0004)', async () => {
|
|
1192
1170
|
const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
|
|
1193
1171
|
const user = userEvent.setup();
|
|
1194
1172
|
const trigger = createMentionTrigger({
|
|
1173
|
+
// @ts-expect-error -- removed in the minor release (CLN-0004)
|
|
1195
1174
|
emptySearchResultsText: 'Nobody found',
|
|
1196
|
-
emptySearchText: null,
|
|
1197
1175
|
});
|
|
1198
1176
|
render(<ChatComposerInput triggers={[trigger]} />);
|
|
1199
1177
|
|
|
1200
1178
|
await user.click(screen.getByRole('combobox'));
|
|
1201
1179
|
await user.keyboard('@zzzzz');
|
|
1202
1180
|
|
|
1203
|
-
// The same meaning the typeahead family gives `null`: not given, so
|
|
1204
|
-
// the released key still supplies the message and no warning claims a
|
|
1205
|
-
// winner the menu did not pick.
|
|
1206
1181
|
await waitFor(() => {
|
|
1207
|
-
expect(screen.getByText('
|
|
1182
|
+
expect(screen.getByText('No results')).toBeInTheDocument();
|
|
1208
1183
|
});
|
|
1184
|
+
expect(screen.queryByText('Nobody found')).not.toBeInTheDocument();
|
|
1209
1185
|
expect(warn).not.toHaveBeenCalledWith(
|
|
1210
|
-
expect.stringContaining('
|
|
1211
|
-
);
|
|
1212
|
-
warn.mockRestore();
|
|
1213
|
-
});
|
|
1214
|
-
|
|
1215
|
-
it('lets the new key win when a trigger sets both, and warns', async () => {
|
|
1216
|
-
const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
|
|
1217
|
-
const user = userEvent.setup();
|
|
1218
|
-
const trigger = createMentionTrigger({
|
|
1219
|
-
emptySearchResultsText: 'Old copy',
|
|
1220
|
-
emptySearchText: 'New copy',
|
|
1221
|
-
});
|
|
1222
|
-
render(<ChatComposerInput triggers={[trigger]} />);
|
|
1223
|
-
|
|
1224
|
-
await user.click(screen.getByRole('combobox'));
|
|
1225
|
-
await user.keyboard('@zzzzz');
|
|
1226
|
-
|
|
1227
|
-
await waitFor(() => {
|
|
1228
|
-
expect(screen.getByText('New copy')).toBeInTheDocument();
|
|
1229
|
-
});
|
|
1230
|
-
expect(screen.queryByText('Old copy')).not.toBeInTheDocument();
|
|
1231
|
-
expect(warn).toHaveBeenCalledWith(
|
|
1232
|
-
expect.stringContaining(
|
|
1233
|
-
'ChatComposerInput: A trigger sets both `emptySearchResultsText` and `emptySearchText`',
|
|
1234
|
-
),
|
|
1186
|
+
expect.stringContaining('is deprecated'),
|
|
1235
1187
|
);
|
|
1236
1188
|
warn.mockRestore();
|
|
1237
1189
|
});
|
|
@@ -69,7 +69,6 @@ import {Badge, type BadgeProps} from '../Badge';
|
|
|
69
69
|
import {useChatComposerContext} from './ChatContext';
|
|
70
70
|
import {themeProps} from '../utils/themeProps';
|
|
71
71
|
import {useTranslator} from '../i18n';
|
|
72
|
-
import {useDevWarning} from '../hooks/useDevWarning';
|
|
73
72
|
|
|
74
73
|
// =============================================================================
|
|
75
74
|
// Types
|
|
@@ -167,17 +166,6 @@ export type ChatComposerTrigger = {
|
|
|
167
166
|
* @default 'No results'
|
|
168
167
|
*/
|
|
169
168
|
emptySearchText?: ReactNode;
|
|
170
|
-
/**
|
|
171
|
-
* Text shown when no results found.
|
|
172
|
-
* @default 'No results'
|
|
173
|
-
* @deprecated `DEP-0004`. Renamed to `emptySearchText`, which takes a
|
|
174
|
-
* `ReactNode` rather than a `string` — every existing value stays valid
|
|
175
|
-
* (`spec:AST-056` FR1, FR7). Still works exactly as released;
|
|
176
|
-
* `emptySearchText` wins when both are set. Removal is `CLN-0004`, in a
|
|
177
|
-
* later minor whose frozen manifest carries both ids (`spec:AST-017`
|
|
178
|
-
* FR31).
|
|
179
|
-
*/
|
|
180
|
-
emptySearchResultsText?: string;
|
|
181
169
|
/** Text shown during async search. @default 'Searching\u2026' */
|
|
182
170
|
loadingText?: string;
|
|
183
171
|
/** Accessible label for the menu. @default 'Suggestions' */
|
|
@@ -606,30 +594,6 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
|
|
|
606
594
|
insertTextRef.current = insertText;
|
|
607
595
|
|
|
608
596
|
// --- Trigger menu ---
|
|
609
|
-
// Each trigger's empty-result message was renamed (`spec:AST-056` FR1); the
|
|
610
|
-
// released key keeps working through the overlap and development says which
|
|
611
|
-
// one was read (`spec:AST-017` FR28).
|
|
612
|
-
// `!= null` matches the `??` the menu resolves with, so an explicit `null`
|
|
613
|
-
// counts as "not given" on both names and the warnings cannot claim a
|
|
614
|
-
// winner the render did not pick.
|
|
615
|
-
const triggersWithDeprecatedEmptyText =
|
|
616
|
-
triggers?.filter(trigger => trigger.emptySearchResultsText != null) ?? [];
|
|
617
|
-
const triggersWithBothEmptyTexts = triggersWithDeprecatedEmptyText.filter(
|
|
618
|
-
trigger => trigger.emptySearchText != null,
|
|
619
|
-
);
|
|
620
|
-
useDevWarning(
|
|
621
|
-
'ChatComposerInput',
|
|
622
|
-
'A trigger sets `emptySearchResultsText`, which is deprecated; use ' +
|
|
623
|
-
'`emptySearchText` instead. It still works exactly as released.',
|
|
624
|
-
triggersWithDeprecatedEmptyText.length > triggersWithBothEmptyTexts.length,
|
|
625
|
-
);
|
|
626
|
-
useDevWarning(
|
|
627
|
-
'ChatComposerInput',
|
|
628
|
-
'A trigger sets both `emptySearchResultsText` and `emptySearchText`; ' +
|
|
629
|
-
'`emptySearchText` wins. `emptySearchResultsText` is deprecated — ' +
|
|
630
|
-
'drop it.',
|
|
631
|
-
triggersWithBothEmptyTexts.length > 0,
|
|
632
|
-
);
|
|
633
597
|
const triggerMenu = useTriggerMenu({
|
|
634
598
|
triggers,
|
|
635
599
|
editableRef,
|
|
@@ -640,10 +640,7 @@ export function useTriggerMenu(
|
|
|
640
640
|
|
|
641
641
|
const renderMenu = useCallback((): ReactNode => {
|
|
642
642
|
const trigger = state.activeTrigger;
|
|
643
|
-
const emptyText =
|
|
644
|
-
trigger?.emptySearchText ??
|
|
645
|
-
trigger?.emptySearchResultsText ??
|
|
646
|
-
'No results';
|
|
643
|
+
const emptyText = trigger?.emptySearchText ?? 'No results';
|
|
647
644
|
const loadingText = trigger?.loadingText ?? 'Searching\u2026';
|
|
648
645
|
|
|
649
646
|
let listContent: ReactNode;
|
|
@@ -71,6 +71,8 @@ Consumer migration instructions belong in consumer docs and release notes.
|
|
|
71
71
|
factual backfill does not invent one.
|
|
72
72
|
- Shared layer hosting, positioning, or lifecycle rules beyond the current
|
|
73
73
|
records linked below.
|
|
74
|
+
- The List root's accessible name, list-id application, native passthrough, and
|
|
75
|
+
overflow scrolling — owned by `component:CommandPaletteList`.
|
|
74
76
|
|
|
75
77
|
## Public concepts
|
|
76
78
|
|