@astryxdesign/core 0.4.5-canary.d990fb5 → 0.4.5-canary.ee6d68d
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/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +21 -12
- package/dist/Calendar/hooks/useCalendarNavigation.d.ts.map +1 -1
- package/dist/Calendar/hooks/useCalendarNavigation.js +8 -4
- package/dist/Chat/useChatDictation.d.ts +1 -1
- package/dist/Chat/useChatDictation.d.ts.map +1 -1
- package/dist/Chat/useSpeechRecognition.d.ts +1 -1
- package/dist/Chat/useSpeechRecognition.d.ts.map +1 -1
- package/dist/Chat/useSpeechRecognition.js +4 -3
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +11 -8
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +8 -5
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +11 -8
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +6 -0
- package/dist/HoverCard/HoverCard.d.ts +13 -3
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +2 -0
- package/dist/HoverCard/index.d.ts +1 -1
- package/dist/HoverCard/index.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.d.ts +17 -2
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +78 -9
- package/dist/Layer/index.d.ts +4 -2
- package/dist/Layer/index.d.ts.map +1 -1
- package/dist/Layer/index.js +2 -0
- package/dist/Layer/useTouchTrigger.d.ts +113 -0
- package/dist/Layer/useTouchTrigger.d.ts.map +1 -0
- package/dist/Layer/useTouchTrigger.js +241 -0
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +11 -12
- package/dist/PowerSearch/PowerSearchToken.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchToken.js +3 -1
- package/dist/PowerSearch/formatFilterValue.d.ts +11 -2
- package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
- package/dist/PowerSearch/formatFilterValue.js +23 -8
- package/dist/RadioList/RadioListItem.d.ts +2 -2
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +68 -38
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +5 -0
- package/dist/Table/plugins/sortable/useTableSortableState.d.ts +5 -3
- package/dist/Table/plugins/sortable/useTableSortableState.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortableState.js +12 -9
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +6 -4
- package/dist/Timestamp/formatInstant.d.ts +3 -2
- package/dist/Timestamp/formatInstant.d.ts.map +1 -1
- package/dist/Timestamp/formatInstant.js +8 -8
- package/dist/Timestamp/tooltipEntries.d.ts +2 -1
- package/dist/Timestamp/tooltipEntries.d.ts.map +1 -1
- package/dist/Timestamp/tooltipEntries.js +5 -3
- package/dist/Tooltip/Tooltip.d.ts +16 -3
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +2 -0
- package/dist/Tooltip/index.d.ts +1 -1
- package/dist/Tooltip/index.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts +21 -2
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +71 -13
- package/dist/astryx.css +6 -0
- package/dist/i18n/InternationalizationContext.d.ts.map +1 -1
- package/dist/i18n/InternationalizationContext.js +2 -0
- package/dist/i18n/index.d.ts +6 -0
- package/dist/i18n/index.d.ts.map +1 -1
- package/dist/i18n/index.js +6 -0
- package/dist/i18n/useCollator.d.ts +12 -0
- package/dist/i18n/useCollator.d.ts.map +1 -0
- package/dist/i18n/useCollator.js +40 -0
- package/dist/i18n/useLocale.d.ts +3 -0
- package/dist/i18n/useLocale.d.ts.map +1 -0
- package/dist/i18n/useLocale.js +31 -0
- package/dist/utils/dateParser.d.ts +4 -3
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +8 -8
- package/dist/utils/plainDate.d.ts +3 -2
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +4 -4
- package/package.json +2 -2
- package/src/Calendar/Calendar.tsx +15 -9
- package/src/Calendar/hooks/useCalendarNavigation.ts +6 -4
- package/src/Chat/{useChatDictation.test.ts → useChatDictation.test.tsx} +29 -14
- package/src/Chat/useChatDictation.ts +1 -1
- package/src/Chat/useSpeechRecognition.ts +5 -3
- package/src/DateInput/DateInput.test.tsx +16 -0
- package/src/DateInput/DateInput.tsx +10 -8
- package/src/DateRangeInput/DateRangeInput.tsx +15 -6
- package/src/DateTimeInput/DateTimeInput.tsx +19 -6
- package/src/Field/Field.doc.mjs +2 -0
- package/src/Field/InputClearButton.test.tsx +108 -1
- package/src/Field/InputClearButton.tsx +38 -0
- package/src/HoverCard/HoverCard.doc.mjs +18 -0
- package/src/HoverCard/HoverCard.test.tsx +189 -0
- package/src/HoverCard/HoverCard.tsx +22 -2
- package/src/HoverCard/index.ts +1 -0
- package/src/HoverCard/useHoverCard.doc.mjs +2 -0
- package/src/HoverCard/useHoverCard.tsx +103 -7
- package/src/Layer/index.ts +10 -0
- package/src/Layer/useTouchTrigger.test.ts +70 -0
- package/src/Layer/useTouchTrigger.ts +366 -0
- package/src/PowerSearch/PowerSearch.tsx +17 -8
- package/src/PowerSearch/PowerSearchToken.tsx +3 -0
- package/src/PowerSearch/formatFilterValue.test.ts +22 -2
- package/src/PowerSearch/formatFilterValue.ts +31 -6
- package/src/RadioList/RadioList.doc.mjs +1 -1
- package/src/RadioList/RadioList.test.tsx +170 -2
- package/src/RadioList/RadioListItem.tsx +83 -51
- package/src/SegmentedControl/SegmentedControl.test.tsx +31 -0
- package/src/SegmentedControl/SegmentedControlItem.tsx +10 -1
- package/src/Table/plugins/sortable/useTableSortableState.test.tsx +34 -0
- package/src/Table/plugins/sortable/useTableSortableState.tsx +26 -23
- package/src/Timestamp/Timestamp.test.tsx +27 -7
- package/src/Timestamp/Timestamp.tsx +8 -4
- package/src/Timestamp/formatInstant.ts +9 -7
- package/src/Timestamp/tooltipEntries.test.ts +11 -6
- package/src/Timestamp/tooltipEntries.ts +6 -2
- package/src/Tooltip/Tooltip.doc.mjs +18 -0
- package/src/Tooltip/Tooltip.test.tsx +254 -1
- package/src/Tooltip/Tooltip.tsx +22 -2
- package/src/Tooltip/index.ts +1 -0
- package/src/Tooltip/useTooltip.doc.mjs +2 -0
- package/src/Tooltip/useTooltip.tsx +99 -21
- package/src/i18n/InternationalizationContext.ts +2 -0
- package/src/i18n/__tests__/e2e-powersearch.test.tsx +37 -1
- package/src/i18n/__tests__/useCollator.test.tsx +115 -0
- package/src/i18n/__tests__/useLocale.test.tsx +52 -0
- package/src/i18n/index.ts +6 -0
- package/src/i18n/useCollator.doc.mjs +84 -0
- package/src/i18n/useCollator.ts +44 -0
- package/src/i18n/useLocale.doc.mjs +70 -0
- package/src/i18n/useLocale.ts +34 -0
- package/src/i18n/useTranslator.doc.mjs +1 -1
- package/src/theme/derivedVarRegistry.test.ts +5 -2
- package/src/utils/dateParser.test.ts +20 -0
- package/src/utils/dateParser.ts +14 -7
- package/src/utils/plainDate.test.ts +6 -0
- package/src/utils/plainDate.ts +5 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAuXtD;yBAvXe,QAAQ"}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* - /apps/storybook/stories/Calendar.stories.tsx (storybook stories)
|
|
17
17
|
* - /packages/cli/assets/templates/blocks/components/Calendar/ (showcase blocks)
|
|
18
18
|
*/
|
|
19
|
-
import { useState, useMemo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
|
|
19
|
+
import { use, useState, useMemo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
|
|
20
20
|
import * as stylex from '@stylexjs/stylex';
|
|
21
21
|
import { Button } from "../Button/index.js";
|
|
22
22
|
import { Icon } from "../Icon/index.js";
|
|
@@ -34,7 +34,7 @@ import { computeDayCellState, computeRangeRounding, computePreviewRounding, comp
|
|
|
34
34
|
|
|
35
35
|
import { normalizeDayOfWeek } from "../utils/dateTypes.js";
|
|
36
36
|
import { themeProps } from "../utils/themeProps.js";
|
|
37
|
-
import { useTranslator } from "../i18n/index.js";
|
|
37
|
+
import { useTranslator, InternationalizationContext } from "../i18n/index.js";
|
|
38
38
|
|
|
39
39
|
/** Imperative handle for Calendar handleRef */
|
|
40
40
|
|
|
@@ -59,6 +59,9 @@ export function Calendar({
|
|
|
59
59
|
...props
|
|
60
60
|
}) {
|
|
61
61
|
const t = useTranslator();
|
|
62
|
+
const {
|
|
63
|
+
locale
|
|
64
|
+
} = use(InternationalizationContext);
|
|
62
65
|
const {
|
|
63
66
|
handleRef,
|
|
64
67
|
mode = 'single',
|
|
@@ -158,10 +161,10 @@ export function Calendar({
|
|
|
158
161
|
// Format month header
|
|
159
162
|
const monthYearLabel = useMemo(() => {
|
|
160
163
|
if (numberOfMonths === 1) {
|
|
161
|
-
return plainDateFormat(visibleMonths[0], DATE_FORMAT_MONTH_YEAR);
|
|
164
|
+
return plainDateFormat(visibleMonths[0], DATE_FORMAT_MONTH_YEAR, locale);
|
|
162
165
|
}
|
|
163
|
-
return visibleMonths.map(m => plainDateFormat(m, DATE_FORMAT_MONTH_YEAR)).join(' – ');
|
|
164
|
-
}, [visibleMonths, numberOfMonths]);
|
|
166
|
+
return visibleMonths.map(m => plainDateFormat(m, DATE_FORMAT_MONTH_YEAR, locale)).join(' – ');
|
|
167
|
+
}, [visibleMonths, numberOfMonths, locale]);
|
|
165
168
|
|
|
166
169
|
// Announce the newly visible month to screen readers whenever it changes.
|
|
167
170
|
// The visible month label (`<span>`) carries no live semantics, so paging the
|
|
@@ -244,7 +247,7 @@ export function Calendar({
|
|
|
244
247
|
// progress through the same polite live region.
|
|
245
248
|
setRangeSelectionStart(iso);
|
|
246
249
|
announce(t('@astryx.calendar.rangeStartAnnounce', {
|
|
247
|
-
date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY)
|
|
250
|
+
date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY, locale)
|
|
248
251
|
}));
|
|
249
252
|
} else {
|
|
250
253
|
// Second click - complete the range
|
|
@@ -284,12 +287,12 @@ export function Calendar({
|
|
|
284
287
|
// Completed-range announcement, in chronological order (matches the
|
|
285
288
|
// swapped {start, end} above even for a reverse pick).
|
|
286
289
|
announce(t('@astryx.calendar.rangeCompleteAnnounce', {
|
|
287
|
-
start: plainDateFormat(plainDateFromISO(start), DATE_FORMAT_WITH_WEEKDAY),
|
|
288
|
-
end: plainDateFormat(plainDateFromISO(end), DATE_FORMAT_WITH_WEEKDAY)
|
|
290
|
+
start: plainDateFormat(plainDateFromISO(start), DATE_FORMAT_WITH_WEEKDAY, locale),
|
|
291
|
+
end: plainDateFormat(plainDateFromISO(end), DATE_FORMAT_WITH_WEEKDAY, locale)
|
|
289
292
|
}));
|
|
290
293
|
}
|
|
291
294
|
}
|
|
292
|
-
}, [mode, onChange, rangeSelectionStart, announce, t]);
|
|
295
|
+
}, [mode, onChange, rangeSelectionStart, announce, t, locale]);
|
|
293
296
|
return /*#__PURE__*/_jsxs("div", {
|
|
294
297
|
ref: ref,
|
|
295
298
|
...rest,
|
|
@@ -401,6 +404,9 @@ function MonthGrid({
|
|
|
401
404
|
pendingFocus,
|
|
402
405
|
onPendingFocusHandled
|
|
403
406
|
}) {
|
|
407
|
+
const {
|
|
408
|
+
locale
|
|
409
|
+
} = use(InternationalizationContext);
|
|
404
410
|
const year = month.year;
|
|
405
411
|
|
|
406
412
|
// Use hooks for days generation and constraints
|
|
@@ -593,8 +599,8 @@ function MonthGrid({
|
|
|
593
599
|
|
|
594
600
|
// Month label for announcements
|
|
595
601
|
const monthLabel = useMemo(() => {
|
|
596
|
-
return plainDateFormat(month, DATE_FORMAT_MONTH_YEAR);
|
|
597
|
-
}, [month]);
|
|
602
|
+
return plainDateFormat(month, DATE_FORMAT_MONTH_YEAR, locale);
|
|
603
|
+
}, [month, locale]);
|
|
598
604
|
return /*#__PURE__*/_jsx("div", {
|
|
599
605
|
...stylex.props(monthGridStyles.monthGrid),
|
|
600
606
|
children: /*#__PURE__*/_jsxs("div", {
|
|
@@ -694,6 +700,9 @@ function DayCell({
|
|
|
694
700
|
onDayHover
|
|
695
701
|
}) {
|
|
696
702
|
const t = useTranslator();
|
|
703
|
+
const {
|
|
704
|
+
locale
|
|
705
|
+
} = use(InternationalizationContext);
|
|
697
706
|
const {
|
|
698
707
|
date,
|
|
699
708
|
isOutside,
|
|
@@ -738,7 +747,7 @@ function DayCell({
|
|
|
738
747
|
// params rather than string concatenation. A mid-flight first pick (where
|
|
739
748
|
// rangeStart === rangeEnd) reads as "range start" only; a completed one-day
|
|
740
749
|
// range reads as both start and end.
|
|
741
|
-
const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
|
|
750
|
+
const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY, locale);
|
|
742
751
|
const dayLabel = state.isSelected ? t('@astryx.calendar.daySelected', {
|
|
743
752
|
date: dateLabel
|
|
744
753
|
}) : state.isRangeStart && state.isRangeEnd ? isRangeSelectionInProgress ? t('@astryx.calendar.dayRangeStart', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCalendarNavigation.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/useCalendarNavigation.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EACL,KAAK,SAAS,EASf,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"useCalendarNavigation.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/useCalendarNavigation.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EACL,KAAK,SAAS,EASf,MAAM,uBAAuB,CAAC;AAG/B;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,gDAAgD;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,qDAAqD;IACrD,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,kCAAkC;IAClC,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,mEAAmE;IACnE,SAAS,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,cAAc,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,aAAa,EAAE,CACb,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,aAAa,EAC3B,MAAM,CAAC,EAAE,MAAM,KACZ,IAAI,CAAC;IACV,4CAA4C;IAC5C,YAAY,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC,8BAA8B;IAC9B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,4BAA4B,GACpC,2BAA2B,CAyF7B"}
|
|
@@ -11,8 +11,9 @@
|
|
|
11
11
|
* SYNC: When modified, update:
|
|
12
12
|
* - /packages/core/src/Calendar/hooks/index.ts
|
|
13
13
|
*/
|
|
14
|
-
import { useState, useMemo, useCallback } from 'react';
|
|
14
|
+
import { use, useState, useMemo, useCallback } from 'react';
|
|
15
15
|
import { plainDateFromISO, plainDateToISO, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateFormat, DATE_FORMAT_MONTH_YEAR } from "../../utils/plainDate.js";
|
|
16
|
+
import { InternationalizationContext } from "../../i18n/index.js";
|
|
16
17
|
|
|
17
18
|
/**
|
|
18
19
|
* Configuration for calendar navigation
|
|
@@ -56,6 +57,9 @@ export function useCalendarNavigation(options) {
|
|
|
56
57
|
onFocusDateChange,
|
|
57
58
|
numberOfMonths = 1
|
|
58
59
|
} = options;
|
|
60
|
+
const {
|
|
61
|
+
locale
|
|
62
|
+
} = use(InternationalizationContext);
|
|
59
63
|
|
|
60
64
|
// Pending focus target after month navigation
|
|
61
65
|
const [pendingFocus, setPendingFocus] = useState(null);
|
|
@@ -92,10 +96,10 @@ export function useCalendarNavigation(options) {
|
|
|
92
96
|
// Format month header
|
|
93
97
|
const monthYearLabel = useMemo(() => {
|
|
94
98
|
if (numberOfMonths === 1) {
|
|
95
|
-
return plainDateFormat(visibleMonths[0], DATE_FORMAT_MONTH_YEAR);
|
|
99
|
+
return plainDateFormat(visibleMonths[0], DATE_FORMAT_MONTH_YEAR, locale);
|
|
96
100
|
}
|
|
97
|
-
return visibleMonths.map(m => plainDateFormat(m, DATE_FORMAT_MONTH_YEAR)).join(' – ');
|
|
98
|
-
}, [visibleMonths, numberOfMonths]);
|
|
101
|
+
return visibleMonths.map(m => plainDateFormat(m, DATE_FORMAT_MONTH_YEAR, locale)).join(' – ');
|
|
102
|
+
}, [visibleMonths, numberOfMonths, locale]);
|
|
99
103
|
|
|
100
104
|
// Navigate to previous/next month
|
|
101
105
|
const navigateMonth = useCallback((delta, focusedDate, offset) => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ChatComposerInputHandle } from './ChatComposerInput';
|
|
2
2
|
export interface UseChatDictationOptions {
|
|
3
|
-
/** BCP-47 language tag. @default
|
|
3
|
+
/** BCP-47 language tag. @default InternationalizationProvider locale */
|
|
4
4
|
lang?: string;
|
|
5
5
|
/** Whether recognition continues until explicitly stopped. @default true */
|
|
6
6
|
continuous?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChatDictation.d.ts","sourceRoot":"","sources":["../../src/Chat/useChatDictation.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,qBAAqB,CAAC;AAOjE,MAAM,WAAW,uBAAuB;IACtC,
|
|
1
|
+
{"version":3,"file":"useChatDictation.d.ts","sourceRoot":"","sources":["../../src/Chat/useChatDictation.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,qBAAqB,CAAC;AAOjE,MAAM,WAAW,uBAAuB;IACtC,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAC7D,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;CAC5D;AAED,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,WAAW,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,WAAW,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,UAAU,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,MAAM,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,2CAA2C;IAC3C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mEAAmE;IACnE,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qCAAqC;IACrC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAgMD,wBAAgB,gBAAgB,CAC9B,OAAO,GAAE,uBAA4B,GACpC,sBAAsB,CA4NxB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export interface UseSpeechRecognitionOptions {
|
|
2
|
-
/** BCP-47 language tag. @default
|
|
2
|
+
/** BCP-47 language tag. @default InternationalizationProvider locale */
|
|
3
3
|
lang?: string;
|
|
4
4
|
/** Whether recognition continues until explicitly stopped. @default true */
|
|
5
5
|
continuous?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSpeechRecognition.d.ts","sourceRoot":"","sources":["../../src/Chat/useSpeechRecognition.ts"],"names":[],"mappings":"AAsBA,MAAM,WAAW,2BAA2B;IAC1C,
|
|
1
|
+
{"version":3,"file":"useSpeechRecognition.d.ts","sourceRoot":"","sources":["../../src/Chat/useSpeechRecognition.ts"],"names":[],"mappings":"AAsBA,MAAM,WAAW,2BAA2B;IAC1C,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wEAAwE;IACxE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8CAA8C;IAC9C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAC7D,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,sDAAsD;IACtD,WAAW,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,WAAW,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,UAAU,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,2CAA2C;IAC3C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qCAAqC;IACrC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AA8LD,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,2BAAgC,GACxC,0BAA0B,CAuM5B"}
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
* volume level from the microphone via AudioContext analyser.
|
|
14
14
|
*/
|
|
15
15
|
import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
|
|
16
|
-
import { useTranslator } from "../i18n/index.js";
|
|
16
|
+
import { useLocale, useTranslator } from "../i18n/index.js";
|
|
17
17
|
|
|
18
18
|
// =============================================================================
|
|
19
19
|
// Types
|
|
@@ -151,6 +151,7 @@ function getDefaultAudioContext() {
|
|
|
151
151
|
|
|
152
152
|
export function useSpeechRecognition(options = {}) {
|
|
153
153
|
const t = useTranslator();
|
|
154
|
+
const providerLocale = useLocale();
|
|
154
155
|
const {
|
|
155
156
|
lang,
|
|
156
157
|
continuous = true,
|
|
@@ -228,7 +229,7 @@ export function useSpeechRecognition(options = {}) {
|
|
|
228
229
|
}
|
|
229
230
|
recognitionRef.current?.abort();
|
|
230
231
|
const recognition = new SR();
|
|
231
|
-
recognition.lang = lang ??
|
|
232
|
+
recognition.lang = lang ?? providerLocale;
|
|
232
233
|
recognition.continuous = continuous;
|
|
233
234
|
recognition.interimResults = interimResults;
|
|
234
235
|
recognition.onstart = () => {
|
|
@@ -289,7 +290,7 @@ export function useSpeechRecognition(options = {}) {
|
|
|
289
290
|
};
|
|
290
291
|
recognitionRef.current = recognition;
|
|
291
292
|
recognition.start();
|
|
292
|
-
}, [lang, continuous, interimResults, startVolumePolling, stopVolumePolling, t]);
|
|
293
|
+
}, [lang, providerLocale, continuous, interimResults, startVolumePolling, stopVolumePolling, t]);
|
|
293
294
|
const stop = useCallback(() => {
|
|
294
295
|
recognitionRef.current?.stop();
|
|
295
296
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* - /apps/storybook/stories/DateInput.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/DateInput/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
|
|
18
|
+
import { use, useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
21
|
import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -92,7 +92,7 @@ import { mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
|
|
|
92
92
|
import { themeProps } from "../utils/themeProps.js";
|
|
93
93
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
94
94
|
import { stableClassName } from "../naming.js";
|
|
95
|
-
import { useTranslator } from "../i18n/index.js";
|
|
95
|
+
import { useTranslator, InternationalizationContext } from "../i18n/index.js";
|
|
96
96
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
97
97
|
/**
|
|
98
98
|
* A date picker component combining a text input with a calendar popover.
|
|
@@ -142,6 +142,9 @@ export function DateInput({
|
|
|
142
142
|
isRequired,
|
|
143
143
|
isOptional
|
|
144
144
|
});
|
|
145
|
+
const {
|
|
146
|
+
locale
|
|
147
|
+
} = use(InternationalizationContext);
|
|
145
148
|
const placeholder = placeholderFromProps ?? t('@astryx.dateInput.placeholder');
|
|
146
149
|
const size = useSize(sizeProp, 'md');
|
|
147
150
|
const id = useId();
|
|
@@ -219,13 +222,13 @@ export function DateInput({
|
|
|
219
222
|
// with the ISO value; every other named member reuses Timestamp's shared
|
|
220
223
|
// date mapping. Applies ONLY to the committed value, never to in-progress
|
|
221
224
|
// typed input.
|
|
222
|
-
const formatCommittedValue = useCallback(iso => typeof format === 'function' ? format(iso) : formatSharedDate(plainDateFromISO(iso), format), [format]);
|
|
225
|
+
const formatCommittedValue = useCallback(iso => typeof format === 'function' ? format(iso) : formatSharedDate(plainDateFromISO(iso), format, locale), [format, locale]);
|
|
223
226
|
|
|
224
227
|
// Display value: pending input if typing, otherwise formatted value
|
|
225
228
|
const displayValue = pendingInput !== null ? pendingInput : optimisticValue && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? formatCommittedValue(optimisticValue) : '';
|
|
226
229
|
|
|
227
230
|
// Check if current input is valid (for styling purposes)
|
|
228
|
-
const isInputValid = pendingInput === null || !pendingInput.trim() ? true : parseDateInput(pendingInput) !== null;
|
|
231
|
+
const isInputValid = pendingInput === null || !pendingInput.trim() ? true : parseDateInput(pendingInput, locale) !== null;
|
|
229
232
|
const popover = usePopover({
|
|
230
233
|
dialogLabel: t('@astryx.dateInput.dialogLabel'),
|
|
231
234
|
closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
|
|
@@ -301,7 +304,7 @@ export function DateInput({
|
|
|
301
304
|
setPendingInput(newValue);
|
|
302
305
|
|
|
303
306
|
// If the input is valid and passes constraints, update immediately
|
|
304
|
-
const parsed = parseDateInput(newValue);
|
|
307
|
+
const parsed = parseDateInput(newValue, locale);
|
|
305
308
|
if (parsed && plainDateToISO(parsed) !== value && !isDateDisabled(parsed)) {
|
|
306
309
|
const parsedISO = plainDateToISO(parsed);
|
|
307
310
|
lastFiredValueRef.current = parsedISO;
|
|
@@ -309,7 +312,7 @@ export function DateInput({
|
|
|
309
312
|
// Navigate calendar to show the parsed date's month
|
|
310
313
|
calendarRef.current?.navigateTo(parsedISO);
|
|
311
314
|
}
|
|
312
|
-
}, [value, fireChange, isDateDisabled, isEffectivelyDisabled]);
|
|
315
|
+
}, [value, fireChange, isDateDisabled, isEffectivelyDisabled, locale]);
|
|
313
316
|
|
|
314
317
|
// Commit pending input (shared by blur and Enter key)
|
|
315
318
|
const commitPendingInput = useCallback(() => {
|
|
@@ -323,7 +326,7 @@ export function DateInput({
|
|
|
323
326
|
setPendingInput(null);
|
|
324
327
|
return;
|
|
325
328
|
}
|
|
326
|
-
const parsed = parseDateInput(pendingInput);
|
|
329
|
+
const parsed = parseDateInput(pendingInput, locale);
|
|
327
330
|
if (parsed && !isDateDisabled(parsed)) {
|
|
328
331
|
const parsedISO = plainDateToISO(parsed);
|
|
329
332
|
if (parsedISO !== value) {
|
|
@@ -331,7 +334,7 @@ export function DateInput({
|
|
|
331
334
|
}
|
|
332
335
|
}
|
|
333
336
|
setPendingInput(null);
|
|
334
|
-
}, [pendingInput, value, fireChange, isDateDisabled]);
|
|
337
|
+
}, [pendingInput, value, fireChange, isDateDisabled, locale]);
|
|
335
338
|
|
|
336
339
|
// Handle blur - validate, check constraints, and clear pending input
|
|
337
340
|
const handleBlur = useCallback(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* - /apps/storybook/stories/DateRangeInput.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/DateRangeInput/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useCallback, useMemo, useOptimistic, useTransition } from 'react';
|
|
18
|
+
import { use, useId, useCallback, useMemo, useOptimistic, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import { plainDateFromISO, plainDateToday, plainDateFormat, plainDateDiffDays, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
|
|
21
21
|
import "../theme/tokens.stylex.js";
|
|
@@ -33,7 +33,7 @@ import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
|
33
33
|
import { themeProps } from "../utils/themeProps.js";
|
|
34
34
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
35
35
|
import { stableClassName } from "../naming.js";
|
|
36
|
-
import { useTranslator } from "../i18n/index.js";
|
|
36
|
+
import { useTranslator, InternationalizationContext } from "../i18n/index.js";
|
|
37
37
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
38
38
|
const styles = {
|
|
39
39
|
iconButton: {
|
|
@@ -99,7 +99,7 @@ const sizeStyles = {
|
|
|
99
99
|
$$css: true
|
|
100
100
|
}
|
|
101
101
|
};
|
|
102
|
-
function formatRangeDisplay(range) {
|
|
102
|
+
function formatRangeDisplay(range, locale) {
|
|
103
103
|
if (!range) {
|
|
104
104
|
return '';
|
|
105
105
|
}
|
|
@@ -108,7 +108,7 @@ function formatRangeDisplay(range) {
|
|
|
108
108
|
const currentYear = plainDateToday().year;
|
|
109
109
|
const sameYear = start.year === end.year && start.year === currentYear;
|
|
110
110
|
const fmt = sameYear ? DATE_FORMAT_SHORT : DATE_FORMAT_SHORT_WITH_YEAR;
|
|
111
|
-
return `${plainDateFormat(start, fmt)} – ${plainDateFormat(end, fmt)}`;
|
|
111
|
+
return `${plainDateFormat(start, fmt, locale)} – ${plainDateFormat(end, fmt, locale)}`;
|
|
112
112
|
}
|
|
113
113
|
function isRangeEqual(a, b) {
|
|
114
114
|
if (a === b) {
|
|
@@ -191,6 +191,9 @@ export function DateRangeInput({
|
|
|
191
191
|
isRequired,
|
|
192
192
|
isOptional
|
|
193
193
|
});
|
|
194
|
+
const {
|
|
195
|
+
locale
|
|
196
|
+
} = use(InternationalizationContext);
|
|
194
197
|
const placeholder = placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
|
|
195
198
|
const size = useSize(sizeProp, 'md');
|
|
196
199
|
const id = useId();
|
|
@@ -226,7 +229,7 @@ export function DateRangeInput({
|
|
|
226
229
|
// The tooltip variant renders no message box; describe the input by the
|
|
227
230
|
// tooltip's content instead so the status is still announced.
|
|
228
231
|
statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
|
|
229
|
-
const displayValue = useMemo(() => formatRangeDisplay(optimisticValue), [optimisticValue]);
|
|
232
|
+
const displayValue = useMemo(() => formatRangeDisplay(optimisticValue, locale), [optimisticValue, locale]);
|
|
230
233
|
const popover = usePopover({
|
|
231
234
|
dialogLabel: t('@astryx.dateRangeInput.dialogLabel'),
|
|
232
235
|
closeButtonLabel: t('@astryx.dateInput.closeCalendar')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* - /apps/storybook/stories/DateTimeInput.stories.tsx (storybook stories)
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/DateTimeInput/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
|
-
import { useId, useState, useCallback, useRef, useMemo, useOptimistic, useTransition } from 'react';
|
|
18
|
+
import { use, useId, useState, useCallback, useRef, useMemo, useOptimistic, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
21
|
import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
@@ -36,7 +36,7 @@ import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
|
36
36
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
37
37
|
import { themeProps } from "../utils/themeProps.js";
|
|
38
38
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
39
|
-
import { useTranslator } from "../i18n/index.js";
|
|
39
|
+
import { useTranslator, InternationalizationContext } from "../i18n/index.js";
|
|
40
40
|
|
|
41
41
|
/** Supported minute increments for arrow-key stepping of the time field. */
|
|
42
42
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -175,6 +175,9 @@ export function DateTimeInput({
|
|
|
175
175
|
isRequired,
|
|
176
176
|
isOptional
|
|
177
177
|
});
|
|
178
|
+
const {
|
|
179
|
+
locale
|
|
180
|
+
} = use(InternationalizationContext);
|
|
178
181
|
// Speaks arrow-key stepping results through the persistent live regions:
|
|
179
182
|
// stepping programmatically rewrites a plain textbox's value, which screen
|
|
180
183
|
// readers do not announce on their own (WCAG 4.1.2).
|
|
@@ -267,8 +270,8 @@ export function DateTimeInput({
|
|
|
267
270
|
}
|
|
268
271
|
}
|
|
269
272
|
}
|
|
270
|
-
const dateDisplayValue = datePendingInput !== null ? datePendingInput : valueParts.date && /^\d{4}-\d{2}-\d{2}$/.test(valueParts.date) ? plainDateFormat(plainDateFromISO(valueParts.date), DATE_FORMAT_LONG) : '';
|
|
271
|
-
const isDateInputValid = datePendingInput === null || !datePendingInput.trim() ? true : parseDateInput(datePendingInput) !== null;
|
|
273
|
+
const dateDisplayValue = datePendingInput !== null ? datePendingInput : valueParts.date && /^\d{4}-\d{2}-\d{2}$/.test(valueParts.date) ? plainDateFormat(plainDateFromISO(valueParts.date), DATE_FORMAT_LONG, locale) : '';
|
|
274
|
+
const isDateInputValid = datePendingInput === null || !datePendingInput.trim() ? true : parseDateInput(datePendingInput, locale) !== null;
|
|
272
275
|
|
|
273
276
|
// --- Time input state ---
|
|
274
277
|
const [timePendingInput, setTimePendingInput] = useState(null);
|
|
@@ -376,14 +379,14 @@ export function DateTimeInput({
|
|
|
376
379
|
}
|
|
377
380
|
const text = e.target.value;
|
|
378
381
|
setDatePendingInput(text);
|
|
379
|
-
const parsed = parseDateInput(text);
|
|
382
|
+
const parsed = parseDateInput(text, locale);
|
|
380
383
|
if (parsed && plainDateToISO(parsed) !== valueParts.date && !isDateDisabled(parsed)) {
|
|
381
384
|
const parsedISO = plainDateToISO(parsed);
|
|
382
385
|
lastFiredDateRef.current = parsedISO;
|
|
383
386
|
handleDateChange(parsedISO, 'input');
|
|
384
387
|
calendarRef.current?.navigateTo(parsedISO);
|
|
385
388
|
}
|
|
386
|
-
}, [valueParts.date, isDateDisabled, handleDateChange, isEffectivelyDisabled]);
|
|
389
|
+
}, [valueParts.date, isDateDisabled, handleDateChange, isEffectivelyDisabled, locale]);
|
|
387
390
|
const commitDatePendingInput = useCallback(() => {
|
|
388
391
|
if (datePendingInput === null) {
|
|
389
392
|
return;
|
|
@@ -395,7 +398,7 @@ export function DateTimeInput({
|
|
|
395
398
|
setDatePendingInput(null);
|
|
396
399
|
return;
|
|
397
400
|
}
|
|
398
|
-
const parsed = parseDateInput(datePendingInput);
|
|
401
|
+
const parsed = parseDateInput(datePendingInput, locale);
|
|
399
402
|
if (parsed && !isDateDisabled(parsed)) {
|
|
400
403
|
const parsedISO = plainDateToISO(parsed);
|
|
401
404
|
if (parsedISO !== valueParts.date) {
|
|
@@ -403,7 +406,7 @@ export function DateTimeInput({
|
|
|
403
406
|
}
|
|
404
407
|
}
|
|
405
408
|
setDatePendingInput(null);
|
|
406
|
-
}, [datePendingInput, value, valueParts.date, fireChange, isDateDisabled, handleDateChange]);
|
|
409
|
+
}, [datePendingInput, value, valueParts.date, fireChange, isDateDisabled, handleDateChange, locale]);
|
|
407
410
|
const handleDateBlur = useCallback(() => {
|
|
408
411
|
commitDatePendingInput();
|
|
409
412
|
}, [commitDatePendingInput]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAkD3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,GACd,EAAE,qBAAqB,GAAG,SAAS,CA0BnC;yBA/Be,gBAAgB"}
|
|
@@ -23,6 +23,12 @@ const styles = {
|
|
|
23
23
|
button: {
|
|
24
24
|
kZKoxP: "x1qx5ct2",
|
|
25
25
|
kmuXW: "x2lah0s",
|
|
26
|
+
kVAEAm: "x1n2onr6",
|
|
27
|
+
"--_input-clear-hit-inset": "xtoycft x181bpwf",
|
|
28
|
+
"--_input-clear-hit-content": "xqxtgf4 xp8r40j",
|
|
29
|
+
k5JduY: "xh3pasq",
|
|
30
|
+
kwXMNM: "x1j6awrg",
|
|
31
|
+
kv0HGH: "xht581f",
|
|
26
32
|
$$css: true
|
|
27
33
|
}
|
|
28
34
|
};
|
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
* - /packages/cli/assets/templates/blocks/components/HoverCard/ (showcase blocks)
|
|
12
12
|
*/
|
|
13
13
|
import { type ReactElement, type ReactNode } from 'react';
|
|
14
|
-
import { type HoverCardFocusTrigger } from './useHoverCard';
|
|
14
|
+
import { type HoverCardFocusTrigger, type HoverCardTouchTrigger } from './useHoverCard';
|
|
15
15
|
import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
|
|
16
16
|
import type { BaseProps } from '../BaseProps';
|
|
17
|
-
export type { HoverCardFocusTrigger } from './useHoverCard';
|
|
17
|
+
export type { HoverCardFocusTrigger, HoverCardTouchTrigger, } from './useHoverCard';
|
|
18
18
|
export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
|
|
19
19
|
/**
|
|
20
20
|
* The trigger element(s). Children refs are preserved.
|
|
@@ -53,6 +53,16 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
53
53
|
* @default 'auto'
|
|
54
54
|
*/
|
|
55
55
|
focusTrigger?: HoverCardFocusTrigger;
|
|
56
|
+
/**
|
|
57
|
+
* What a tap does on a touch pointer, where there is no hover:
|
|
58
|
+
* - `auto`: tap opens the card, unless the trigger performs an action of its
|
|
59
|
+
* own (a button, a link, a form control) — that tap belongs to the control
|
|
60
|
+
* - `tap`: tap always opens the card, even on a trigger that acts
|
|
61
|
+
* - `none`: touch never opens the card
|
|
62
|
+
*
|
|
63
|
+
* @default 'auto'
|
|
64
|
+
*/
|
|
65
|
+
touchTrigger?: HoverCardTouchTrigger;
|
|
56
66
|
/**
|
|
57
67
|
* Whether the hover card is enabled.
|
|
58
68
|
* When false, hover/focus triggers are disabled.
|
|
@@ -110,7 +120,7 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
110
120
|
* </HoverCard>
|
|
111
121
|
* ```
|
|
112
122
|
*/
|
|
113
|
-
export declare function HoverCard({ children, content, placement, alignment, delay, hideDelay, focusTrigger, isEnabled, label, onOpenChange, hasHoverIndication, isOpen, isDefaultOpen, xstyle, className, style, }: HoverCardProps): ReactElement;
|
|
123
|
+
export declare function HoverCard({ children, content, placement, alignment, delay, hideDelay, focusTrigger, touchTrigger, isEnabled, label, onOpenChange, hasHoverIndication, isOpen, isDefaultOpen, xstyle, className, style, }: HoverCardProps): ReactElement;
|
|
114
124
|
export declare namespace HoverCard {
|
|
115
125
|
var displayName: string;
|
|
116
126
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,
|
|
1
|
+
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAiBxB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;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,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CA0G/B;yBA5He,SAAS"}
|
|
@@ -59,6 +59,7 @@ export function HoverCard({
|
|
|
59
59
|
delay = 300,
|
|
60
60
|
hideDelay = 200,
|
|
61
61
|
focusTrigger = 'auto',
|
|
62
|
+
touchTrigger = 'auto',
|
|
62
63
|
isEnabled = true,
|
|
63
64
|
label,
|
|
64
65
|
onOpenChange,
|
|
@@ -88,6 +89,7 @@ export function HoverCard({
|
|
|
88
89
|
delay,
|
|
89
90
|
hideDelay,
|
|
90
91
|
focusTrigger,
|
|
92
|
+
touchTrigger,
|
|
91
93
|
isEnabled,
|
|
92
94
|
label,
|
|
93
95
|
isOpen,
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* SYNC: When adding new HoverCard files, update exports here
|
|
8
8
|
*/
|
|
9
9
|
export { useHoverCard } from './useHoverCard';
|
|
10
|
-
export type { HoverCardFocusTrigger, HoverCardOptions, HoverCardReturn, } from './useHoverCard';
|
|
10
|
+
export type { HoverCardFocusTrigger, HoverCardTouchTrigger, HoverCardOptions, HoverCardReturn, } from './useHoverCard';
|
|
11
11
|
export { HoverCard } from './HoverCard';
|
|
12
12
|
export type { HoverCardProps } from './HoverCard';
|
|
13
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HoverCard/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EACV,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HoverCard/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file useHoverCard.ts
|
|
3
|
-
* @input Uses useLayer, React hooks
|
|
4
|
-
* @output Exports useHoverCard hook for hover/focus triggered layers
|
|
3
|
+
* @input Uses useLayer, useTouchTrigger, React hooks
|
|
4
|
+
* @output Exports useHoverCard hook for hover/focus/tap triggered layers
|
|
5
5
|
* @position Layer hook; builds on useLayer for hover card behavior
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update:
|
|
@@ -9,10 +9,15 @@
|
|
|
9
9
|
*/
|
|
10
10
|
import { type ReactNode, type RefCallback } from 'react';
|
|
11
11
|
import { type ContextRenderProps, type LayerAlignment, type LayerPlacement } from '../Layer/useLayer';
|
|
12
|
+
import { type LayerTouchTrigger } from '../Layer/useTouchTrigger';
|
|
12
13
|
/**
|
|
13
14
|
* Focus trigger behavior for hover cards
|
|
14
15
|
*/
|
|
15
16
|
export type HoverCardFocusTrigger = 'auto' | 'always' | 'never';
|
|
17
|
+
/**
|
|
18
|
+
* Touch trigger behavior for hover cards
|
|
19
|
+
*/
|
|
20
|
+
export type HoverCardTouchTrigger = LayerTouchTrigger;
|
|
16
21
|
export interface HoverCardOptions {
|
|
17
22
|
/**
|
|
18
23
|
* Position placement relative to anchor
|
|
@@ -43,6 +48,16 @@ export interface HoverCardOptions {
|
|
|
43
48
|
* @default 'auto'
|
|
44
49
|
*/
|
|
45
50
|
focusTrigger?: HoverCardFocusTrigger;
|
|
51
|
+
/**
|
|
52
|
+
* What a tap does on a touch pointer, where there is no hover:
|
|
53
|
+
* - `auto`: tap opens the card, unless the trigger performs an action of its
|
|
54
|
+
* own (a button, a link, a form control) — that tap belongs to the control
|
|
55
|
+
* - `tap`: tap always opens the card, even on a trigger that acts
|
|
56
|
+
* - `none`: touch never opens the card
|
|
57
|
+
*
|
|
58
|
+
* @default 'auto'
|
|
59
|
+
*/
|
|
60
|
+
touchTrigger?: HoverCardTouchTrigger;
|
|
46
61
|
/**
|
|
47
62
|
* Whether the hover card is enabled.
|
|
48
63
|
* When false, hover/focus triggers are disabled.
|