@astryxdesign/core 0.7.2 → 0.7.3-canary.02f5fe4
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/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +8 -4
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +7 -0
- package/dist/Calendar/Calendar.js +3 -2
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +19 -24
- package/dist/ClickableCard/ClickableCard.d.ts +2 -2
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +11 -9
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +11 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +23 -5
- package/dist/DateInput/DateInput.d.ts +4 -4
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +27 -20
- package/dist/DateInput/NativeDateField.d.ts.map +1 -1
- package/dist/DateInput/NativeDateField.js +14 -8
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +14 -10
- package/dist/DateRangeInput/DateRangeInput.d.ts +5 -5
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +27 -18
- package/dist/DateTimeInput/DateTimeInput.d.ts +5 -5
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +25 -27
- package/dist/DateTimeInput/NativeDateSegment.d.ts +3 -2
- package/dist/DateTimeInput/NativeDateSegment.d.ts.map +1 -1
- package/dist/DateTimeInput/NativeDateSegment.js +5 -5
- package/dist/DateTimeInput/NativeTimeSegment.d.ts +3 -2
- package/dist/DateTimeInput/NativeTimeSegment.d.ts.map +1 -1
- package/dist/DateTimeInput/NativeTimeSegment.js +5 -5
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.js +12 -9
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +9 -4
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +52 -10
- package/dist/DropdownMenu/DropdownMenuContext.d.ts +34 -1
- package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuContext.js +15 -0
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts +21 -2
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +375 -42
- package/dist/DropdownMenu/menuRegionStops.d.ts +2 -2
- package/dist/DropdownMenu/menuRegionStops.js +2 -2
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +14 -12
- package/dist/Link/Link.d.ts +2 -3
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +11 -19
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +48 -15
- package/dist/MultiSelector/MultiSelector.d.ts +4 -4
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.disabledFocus.a11y.chromium.spec.d.ts +2 -0
- package/dist/MultiSelector/MultiSelector.disabledFocus.a11y.chromium.spec.d.ts.map +1 -0
- package/dist/MultiSelector/MultiSelector.disabledFocus.a11y.chromium.spec.js +48 -0
- package/dist/MultiSelector/MultiSelector.js +25 -18
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +5 -2
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +8 -4
- package/dist/Selector/Selector.d.ts +4 -4
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +23 -14
- package/dist/Selector/SelectorOption.d.ts.map +1 -1
- package/dist/Selector/SelectorOption.js +1 -0
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +7 -14
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +25 -17
- package/dist/Switch/switch.markers.stylex.d.ts +2 -0
- package/dist/Switch/switch.markers.stylex.d.ts.map +1 -1
- package/dist/Switch/switch.markers.stylex.js +6 -0
- package/dist/TimeInput/TimeInput.d.ts +7 -6
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +37 -20
- package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
- package/dist/TimeInput/TouchTimeField.js +17 -6
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +41 -8
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +8 -3
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +36 -14
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +11 -2
- package/dist/TopNav/TopNav.d.ts.map +1 -1
- package/dist/TopNav/TopNav.js +2 -2
- package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
- package/dist/TopNav/TopNavHeading.js +1 -0
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +8 -3
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +14 -2
- package/dist/astryx.css +8 -2
- package/dist/hooks/useGridFocus.d.ts.map +1 -1
- package/dist/hooks/useGridFocus.js +10 -1
- package/dist/hooks/useMenuPress.d.ts +11 -1
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +43 -5
- package/dist/utils/disabledInteraction.d.ts +21 -0
- package/dist/utils/disabledInteraction.d.ts.map +1 -0
- package/dist/utils/disabledInteraction.js +33 -0
- package/dist/utils/timeParser.d.ts +4 -0
- package/dist/utils/timeParser.d.ts.map +1 -1
- package/dist/utils/timeParser.js +9 -2
- package/package.json +4 -4
- package/scripts/agent-doc-state.mjs +58 -9
- package/src/Banner/Banner.spec.md +37 -32
- package/src/BottomSheet/BottomSheet.spec.md +34 -54
- package/src/BottomSheet/BottomSheet.test.tsx +29 -0
- package/src/BottomSheet/BottomSheet.tsx +8 -4
- package/src/BottomSheet/BottomSheetSwitcher.spec.md +125 -58
- package/src/BottomSheet/BottomSheetSwitcher.test.tsx +26 -0
- package/src/BottomSheet/BottomSheetSwitcher.tsx +6 -0
- package/src/Calendar/Calendar.test.tsx +68 -24
- package/src/Calendar/Calendar.tsx +2 -1
- package/src/CheckboxInput/CheckboxInput.test.tsx +44 -5
- package/src/CheckboxInput/CheckboxInput.tsx +16 -26
- package/src/CheckboxInput/__tests__/Checkbox.a11y.states.ts +3 -3
- package/src/CheckboxList/CheckboxList.test.tsx +9 -6
- package/src/ClickableCard/ClickableCard.doc.mjs +2 -2
- package/src/ClickableCard/ClickableCard.test.tsx +5 -4
- package/src/ClickableCard/ClickableCard.tsx +9 -9
- package/src/CodeBlock/CodeBlock.highlightStyles.test.tsx +87 -0
- package/src/CodeBlock/CodeBlock.tsx +11 -1
- package/src/ComplexSelector/ComplexSelector.focusableDisabled.test.tsx +76 -0
- package/src/ComplexSelector/ComplexSelector.tsx +21 -4
- package/src/ContextMenu/ContextMenu.test.tsx +41 -0
- package/src/DateInput/DateInput.doc.mjs +9 -8
- package/src/DateInput/DateInput.test.tsx +88 -13
- package/src/DateInput/DateInput.tsx +49 -21
- package/src/DateInput/DateInputTouch.test.tsx +22 -1
- package/src/DateInput/NativeDateField.test.tsx +29 -3
- package/src/DateInput/NativeDateField.tsx +20 -7
- package/src/DateInput/TouchDateField.tsx +24 -9
- package/src/DateRangeInput/DateRangeInput.doc.mjs +6 -5
- package/src/DateRangeInput/DateRangeInput.spec.md +13 -13
- package/src/DateRangeInput/DateRangeInput.test.tsx +82 -16
- package/src/DateRangeInput/DateRangeInput.tsx +40 -20
- package/src/DateTimeInput/DateTimeInput.doc.mjs +9 -8
- package/src/DateTimeInput/DateTimeInput.test.tsx +126 -11
- package/src/DateTimeInput/DateTimeInput.tsx +42 -26
- package/src/DateTimeInput/DateTimeInputTouch.test.tsx +24 -0
- package/src/DateTimeInput/NativeDateSegment.tsx +9 -6
- package/src/DateTimeInput/NativePickerSegments.test.tsx +31 -0
- package/src/DateTimeInput/NativeTimeSegment.tsx +9 -6
- package/src/DateTimeInput/TouchDateTimeField.tsx +22 -7
- package/src/Dialog/Dialog.test.tsx +39 -0
- package/src/Dialog/Dialog.tsx +9 -4
- package/src/DropdownMenu/DropdownMenu.spec.md +33 -2
- package/src/DropdownMenu/DropdownMenu.tsx +79 -8
- package/src/DropdownMenu/DropdownMenuContext.public.test.ts +22 -0
- package/src/DropdownMenu/DropdownMenuContext.tsx +39 -1
- package/src/DropdownMenu/DropdownMenuItem.doc.mjs +66 -7
- package/src/DropdownMenu/DropdownMenuItem.spec.md +209 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs +16 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +623 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +556 -99
- package/src/DropdownMenu/__tests__/DropdownMenuItemAudit.a11y.chromium.spec.ts +366 -0
- package/src/DropdownMenu/__tests__/SubMenuHeaderFooter.a11y.chromium.spec.ts +267 -0
- package/src/DropdownMenu/menuRegionStops.ts +2 -2
- package/src/DropdownMenu/modules/useMenuPress.spec.md +9 -0
- package/src/FieldStatus/FieldStatus.spec.md +3 -2
- package/src/FileInput/FileInput.test.tsx +30 -7
- package/src/FileInput/FileInput.tsx +21 -11
- package/src/Link/Link.test.tsx +21 -7
- package/src/Link/Link.tsx +16 -24
- package/src/Link/__tests__/Link.a11y.states.ts +1 -1
- package/src/Markdown/Markdown.rerender.test.tsx +143 -0
- package/src/Markdown/Markdown.tsx +89 -35
- package/src/MultiSelector/MultiSelector.disabledFocus.a11y.chromium.spec.ts +71 -0
- package/src/MultiSelector/MultiSelector.doc.mjs +5 -5
- package/src/MultiSelector/MultiSelector.focusableDisabled.test.tsx +121 -0
- package/src/MultiSelector/MultiSelector.test.tsx +49 -7
- package/src/MultiSelector/MultiSelector.tsx +53 -29
- package/src/Pagination/Pagination.test.tsx +5 -1
- package/src/Pagination/Pagination.tsx +3 -1
- package/src/Popover/Popover.test.tsx +15 -0
- package/src/Popover/Popover.tsx +19 -8
- package/src/PowerSearch/PowerSearchFilterEditor.test.tsx +3 -2
- package/src/PowerSearch/PowerSearchToken.test.tsx +7 -5
- package/src/Selector/Selector.doc.mjs +4 -4
- package/src/Selector/Selector.focusableDisabled.test.tsx +127 -0
- package/src/Selector/Selector.spec.md +11 -11
- package/src/Selector/Selector.test.tsx +64 -6
- package/src/Selector/Selector.tsx +51 -21
- package/src/Selector/SelectorOption.tsx +4 -0
- package/src/SideNav/SideNav.test.tsx +35 -0
- package/src/Slider/Slider.spec.md +11 -11
- package/src/Slider/Slider.test.tsx +3 -3
- package/src/Slider/Slider.tsx +8 -15
- package/src/Switch/Switch.test.tsx +85 -8
- package/src/Switch/Switch.tsx +26 -16
- package/src/Switch/__tests__/Switch.a11y.states.ts +2 -2
- package/src/Switch/switch.markers.stylex.ts +4 -0
- package/src/Table/Table.spec.md +2 -0
- package/src/Table/plugins/infiniteScroll/useTableInfiniteScroll.spec.md +244 -0
- package/src/Table/plugins/selection/useTableSelection.test.tsx +5 -3
- package/src/Table/plugins/virtualization/useTableVirtualization.spec.md +266 -0
- package/src/TimeInput/NativeTimeInput.test.tsx +25 -1
- package/src/TimeInput/Presentation.test.tsx +23 -0
- package/src/TimeInput/TimeInput.doc.mjs +13 -10
- package/src/TimeInput/TimeInput.test.tsx +139 -7
- package/src/TimeInput/TimeInput.tsx +53 -24
- package/src/TimeInput/TouchTimeField.tsx +27 -5
- package/src/Timestamp/Timestamp.doc.mjs +1 -1
- package/src/Timestamp/Timestamp.test.tsx +168 -0
- package/src/Timestamp/Timestamp.tsx +62 -11
- package/src/Token/Token.test.tsx +26 -4
- package/src/Token/Token.tsx +6 -2
- package/src/Tokenizer/Tokenizer.spec.md +28 -28
- package/src/Tooltip/Tooltip.test.tsx +51 -6
- package/src/Tooltip/Tooltip.tsx +41 -18
- package/src/Tooltip/__tests__/Tooltip.a11y.chromium.spec.ts +129 -0
- package/src/Tooltip/__tests__/Tooltip.a11y.renders.tsx +86 -0
- package/src/Tooltip/__tests__/Tooltip.a11y.states.ts +132 -0
- package/src/Tooltip/__tests__/Tooltip.a11y.test.tsx +126 -0
- package/src/Tooltip/__tests__/TooltipHoverBridge.a11y.chromium.spec.ts +74 -0
- package/src/Tooltip/useTooltip.test.tsx +23 -0
- package/src/Tooltip/useTooltip.tsx +22 -9
- package/src/TopNav/TopNav.tsx +11 -1
- package/src/TopNav/TopNavHeading.tsx +1 -0
- package/src/TopNav/__tests__/TopNavMobileLongHeading.a11y.chromium.spec.ts +74 -0
- package/src/TreeList/TreeList.test.tsx +28 -0
- package/src/TreeList/TreeListItem.tsx +6 -2
- package/src/Typeahead/Typeahead.test.tsx +89 -0
- package/src/Typeahead/Typeahead.tsx +15 -2
- package/src/__tests__/DisabledTriggerFocus.a11y.chromium.spec.ts +86 -0
- package/src/hooks/useGridFocus.ts +16 -1
- package/src/hooks/useMenuPress.ts +45 -7
- package/src/utils/disabledInteraction.ts +40 -0
- package/src/utils/timeParser.test.ts +11 -0
- package/src/utils/timeParser.ts +9 -2
|
@@ -123,6 +123,11 @@ const styles = {
|
|
|
123
123
|
k3aq6I: "x3oybdh xk4oym4 x5lqen6 x3y5scg",
|
|
124
124
|
$$css: true
|
|
125
125
|
},
|
|
126
|
+
triggerDisabledFocus: {
|
|
127
|
+
kVAM5u: "xvy26l8 x16it14f",
|
|
128
|
+
kGVxlE: "x1gnnqk1 xwmge8v",
|
|
129
|
+
$$css: true
|
|
130
|
+
},
|
|
126
131
|
triggerGhostDisabled: {
|
|
127
132
|
kKwaWg: "x18o3ruo",
|
|
128
133
|
k3aq6I: "x1c071of x1pdlv7q x1ylxtyb",
|
|
@@ -1134,8 +1139,17 @@ export function Selector(props) {
|
|
|
1134
1139
|
style: popoverOffsetStyle
|
|
1135
1140
|
});
|
|
1136
1141
|
}
|
|
1142
|
+
|
|
1143
|
+
// A disabled trigger stays focusable but, like a natively disabled button,
|
|
1144
|
+
// runs no caller event handler other than focus and blur, and a press on it
|
|
1145
|
+
// reaches no handler at all (`spec:AST-085` FR2).
|
|
1146
|
+
const callerProps = isDisabled ? Object.fromEntries(Object.entries(rest).filter(([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key))) : rest;
|
|
1137
1147
|
const triggerSharedProps = {
|
|
1138
|
-
...
|
|
1148
|
+
...callerProps,
|
|
1149
|
+
onClick: isDisabled ? event => {
|
|
1150
|
+
event.preventDefault();
|
|
1151
|
+
event.stopPropagation();
|
|
1152
|
+
} : rest.onClick,
|
|
1139
1153
|
id: triggerId,
|
|
1140
1154
|
// A caller's description is kept alongside the field's own.
|
|
1141
1155
|
'aria-describedby': [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
|
|
@@ -1147,12 +1161,12 @@ export function Selector(props) {
|
|
|
1147
1161
|
// it leaves uncancelled. A caller `onClick` arrives through `rest` and
|
|
1148
1162
|
// runs on the trigger before the press bubbles to the control box's
|
|
1149
1163
|
// toggle, as it always has.
|
|
1150
|
-
onKeyDown: composeEventHandlers(handleTriggerKeyDown, onKeyDownProp),
|
|
1164
|
+
onKeyDown: isDisabled ? handleTriggerKeyDown : composeEventHandlers(handleTriggerKeyDown, onKeyDownProp),
|
|
1151
1165
|
onFocus: event => {
|
|
1152
1166
|
onFocus?.(event);
|
|
1153
1167
|
surface.onTriggerFocus(event);
|
|
1154
1168
|
},
|
|
1155
|
-
tabIndex:
|
|
1169
|
+
tabIndex: 0,
|
|
1156
1170
|
...{
|
|
1157
1171
|
0: {
|
|
1158
1172
|
className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x16khyan x1a2a7pz"
|
|
@@ -1186,7 +1200,7 @@ export function Selector(props) {
|
|
|
1186
1200
|
status: status?.type ?? null,
|
|
1187
1201
|
disabled: isDisabled ? 'disabled' : null,
|
|
1188
1202
|
readonly: isEffectivelyReadOnly ? 'readonly' : null
|
|
1189
|
-
}), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'secondary' && styles.triggerSecondary, variant !== 'input' && interactionOverlayStyles.backgroundImage, variant !== 'input' && focusOutlineStyles.focusWithin, surface.isTriggerFocusRingSuppressed && selectorPresentationStyles.pointerRestoredFocus, isDisabled && inputWrapperStyles.disabled, isEffectivelyReadOnly && styles.triggerReadOnly, variant !== 'input' && isDisabled && styles.triggerGhostDisabled, variant !== 'input' && isEffectivelyReadOnly && styles.triggerGhostReadOnly, !selectedItem && styles.triggerPlaceholder, variant === 'input' && status && inputStatusBorderStyles[status.type], variant === 'input' && status && !isDisabled && inputStatusHoverShadowStyles[status.type],
|
|
1203
|
+
}), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'secondary' && styles.triggerSecondary, variant !== 'input' && interactionOverlayStyles.backgroundImage, variant !== 'input' && focusOutlineStyles.focusWithin, surface.isTriggerFocusRingSuppressed && selectorPresentationStyles.pointerRestoredFocus, isDisabled && inputWrapperStyles.disabled, variant === 'input' && isDisabled && !surface.isTriggerFocusRingSuppressed && styles.triggerDisabledFocus, isEffectivelyReadOnly && styles.triggerReadOnly, variant !== 'input' && isDisabled && styles.triggerGhostDisabled, variant !== 'input' && isEffectivelyReadOnly && styles.triggerGhostReadOnly, !selectedItem && styles.triggerPlaceholder, variant === 'input' && status && inputStatusBorderStyles[status.type], variant === 'input' && status && !isDisabled && inputStatusHoverShadowStyles[status.type],
|
|
1190
1204
|
// Grouped secondary triggers keep their neutral fill but take the
|
|
1191
1205
|
// group's row height, connected edge radii, and focus stacking.
|
|
1192
1206
|
variant !== 'ghost' && inputGroup && groupStyles.inGroup, inputGroup && styles.triggerInGroup, controlXstyle), controlClassName, controlStyle),
|
|
@@ -1214,21 +1228,16 @@ export function Selector(props) {
|
|
|
1214
1228
|
"aria-controls": isEffectivelyReadOnly ? undefined : listboxId,
|
|
1215
1229
|
"aria-readonly": isEffectivelyReadOnly || undefined,
|
|
1216
1230
|
"aria-activedescendant": !isEffectivelyReadOnly && !hasSearch && surface.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined
|
|
1217
|
-
//
|
|
1218
|
-
// aria-disabled
|
|
1219
|
-
//
|
|
1231
|
+
// A disabled trigger keeps its tab stop and says so through
|
|
1232
|
+
// aria-disabled (`spec:AST-085` FR1); the isDisabled guards in
|
|
1233
|
+
// useCombobox block every way of opening it.
|
|
1220
1234
|
,
|
|
1221
|
-
disabled: isDisabled
|
|
1222
|
-
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
1235
|
+
"aria-disabled": isDisabled ? 'true' : undefined,
|
|
1223
1236
|
children: valueContent
|
|
1224
|
-
}), htmlName != null && /*#__PURE__*/_jsx("input", {
|
|
1237
|
+
}), htmlName != null && !isDisabled && /*#__PURE__*/_jsx("input", {
|
|
1225
1238
|
type: "hidden",
|
|
1226
1239
|
name: htmlName,
|
|
1227
1240
|
value: value ?? ''
|
|
1228
|
-
// Disabled native controls are excluded from form submission;
|
|
1229
|
-
// mirror that for the hidden carrier.
|
|
1230
|
-
,
|
|
1231
|
-
disabled: isDisabled
|
|
1232
1241
|
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
1233
1242
|
size: "sm"
|
|
1234
1243
|
}), hasClear && value != null && !isDisabled && !isEffectivelyReadOnly && /*#__PURE__*/_jsx(InternalInputClearButton, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectorOption.d.ts","sourceRoot":"","sources":["../../src/Selector/SelectorOption.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectorOption.d.ts","sourceRoot":"","sources":["../../src/Selector/SelectorOption.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAkBtD,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE5B;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE9B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,+BAoBrB;yBA7Be,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAmT/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAmT/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BAowBlD;yBApwBe,MAAM"}
|
package/dist/Slider/Slider.js
CHANGED
|
@@ -327,10 +327,9 @@ export function Slider({
|
|
|
327
327
|
const [keyboardFocusThumb, setKeyboardFocusThumb] = useState(null);
|
|
328
328
|
useInteractionModalityTracking();
|
|
329
329
|
const handleThumbFocus = useCallback((thumbIndex, _e) => {
|
|
330
|
-
// A disabled thumb
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
}, [isDisabled]);
|
|
330
|
+
// A focused disabled thumb still shows the ring (spec:AST-085 FR6).
|
|
331
|
+
setKeyboardFocusThumb(getInteractionModality() === 'keyboard' ? thumbIndex : null);
|
|
332
|
+
}, []);
|
|
334
333
|
const handleThumbBlur = useCallback(_e => {
|
|
335
334
|
setKeyboardFocusThumb(null);
|
|
336
335
|
}, []);
|
|
@@ -615,11 +614,9 @@ export function Slider({
|
|
|
615
614
|
ref: !isRange ? ref : undefined,
|
|
616
615
|
id: !isRange ? id : undefined,
|
|
617
616
|
role: "slider"
|
|
618
|
-
//
|
|
619
|
-
// focus-discoverable; value changes stay blocked by the isDisabled
|
|
620
|
-
// guards in the pointer/keyboard handlers.
|
|
617
|
+
// A disabled thumb keeps its Tab stop (spec:AST-085 FR1).
|
|
621
618
|
,
|
|
622
|
-
tabIndex:
|
|
619
|
+
tabIndex: 0,
|
|
623
620
|
"aria-valuemin": ariaValueMin,
|
|
624
621
|
"aria-valuemax": ariaValueMax,
|
|
625
622
|
"aria-valuenow": val,
|
|
@@ -636,7 +633,7 @@ export function Slider({
|
|
|
636
633
|
...mergeProps(themeProps('slider-thumb', {
|
|
637
634
|
orientation,
|
|
638
635
|
disabled: isDisabled ? 'disabled' : null
|
|
639
|
-
}), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : rtlStyles.centerInline('50%'), !isDisabled && styles.thumbHover, !isDisabled && draggingThumb === thumbIndex && styles.thumbPressed,
|
|
636
|
+
}), stylex.props(styles.thumb, isHorizontal ? styles.thumbHorizontal : rtlStyles.centerInline('50%'), !isDisabled && styles.thumbHover, !isDisabled && draggingThumb === thumbIndex && styles.thumbPressed, keyboardFocusThumb === thumbIndex && focusOutlineStyles.focusVisible, isDisabled && styles.thumbDisabled), undefined, positionStyle)
|
|
640
637
|
}, thumbIndex);
|
|
641
638
|
if (useValueTooltip) {
|
|
642
639
|
return /*#__PURE__*/_jsx(Tooltip, {
|
|
@@ -723,14 +720,10 @@ export function Slider({
|
|
|
723
720
|
}), {
|
|
724
721
|
className: "x78zum5 x6s0dn4 x1txdalj"
|
|
725
722
|
}),
|
|
726
|
-
children: [htmlName != null && values.map((v, i) => /*#__PURE__*/_jsx("input", {
|
|
723
|
+
children: [htmlName != null && !isDisabled && values.map((v, i) => /*#__PURE__*/_jsx("input", {
|
|
727
724
|
type: "hidden",
|
|
728
725
|
name: htmlName,
|
|
729
726
|
value: String(v)
|
|
730
|
-
// Disabled native controls are excluded from form submission;
|
|
731
|
-
// mirror that for the hidden carrier.
|
|
732
|
-
,
|
|
733
|
-
disabled: isDisabled
|
|
734
727
|
}, i === 0 ? 'start' : 'end')), /*#__PURE__*/_jsxs("div", {
|
|
735
728
|
...(isRange ? rest : undefined),
|
|
736
729
|
...(isRange ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
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
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* - /apps/storybook/stories/Switch.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/Switch/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useOptimistic, useTransition, useEffect } from 'react';
|
|
18
|
+
import { useId, useOptimistic, useTransition, useEffect, useRef } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
21
|
import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars, focusVars } from "../theme/tokens.stylex.js";
|
|
@@ -25,7 +25,7 @@ import { Spinner } from "../Spinner/index.js";
|
|
|
25
25
|
import { useTooltip } from "../Tooltip/index.js";
|
|
26
26
|
import { mergeProps, rtlStyles } from "../utils/index.js";
|
|
27
27
|
import "./switch.markers.stylex.js";
|
|
28
|
-
import { switchScope } from "./switch.markers.stylex.js";
|
|
28
|
+
import { switchFocusScope, switchScope } from "./switch.markers.stylex.js";
|
|
29
29
|
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
30
30
|
import { themeProps } from "../utils/themeProps.js";
|
|
31
31
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
@@ -190,8 +190,8 @@ const styles = {
|
|
|
190
190
|
$$css: true
|
|
191
191
|
},
|
|
192
192
|
trackFocus: {
|
|
193
|
-
kI3sdo: "x1a2a7pz
|
|
194
|
-
kInvED: "
|
|
193
|
+
kI3sdo: "x1a2a7pz x1bax923",
|
|
194
|
+
kInvED: "x1s7sthk",
|
|
195
195
|
$$css: true
|
|
196
196
|
},
|
|
197
197
|
trackOff: {
|
|
@@ -313,10 +313,20 @@ export function Switch({
|
|
|
313
313
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
314
314
|
const isBusy = isLoading || optimisticValue !== value;
|
|
315
315
|
const announce = useAnnounce();
|
|
316
|
+
// One announcement per busy start (spec:AST-086 FR6). The ref outlives
|
|
317
|
+
// StrictMode's effect replay and rerenders, so only a new busy start (busy
|
|
318
|
+
// again after settling) speaks again.
|
|
319
|
+
const announcedBusyRef = useRef(false);
|
|
316
320
|
useEffect(() => {
|
|
317
|
-
if (isBusy) {
|
|
318
|
-
|
|
321
|
+
if (!isBusy) {
|
|
322
|
+
announcedBusyRef.current = false;
|
|
323
|
+
return;
|
|
319
324
|
}
|
|
325
|
+
if (announcedBusyRef.current) {
|
|
326
|
+
return;
|
|
327
|
+
}
|
|
328
|
+
announcedBusyRef.current = true;
|
|
329
|
+
announce(t('@astryx.switch.loading'));
|
|
320
330
|
}, [announce, isBusy, t]);
|
|
321
331
|
const isOn = optimisticValue === true;
|
|
322
332
|
|
|
@@ -360,19 +370,15 @@ export function Switch({
|
|
|
360
370
|
id: id,
|
|
361
371
|
type: "checkbox",
|
|
362
372
|
role: "switch"
|
|
363
|
-
// Withhold the name while disabled:
|
|
364
|
-
//
|
|
365
|
-
// control must not submit.
|
|
373
|
+
// Withhold the name while disabled: the input stays focusable (not
|
|
374
|
+
// natively disabled), and a disabled control must not submit.
|
|
366
375
|
,
|
|
367
376
|
name: isDisabled ? undefined : htmlName,
|
|
368
377
|
checked: isOn
|
|
369
|
-
//
|
|
370
|
-
// so the reason is focus-discoverable; toggling is still blocked by the
|
|
371
|
-
// isDisabled guard in onChange below.
|
|
378
|
+
// Focusable but detached from the form while disabled (spec:AST-085).
|
|
372
379
|
,
|
|
373
|
-
disabled: isDisabled
|
|
374
|
-
|
|
375
|
-
form: showsDisabledMessage ? '' : undefined,
|
|
380
|
+
"aria-disabled": isDisabled ? 'true' : undefined,
|
|
381
|
+
form: isDisabled ? '' : undefined,
|
|
376
382
|
required: isRequired,
|
|
377
383
|
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
378
384
|
onChange: e => {
|
|
@@ -405,7 +411,7 @@ export function Switch({
|
|
|
405
411
|
checked: isOn ? 'checked' : null,
|
|
406
412
|
disabled: isDisabled ? 'disabled' : null,
|
|
407
413
|
size
|
|
408
|
-
}), stylex.props(styles.track, trackSizeStyles[size], isOn ? styles.trackOn : styles.trackOff,
|
|
414
|
+
}), stylex.props(styles.track, trackSizeStyles[size], isOn ? styles.trackOn : styles.trackOff, styles.trackFocus, isDisabled && styles.trackDisabled, isDisabled && !isOn && styles.trackDisabledOff)),
|
|
409
415
|
children: /*#__PURE__*/_jsx("div", {
|
|
410
416
|
...mergeProps(themeProps('switch-thumb', {
|
|
411
417
|
checked: isOn ? 'checked' : null,
|
|
@@ -442,6 +448,8 @@ export function Switch({
|
|
|
442
448
|
labelSpacing: labelSpacing !== 'hug' ? labelSpacing : undefined
|
|
443
449
|
}), stylex.props(width != null && dynamicWidthStyles.width(width), xstyle), className, style),
|
|
444
450
|
...rest,
|
|
451
|
+
// Native `disabled` suppressed clicks on the switch (spec:AST-085 FR2).
|
|
452
|
+
onClick: isDisabled ? undefined : rest.onClick,
|
|
445
453
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
446
454
|
ref: el => {
|
|
447
455
|
// Interaction (hover/focus) listeners for the disabled-message
|
|
@@ -453,7 +461,7 @@ export function Switch({
|
|
|
453
461
|
disabledMessageTooltip.interactionRef(el);
|
|
454
462
|
},
|
|
455
463
|
...(isDisabled ? undefined : pressable),
|
|
456
|
-
...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden, labelSpacing === 'spread' && styles.containerSpread, !isDisabled && switchScope,
|
|
464
|
+
...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden, labelSpacing === 'spread' && styles.containerSpread, !isDisabled && switchScope, switchFocusScope,
|
|
457
465
|
// The touch press's strength and release live on the row the
|
|
458
466
|
// controller writes to; the track and thumb inherit and paint it.
|
|
459
467
|
!isDisabled && interactionOverlayStyles.pressedAlpha),
|
|
@@ -4,4 +4,6 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
4
4
|
* Prevents focus-within and hover styles from leaking from parent containers.
|
|
5
5
|
*/
|
|
6
6
|
export declare const switchScope: ReturnType<typeof stylex.defineMarker>;
|
|
7
|
+
/** Focus-ring marker; unlike `switchScope`, it stays on while disabled. */
|
|
8
|
+
export declare const switchFocusScope: ReturnType<typeof stylex.defineMarker>;
|
|
7
9
|
//# sourceMappingURL=switch.markers.stylex.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/Switch/switch.markers.stylex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CACxC,CAAC"}
|
|
1
|
+
{"version":3,"file":"switch.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/Switch/switch.markers.stylex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CACxC,CAAC;AAExB,2EAA2E;AAC3E,eAAO,MAAM,gBAAgB,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC7C,CAAC"}
|
|
@@ -9,4 +9,10 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
9
9
|
export const switchScope = {
|
|
10
10
|
x1iwu4tg: "x1iwu4tg",
|
|
11
11
|
$$css: true
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/** Focus-ring marker; unlike `switchScope`, it stays on while disabled. */
|
|
15
|
+
export const switchFocusScope = {
|
|
16
|
+
xgy66g5: "xgy66g5",
|
|
17
|
+
$$css: true
|
|
12
18
|
};
|
|
@@ -59,12 +59,12 @@ export interface TimeInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
|
|
|
59
59
|
/**
|
|
60
60
|
* Explains why the input is disabled. When set together with
|
|
61
61
|
* `isDisabled`, the input shows a tooltip with this text on hover and
|
|
62
|
-
* keyboard focus, and the
|
|
63
|
-
*
|
|
64
|
-
*
|
|
62
|
+
* keyboard focus, and the input is described by it, so the reason is
|
|
63
|
+
* discoverable by keyboard and assistive technology. Typing and arrow-key
|
|
64
|
+
* adjustment stay blocked.
|
|
65
65
|
*
|
|
66
|
-
* Use this instead of wrapping a disabled input in `Tooltip
|
|
67
|
-
*
|
|
66
|
+
* Use this instead of wrapping a disabled input in `Tooltip`, so the
|
|
67
|
+
* reason is tied to the field.
|
|
68
68
|
*
|
|
69
69
|
* @example
|
|
70
70
|
* ```
|
|
@@ -127,7 +127,8 @@ export interface TimeInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
|
|
|
127
127
|
*/
|
|
128
128
|
hourFormat?: TimeInputHourFormat;
|
|
129
129
|
/**
|
|
130
|
-
* Increment in minutes when using arrow keys.
|
|
130
|
+
* Increment in minutes when using arrow keys. Steps are whole minutes: a
|
|
131
|
+
* fractional value leaves the time unchanged.
|
|
131
132
|
* @default 1
|
|
132
133
|
*/
|
|
133
134
|
increment?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAO3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAIlB,OAAO,EACL,KAAK,aAAa,EAUnB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAgB9C,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -46,6 +46,13 @@ import { effectiveInputPresentation, resolveInputPresentation } from "../utils/i
|
|
|
46
46
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
47
47
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
48
48
|
const TOUCH_POINTER_QUERY = '(pointer: coarse)';
|
|
49
|
+
const styles = {
|
|
50
|
+
disabledFocusRing: {
|
|
51
|
+
kVAM5u: "xvy26l8 x6q1khz",
|
|
52
|
+
kGVxlE: "x1gnnqk1 xuihb5h",
|
|
53
|
+
$$css: true
|
|
54
|
+
}
|
|
55
|
+
};
|
|
49
56
|
const sizeStyles = {
|
|
50
57
|
sm: {
|
|
51
58
|
kZKoxP: "x6k0iem",
|
|
@@ -175,10 +182,10 @@ function TimeField({
|
|
|
175
182
|
}
|
|
176
183
|
}, [announce, inputGroup, status?.message, status?.type]);
|
|
177
184
|
|
|
178
|
-
//
|
|
179
|
-
//
|
|
180
|
-
//
|
|
181
|
-
//
|
|
185
|
+
// A disabled field never renders native `disabled` (spec:AST-085 FR1): the
|
|
186
|
+
// input stays focusable via aria-disabled, and readOnly plus the value
|
|
187
|
+
// mutation guards block typing. The disabled-reason tooltip's listeners
|
|
188
|
+
// attach to the input container.
|
|
182
189
|
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
183
190
|
const disabledMessageTooltip = useTooltip({
|
|
184
191
|
placement: 'above',
|
|
@@ -258,8 +265,8 @@ function TimeField({
|
|
|
258
265
|
|
|
259
266
|
// Handle input text change - update immediately if valid
|
|
260
267
|
const handleInputChange = useCallback(e => {
|
|
261
|
-
//
|
|
262
|
-
//
|
|
268
|
+
// The input is never natively disabled (spec:AST-085 FR1), so guard
|
|
269
|
+
// value mutation explicitly (readOnly also blocks typing).
|
|
263
270
|
if (isDisabled) {
|
|
264
271
|
return;
|
|
265
272
|
}
|
|
@@ -290,6 +297,11 @@ function TimeField({
|
|
|
290
297
|
if (pendingInput === null) {
|
|
291
298
|
return;
|
|
292
299
|
}
|
|
300
|
+
// Disabled: keep the value, drop the draft (spec:AST-085 FR2).
|
|
301
|
+
if (isDisabled) {
|
|
302
|
+
setPendingInput(null);
|
|
303
|
+
return;
|
|
304
|
+
}
|
|
293
305
|
if (!pendingInput.trim()) {
|
|
294
306
|
// Empty input clears the value
|
|
295
307
|
if (value !== undefined) {
|
|
@@ -307,9 +319,15 @@ function TimeField({
|
|
|
307
319
|
}
|
|
308
320
|
// Clear pending input - display will revert to formatted value
|
|
309
321
|
setPendingInput(null);
|
|
310
|
-
}, [pendingInput, value, fireChange, hasSeconds, min, max]);
|
|
322
|
+
}, [pendingInput, isDisabled, value, fireChange, hasSeconds, min, max]);
|
|
311
323
|
|
|
312
324
|
// Handle keyboard navigation on input
|
|
325
|
+
// Enter in a focused disabled field would submit a surrounding form (FR2).
|
|
326
|
+
const preventDisabledEnter = e => {
|
|
327
|
+
if (isDisabled && e.key === 'Enter') {
|
|
328
|
+
e.preventDefault();
|
|
329
|
+
}
|
|
330
|
+
};
|
|
313
331
|
const handleInputKeyDown = useCallback(e => {
|
|
314
332
|
// ArrowUp/ArrowDown step the time and preventDefault; an IME candidate
|
|
315
333
|
// window uses those same arrows to navigate candidates, so guard the
|
|
@@ -318,8 +336,7 @@ function TimeField({
|
|
|
318
336
|
if (isImeKeyEvent(e.nativeEvent)) {
|
|
319
337
|
return;
|
|
320
338
|
}
|
|
321
|
-
// Arrow-key adjustment mutates the value; block it while
|
|
322
|
-
// disabled reason (the input keeps focusability via aria-disabled).
|
|
339
|
+
// Arrow-key adjustment mutates the value; block it while disabled.
|
|
323
340
|
if (isDisabled) {
|
|
324
341
|
return;
|
|
325
342
|
}
|
|
@@ -393,7 +410,7 @@ function TimeField({
|
|
|
393
410
|
size,
|
|
394
411
|
status: status?.type ?? null,
|
|
395
412
|
disabled: isDisabled ? 'disabled' : null
|
|
396
|
-
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
|
|
413
|
+
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, isDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
|
|
397
414
|
children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
398
415
|
id: inputLabelID,
|
|
399
416
|
children: label
|
|
@@ -420,7 +437,7 @@ function TimeField({
|
|
|
420
437
|
max: max,
|
|
421
438
|
hourFormat: hourFormat,
|
|
422
439
|
isEffectivelyDisabled: isDisabled,
|
|
423
|
-
|
|
440
|
+
isFocusableDisabled: true,
|
|
424
441
|
isEffectivelyRequired: isEffectivelyRequired,
|
|
425
442
|
isBusy: isBusy,
|
|
426
443
|
statusType: status?.type,
|
|
@@ -429,7 +446,8 @@ function TimeField({
|
|
|
429
446
|
...controlProps,
|
|
430
447
|
onFocus: onFocusProp,
|
|
431
448
|
onBlur: onBlurProp,
|
|
432
|
-
onKeyDown: onKeyDownProp
|
|
449
|
+
onKeyDown: chainEventHandlers(preventDisabledEnter, onKeyDownProp),
|
|
450
|
+
onClick: isDisabled ? undefined : controlProps.onClick
|
|
433
451
|
}
|
|
434
452
|
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
435
453
|
children: [/*#__PURE__*/_jsx("div", {
|
|
@@ -450,15 +468,14 @@ function TimeField({
|
|
|
450
468
|
onChange: handleInputChange,
|
|
451
469
|
onFocus: chainEventHandlers(handleFocus, onFocusProp),
|
|
452
470
|
onBlur: chainEventHandlers(handleBlur, onBlurProp),
|
|
453
|
-
onKeyDown: chainEventHandlers(handleInputKeyDown, onKeyDownProp),
|
|
454
|
-
placeholder: displayPlaceholder
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
//
|
|
471
|
+
onKeyDown: chainEventHandlers(preventDisabledEnter, handleInputKeyDown, onKeyDownProp),
|
|
472
|
+
placeholder: displayPlaceholder,
|
|
473
|
+
"aria-disabled": isDisabled ? 'true' : undefined,
|
|
474
|
+
readOnly: isDisabled || undefined
|
|
475
|
+
// The browser still dispatches a click on an aria-disabled input,
|
|
476
|
+
// so a caller's onClick is skipped too (spec:AST-085 FR2).
|
|
458
477
|
,
|
|
459
|
-
|
|
460
|
-
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
461
|
-
readOnly: showsDisabledMessage || undefined,
|
|
478
|
+
onClick: isDisabled ? undefined : controlProps.onClick,
|
|
462
479
|
autoFocus: hasAutoFocus,
|
|
463
480
|
"data-autofocus": hasAutoFocus || undefined,
|
|
464
481
|
"aria-describedby": ariaDescribedBy,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TouchTimeField.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TouchTimeField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TouchTimeField.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TouchTimeField.tsx"],"names":[],"mappings":"AAoEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAqHhD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,QAAgB,EAChB,UAAkB,EAGlB,SAAS,EAAE,UAAU,EACrB,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAiZhB;yBApbe,cAAc"}
|
|
@@ -30,7 +30,7 @@ import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
|
30
30
|
import { Icon } from "../Icon/index.js";
|
|
31
31
|
import { useTranslator } from "../i18n/index.js";
|
|
32
32
|
import "../theme/tokens.stylex.js";
|
|
33
|
-
import { sizeVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
33
|
+
import { colorVars, sizeVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
34
34
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
35
35
|
import { Spinner } from "../Spinner/index.js";
|
|
36
36
|
import { useTooltip } from "../Tooltip/index.js";
|
|
@@ -60,6 +60,11 @@ const sizeStyles = {
|
|
|
60
60
|
}
|
|
61
61
|
};
|
|
62
62
|
const styles = {
|
|
63
|
+
disabledFocusRing: {
|
|
64
|
+
kVAM5u: "xvy26l8 x6q1khz",
|
|
65
|
+
kGVxlE: "x1gnnqk1 xuihb5h",
|
|
66
|
+
$$css: true
|
|
67
|
+
},
|
|
63
68
|
iconButton: {
|
|
64
69
|
k1xSpc: "x78zum5",
|
|
65
70
|
kGNEyG: "x6s0dn4",
|
|
@@ -309,11 +314,11 @@ export function TouchTimeField({
|
|
|
309
314
|
size,
|
|
310
315
|
status: status?.type ?? null,
|
|
311
316
|
disabled: isDisabled ? 'disabled' : null
|
|
312
|
-
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
|
|
317
|
+
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, isDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
|
|
313
318
|
children: [/*#__PURE__*/_jsx("button", {
|
|
314
319
|
type: "button",
|
|
315
320
|
onClick: openSheet,
|
|
316
|
-
disabled: isEffectivelyDisabled,
|
|
321
|
+
"aria-disabled": isEffectivelyDisabled || undefined,
|
|
317
322
|
"aria-label": t('@astryx.timeInput.openPicker', {
|
|
318
323
|
label
|
|
319
324
|
}),
|
|
@@ -334,10 +339,16 @@ export function TouchTimeField({
|
|
|
334
339
|
readOnly: true,
|
|
335
340
|
inputMode: "none",
|
|
336
341
|
onChange: () => {},
|
|
337
|
-
onClick: chainEventHandlers(openSheet, onClickProp)
|
|
342
|
+
onClick: isEffectivelyDisabled ? undefined : chainEventHandlers(openSheet, onClickProp)
|
|
343
|
+
// Enter would submit a surrounding form while disabled (FR2).
|
|
344
|
+
,
|
|
345
|
+
onKeyDown: chainEventHandlers(e => {
|
|
346
|
+
if (isEffectivelyDisabled && e.key === 'Enter') {
|
|
347
|
+
e.preventDefault();
|
|
348
|
+
}
|
|
349
|
+
}, controlProps.onKeyDown),
|
|
338
350
|
placeholder: placeholder,
|
|
339
|
-
disabled: isEffectivelyDisabled
|
|
340
|
-
"aria-disabled": showsDisabledMessage ? 'true' : undefined,
|
|
351
|
+
"aria-disabled": isEffectivelyDisabled ? 'true' : undefined,
|
|
341
352
|
"aria-describedby": ariaDescribedBy,
|
|
342
353
|
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
343
354
|
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAK9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EACV,qBAAqB,EAEtB,MAAM,kBAAkB,CAAC;AAY1B,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,gBAAgB,GAChB,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;;;;;;OAkBG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACtD;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsFD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,cAAc,EACd,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,cAAc,sCAoMhB;yBAtNe,SAAS"}
|