@astryxdesign/core 0.7.3-canary.b74cf21 → 0.7.3-canary.ca48bb7
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/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/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 +2 -1
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- 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/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/astryx.css +7 -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 +3 -3
- package/src/Banner/Banner.spec.md +37 -32
- package/src/BottomSheet/BottomSheet.spec.md +26 -53
- package/src/BottomSheet/BottomSheet.test.tsx +29 -0
- package/src/BottomSheet/BottomSheet.tsx +8 -4
- package/src/BottomSheet/BottomSheetSwitcher.spec.md +45 -48
- 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.test.tsx +82 -16
- package/src/DateRangeInput/DateRangeInput.tsx +40 -20
- 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/DropdownMenuSubMenu.doc.mjs +16 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +623 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +556 -99
- 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.test.tsx +48 -6
- package/src/Selector/Selector.tsx +51 -21
- package/src/SideNav/SideNav.test.tsx +35 -0
- 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/plugins/selection/useTableSelection.test.tsx +5 -3
- package/src/TimeInput/TimeInput.doc.mjs +5 -3
- package/src/TimeInput/TimeInput.test.tsx +20 -0
- package/src/TimeInput/TimeInput.tsx +2 -1
- 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/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/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/__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":"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
|
};
|
|
@@ -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;AA6CpC,QAAA,MAAM,UAAU;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,KAAK,CAAC;AAEhD,iFAAiF;AACjF,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjE,4EAA4E;AAC5E,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAItD,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,cAAc,CAC5B;IACC,qEAAqE;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IAEjC
|
|
1
|
+
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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"}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* - /apps/storybook/stories/Timestamp.stories.tsx
|
|
17
17
|
* - /packages/cli/assets/templates/blocks/components/Timestamp/ (showcase blocks)
|
|
18
18
|
*/
|
|
19
|
-
import { lazy, Suspense, useEffect, useRef, useState } from 'react';
|
|
19
|
+
import { lazy, Suspense, useEffect, useRef, useState, useSyncExternalStore } from 'react';
|
|
20
20
|
import * as stylex from '@stylexjs/stylex';
|
|
21
21
|
import { Text } from "../Text/index.js";
|
|
22
22
|
import { mergeProps } from "../utils/index.js";
|
|
@@ -76,6 +76,13 @@ function getLiveInterval(diffSeconds) {
|
|
|
76
76
|
return 300_000; // every 5 minutes
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
+
// Whether this render may read the current time. Server renders (including
|
|
80
|
+
// static prerenders) and the hydration pass read `false`, so the markup never
|
|
81
|
+
// depends on when it was rendered; client renders read `true`.
|
|
82
|
+
const subscribeToNothing = () => () => {};
|
|
83
|
+
const canReadClockOnClient = () => true;
|
|
84
|
+
const canReadClockOnServer = () => false;
|
|
85
|
+
|
|
79
86
|
/** Whether a format is non-relative (i.e. shows a fixed date/time). */
|
|
80
87
|
function isAbsoluteFormat(format) {
|
|
81
88
|
return format !== 'relative' && format !== 'relative_short' && format !== 'auto';
|
|
@@ -134,7 +141,23 @@ export function Timestamp({
|
|
|
134
141
|
const locale = useLocale();
|
|
135
142
|
const timeRef = useRef(null);
|
|
136
143
|
const mergedTimeRef = useMergedRefs(ref, timeRef);
|
|
137
|
-
|
|
144
|
+
// Only relative and auto formats depend on the current time. Absolute
|
|
145
|
+
// formats never read the clock, so they render identically on the server,
|
|
146
|
+
// in a static prerender, and on the client. A clock-dependent format reads
|
|
147
|
+
// it on the client only: server renders and the hydration pass show the
|
|
148
|
+
// full date and time in UTC, and the client switches to the relative phrase
|
|
149
|
+
// right after hydration.
|
|
150
|
+
const needsClock = !isAbsoluteFormat(format);
|
|
151
|
+
const canReadClock = useSyncExternalStore(subscribeToNothing, canReadClockOnClient, canReadClockOnServer);
|
|
152
|
+
const [now, setNow] = useState(() => needsClock && canReadClock ? new Date() : null);
|
|
153
|
+
// Read the clock during render once it may be read: after hydration (the
|
|
154
|
+
// store re-renders with its client value) and when `format` switches from
|
|
155
|
+
// an absolute value to a clock-dependent one, so the placeholder never
|
|
156
|
+
// commits on the client.
|
|
157
|
+
if (needsClock && canReadClock && now === null) {
|
|
158
|
+
// eslint-disable-next-line @eslint-react/purity -- seeds clock state once, like the initializer; never runs on the server or while hydrating
|
|
159
|
+
setNow(new Date());
|
|
160
|
+
}
|
|
138
161
|
const date = parseValue(value);
|
|
139
162
|
// An unparseable value (a malformed date string, or a NaN timestamp from
|
|
140
163
|
// missing data) yields an Invalid Date, and formatting one throws "Invalid
|
|
@@ -143,13 +166,23 @@ export function Timestamp({
|
|
|
143
166
|
const isValidDate = !Number.isNaN(date.getTime());
|
|
144
167
|
const isoString = isValidDate ? date.toISOString() : '';
|
|
145
168
|
|
|
146
|
-
// Determine effective format
|
|
147
|
-
|
|
148
|
-
const
|
|
169
|
+
// Determine effective format. Until the clock is read, a clock-dependent
|
|
170
|
+
// format renders as the full date and time.
|
|
171
|
+
const isClockPending = needsClock && now === null;
|
|
172
|
+
const diffSeconds = now === null ? 0 : Math.round((now.getTime() - date.getTime()) / 1000);
|
|
173
|
+
const effectiveFormat = isClockPending ? 'date_time' : format === 'auto' ? Math.abs(diffSeconds) <= autoThreshold ? 'relative' : 'date_time' : format;
|
|
149
174
|
|
|
150
|
-
// Format the display text
|
|
151
|
-
//
|
|
152
|
-
|
|
175
|
+
// Format the display text in the viewer's own zone; only the tooltip names
|
|
176
|
+
// others. The one exception is the pre-hydration placeholder, written in
|
|
177
|
+
// UTC with its label so every zone produces the same markup.
|
|
178
|
+
const displayText = !isValidDate ? '' : effectiveFormat === 'relative' ? formatRelativeTime(date, now ?? date, locale, 'long') : effectiveFormat === 'relative_short' ? formatRelativeTime(date, now ?? date, locale, 'narrow') : isAbsoluteFormat(effectiveFormat) ? formatInstant(date, effectiveFormat, locale,
|
|
179
|
+
// The pre-hydration placeholder is written in UTC, labelled, so
|
|
180
|
+
// the server and the hydrating client produce the same text in
|
|
181
|
+
// every time zone.
|
|
182
|
+
isClockPending ? {
|
|
183
|
+
timeZone: 'UTC',
|
|
184
|
+
isTimezoneShown: true
|
|
185
|
+
} : {
|
|
153
186
|
isTimezoneShown
|
|
154
187
|
}) : '';
|
|
155
188
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAO3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA2JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BAkMZ;yBApNe,KAAK"}
|
package/dist/Token/Token.js
CHANGED
|
@@ -29,6 +29,7 @@ import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
|
29
29
|
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
30
30
|
import { usePressFeedback } from "../hooks/usePressFeedback.js";
|
|
31
31
|
import { useTranslator } from "../i18n/index.js";
|
|
32
|
+
import { disabledInteractionProps } from "../utils/disabledInteraction.js";
|
|
32
33
|
|
|
33
34
|
// =============================================================================
|
|
34
35
|
// Types
|
|
@@ -235,8 +236,11 @@ export function Token({
|
|
|
235
236
|
onClick: e => {
|
|
236
237
|
e.stopPropagation();
|
|
237
238
|
onRemove(e);
|
|
238
|
-
}
|
|
239
|
-
disabled:
|
|
239
|
+
}
|
|
240
|
+
// Focusable while disabled (spec:AST-085 FR1), but inert (FR2).
|
|
241
|
+
,
|
|
242
|
+
"aria-disabled": isDisabled || undefined,
|
|
243
|
+
...(isDisabled ? disabledInteractionProps() : null),
|
|
240
244
|
...focusOutlineProps.focusVisible(styles.removeButton),
|
|
241
245
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
242
246
|
icon: "close",
|
|
@@ -344,7 +348,8 @@ export function Token({
|
|
|
344
348
|
children: [icon, /*#__PURE__*/_jsx("button", {
|
|
345
349
|
type: "button",
|
|
346
350
|
onClick: effectiveOnClick,
|
|
347
|
-
disabled: isDisabled,
|
|
351
|
+
"aria-disabled": isDisabled || undefined,
|
|
352
|
+
...(isDisabled ? disabledInteractionProps() : null),
|
|
348
353
|
...{
|
|
349
354
|
className: "xmper1u x16khyan x1heor9g x1a2a7pz xb3r6kr xeuugli"
|
|
350
355
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAGtE,YAAY,EAAC,mBAAmB,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAiB3E,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAa,EACb,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,GACd,EAAE,YAAY,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAGtE,YAAY,EAAC,mBAAmB,EAAE,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAiB3E,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEhD;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAa,EACb,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,GACd,EAAE,YAAY,GAAG,YAAY,CA6J7B;yBA5Ke,OAAO"}
|
package/dist/Tooltip/Tooltip.js
CHANGED
|
@@ -97,24 +97,46 @@ export function Tooltip({
|
|
|
97
97
|
if (!anchorRef) {
|
|
98
98
|
return;
|
|
99
99
|
}
|
|
100
|
+
const attach = el => {
|
|
101
|
+
// Use combined ref for position + interaction
|
|
102
|
+
tooltip.ref(el);
|
|
103
|
+
|
|
104
|
+
// Set aria-describedby, merging with existing
|
|
105
|
+
const existingDescribedBy = el.getAttribute('aria-describedby');
|
|
106
|
+
el.setAttribute('aria-describedby', mergeIds(existingDescribedBy, tooltip.describedBy) ?? '');
|
|
107
|
+
return () => {
|
|
108
|
+
tooltip.ref(null);
|
|
109
|
+
if (existingDescribedBy) {
|
|
110
|
+
el.setAttribute('aria-describedby', existingDescribedBy);
|
|
111
|
+
} else {
|
|
112
|
+
el.removeAttribute('aria-describedby');
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
};
|
|
100
116
|
const el = anchorRef.current;
|
|
101
|
-
if (
|
|
102
|
-
return;
|
|
117
|
+
if (el) {
|
|
118
|
+
return attach(el);
|
|
103
119
|
}
|
|
104
120
|
|
|
105
|
-
//
|
|
106
|
-
tooltip
|
|
107
|
-
|
|
108
|
-
//
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
if (
|
|
114
|
-
|
|
115
|
-
} else {
|
|
116
|
-
el.removeAttribute('aria-describedby');
|
|
121
|
+
// React attaches an ancestor's ref after its descendants' layout effects,
|
|
122
|
+
// so a tooltip rendered inside its own anchor (SideNavItem's collapsed
|
|
123
|
+
// rail tooltip) still sees null here on mount, and this effect's deps
|
|
124
|
+
// never change to re-run it. Re-check once the commit has attached all
|
|
125
|
+
// refs; if the anchor is still gone, this tooltip has no anchor, as before.
|
|
126
|
+
let detach;
|
|
127
|
+
let cancelled = false;
|
|
128
|
+
queueMicrotask(() => {
|
|
129
|
+
if (cancelled) {
|
|
130
|
+
return;
|
|
117
131
|
}
|
|
132
|
+
const el = anchorRef.current;
|
|
133
|
+
if (el) {
|
|
134
|
+
detach = attach(el);
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
return () => {
|
|
138
|
+
cancelled = true;
|
|
139
|
+
detach?.();
|
|
118
140
|
};
|
|
119
141
|
}, [anchorRef, tooltip.ref, tooltip.describedBy]);
|
|
120
142
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopNav.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"TopNav.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuG5C,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,WAAW,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,UAAU,EACV,KAAK,EAAE,cAAc,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAwHb;yBApIe,MAAM"}
|
package/dist/TopNav/TopNav.js
CHANGED
|
@@ -124,12 +124,12 @@ export function TopNav({
|
|
|
124
124
|
...props,
|
|
125
125
|
children: [heading && /*#__PURE__*/_jsx("div", {
|
|
126
126
|
...{
|
|
127
|
-
className: "x78zum5 x6s0dn4
|
|
127
|
+
className: "x78zum5 x6s0dn4 xkz0k9k xeuugli"
|
|
128
128
|
},
|
|
129
129
|
children: heading
|
|
130
130
|
}), /*#__PURE__*/_jsxs("div", {
|
|
131
131
|
...{
|
|
132
|
-
className: "x78zum5 x6s0dn4 xzye2dw xvc5jky"
|
|
132
|
+
className: "x78zum5 x6s0dn4 xzye2dw x2lah0s xvc5jky"
|
|
133
133
|
},
|
|
134
134
|
children: [endContent, hasMobileDrawerContent && hasAutoToggle && /*#__PURE__*/_jsx(MobileNavToggle, {})]
|
|
135
135
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4L5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAwYpB;yBA1Ze,aAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoB3C,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoB3C,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AA8RtE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BAkT3B;yBA7Ue,YAAY"}
|
|
@@ -27,6 +27,7 @@ import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
|
27
27
|
import { TreeListBranches } from "./TreeListBranches.js";
|
|
28
28
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
29
|
import { useTranslator } from "../i18n/index.js";
|
|
30
|
+
import { disabledInteractionProps } from "../utils/disabledInteraction.js";
|
|
30
31
|
|
|
31
32
|
// =============================================================================
|
|
32
33
|
// Styles
|
|
@@ -311,13 +312,16 @@ export function TreeListItem({
|
|
|
311
312
|
// Stable identity for TreeList's activateItem selector — do not
|
|
312
313
|
// remove without also updating TreeList.tsx.
|
|
313
314
|
,
|
|
314
|
-
"data-tree-toggle": ""
|
|
315
|
-
|
|
315
|
+
"data-tree-toggle": ""
|
|
316
|
+
// Disabled stays focusable (spec:AST-085 FR1) but inert (FR2).
|
|
317
|
+
,
|
|
318
|
+
"aria-disabled": isDisabled || undefined
|
|
316
319
|
// Roving tabindex lives on the treeitem row; the chevron toggle is not
|
|
317
320
|
// a separate tab stop. Row-level Enter/Space forwards to this button.
|
|
318
321
|
,
|
|
319
322
|
tabIndex: -1,
|
|
320
323
|
onClick: handleToggle,
|
|
324
|
+
...(isDisabled ? disabledInteractionProps() : null),
|
|
321
325
|
...mergeProps(
|
|
322
326
|
// Stable theme target for the expand/collapse control. `data-tree-toggle`
|
|
323
327
|
// stays as the functional activation hook; this adds a themeable
|
|
@@ -365,7 +369,8 @@ export function TreeListItem({
|
|
|
365
369
|
}) : onClick != null ? /*#__PURE__*/_jsx("button", {
|
|
366
370
|
type: "button",
|
|
367
371
|
onClick: onClick,
|
|
368
|
-
disabled: isDisabled,
|
|
372
|
+
"aria-disabled": isDisabled || undefined,
|
|
373
|
+
...(isDisabled ? disabledInteractionProps() : null),
|
|
369
374
|
"aria-labelledby": labelId,
|
|
370
375
|
"aria-describedby": description != null ? descriptionId : undefined
|
|
371
376
|
// Roving tabindex lives on the treeitem row; inner action is not a
|