@astryxdesign/core 0.4.4 → 0.4.5-canary.1fdecb1
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 +40 -0
- package/dist/BottomSheet/BottomSheet.d.ts +11 -2
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +4 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts +5 -2
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +65 -15
- package/dist/BottomSheet/index.d.ts +1 -1
- package/dist/BottomSheet/index.d.ts.map +1 -1
- package/dist/BottomSheet/snapOffsets.d.ts +57 -20
- package/dist/BottomSheet/snapOffsets.d.ts.map +1 -1
- package/dist/BottomSheet/snapOffsets.js +106 -30
- package/dist/BottomSheet/useSheetGestures.d.ts +13 -8
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +160 -64
- package/dist/Calendar/Calendar.d.ts +17 -0
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +34 -3
- package/dist/Calendar/getStandaloneShortWeekdayNames.d.ts +14 -0
- package/dist/Calendar/getStandaloneShortWeekdayNames.d.ts.map +1 -0
- package/dist/Calendar/getStandaloneShortWeekdayNames.js +26 -0
- package/dist/Calendar/hooks/useCalendarConstraints.d.ts +22 -1
- package/dist/Calendar/hooks/useCalendarConstraints.d.ts.map +1 -1
- package/dist/Calendar/hooks/useCalendarConstraints.js +26 -4
- package/dist/Calendar/hooks/useCalendarDays.d.ts.map +1 -1
- package/dist/Calendar/hooks/useCalendarDays.js +14 -10
- package/dist/Calendar/standaloneShortWeekdayNames.generated.d.ts +47 -0
- package/dist/Calendar/standaloneShortWeekdayNames.generated.d.ts.map +1 -0
- package/dist/Calendar/standaloneShortWeekdayNames.generated.js +40 -0
- package/dist/Center/Center.d.ts +23 -1
- package/dist/Center/Center.d.ts.map +1 -1
- package/dist/Center/Center.js +12 -6
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +9 -0
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +6 -1
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +6 -1
- package/dist/DateRangeInput/DateRangeInput.d.ts +23 -1
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +38 -3
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +7 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +3 -3
- package/dist/Field/FieldLabel.d.ts +2 -1
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +21 -3
- package/dist/Field/InputClearButton.d.ts +2 -1
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +6 -1
- package/dist/FormLayout/FormLayout.d.ts +24 -2
- package/dist/FormLayout/FormLayout.d.ts.map +1 -1
- package/dist/FormLayout/FormLayout.js +7 -2
- package/dist/FormLayout/FormLayoutContext.d.ts +15 -2
- package/dist/FormLayout/FormLayoutContext.d.ts.map +1 -1
- package/dist/FormLayout/FormLayoutContext.js +19 -4
- package/dist/FormLayout/index.d.ts +1 -1
- package/dist/FormLayout/index.d.ts.map +1 -1
- package/dist/Item/Item.d.ts +9 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +45 -7
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +3 -2
- package/dist/Layout/container.stylex.d.ts +4 -2
- package/dist/Layout/container.stylex.d.ts.map +1 -1
- package/dist/Layout/container.stylex.js +19 -11
- package/dist/Layout/index.d.ts +1 -0
- package/dist/Layout/index.d.ts.map +1 -1
- package/dist/Layout/index.js +4 -0
- package/dist/Layout/padding.stylex.d.ts +315 -12
- package/dist/Layout/padding.stylex.d.ts.map +1 -1
- package/dist/Layout/padding.stylex.js +389 -12
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +2 -1
- package/dist/Markdown/Markdown.d.ts +8 -0
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +31 -3
- package/dist/Markdown/parser.d.ts +14 -2
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +50 -2
- package/dist/MobileNav/MobileNav.d.ts +1 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +24 -6
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +6 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +36 -3
- package/dist/Outline/parseOutlineFromMarkdown.d.ts +2 -0
- package/dist/Outline/parseOutlineFromMarkdown.d.ts.map +1 -1
- package/dist/Outline/parseOutlineFromMarkdown.js +5 -31
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +12 -1
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +3 -3
- package/dist/Section/Section.d.ts +36 -1
- package/dist/Section/Section.d.ts.map +1 -1
- package/dist/Section/Section.js +12 -2
- package/dist/Selector/Selector.d.ts +26 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +93 -15
- package/dist/Selector/SelectorOption.d.ts +14 -1
- package/dist/Selector/SelectorOption.d.ts.map +1 -1
- package/dist/Selector/SelectorOption.js +6 -0
- package/dist/Selector/SelectorRowLayoutContext.d.ts +8 -0
- package/dist/Selector/SelectorRowLayoutContext.d.ts.map +1 -0
- package/dist/Selector/SelectorRowLayoutContext.js +27 -0
- package/dist/Selector/types.d.ts +1 -0
- package/dist/Selector/types.d.ts.map +1 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +2 -2
- package/dist/Stack/Stack.d.ts +23 -1
- package/dist/Stack/Stack.d.ts.map +1 -1
- package/dist/Stack/Stack.js +12 -6
- package/dist/StatusDot/StatusDot.d.ts +43 -3
- package/dist/StatusDot/StatusDot.d.ts.map +1 -1
- package/dist/StatusDot/StatusDot.js +42 -5
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +9 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +7 -2
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +6 -1
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +6 -1
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +6 -1
- package/dist/astryx.css +40 -21
- package/dist/hooks/scrollbarGutter.d.ts +28 -0
- package/dist/hooks/scrollbarGutter.d.ts.map +1 -0
- package/dist/hooks/scrollbarGutter.js +103 -0
- package/dist/hooks/useResolvedRequired.d.ts +19 -0
- package/dist/hooks/useResolvedRequired.d.ts.map +1 -0
- package/dist/hooks/useResolvedRequired.js +40 -0
- package/dist/hooks/useScrollLock.d.ts +4 -0
- package/dist/hooks/useScrollLock.d.ts.map +1 -1
- package/dist/hooks/useScrollLock.js +13 -1
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +7 -0
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +37 -4
- package/dist/utils/plainDate.d.ts +6 -0
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +12 -0
- package/locales/af-ZA.json +958 -0
- package/locales/ar-SA.json +998 -0
- package/locales/ca-ES.json +974 -0
- package/locales/cs-CZ.json +990 -0
- package/locales/da-DK.json +966 -0
- package/locales/de-DE.json +966 -0
- package/locales/el-GR.json +990 -0
- package/locales/en.json +8 -0
- package/locales/es-ES.json +978 -0
- package/locales/fi-FI.json +990 -0
- package/locales/fr-FR.json +928 -0
- package/locales/he-IL.json +990 -0
- package/locales/hu-HU.json +990 -0
- package/locales/it-IT.json +978 -0
- package/locales/ja-JP.json +998 -0
- package/locales/ko-KR.json +990 -0
- package/locales/nl-NL.json +954 -0
- package/locales/no-NO.json +978 -0
- package/locales/pl-PL.json +982 -0
- package/locales/pseudo.json +6 -0
- package/locales/pt-BR.json +982 -0
- package/locales/pt-PT.json +982 -0
- package/locales/ro-RO.json +982 -0
- package/locales/ru-RU.json +990 -0
- package/locales/sr-SP.json +990 -0
- package/locales/sv-SE.json +986 -0
- package/locales/tr-TR.json +990 -0
- package/locales/uk-UA.json +990 -0
- package/locales/vi-VN.json +986 -0
- package/locales/zh-CN.json +998 -0
- package/locales/zh-TW.json +998 -0
- package/package.json +3 -3
- package/src/BottomSheet/BottomSheet.doc.mjs +36 -3
- package/src/BottomSheet/BottomSheet.test.tsx +177 -2
- package/src/BottomSheet/BottomSheet.tsx +16 -2
- package/src/BottomSheet/BottomSheetPanel.test.tsx +41 -0
- package/src/BottomSheet/BottomSheetPanel.tsx +95 -15
- package/src/BottomSheet/index.ts +5 -1
- package/src/BottomSheet/snapOffsets.test.ts +114 -47
- package/src/BottomSheet/snapOffsets.ts +119 -33
- package/src/BottomSheet/useSheetGestures.test.ts +113 -15
- package/src/BottomSheet/useSheetGestures.ts +196 -100
- package/src/Calendar/Calendar.doc.mjs +16 -0
- package/src/Calendar/Calendar.test.tsx +137 -0
- package/src/Calendar/Calendar.tsx +65 -2
- package/src/Calendar/getStandaloneShortWeekdayNames.test.ts +54 -0
- package/src/Calendar/getStandaloneShortWeekdayNames.ts +38 -0
- package/src/Calendar/hooks/useCalendarConstraints.ts +54 -3
- package/src/Calendar/hooks/useCalendarDays.ts +13 -10
- package/src/Calendar/standaloneShortWeekdayNames.generated.ts +50 -0
- package/src/Center/Center.doc.mjs +48 -0
- package/src/Center/Center.test.tsx +158 -0
- package/src/Center/Center.tsx +50 -9
- package/src/CheckboxInput/CheckboxInput.tsx +6 -0
- package/src/ComplexSelector/ComplexSelector.tsx +3 -1
- package/src/DateInput/DateInput.tsx +3 -1
- package/src/DateRangeInput/DateRangeInput.doc.mjs +16 -0
- package/src/DateRangeInput/DateRangeInput.test.tsx +81 -1
- package/src/DateRangeInput/DateRangeInput.tsx +72 -1
- package/src/DateTimeInput/DateTimeInput.tsx +4 -2
- package/src/Dialog/Dialog.test.tsx +24 -0
- package/src/Dialog/Dialog.tsx +3 -0
- package/src/Field/Field.doc.mjs +1 -0
- package/src/Field/FieldLabel.tsx +20 -4
- package/src/Field/InputClearButton.test.tsx +25 -0
- package/src/Field/InputClearButton.tsx +4 -1
- package/src/FormLayout/FormLayout.doc.mjs +13 -0
- package/src/FormLayout/FormLayout.test.tsx +181 -4
- package/src/FormLayout/FormLayout.tsx +33 -2
- package/src/FormLayout/FormLayoutContext.ts +22 -7
- package/src/FormLayout/index.ts +1 -1
- package/src/Item/Item.doc.mjs +1 -0
- package/src/Item/Item.test.tsx +50 -0
- package/src/Item/Item.tsx +40 -1
- package/src/Layer/useLayer.tsx +13 -2
- package/src/Layout/Layout.doc.mjs +18 -0
- package/src/Layout/container.stylex.ts +11 -3
- package/src/Layout/index.ts +4 -0
- package/src/Layout/overlayPaddingReset.test.tsx +222 -0
- package/src/Layout/padding.stylex.ts +192 -12
- package/src/Lightbox/Lightbox.tsx +2 -1
- package/src/Markdown/Markdown.doc.mjs +3 -0
- package/src/Markdown/Markdown.test.tsx +78 -0
- package/src/Markdown/Markdown.tsx +41 -1
- package/src/Markdown/parser.ts +60 -2
- package/src/MobileNav/MobileNav.tsx +61 -5
- package/src/MobileNav/MobileNavEntryAnimation.test.tsx +212 -0
- package/src/MobileNav/MobileNavScrollbarGutter.test.tsx +109 -0
- package/src/MultiSelector/MultiSelector.tsx +3 -1
- package/src/NumberInput/NumberInput.doc.mjs +24 -0
- package/src/NumberInput/NumberInput.test.tsx +138 -0
- package/src/NumberInput/NumberInput.tsx +43 -5
- package/src/Outline/Outline.doc.mjs +2 -0
- package/src/Outline/parseOutlineFromMarkdown.ts +10 -40
- package/src/RadioList/RadioList.tsx +9 -1
- package/src/Resizable/ResizeHandle.test.tsx +22 -0
- package/src/Resizable/ResizeHandle.tsx +9 -3
- package/src/Section/Section.doc.mjs +55 -0
- package/src/Section/Section.test.tsx +201 -4
- package/src/Section/Section.tsx +69 -0
- package/src/Selector/Selector.doc.mjs +16 -2
- package/src/Selector/Selector.test.tsx +524 -0
- package/src/Selector/Selector.tsx +161 -17
- package/src/Selector/SelectorOption.doc.mjs +7 -0
- package/src/Selector/SelectorOption.tsx +21 -0
- package/src/Selector/SelectorRowLayoutContext.ts +32 -0
- package/src/Selector/types.ts +4 -4
- package/src/Slider/Slider.tsx +10 -0
- package/src/Stack/Stack.doc.mjs +72 -0
- package/src/Stack/Stack.test.tsx +156 -0
- package/src/Stack/Stack.tsx +50 -8
- package/src/StatusDot/StatusDot.doc.mjs +13 -0
- package/src/StatusDot/StatusDot.test.tsx +115 -8
- package/src/StatusDot/StatusDot.tsx +74 -9
- package/src/Switch/Switch.tsx +6 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +20 -2
- package/src/TextArea/TextArea.tsx +3 -1
- package/src/TextInput/TextInput.tsx +3 -1
- package/src/TimeInput/TimeInput.tsx +3 -1
- package/src/hooks/scrollbarGutter.test.ts +167 -0
- package/src/hooks/scrollbarGutter.ts +121 -0
- package/src/hooks/useResolvedRequired.ts +42 -0
- package/src/hooks/useScrollLock.doc.mjs +4 -4
- package/src/hooks/useScrollLock.test.ts +73 -0
- package/src/hooks/useScrollLock.ts +14 -0
- package/src/theme/derivedVarRegistry.test.ts +14 -3
- package/src/theme/derivedVarRegistry.ts +4 -0
- package/src/theme/generateThemeRules.test.ts +79 -0
- package/src/theme/generateThemeRules.ts +49 -4
- package/src/utils/plainDate.test.ts +50 -0
- package/src/utils/plainDate.ts +12 -0
package/dist/Markdown/parser.js
CHANGED
|
@@ -3,8 +3,10 @@
|
|
|
3
3
|
/**
|
|
4
4
|
* @file parser.ts
|
|
5
5
|
* @input Markdown string
|
|
6
|
-
* @output Array of MarkdownNode AST nodes
|
|
7
|
-
*
|
|
6
|
+
* @output Array of MarkdownNode AST nodes; heading slug helpers
|
|
7
|
+
* (inlineText, slugify, uniqueSlug) shared by Markdown rendering and
|
|
8
|
+
* Outline's parseOutlineFromMarkdown
|
|
9
|
+
* @position Core parser; consumed by Markdown.tsx and Outline
|
|
8
10
|
*/
|
|
9
11
|
|
|
10
12
|
// ---------------------------------------------------------------------------
|
|
@@ -1625,4 +1627,50 @@ export function parseMarkdownIncremental(input, state, arg) {
|
|
|
1625
1627
|
state.settledUpTo = boundary;
|
|
1626
1628
|
state.prevInput = input;
|
|
1627
1629
|
return mergeSettledBlocks(settledBlocks, unsettledBlocks);
|
|
1630
|
+
}
|
|
1631
|
+
|
|
1632
|
+
// ---------------------------------------------------------------------------
|
|
1633
|
+
// Heading slugs
|
|
1634
|
+
// ---------------------------------------------------------------------------
|
|
1635
|
+
// Single source of truth for the heading id contract: Markdown renders these
|
|
1636
|
+
// slugs as `id` attributes on h1–h6, and Outline's parseOutlineFromMarkdown
|
|
1637
|
+
// derives its item ids from the same functions, so outline hash links always
|
|
1638
|
+
// resolve to a rendered heading by construction.
|
|
1639
|
+
|
|
1640
|
+
/** Flatten inline nodes into their plain text content. */
|
|
1641
|
+
export function inlineText(nodes) {
|
|
1642
|
+
return nodes.map(node => {
|
|
1643
|
+
switch (node.type) {
|
|
1644
|
+
case 'text':
|
|
1645
|
+
case 'code':
|
|
1646
|
+
return node.content;
|
|
1647
|
+
case 'bold':
|
|
1648
|
+
case 'italic':
|
|
1649
|
+
case 'strikethrough':
|
|
1650
|
+
case 'link':
|
|
1651
|
+
return inlineText(node.children);
|
|
1652
|
+
case 'image':
|
|
1653
|
+
return node.alt;
|
|
1654
|
+
case 'citation':
|
|
1655
|
+
case 'break':
|
|
1656
|
+
return '';
|
|
1657
|
+
}
|
|
1658
|
+
}).join('');
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
/** Turn heading text into a URL-safe slug (lowercase, hyphen-separated). */
|
|
1662
|
+
export function slugify(value) {
|
|
1663
|
+
return value.trim().toLowerCase().replace(/['"]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1666
|
+
/**
|
|
1667
|
+
* Disambiguate repeated slugs with a numeric suffix (`setup`, `setup-1`, …).
|
|
1668
|
+
* Empty slugs fall back to `section`. The caller owns the counts map so one
|
|
1669
|
+
* document shares a single numbering sequence.
|
|
1670
|
+
*/
|
|
1671
|
+
export function uniqueSlug(baseSlug, counts) {
|
|
1672
|
+
const fallbackSlug = baseSlug || 'section';
|
|
1673
|
+
const count = counts.get(fallbackSlug) ?? 0;
|
|
1674
|
+
counts.set(fallbackSlug, count + 1);
|
|
1675
|
+
return count === 0 ? fallbackSlug : `${fallbackSlug}-${count}`;
|
|
1628
1676
|
}
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
*
|
|
20
20
|
* SYNC: When modified, update these files to stay in sync:
|
|
21
21
|
* - /packages/core/src/MobileNav/index.ts (exports if types change)
|
|
22
|
+
* - /packages/core/src/hooks/scrollbarGutter.ts (shared scroll-lock gutter)
|
|
22
23
|
* - /packages/cli/assets/templates/blocks/components/MobileNav/ (showcase blocks)
|
|
23
24
|
*/
|
|
24
25
|
import { type ReactNode } from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6L5C;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AAmCD,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,+BAiNhB;yBAhOe,SAAS"}
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
*
|
|
24
24
|
* SYNC: When modified, update these files to stay in sync:
|
|
25
25
|
* - /packages/core/src/MobileNav/index.ts (exports if types change)
|
|
26
|
+
* - /packages/core/src/hooks/scrollbarGutter.ts (shared scroll-lock gutter)
|
|
26
27
|
* - /packages/cli/assets/templates/blocks/components/MobileNav/ (showcase blocks)
|
|
27
28
|
*/
|
|
28
29
|
import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
@@ -33,7 +34,9 @@ import { Button } from "../Button/index.js";
|
|
|
33
34
|
import { Icon } from "../Icon/index.js";
|
|
34
35
|
import { Heading } from "../Heading/Heading.js";
|
|
35
36
|
import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
|
|
37
|
+
import { holdScrollbarGutter } from "../hooks/scrollbarGutter.js";
|
|
36
38
|
import { mergeProps, mergeRefs, composeEventHandlers } from "../utils/index.js";
|
|
39
|
+
import { overlayPaddingReset } from "../Layout/padding.stylex.js";
|
|
37
40
|
import { themeProps } from "../utils/themeProps.js";
|
|
38
41
|
import { useTranslator } from "../i18n/index.js";
|
|
39
42
|
|
|
@@ -52,7 +55,7 @@ const styles = {
|
|
|
52
55
|
kzqmXN: "xn9wirt",
|
|
53
56
|
kZKoxP: "xtdtrs8",
|
|
54
57
|
kWkggS: "xjbqb8w",
|
|
55
|
-
kVQacm: "
|
|
58
|
+
kVQacm: "x7giv3",
|
|
56
59
|
kZeWKH: "xish69e",
|
|
57
60
|
kFalU9: "x5ve5x3",
|
|
58
61
|
kI3sdo: "x1a2a7pz",
|
|
@@ -77,7 +80,7 @@ const styles = {
|
|
|
77
80
|
$$css: true
|
|
78
81
|
},
|
|
79
82
|
backdropOpen: {
|
|
80
|
-
k5sjJv: "xb3n6bw",
|
|
83
|
+
k5sjJv: "xb3n6bw xxiuuzi",
|
|
81
84
|
$$css: true
|
|
82
85
|
},
|
|
83
86
|
drawer: {
|
|
@@ -105,7 +108,7 @@ const styles = {
|
|
|
105
108
|
$$css: true
|
|
106
109
|
},
|
|
107
110
|
drawerStartOpen: {
|
|
108
|
-
k3aq6I: "xbryuvx",
|
|
111
|
+
k3aq6I: "xbryuvx x6mt36l x14gflnl",
|
|
109
112
|
$$css: true
|
|
110
113
|
},
|
|
111
114
|
drawerEnd: {
|
|
@@ -117,7 +120,7 @@ const styles = {
|
|
|
117
120
|
$$css: true
|
|
118
121
|
},
|
|
119
122
|
drawerEndOpen: {
|
|
120
|
-
k3aq6I: "xbryuvx",
|
|
123
|
+
k3aq6I: "xbryuvx x1yqmsfc x1lymnkk",
|
|
121
124
|
$$css: true
|
|
122
125
|
},
|
|
123
126
|
headerText: {
|
|
@@ -258,6 +261,15 @@ export function MobileNav({
|
|
|
258
261
|
}), [onOpenChangeProp, appShellMobile]);
|
|
259
262
|
const dialogRef = useRef(null);
|
|
260
263
|
const closeTimeoutRef = useRef(null);
|
|
264
|
+
const gutterRef = useRef(null);
|
|
265
|
+
|
|
266
|
+
// Gives back the gutter held open in place of the hidden scrollbar.
|
|
267
|
+
const releaseGutter = useCallback(() => {
|
|
268
|
+
if (gutterRef.current) {
|
|
269
|
+
gutterRef.current.release();
|
|
270
|
+
gutterRef.current = null;
|
|
271
|
+
}
|
|
272
|
+
}, []);
|
|
261
273
|
// Resolved side — computed from trigger position when side='auto'
|
|
262
274
|
const [resolvedSide, setResolvedSide] = useState(side === 'auto' ? 'end' : side);
|
|
263
275
|
|
|
@@ -294,6 +306,9 @@ export function MobileNav({
|
|
|
294
306
|
return;
|
|
295
307
|
}
|
|
296
308
|
if (isOpen) {
|
|
309
|
+
// Taken first: every mutation below is one that can hide the scrollbar,
|
|
310
|
+
// and the gutter has to be measured while it is still there.
|
|
311
|
+
gutterRef.current ??= holdScrollbarGutter(document.documentElement);
|
|
297
312
|
if (!dialog.open) {
|
|
298
313
|
dialog.showModal();
|
|
299
314
|
}
|
|
@@ -301,8 +316,10 @@ export function MobileNav({
|
|
|
301
316
|
// overflow: clip avoids creating a scroll container (unlike hidden),
|
|
302
317
|
// so there's no scroll bounce and no need to save/restore scroll position.
|
|
303
318
|
document.documentElement.style.overflow = 'clip';
|
|
319
|
+
gutterRef.current.settle();
|
|
304
320
|
} else if (dialog.open) {
|
|
305
321
|
document.documentElement.style.overflow = '';
|
|
322
|
+
releaseGutter();
|
|
306
323
|
closeTimeoutRef.current = setTimeout(() => {
|
|
307
324
|
dialog.close();
|
|
308
325
|
}, resolveCloseDelay(dialog));
|
|
@@ -313,8 +330,9 @@ export function MobileNav({
|
|
|
313
330
|
closeTimeoutRef.current = null;
|
|
314
331
|
}
|
|
315
332
|
document.documentElement.style.overflow = '';
|
|
333
|
+
releaseGutter();
|
|
316
334
|
};
|
|
317
|
-
}, [isOpen]);
|
|
335
|
+
}, [isOpen, releaseGutter]);
|
|
318
336
|
|
|
319
337
|
// Close the native dialog on unmount if it's still open. Inside AppShell the
|
|
320
338
|
// drawer is mounted in an <Activity> that switches to mode="hidden" when the
|
|
@@ -355,7 +373,7 @@ export function MobileNav({
|
|
|
355
373
|
id: dialogId,
|
|
356
374
|
...mergeProps(themeProps('mobile-nav', {
|
|
357
375
|
side: resolvedSide
|
|
358
|
-
}), stylex.props(styles.dialog, isOpen && styles.open, styles.backdrop, isOpen && styles.backdropOpen, xstyle), className, style),
|
|
376
|
+
}), stylex.props(styles.dialog, overlayPaddingReset.reset, isOpen && styles.open, styles.backdrop, isOpen && styles.backdropOpen, xstyle), className, style),
|
|
359
377
|
...rest,
|
|
360
378
|
"data-testid": testId,
|
|
361
379
|
"aria-label": label ?? (typeof header === 'string' ? header : t('@astryx.mobileNav.navigation')),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAKlB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAcpD,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,6 +32,7 @@ import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptio
|
|
|
32
32
|
import { useMultiCombobox } from "./hooks.js";
|
|
33
33
|
import { getInputARIA, isImeKeyEvent, mergeProps } from "../utils/index.js";
|
|
34
34
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
35
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
35
36
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
36
37
|
import { themeProps } from "../utils/themeProps.js";
|
|
37
38
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
@@ -287,6 +288,10 @@ export function MultiSelector({
|
|
|
287
288
|
style
|
|
288
289
|
}) {
|
|
289
290
|
const t = useTranslator();
|
|
291
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
292
|
+
isRequired,
|
|
293
|
+
isOptional
|
|
294
|
+
});
|
|
290
295
|
const placeholder = placeholderFromProps ?? t('@astryx.multiSelector.selectPlaceholder');
|
|
291
296
|
const selectAllLabel = selectAllLabelFromProps ?? t('@astryx.multiSelector.selectAll');
|
|
292
297
|
const searchPlaceholder = searchPlaceholderFromProps ?? t('@astryx.multiSelector.searchPlaceholder');
|
|
@@ -905,7 +910,7 @@ export function MultiSelector({
|
|
|
905
910
|
"aria-activedescendant": !hasSearch && popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
|
|
906
911
|
"aria-describedby": ariaDescribedBy,
|
|
907
912
|
"aria-labelledby": ariaLabelledBy,
|
|
908
|
-
"aria-required":
|
|
913
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
909
914
|
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
910
915
|
"aria-busy": isBusy || undefined
|
|
911
916
|
// With a disabledMessage the trigger keeps focusability via
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
import { useId, useState, useMemo, useCallback, useRef } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
|
-
import { colorVars, sizeVars, spacingVars,
|
|
21
|
+
import { colorVars, sizeVars, spacingVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
|
|
23
23
|
import { Icon, renderIconSlot } from "../Icon/index.js";
|
|
24
24
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
@@ -27,10 +27,39 @@ import { getInputARIA } from "../utils/index.js";
|
|
|
27
27
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
28
28
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
29
29
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
30
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
30
31
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
32
|
+
|
|
33
|
+
// Public padding tokens for the `number-input` theme target. A theme writes an
|
|
34
|
+
// ordinary `padding` (in ANY spelling — the shorthand, `paddingBlock`, or a
|
|
35
|
+
// single `paddingBlockStart`) and the pipeline's `container` expansion parses
|
|
36
|
+
// it and emits these normalized per-side tokens; the wrapper and the stepper
|
|
37
|
+
// column both read them, so the column tracks whatever the theme sets instead
|
|
38
|
+
// of assuming the default. Routing through the shared expansion rather than a
|
|
39
|
+
// hand-rolled property→var mapping is what makes every spelling work: a
|
|
40
|
+
// mapping only fires for the exact property name it names.
|
|
41
|
+
//
|
|
42
|
+
// Read order per level: `var(--astryx-…, <next level>)`, terminating at the
|
|
43
|
+
// shared field defaults (NOT the container default --spacing-4, which is a
|
|
44
|
+
// layout metric and would resize every themed field). Built as chained const
|
|
45
|
+
// strings — no function calls — so StyleX can statically analyze them; same
|
|
46
|
+
// shape as the card/section/dialog chains in Layout/container.stylex.ts.
|
|
47
|
+
const FIELD_PAD_BLOCK = spacingVars['--spacing-1'];
|
|
48
|
+
const FIELD_PAD_INLINE = spacingVars['--spacing-2'];
|
|
49
|
+
const padBlockAll = `var(--astryx-number-input-padding, ${FIELD_PAD_BLOCK})`;
|
|
50
|
+
const padInlineAll = `var(--astryx-number-input-padding, ${FIELD_PAD_INLINE})`;
|
|
51
|
+
const padInline = `var(--astryx-number-input-padding-inline, ${padInlineAll})`;
|
|
52
|
+
const padInlineStart = `var(--astryx-number-input-padding-inline-start, ${padInline})`;
|
|
53
|
+
const padInlineEnd = `var(--astryx-number-input-padding-inline-end, ${padInline})`;
|
|
54
|
+
const padBlockStart = `var(--astryx-number-input-padding-block-start, ${padBlockAll})`;
|
|
55
|
+
const padBlockEnd = `var(--astryx-number-input-padding-block-end, ${padBlockAll})`;
|
|
31
56
|
const styles = {
|
|
32
57
|
wrapper: {
|
|
33
58
|
kY2c9j: "x1vjfegm",
|
|
59
|
+
kLKAdn: "x4kswst",
|
|
60
|
+
kGO01o: "x3jnfsm",
|
|
61
|
+
kZCmMZ: "x1jni19p",
|
|
62
|
+
kwRFfy: "x17sfb9",
|
|
34
63
|
$$css: true
|
|
35
64
|
},
|
|
36
65
|
wrapperWithNumberSteppers: {
|
|
@@ -202,6 +231,10 @@ export function NumberInput({
|
|
|
202
231
|
...rest
|
|
203
232
|
}) {
|
|
204
233
|
const t = useTranslator();
|
|
234
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
235
|
+
isRequired,
|
|
236
|
+
isOptional
|
|
237
|
+
});
|
|
205
238
|
const size = useSize(sizeProp, 'md');
|
|
206
239
|
const id = useId();
|
|
207
240
|
const inputLabelID = useId();
|
|
@@ -509,7 +542,7 @@ export function NumberInput({
|
|
|
509
542
|
"aria-valuenow": value ?? undefined,
|
|
510
543
|
"aria-valuetext": value == null || !formatValue ? undefined : formattedValue,
|
|
511
544
|
"aria-describedby": ariaDescribedBy,
|
|
512
|
-
"aria-required":
|
|
545
|
+
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
513
546
|
"aria-invalid": status?.type === 'error' || !isInputValid ? 'true' : undefined,
|
|
514
547
|
"aria-labelledby": ariaLabelledBy,
|
|
515
548
|
...{
|
|
@@ -548,7 +581,7 @@ export function NumberInput({
|
|
|
548
581
|
onClick: handleClear
|
|
549
582
|
}), statusIcon, hasNumberSteppers && /*#__PURE__*/_jsxs("div", {
|
|
550
583
|
...{
|
|
551
|
-
className: "xkh2ocl x78zum5 xdt5ytf x2lah0s x12xnipv
|
|
584
|
+
className: "xkh2ocl x78zum5 xdt5ytf x2lah0s x12xnipv x5j3pgv x13i4uq0 xgbv0en x1t7ytsu x14ydlgx xb3r6kr x1g2gkjz xoao14b"
|
|
552
585
|
},
|
|
553
586
|
children: [/*#__PURE__*/_jsx("button", {
|
|
554
587
|
type: "button",
|
|
@@ -4,6 +4,8 @@ import type { OutlineItem } from './types';
|
|
|
4
4
|
*
|
|
5
5
|
* Uses Markdown's parser so fenced code blocks, tables, lists, and inline
|
|
6
6
|
* formatting are interpreted consistently with rendered Markdown output.
|
|
7
|
+
* Ids come from the parser's shared slug helpers, so they always match the
|
|
8
|
+
* `id` attributes Markdown renders on its headings.
|
|
7
9
|
*/
|
|
8
10
|
export declare function parseOutlineFromMarkdown(markdown: string): OutlineItem[];
|
|
9
11
|
//# sourceMappingURL=parseOutlineFromMarkdown.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parseOutlineFromMarkdown.d.ts","sourceRoot":"","sources":["../../src/Outline/parseOutlineFromMarkdown.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"parseOutlineFromMarkdown.d.ts","sourceRoot":"","sources":["../../src/Outline/parseOutlineFromMarkdown.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEzC;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,EAAE,CAYxE"}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* @file parseOutlineFromMarkdown.ts
|
|
5
|
-
* @input Uses Markdown parser internals
|
|
5
|
+
* @input Uses Markdown parser internals (parseMarkdown + heading slug
|
|
6
|
+
* helpers) and OutlineItem type
|
|
6
7
|
* @output Exports parseOutlineFromMarkdown for extracting heading outlines from Markdown
|
|
7
8
|
* @position Pure utility; consumed by useOutlineFromMarkdown and public exports
|
|
8
9
|
*
|
|
@@ -11,41 +12,14 @@
|
|
|
11
12
|
* - /packages/core/src/Outline/index.ts
|
|
12
13
|
*/
|
|
13
14
|
|
|
14
|
-
import { parseMarkdown } from "../Markdown/parser.js";
|
|
15
|
-
function inlineText(nodes) {
|
|
16
|
-
return nodes.map(node => {
|
|
17
|
-
switch (node.type) {
|
|
18
|
-
case 'text':
|
|
19
|
-
case 'code':
|
|
20
|
-
return node.content;
|
|
21
|
-
case 'bold':
|
|
22
|
-
case 'italic':
|
|
23
|
-
case 'strikethrough':
|
|
24
|
-
case 'link':
|
|
25
|
-
return inlineText(node.children);
|
|
26
|
-
case 'image':
|
|
27
|
-
return node.alt;
|
|
28
|
-
case 'citation':
|
|
29
|
-
case 'break':
|
|
30
|
-
return '';
|
|
31
|
-
}
|
|
32
|
-
}).join('');
|
|
33
|
-
}
|
|
34
|
-
function slugify(value) {
|
|
35
|
-
return value.trim().toLowerCase().replace(/['"]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
|
|
36
|
-
}
|
|
37
|
-
function uniqueSlug(baseSlug, counts) {
|
|
38
|
-
const fallbackSlug = baseSlug || 'section';
|
|
39
|
-
const count = counts.get(fallbackSlug) ?? 0;
|
|
40
|
-
counts.set(fallbackSlug, count + 1);
|
|
41
|
-
return count === 0 ? fallbackSlug : `${fallbackSlug}-${count}`;
|
|
42
|
-
}
|
|
43
|
-
|
|
15
|
+
import { parseMarkdown, inlineText, slugify, uniqueSlug } from "../Markdown/parser.js";
|
|
44
16
|
/**
|
|
45
17
|
* Extract heading items from a Markdown string.
|
|
46
18
|
*
|
|
47
19
|
* Uses Markdown's parser so fenced code blocks, tables, lists, and inline
|
|
48
20
|
* formatting are interpreted consistently with rendered Markdown output.
|
|
21
|
+
* Ids come from the parser's shared slug helpers, so they always match the
|
|
22
|
+
* `id` attributes Markdown renders on its headings.
|
|
49
23
|
*/
|
|
50
24
|
export function parseOutlineFromMarkdown(markdown) {
|
|
51
25
|
const counts = new Map();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6CAE5B,CAAC;AAiBF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,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;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,WAAwB,EACxB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,MAAM,EACN,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,qBAwMhB;yBA9Ne,SAAS"}
|
|
@@ -21,6 +21,7 @@ import "../theme/tokens.stylex.js";
|
|
|
21
21
|
import { spacingVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { Field } from "../Field/Field.js";
|
|
23
23
|
import { useTooltip } from "../Tooltip/index.js";
|
|
24
|
+
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
24
25
|
import { mergeProps } from "../utils/index.js";
|
|
25
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
26
27
|
|
|
@@ -76,6 +77,16 @@ export function RadioList({
|
|
|
76
77
|
const statusMessageID = useId();
|
|
77
78
|
const groupRef = useRef(null);
|
|
78
79
|
|
|
80
|
+
// The radiogroup exposes the *effective* required state so a form-wide
|
|
81
|
+
// `defaultOptionality="required"` is announced even when the group carries no
|
|
82
|
+
// visible indicator. Individual radios keep their native `required` bound to
|
|
83
|
+
// the explicit `isRequired` (via context), so a layout default never switches
|
|
84
|
+
// on browser validation for the group.
|
|
85
|
+
const isEffectivelyRequired = useResolvedRequired({
|
|
86
|
+
isRequired,
|
|
87
|
+
isOptional
|
|
88
|
+
});
|
|
89
|
+
|
|
79
90
|
// Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
|
|
80
91
|
// controls swallow pointer events, so the tooltip listeners attach to the
|
|
81
92
|
// radiogroup container and the radios stay perceivable via aria-disabled
|
|
@@ -203,7 +214,7 @@ export function RadioList({
|
|
|
203
214
|
onFocus: handleFocus,
|
|
204
215
|
"aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
|
|
205
216
|
"aria-invalid": status?.type === 'error' ? true : undefined,
|
|
206
|
-
"aria-required":
|
|
217
|
+
"aria-required": isEffectivelyRequired || undefined,
|
|
207
218
|
...mergeProps(themeProps('radio-list', {
|
|
208
219
|
orientation,
|
|
209
220
|
size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAOnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAOnD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8MzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA6RnB;yBA5Se,YAAY"}
|
|
@@ -225,11 +225,11 @@ const _temp4 = {
|
|
|
225
225
|
};
|
|
226
226
|
const dynamicStyles = {
|
|
227
227
|
hitAreaOffsetX: dir => [_temp, {
|
|
228
|
-
"--x-qthpiu": `
|
|
229
|
-
"--x-sj6hyi": `
|
|
228
|
+
"--x-qthpiu": `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` != null ? `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` : undefined,
|
|
229
|
+
"--x-sj6hyi": `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px))` != null ? `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px))` : undefined
|
|
230
230
|
}],
|
|
231
231
|
hitAreaOffsetY: dir => [_temp2, {
|
|
232
|
-
"--x-transform": `
|
|
232
|
+
"--x-transform": `translateY(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` != null ? `translateY(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` : undefined
|
|
233
233
|
}],
|
|
234
234
|
pillOffsetX: dir => [_temp3, {
|
|
235
235
|
"--x-transform": `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` != null ? `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` : undefined
|
|
@@ -69,6 +69,27 @@ export interface SectionProps extends BaseProps<HTMLElement> {
|
|
|
69
69
|
* @default 4 (16px)
|
|
70
70
|
*/
|
|
71
71
|
padding?: SpacingStep;
|
|
72
|
+
/**
|
|
73
|
+
* Inline (horizontal) padding override. When set, overrides only the inline
|
|
74
|
+
* axis padding while preserving block padding from `padding` or the
|
|
75
|
+
* container theme default.
|
|
76
|
+
* Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
|
|
77
|
+
*/
|
|
78
|
+
paddingInline?: SpacingStep;
|
|
79
|
+
/**
|
|
80
|
+
* Inline-start padding override. Logical: the left edge in LTR, the right
|
|
81
|
+
* edge in RTL. Takes precedence over `paddingInline` and `padding` on that
|
|
82
|
+
* edge only; every other edge is left alone.
|
|
83
|
+
* Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
|
|
84
|
+
*/
|
|
85
|
+
paddingInlineStart?: SpacingStep;
|
|
86
|
+
/**
|
|
87
|
+
* Inline-end padding override. Logical: the right edge in LTR, the left
|
|
88
|
+
* edge in RTL. Takes precedence over `paddingInline` and `padding` on that
|
|
89
|
+
* edge only; every other edge is left alone.
|
|
90
|
+
* Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
|
|
91
|
+
*/
|
|
92
|
+
paddingInlineEnd?: SpacingStep;
|
|
72
93
|
/**
|
|
73
94
|
* Block (vertical) padding override. When set, overrides only the block
|
|
74
95
|
* axis padding while preserving inline padding from `padding` or the
|
|
@@ -76,6 +97,20 @@ export interface SectionProps extends BaseProps<HTMLElement> {
|
|
|
76
97
|
* Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
|
|
77
98
|
*/
|
|
78
99
|
paddingBlock?: SpacingStep;
|
|
100
|
+
/**
|
|
101
|
+
* Block-start (top) padding override. Takes precedence over `paddingBlock`
|
|
102
|
+
* and `padding` on that edge only; the block-end edge and both inline edges
|
|
103
|
+
* are left alone.
|
|
104
|
+
* Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
|
|
105
|
+
*/
|
|
106
|
+
paddingBlockStart?: SpacingStep;
|
|
107
|
+
/**
|
|
108
|
+
* Block-end (bottom) padding override. Takes precedence over `paddingBlock`
|
|
109
|
+
* and `padding` on that edge only; the block-start edge and both inline
|
|
110
|
+
* edges are left alone.
|
|
111
|
+
* Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
|
|
112
|
+
*/
|
|
113
|
+
paddingBlockEnd?: SpacingStep;
|
|
79
114
|
}
|
|
80
115
|
/**
|
|
81
116
|
* A section container with background variants.
|
|
@@ -95,7 +130,7 @@ export interface SectionProps extends BaseProps<HTMLElement> {
|
|
|
95
130
|
* </Section>
|
|
96
131
|
* ```
|
|
97
132
|
*/
|
|
98
|
-
export declare function Section({ variant, width, height, maxWidth, minHeight, children, dividers, padding, paddingBlock, xstyle, className, style, ref, ...props }: SectionProps): import("react").JSX.Element;
|
|
133
|
+
export declare function Section({ variant, width, height, maxWidth, minHeight, children, dividers, padding, paddingInline, paddingInlineStart, paddingInlineEnd, paddingBlock, paddingBlockStart, paddingBlockEnd, xstyle, className, style, ref, ...props }: SectionProps): import("react").JSX.Element;
|
|
99
134
|
export declare namespace Section {
|
|
100
135
|
var displayName: string;
|
|
101
136
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/Section/Section.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/Section/Section.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmB5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC;AAiFrD,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;IAElD;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAmB,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAgGd;yBApHe,OAAO"}
|
package/dist/Section/Section.js
CHANGED
|
@@ -17,7 +17,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
17
17
|
import "../theme/tokens.stylex.js";
|
|
18
18
|
import { colorVars } from "../theme/tokens.stylex.js";
|
|
19
19
|
import { container } from "../Layout/container.stylex.js";
|
|
20
|
-
import { paddingStyles, paddingBlockStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, sectionPaddingPropagationStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
|
|
20
|
+
import { paddingStyles, paddingInlineStyles, paddingInlineStartStyles, paddingInlineEndStyles, paddingBlockStyles, paddingBlockStartStyles, paddingBlockEndStyles, containerPaddingInlineVarStyles, containerPaddingInlineStartVarStyles, containerPaddingInlineEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, sectionPaddingPropagationStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
|
|
21
21
|
import { mergeProps } from "../utils/index.js";
|
|
22
22
|
import { themeProps } from "../utils/themeProps.js";
|
|
23
23
|
|
|
@@ -130,7 +130,12 @@ export function Section({
|
|
|
130
130
|
children,
|
|
131
131
|
dividers,
|
|
132
132
|
padding,
|
|
133
|
+
paddingInline,
|
|
134
|
+
paddingInlineStart,
|
|
135
|
+
paddingInlineEnd,
|
|
133
136
|
paddingBlock,
|
|
137
|
+
paddingBlockStart,
|
|
138
|
+
paddingBlockEnd,
|
|
134
139
|
xstyle,
|
|
135
140
|
className,
|
|
136
141
|
style,
|
|
@@ -160,7 +165,12 @@ export function Section({
|
|
|
160
165
|
paddingInnerY: paddingToken,
|
|
161
166
|
paddingOuterX: paddingToken,
|
|
162
167
|
paddingOuterY: paddingToken
|
|
163
|
-
}), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding], !useThemeDefault && sectionPaddingPropagationStyles[effectivePadding],
|
|
168
|
+
}), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding], !useThemeDefault && sectionPaddingPropagationStyles[effectivePadding], paddingInline != null && paddingInlineStyles[paddingInline], paddingInline != null && containerPaddingInlineVarStyles[paddingInline], paddingBlock != null && paddingBlockStyles[paddingBlock], paddingBlock != null && containerPaddingBlockStartVarStyles[paddingBlock], paddingBlock != null && containerPaddingBlockEndVarStyles[paddingBlock],
|
|
169
|
+
// Per-edge overrides come last so they win over `paddingBlock`
|
|
170
|
+
// and `padding` on their own edge. The matching container var is
|
|
171
|
+
// updated alongside so bleed children (Table, Divider, nested
|
|
172
|
+
// Section) compensate against the padding actually applied.
|
|
173
|
+
paddingBlockStart != null && paddingBlockStartStyles[paddingBlockStart], paddingBlockStart != null && containerPaddingBlockStartVarStyles[paddingBlockStart], paddingBlockEnd != null && paddingBlockEndStyles[paddingBlockEnd], paddingBlockEnd != null && containerPaddingBlockEndVarStyles[paddingBlockEnd], paddingInlineStart != null && paddingInlineStartStyles[paddingInlineStart], paddingInlineStart != null && containerPaddingInlineStartVarStyles[paddingInlineStart], paddingInlineEnd != null && paddingInlineEndStyles[paddingInlineEnd], paddingInlineEnd != null && containerPaddingInlineEndVarStyles[paddingInlineEnd], variantStyles[variant], dividers?.includes('top') && dividerStyles.top, dividers?.includes('bottom') && dividerStyles.bottom, dividers?.includes('start') && dividerStyles.start, dividers?.includes('end') && dividerStyles.end)),
|
|
164
174
|
children: children
|
|
165
175
|
})
|
|
166
176
|
});
|
|
@@ -137,7 +137,8 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
|
|
|
137
137
|
*/
|
|
138
138
|
labelTooltip?: string;
|
|
139
139
|
/**
|
|
140
|
-
* Icon displayed at the start of the selector trigger.
|
|
140
|
+
* Icon displayed at the start of the selector trigger. Takes precedence over
|
|
141
|
+
* the selected option's own `icon`, which the trigger otherwise renders.
|
|
141
142
|
*/
|
|
142
143
|
startIcon?: ReactNode | IconType;
|
|
143
144
|
/**
|
|
@@ -145,6 +146,30 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
|
|
|
145
146
|
* Only called for selectable options (not dividers/sections).
|
|
146
147
|
*/
|
|
147
148
|
renderOption?: (option: SelectorOptionData) => ReactNode;
|
|
149
|
+
/**
|
|
150
|
+
* Custom render function for the selected option inside the closed trigger.
|
|
151
|
+
* Only called when something is selected; the placeholder is unaffected.
|
|
152
|
+
*
|
|
153
|
+
* Passing this does not change the trigger's height — what it draws does. A
|
|
154
|
+
* one-line value measures exactly the `size` token, so the control still
|
|
155
|
+
* lines up with the Buttons and inputs beside it; each further line of
|
|
156
|
+
* content adds one text line. Inside an `InputGroup` the group owns the row
|
|
157
|
+
* height: the trigger clamps its value box to that row, so a `SelectorOption`
|
|
158
|
+
* folds onto one line and ellipsizes, and anything taller than the row is cut
|
|
159
|
+
* off at it rather than bleeding over the rows above and below.
|
|
160
|
+
*
|
|
161
|
+
* @example
|
|
162
|
+
* ```
|
|
163
|
+
* renderValue={option => (
|
|
164
|
+
* <SelectorOption
|
|
165
|
+
* icon={option.icon}
|
|
166
|
+
* label={option.label}
|
|
167
|
+
* description={option.description}
|
|
168
|
+
* />
|
|
169
|
+
* )}
|
|
170
|
+
* ```
|
|
171
|
+
*/
|
|
172
|
+
renderValue?: (option: SelectorOptionData) => ReactNode;
|
|
148
173
|
/**
|
|
149
174
|
* Which edge of the option row carries the selected mark. `start` reserves a
|
|
150
175
|
* mark column ahead of every label so they stay aligned, the way a native
|