@astryxdesign/core 0.4.0-canary.c6a994e → 0.4.0-canary.e144ea7
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/DateInput/DateInput.js +1 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +12 -4
- package/dist/Indicator/index.d.ts +1 -1
- package/dist/Indicator/index.d.ts.map +1 -1
- package/dist/Indicator/types.d.ts +10 -0
- package/dist/Indicator/types.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.d.ts +8 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +23 -16
- package/dist/Selector/Selector.d.ts +10 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +39 -16
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +7 -2
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +14 -3
- package/dist/Timestamp/formatInstant.d.ts +11 -1
- package/dist/Timestamp/formatInstant.d.ts.map +1 -1
- package/dist/Timestamp/formatInstant.js +3 -1
- package/dist/astryx.css +1 -0
- package/dist/astryx.umd.js +45 -45
- package/dist/astryx.umd.js.map +3 -3
- package/locales/en.json +8 -0
- package/locales/pseudo.json +6 -0
- package/package.json +2 -2
- package/src/DateInput/DateInput.test.tsx +19 -0
- package/src/DateInput/DateInput.tsx +1 -1
- package/src/DateTimeInput/DateTimeInput.test.tsx +79 -1
- package/src/DateTimeInput/DateTimeInput.tsx +21 -4
- package/src/Indicator/index.ts +1 -0
- package/src/Indicator/types.ts +11 -0
- package/src/MultiSelector/MultiSelector.doc.mjs +7 -0
- package/src/MultiSelector/MultiSelector.test.tsx +69 -0
- package/src/MultiSelector/MultiSelector.tsx +38 -10
- package/src/Selector/Selector.doc.mjs +7 -0
- package/src/Selector/Selector.test.tsx +105 -0
- package/src/Selector/Selector.tsx +66 -22
- package/src/TimeInput/TimeInput.test.tsx +54 -0
- package/src/TimeInput/TimeInput.tsx +17 -2
- package/src/Timestamp/Timestamp.test.tsx +91 -14
- package/src/Timestamp/Timestamp.tsx +14 -2
- package/src/Timestamp/formatInstant.ts +16 -1
|
@@ -437,7 +437,7 @@ export function DateInput({
|
|
|
437
437
|
as: "div",
|
|
438
438
|
role: "alert",
|
|
439
439
|
"aria-live": "assertive",
|
|
440
|
-
children: !isInputValid ? '
|
|
440
|
+
children: !isInputValid ? t('@astryx.dateInput.invalidDate') : ''
|
|
441
441
|
}), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
|
|
442
442
|
label: t('@astryx.dateInput.clear', {
|
|
443
443
|
label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AA0BrB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file DateTimeInput.tsx
|
|
7
|
-
* @input Uses React, Field, Calendar, usePopover, time parsing utilities
|
|
7
|
+
* @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities
|
|
8
8
|
* @output Exports DateTimeInput component, DateTimeInputProps
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by DateTimeInput.test.tsx
|
|
10
10
|
*
|
|
@@ -31,6 +31,7 @@ import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
|
31
31
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
32
32
|
import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
|
|
33
33
|
import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
|
|
34
|
+
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
34
35
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
35
36
|
import { themeProps } from "../utils/themeProps.js";
|
|
36
37
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
@@ -169,6 +170,10 @@ export function DateTimeInput({
|
|
|
169
170
|
...rest
|
|
170
171
|
}) {
|
|
171
172
|
const t = useTranslator();
|
|
173
|
+
// Speaks arrow-key stepping results through the persistent live regions:
|
|
174
|
+
// stepping programmatically rewrites a plain textbox's value, which screen
|
|
175
|
+
// readers do not announce on their own (WCAG 4.1.2).
|
|
176
|
+
const announce = useAnnounce();
|
|
172
177
|
const placeholder = placeholderFromProps ?? t('@astryx.dateTimeInput.placeholder');
|
|
173
178
|
const timePlaceholder = timePlaceholderFromProps ?? t('@astryx.dateTimeInput.timePlaceholder');
|
|
174
179
|
const size = useSize(sizeProp, 'md');
|
|
@@ -483,10 +488,13 @@ export function DateTimeInput({
|
|
|
483
488
|
const combined = combineDateTime(valueParts.date, newTime);
|
|
484
489
|
if (combined) {
|
|
485
490
|
fireChange(combined);
|
|
491
|
+
// Screen readers do not announce the programmatic value rewrite,
|
|
492
|
+
// so speak the new time explicitly (WCAG 4.1.2).
|
|
493
|
+
announce(formatDisplayTime(newTime, hasSeconds));
|
|
486
494
|
}
|
|
487
495
|
}
|
|
488
496
|
}
|
|
489
|
-
}, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange]);
|
|
497
|
+
}, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange, announce, formatDisplayTime]);
|
|
490
498
|
|
|
491
499
|
// --- Clear ---
|
|
492
500
|
const handleClear = useCallback(() => {
|
|
@@ -591,7 +599,7 @@ export function DateTimeInput({
|
|
|
591
599
|
as: "div",
|
|
592
600
|
role: "alert",
|
|
593
601
|
"aria-live": "assertive",
|
|
594
|
-
children: !isDateInputValid ? '
|
|
602
|
+
children: !isDateInputValid ? t('@astryx.dateInput.invalidDate') : ''
|
|
595
603
|
}), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
|
|
596
604
|
label: t('@astryx.dateInput.clear', {
|
|
597
605
|
label
|
|
@@ -659,7 +667,7 @@ export function DateTimeInput({
|
|
|
659
667
|
as: "div",
|
|
660
668
|
role: "alert",
|
|
661
669
|
"aria-live": "assertive",
|
|
662
|
-
children: !isTimeInputValid ? '
|
|
670
|
+
children: !isTimeInputValid ? t('@astryx.timeInput.invalidTime') : ''
|
|
663
671
|
})]
|
|
664
672
|
})]
|
|
665
673
|
}), popover.render(/*#__PURE__*/_jsx(Calendar, {
|
|
@@ -20,5 +20,5 @@ export { defaultIndicators, getIndicator } from './indicatorRegistry';
|
|
|
20
20
|
export type { CoreIndicatorName, IndicatorRegistrySource, } from './indicatorRegistry';
|
|
21
21
|
export { useIndicator } from './useIndicator';
|
|
22
22
|
export { indicatorScope } from './indicator.markers.stylex';
|
|
23
|
-
export type { IndicatorComponent, IndicatorFamily, IndicatorFamilyMap, IndicatorMap, IndicatorName, IndicatorNameOfFamily, IndicatorProps, IndicatorRegistry, IndicatorSize, IndicatorState, } from './types';
|
|
23
|
+
export type { IndicatorComponent, IndicatorFamily, IndicatorFamilyMap, IndicatorMap, IndicatorName, IndicatorNameOfFamily, IndicatorPosition, IndicatorProps, IndicatorRegistry, IndicatorSize, IndicatorState, } from './types';
|
|
24
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Indicator/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAC,iBAAiB,EAAE,YAAY,EAAC,MAAM,qBAAqB,CAAC;AACpE,YAAY,EACV,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAC,cAAc,EAAC,MAAM,4BAA4B,CAAC;AAE1D,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,qBAAqB,EACrB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,cAAc,GACf,MAAM,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Indicator/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAC,iBAAiB,EAAE,YAAY,EAAC,MAAM,qBAAqB,CAAC;AACpE,YAAY,EACV,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAC,cAAc,EAAC,MAAM,4BAA4B,CAAC;AAE1D,YAAY,EACV,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,cAAc,GACf,MAAM,SAAS,CAAC"}
|
|
@@ -58,6 +58,16 @@ export type IndicatorFamily = keyof IndicatorFamilyMap & string;
|
|
|
58
58
|
export type IndicatorState<F extends IndicatorFamily = IndicatorFamily> = IndicatorFamilyMap[F];
|
|
59
59
|
/** Indicator size scale — matches the control sizes of the owning inputs. */
|
|
60
60
|
export type IndicatorSize = 'sm' | 'md';
|
|
61
|
+
/**
|
|
62
|
+
* Which edge of its row an indicator sits on.
|
|
63
|
+
*
|
|
64
|
+
* Logical, not physical: `start` is the left edge in LTR and the right edge in
|
|
65
|
+
* RTL. Owned by the host component, not by the indicator — an indicator draws a
|
|
66
|
+
* picture and has no say in where the row puts it — which is why this is a prop
|
|
67
|
+
* on the components that lay out rows rather than part of
|
|
68
|
+
* {@link IndicatorProps}.
|
|
69
|
+
*/
|
|
70
|
+
export type IndicatorPosition = 'start' | 'end';
|
|
61
71
|
/**
|
|
62
72
|
* Props every indicator accepts.
|
|
63
73
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Indicator/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAE,GAAG,EAAC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IACzC,0EAA0E;IAC1E,cAAc,EAAE,WAAW,GAAG,SAAS,GAAG,eAAe,CAAC;CAC3D;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAEhE,kEAAkE;AAClE,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACpE,kBAAkB,CAAC,CAAC,CAAC,CAAC;AAExB,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,WAAW,cAAc,CAC7B,CAAC,SAAS,eAAe,GAAG,eAAe,CAC3C,SAAQ,IAAI,CACZ,SAAS,CAAC,eAAe,CAAC,EAC1B,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,UAAU,CACvE;IACC,qDAAqD;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,mEAAmE;IACnE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACxE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,YAAY;IAC3B,4DAA4D;IAC5D,KAAK,EAAE,iBAAiB,CAAC;IACzB,4CAA4C;IAC5C,KAAK,EAAE,iBAAiB,CAAC;IACzB,kEAAkE;IAClE,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,YAAY,GAAG,MAAM,CAAC;AAExD,mDAAmD;AACnD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,eAAe,IAAI;KAC5D,CAAC,IAAI,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK;CAC5D,CAAC,aAAa,CAAC,CAAC;AAEjB;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG;KAC7B,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3D,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Indicator/types.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAE,GAAG,EAAC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IACzC,0EAA0E;IAC1E,cAAc,EAAE,WAAW,GAAG,SAAS,GAAG,eAAe,CAAC;CAC3D;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAEhE,kEAAkE;AAClE,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACpE,kBAAkB,CAAC,CAAC,CAAC,CAAC;AAExB,6EAA6E;AAC7E,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,WAAW,cAAc,CAC7B,CAAC,SAAS,eAAe,GAAG,eAAe,CAC3C,SAAQ,IAAI,CACZ,SAAS,CAAC,eAAe,CAAC,EAC1B,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,UAAU,CACvE;IACC,qDAAqD;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,mEAAmE;IACnE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,IACxE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,YAAY;IAC3B,4DAA4D;IAC5D,KAAK,EAAE,iBAAiB,CAAC;IACzB,4CAA4C;IAC5C,KAAK,EAAE,iBAAiB,CAAC;IACzB,kEAAkE;IAClE,QAAQ,EAAE,gBAAgB,CAAC;CAC5B;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,YAAY,GAAG,MAAM,CAAC;AAExD,mDAAmD;AACnD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,eAAe,IAAI;KAC5D,CAAC,IAAI,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK;CAC5D,CAAC,aAAa,CAAC,CAAC;AAEjB;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG;KAC7B,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3D,CAAC"}
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
import React, { type ReactNode } from 'react';
|
|
15
15
|
import { type IconType } from '../Icon';
|
|
16
16
|
import { type FieldStatusVariant } from '../Field';
|
|
17
|
+
import type { IndicatorPosition } from '../Indicator';
|
|
17
18
|
import type { MultiSelectorOptionType, MultiSelectorOptionData, MultiSelectorStatus } from './types';
|
|
18
19
|
import type { BaseProps } from '../BaseProps';
|
|
19
20
|
import type { SizeValue } from '../utils/types';
|
|
@@ -189,6 +190,12 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
|
|
|
189
190
|
* Only called for selectable options (not dividers/sections or the select-all row).
|
|
190
191
|
*/
|
|
191
192
|
renderOption?: (option: MultiSelectorOptionData) => ReactNode;
|
|
193
|
+
/**
|
|
194
|
+
* Which edge of the option row carries the checkbox.
|
|
195
|
+
*
|
|
196
|
+
* @default 'start'
|
|
197
|
+
*/
|
|
198
|
+
indicatorPosition?: IndicatorPosition;
|
|
192
199
|
/**
|
|
193
200
|
* Whether the dropdown starts open on mount.
|
|
194
201
|
* Useful for showcases and previews.
|
|
@@ -215,7 +222,7 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
|
|
|
215
222
|
* />
|
|
216
223
|
* ```
|
|
217
224
|
*/
|
|
218
|
-
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder: placeholderFromProps, size: sizeProp, variant, status, statusVariant, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel: selectAllLabelFromProps, hasSearch, searchPlaceholder: searchPlaceholderFromProps, triggerDisplay, maxBadges, renderOption, isDefaultOpen, 'data-testid': testId, htmlName, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
|
|
225
|
+
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder: placeholderFromProps, size: sizeProp, variant, status, statusVariant, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel: selectAllLabelFromProps, hasSearch, searchPlaceholder: searchPlaceholderFromProps, triggerDisplay, maxBadges, renderOption, indicatorPosition, isDefaultOpen, 'data-testid': testId, htmlName, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
|
|
219
226
|
export declare namespace MultiSelector {
|
|
220
227
|
var displayName: string;
|
|
221
228
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAKlB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAcpD,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAWjB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAqU9C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE,YAAY,EAAC,mBAAmB,EAAC,CAAC;AAElC,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,uBAAuB,GAAG,uBAAuB,CAC3D,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,cAAc,CAAC;IACpD;;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;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IAEb;;OAEG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAE9D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAEtC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+BD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,uBAAuB,EAAE,EAC/D,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,OAAiB,EACjB,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,SAAS,EACT,QAAgB,EAChB,YAAoB,EACpB,cAAc,EAAE,uBAAuB,EACvC,SAAiB,EACjB,iBAAiB,EAAE,0BAA0B,EAC7C,cAAwB,EACxB,SAAa,EACb,YAAY,EACZ,iBAA2B,EAC3B,aAAqB,EACrB,aAAa,EAAE,MAAM,EACrB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBA67BvB;yBAj+Be,aAAa"}
|
|
@@ -281,6 +281,7 @@ export function MultiSelector({
|
|
|
281
281
|
triggerDisplay = 'count',
|
|
282
282
|
maxBadges = 3,
|
|
283
283
|
renderOption,
|
|
284
|
+
indicatorPosition = 'start',
|
|
284
285
|
isDefaultOpen = false,
|
|
285
286
|
'data-testid': testId,
|
|
286
287
|
htmlName,
|
|
@@ -706,6 +707,25 @@ export function MultiSelector({
|
|
|
706
707
|
// checkbox is inert/decorative, so the indeterminate state must be
|
|
707
708
|
// conveyed through the option's accessible name (WCAG 4.1.2).
|
|
708
709
|
const isPartiallySelected = isSelectAll && selectAllState === 'indeterminate';
|
|
710
|
+
const checkbox = /*#__PURE__*/_jsx("div", {
|
|
711
|
+
inert: true,
|
|
712
|
+
...{
|
|
713
|
+
0: {
|
|
714
|
+
className: "x47corl x78zum5 x2lah0s"
|
|
715
|
+
},
|
|
716
|
+
1: {
|
|
717
|
+
className: "x47corl x78zum5 x2lah0s xvc5jky"
|
|
718
|
+
}
|
|
719
|
+
}[!!(indicatorPosition === 'end') << 0],
|
|
720
|
+
children: /*#__PURE__*/_jsx(CheckboxInput, {
|
|
721
|
+
label: "",
|
|
722
|
+
isLabelHidden: true,
|
|
723
|
+
value: checkboxValue,
|
|
724
|
+
onChange: () => {},
|
|
725
|
+
isDisabled: item.disabled,
|
|
726
|
+
size: size === 'lg' ? 'md' : size
|
|
727
|
+
})
|
|
728
|
+
});
|
|
709
729
|
return /*#__PURE__*/_jsxs("div", {
|
|
710
730
|
id: getItemId(flatIndex),
|
|
711
731
|
role: "option",
|
|
@@ -731,27 +751,14 @@ export function MultiSelector({
|
|
|
731
751
|
selected: isSelected ? 'selected' : null,
|
|
732
752
|
disabled: item.disabled ? 'disabled' : null
|
|
733
753
|
}), stylex.props(styles.item, isSelectAll ? selectAllSizeStyles[size] : itemSizeStyles[size], isSelectAll && styles.selectAllWrapper, isHighlighted && styles.itemHighlighted, item.disabled && styles.itemDisabled)),
|
|
734
|
-
children: [/*#__PURE__*/_jsx("
|
|
735
|
-
inert: true,
|
|
736
|
-
...{
|
|
737
|
-
className: "x47corl x78zum5 x2lah0s"
|
|
738
|
-
},
|
|
739
|
-
children: /*#__PURE__*/_jsx(CheckboxInput, {
|
|
740
|
-
label: "",
|
|
741
|
-
isLabelHidden: true,
|
|
742
|
-
value: checkboxValue,
|
|
743
|
-
onChange: () => {},
|
|
744
|
-
isDisabled: item.disabled,
|
|
745
|
-
size: size === 'lg' ? 'md' : size
|
|
746
|
-
})
|
|
747
|
-
}), renderOption && !isSelectAll ? renderOption(item) : /*#__PURE__*/_jsx("span", {
|
|
754
|
+
children: [indicatorPosition === 'start' && checkbox, renderOption && !isSelectAll ? renderOption(item) : /*#__PURE__*/_jsx("span", {
|
|
748
755
|
...{
|
|
749
756
|
className: "xeuugli xb3r6kr xlyipyv xuxw1ft"
|
|
750
757
|
},
|
|
751
758
|
children: item.label ?? item.value
|
|
752
|
-
})]
|
|
759
|
+
}), indicatorPosition === 'end' && checkbox]
|
|
753
760
|
}, item.value);
|
|
754
|
-
}, [renderOption, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, selectAllLabel, getItemId, handleNavigableToggle, onItemMouseEnter, size, t]);
|
|
761
|
+
}, [renderOption, indicatorPosition, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, selectAllLabel, getItemId, handleNavigableToggle, onItemMouseEnter, size, t]);
|
|
755
762
|
|
|
756
763
|
// Render all options. Uses sortedItems as the single source of truth for
|
|
757
764
|
// item order — no independent sorting here. Structural elements (dividers,
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
*/
|
|
15
15
|
import React, { type ReactNode } from 'react';
|
|
16
16
|
import { type IconType } from '../Icon';
|
|
17
|
+
import type { IndicatorPosition } from '../Indicator';
|
|
17
18
|
import { type FieldStatusVariant } from '../Field';
|
|
18
19
|
import type { LayerPlacement } from '../Layer/useLayer';
|
|
19
20
|
import type { SelectorOptionType, SelectorOptionData } from './types';
|
|
@@ -144,6 +145,15 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
|
|
|
144
145
|
* Only called for selectable options (not dividers/sections).
|
|
145
146
|
*/
|
|
146
147
|
renderOption?: (option: SelectorOptionData) => ReactNode;
|
|
148
|
+
/**
|
|
149
|
+
* Which edge of the option row carries the selected mark. `start` reserves a
|
|
150
|
+
* mark column ahead of every label so they stay aligned, the way a native
|
|
151
|
+
* menu does; `end` is the house convention shared with Typeahead and
|
|
152
|
+
* CommandPalette.
|
|
153
|
+
*
|
|
154
|
+
* @default 'end'
|
|
155
|
+
*/
|
|
156
|
+
indicatorPosition?: IndicatorPosition;
|
|
147
157
|
/**
|
|
148
158
|
* Whether to show a search input for filtering options.
|
|
149
159
|
* @default false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -43,7 +43,7 @@ import { groupStyles } from "../InputGroup/groupStyles.js";
|
|
|
43
43
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
44
44
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
45
45
|
import { useTranslator } from "../i18n/index.js";
|
|
46
|
-
import { jsx as _jsx,
|
|
46
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
47
47
|
const styles = {
|
|
48
48
|
triggerContainer: {
|
|
49
49
|
kVAEAm: "x1n2onr6",
|
|
@@ -281,6 +281,7 @@ export function Selector(props) {
|
|
|
281
281
|
startIcon,
|
|
282
282
|
htmlName,
|
|
283
283
|
renderOption,
|
|
284
|
+
indicatorPosition = 'end',
|
|
284
285
|
hasSearch = false,
|
|
285
286
|
searchPlaceholder: searchPlaceholderFromProps,
|
|
286
287
|
placement,
|
|
@@ -632,7 +633,41 @@ export function Selector(props) {
|
|
|
632
633
|
const renderItem = useCallback((item, flatIndex) => {
|
|
633
634
|
const isHighlighted = flatIndex === highlightedIndex;
|
|
634
635
|
const isSelected = item.value === normalizedValue;
|
|
635
|
-
|
|
636
|
+
|
|
637
|
+
/*
|
|
638
|
+
* Rendered UNCONDITIONALLY, with the state passed down: the default
|
|
639
|
+
* check draws nothing when unchecked, but a theme that replaces the
|
|
640
|
+
* `check` indicator with a radio needs the unselected state to draw
|
|
641
|
+
* its empty circle. `{isSelected && …}` would make that impossible.
|
|
642
|
+
*
|
|
643
|
+
* `selector-check` stays the stable target for the mark's position
|
|
644
|
+
* in the row; the indicator owns what the mark looks like.
|
|
645
|
+
*/
|
|
646
|
+
const mark = /*#__PURE__*/_jsx("span", {
|
|
647
|
+
...{
|
|
648
|
+
className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s xgomdpo"
|
|
649
|
+
},
|
|
650
|
+
children: /*#__PURE__*/_jsx(SelectionMark, {
|
|
651
|
+
state: isSelected ? 'checked' : 'unchecked',
|
|
652
|
+
size: "sm",
|
|
653
|
+
isDisabled: item.disabled ?? false,
|
|
654
|
+
...themeProps('selector-check')
|
|
655
|
+
})
|
|
656
|
+
});
|
|
657
|
+
const optionContent = /*#__PURE__*/_jsx("span", {
|
|
658
|
+
...{
|
|
659
|
+
className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
|
|
660
|
+
},
|
|
661
|
+
children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
|
|
662
|
+
option: item
|
|
663
|
+
})
|
|
664
|
+
});
|
|
665
|
+
const content = indicatorPosition === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
666
|
+
children: [mark, optionContent]
|
|
667
|
+
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
668
|
+
children: [optionContent, mark]
|
|
669
|
+
});
|
|
670
|
+
return /*#__PURE__*/_jsx("div", {
|
|
636
671
|
id: getItemId(flatIndex),
|
|
637
672
|
role: "option",
|
|
638
673
|
"aria-selected": isSelected,
|
|
@@ -640,21 +675,9 @@ export function Selector(props) {
|
|
|
640
675
|
onClick: () => onItemSelect(item),
|
|
641
676
|
onMouseEnter: () => onItemMouseEnter(item, flatIndex),
|
|
642
677
|
...stylex.props(styles.item, itemSizeStyles[size], isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled),
|
|
643
|
-
children:
|
|
644
|
-
...{
|
|
645
|
-
className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
|
|
646
|
-
},
|
|
647
|
-
children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
|
|
648
|
-
option: item
|
|
649
|
-
})
|
|
650
|
-
}), /*#__PURE__*/_jsx(SelectionMark, {
|
|
651
|
-
state: isSelected ? 'checked' : 'unchecked',
|
|
652
|
-
size: "sm",
|
|
653
|
-
isDisabled: item.disabled ?? false,
|
|
654
|
-
...themeProps('selector-check')
|
|
655
|
-
})]
|
|
678
|
+
children: content
|
|
656
679
|
}, item.value);
|
|
657
|
-
}, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
|
|
680
|
+
}, [renderOption, indicatorPosition, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
|
|
658
681
|
|
|
659
682
|
// Render all options (handling sections/dividers)
|
|
660
683
|
const renderOptions = useCallback(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -281,9 +281,14 @@ export function TimeInput({
|
|
|
281
281
|
// Check if within range
|
|
282
282
|
if (isTimeInRange(newTime, min, max)) {
|
|
283
283
|
fireChange(newTime);
|
|
284
|
+
// Stepping programmatically rewrites a plain textbox's value, and
|
|
285
|
+
// screen readers do not announce programmatic textbox changes — the
|
|
286
|
+
// new value must be spoken explicitly or stepping is silent
|
|
287
|
+
// (WCAG 4.1.2).
|
|
288
|
+
announce(formatDisplayTime(newTime, hasSeconds));
|
|
284
289
|
}
|
|
285
290
|
}
|
|
286
|
-
}, [value, hasSeconds, increment, min, max, fireChange, isDisabled]);
|
|
291
|
+
}, [value, hasSeconds, increment, min, max, fireChange, isDisabled, announce, formatDisplayTime]);
|
|
287
292
|
|
|
288
293
|
// Handle clear button click
|
|
289
294
|
const handleClear = useCallback(() => {
|
|
@@ -377,7 +382,7 @@ export function TimeInput({
|
|
|
377
382
|
as: "div",
|
|
378
383
|
role: "alert",
|
|
379
384
|
"aria-live": "assertive",
|
|
380
|
-
children: !isInputValid ? '
|
|
385
|
+
children: !isInputValid ? t('@astryx.timeInput.invalidTime') : ''
|
|
381
386
|
}), isBusy && /*#__PURE__*/_jsx(Spinner, {
|
|
382
387
|
size: "sm"
|
|
383
388
|
}), hasClear && value && !isDisabled && /*#__PURE__*/_jsx(InputClearButton, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAI9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EACV,qBAAqB,EAEtB,MAAM,kBAAkB,CAAC;AAW1B,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;AAmOD;;;;;;;;;;;;;;;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,GACtB,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAI9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,OAAO,KAAK,EACV,qBAAqB,EAEtB,MAAM,kBAAkB,CAAC;AAW1B,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;AAmOD;;;;;;;;;;;;;;;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,GACtB,EAAE,cAAc,sCA4JhB;yBA7Ke,SAAS"}
|
|
@@ -289,8 +289,14 @@ export function Timestamp({
|
|
|
289
289
|
isTimezoneShown
|
|
290
290
|
}) : '';
|
|
291
291
|
|
|
292
|
-
// Full absolute text for tooltip
|
|
292
|
+
// Full absolute text for the tooltip (visible — keeps the compact timezone
|
|
293
|
+
// abbreviation) and for the AT-facing aria-label, which spells the timezone
|
|
294
|
+
// out in full: abbreviations like "PST" or "GMT+2" are unexpanded
|
|
295
|
+
// abbreviations to a screen-reader user (WCAG 3.1.4).
|
|
293
296
|
const fullAbsoluteText = isValidDate ? formatInstant(date, 'full') : '';
|
|
297
|
+
const ariaLabelText = isValidDate ? formatInstant(date, 'full', {
|
|
298
|
+
timeZoneNameStyle: 'long'
|
|
299
|
+
}) : '';
|
|
294
300
|
|
|
295
301
|
// Live updates
|
|
296
302
|
useEffect(() => {
|
|
@@ -343,8 +349,13 @@ export function Timestamp({
|
|
|
343
349
|
...timestampProps,
|
|
344
350
|
children: /*#__PURE__*/_jsx("time", {
|
|
345
351
|
ref: mergeRefs(ref, timeRef),
|
|
346
|
-
dateTime: isoString
|
|
347
|
-
|
|
352
|
+
dateTime: isoString
|
|
353
|
+
// `ariaLabelText` is '' only for an invalid date, which bails out
|
|
354
|
+
// before rendering — but keep the guard local: an empty aria-label
|
|
355
|
+
// must be omitted entirely (not rendered as aria-label="") so AT
|
|
356
|
+
// falls back to reading the visible <time> content.
|
|
357
|
+
,
|
|
358
|
+
"aria-label": isRelativeFormat(effectiveFormat) && ariaLabelText !== '' ? ariaLabelText : undefined
|
|
348
359
|
// The hover card is anchored here with focusTrigger="always", which
|
|
349
360
|
// attaches focus listeners but does not itself make the anchor
|
|
350
361
|
// focusable. A bare <time> is not focusable, so without a tab stop
|
|
@@ -30,6 +30,16 @@ export interface FormatInstantOptions {
|
|
|
30
30
|
* @default false
|
|
31
31
|
*/
|
|
32
32
|
isTimezoneShown?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* How the zone name is spelled when a format carries one. `'short'` is the
|
|
35
|
+
* abbreviation ("PST"); `'long'` spells it out ("Pacific Standard Time").
|
|
36
|
+
* Only `'full'` honours it — it is the one format that always names its zone.
|
|
37
|
+
* The spelled-out form backs a relative timestamp's accessible name, where an
|
|
38
|
+
* abbreviation reads as an unexpanded initialism to a screen reader
|
|
39
|
+
* (WCAG 3.1.4); every visible surface keeps the abbreviation.
|
|
40
|
+
* @default 'short'
|
|
41
|
+
*/
|
|
42
|
+
timeZoneNameStyle?: 'short' | 'long';
|
|
33
43
|
}
|
|
34
44
|
/**
|
|
35
45
|
* Renders one instant in one absolute format.
|
|
@@ -37,5 +47,5 @@ export interface FormatInstantOptions {
|
|
|
37
47
|
* Pure: the same arguments always produce the same string for a given host
|
|
38
48
|
* locale (and, when no `timeZone` is given, host zone).
|
|
39
49
|
*/
|
|
40
|
-
export declare function formatInstant(date: Date, format: InstantFormat, { timeZone, isTimezoneShown }?: FormatInstantOptions): string;
|
|
50
|
+
export declare function formatInstant(date: Date, format: InstantFormat, { timeZone, isTimezoneShown, timeZoneNameStyle, }?: FormatInstantOptions): string;
|
|
41
51
|
//# sourceMappingURL=formatInstant.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formatInstant.d.ts","sourceRoot":"","sources":["../../src/Timestamp/formatInstant.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAMjD;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GACvB,OAAO,CAAC,eAAe,EAAE,UAAU,GAAG,gBAAgB,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"formatInstant.d.ts","sourceRoot":"","sources":["../../src/Timestamp/formatInstant.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAMjD;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GACvB,OAAO,CAAC,eAAe,EAAE,UAAU,GAAG,gBAAgB,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;OAQG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACtC;AA6ED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,aAAa,EACrB,EACE,QAAQ,EACR,eAAuB,EACvB,iBAA2B,GAC5B,GAAE,oBAAyB,GAC3B,MAAM,CAiER"}
|
|
@@ -117,7 +117,8 @@ function getWallClock(date, timeZone) {
|
|
|
117
117
|
*/
|
|
118
118
|
export function formatInstant(date, format, {
|
|
119
119
|
timeZone,
|
|
120
|
-
isTimezoneShown = false
|
|
120
|
+
isTimezoneShown = false,
|
|
121
|
+
timeZoneNameStyle = 'short'
|
|
121
122
|
} = {}) {
|
|
122
123
|
const zone = timeZone === undefined ? {} : {
|
|
123
124
|
timeZone
|
|
@@ -129,6 +130,7 @@ export function formatInstant(date, format, {
|
|
|
129
130
|
case 'full':
|
|
130
131
|
return new Intl.DateTimeFormat(undefined, {
|
|
131
132
|
...FULL_OPTIONS,
|
|
133
|
+
timeZoneName: timeZoneNameStyle,
|
|
132
134
|
...zone
|
|
133
135
|
}).format(date);
|
|
134
136
|
case 'date':
|
package/dist/astryx.css
CHANGED
|
@@ -1440,6 +1440,7 @@
|
|
|
1440
1440
|
.x1d77m7x:not(#\#):not(#\#):not(#\#):not(#\#){min-width:140px}
|
|
1441
1441
|
.x5w4yej:not(#\#):not(#\#):not(#\#):not(#\#){min-width:160px}
|
|
1442
1442
|
.xfb3i0g:not(#\#):not(#\#):not(#\#):not(#\#){min-width:180px}
|
|
1443
|
+
.xgomdpo:not(#\#):not(#\#):not(#\#):not(#\#){min-width:1rem}
|
|
1443
1444
|
.x1jzhcrs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:200px}
|
|
1444
1445
|
.xt4ypqs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:20px}
|
|
1445
1446
|
.x12rczxh:not(#\#):not(#\#):not(#\#):not(#\#){min-width:220px}
|