@kalyx/react 1.0.0-rc.9 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +547 -0
- package/README.md +17 -2
- package/dist/headless.cjs +3052 -0
- package/dist/headless.cjs.map +1 -0
- package/dist/headless.d.cts +5 -0
- package/dist/headless.d.ts +5 -0
- package/dist/headless.js +3026 -0
- package/dist/headless.js.map +1 -0
- package/dist/index.cjs +131 -76
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +28 -6
- package/dist/index.d.ts +28 -6
- package/dist/index.js +118 -78
- package/dist/index.js.map +1 -1
- package/package.json +15 -6
package/dist/index.d.cts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
export { DateFnsAdapter } from '@kalyx/adapter-date-fns';
|
|
2
|
+
import { ISODateString, DisabledRule, WeekStartsOn, DateAdapter, DatePickerLabels, DateRange, RangePickerLabels, TimePickerLabels, DateTimePickerLabels, CalendarGrid, TimeValue } from '@kalyx/core';
|
|
3
|
+
export { CalendarDay, CalendarGrid, CalendarOptions, CalendarWeek, DEFAULT_DATEPICKER_LABELS, DEFAULT_DATETIMEPICKER_LABELS, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, DateAdapter, DatePickerLabels, DateRange, DateTimePickerLabels, DisabledRule, ISODateString, RangePickerLabels, TimePickerLabels, TimeValue, WeekStartsOn, WeekdayInfo } from '@kalyx/core';
|
|
1
4
|
import * as react from 'react';
|
|
2
5
|
import { ReactNode, HTMLAttributes, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
|
|
3
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
-
import { ISODateString, DisabledRule, WeekStartsOn, DateAdapter, DatePickerLabels, DateRange, RangePickerLabels, TimePickerLabels, DateTimePickerLabels, CalendarGrid, TimeValue } from '@kalyx/core';
|
|
5
|
-
export { CalendarDay, DateAdapter, DateFnsAdapter, DateRange, DisabledRule, ISODateString, TimeValue } from '@kalyx/core';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Props for the DatePicker Root component.
|
|
@@ -61,7 +62,7 @@ interface DatePickerRootProps {
|
|
|
61
62
|
/** Child components */
|
|
62
63
|
children: ReactNode;
|
|
63
64
|
}
|
|
64
|
-
declare function DatePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: DatePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
65
|
+
declare function DatePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter: adapterProp, labels: labelsProp, children, }: DatePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
65
66
|
|
|
66
67
|
interface DatePickerPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
|
|
67
68
|
children?: ReactNode;
|
|
@@ -313,7 +314,7 @@ interface RangePickerRootProps {
|
|
|
313
314
|
/** Child components */
|
|
314
315
|
children: ReactNode;
|
|
315
316
|
}
|
|
316
|
-
declare function RangePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: RangePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
317
|
+
declare function RangePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter: adapterProp, labels: labelsProp, children, }: RangePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
317
318
|
|
|
318
319
|
interface RangePickerPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
|
|
319
320
|
children?: ReactNode;
|
|
@@ -503,12 +504,18 @@ interface TimePickerRootProps {
|
|
|
503
504
|
* predicate returns `true` for every step within the hour. Always receives 24-hour values.
|
|
504
505
|
*/
|
|
505
506
|
filterTime?: (hours: number, minutes: number) => boolean;
|
|
507
|
+
/**
|
|
508
|
+
* Date adapter. Only used when the controlled `value` is `null` to derive
|
|
509
|
+
* "today" as the base for the first time edit. The main `@kalyx/react` entry
|
|
510
|
+
* auto-injects `DateFnsAdapter`; on `@kalyx/react/headless` you must pass one.
|
|
511
|
+
*/
|
|
512
|
+
adapter?: DateAdapter;
|
|
506
513
|
/** Override ARIA labels (defaults to English) */
|
|
507
514
|
labels?: Partial<TimePickerLabels>;
|
|
508
515
|
/** Child components */
|
|
509
516
|
children: ReactNode;
|
|
510
517
|
}
|
|
511
|
-
declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
518
|
+
declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, adapter: adapterProp, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
512
519
|
|
|
513
520
|
interface TimePickerHourListClassNames {
|
|
514
521
|
root?: string;
|
|
@@ -617,6 +624,15 @@ interface DateTimePickerRootProps {
|
|
|
617
624
|
format?: TimePickerFormat;
|
|
618
625
|
/** Minute step (e.g., 1, 5, 15, 30) */
|
|
619
626
|
step?: number;
|
|
627
|
+
/** Whether to display seconds in the time controls */
|
|
628
|
+
withSeconds?: boolean;
|
|
629
|
+
/**
|
|
630
|
+
* Programmatic per-slot disable predicate for the time controls. Returns `true` for any
|
|
631
|
+
* `(hours, minutes)` pair that should be unselectable — same polarity as MUI X's
|
|
632
|
+
* `shouldDisableTime`, and the **inverse** of react-datepicker's `filterTime`. Always
|
|
633
|
+
* receives 24-hour values.
|
|
634
|
+
*/
|
|
635
|
+
filterTime?: (hours: number, minutes: number) => boolean;
|
|
620
636
|
/** Disabled rules (applied to dates) */
|
|
621
637
|
disabled?: DisabledRule[] | boolean;
|
|
622
638
|
/** Read-only */
|
|
@@ -652,7 +668,7 @@ interface DateTimePickerRootProps {
|
|
|
652
668
|
* - Changing time in TimePicker -> changes only the time, preserves the date
|
|
653
669
|
* - Escape / outside click -> close the popover (commit)
|
|
654
670
|
*/
|
|
655
|
-
declare function DateTimePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, format, step, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: DateTimePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
671
|
+
declare function DateTimePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, format, step, withSeconds, filterTime, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter: adapterProp, labels: labelsProp, children, }: DateTimePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
656
672
|
|
|
657
673
|
interface DateTimePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
|
|
658
674
|
}
|
|
@@ -1044,6 +1060,12 @@ interface UseTimePickerOptions {
|
|
|
1044
1060
|
withSeconds?: boolean;
|
|
1045
1061
|
/** IANA timezone for time interpretation (see TimePickerRoot#displayTimezone) */
|
|
1046
1062
|
displayTimezone?: string;
|
|
1063
|
+
/**
|
|
1064
|
+
* Date adapter. Only used when the controlled `value` is `null` to derive
|
|
1065
|
+
* "today" as the base for the first time edit. The main `@kalyx/react` entry
|
|
1066
|
+
* auto-injects `DateFnsAdapter`; on `@kalyx/react/headless` you must pass one.
|
|
1067
|
+
*/
|
|
1068
|
+
adapter?: DateAdapter;
|
|
1047
1069
|
}
|
|
1048
1070
|
interface UseTimePickerReturn {
|
|
1049
1071
|
/** Current ISO datetime value */
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
export { DateFnsAdapter } from '@kalyx/adapter-date-fns';
|
|
2
|
+
import { ISODateString, DisabledRule, WeekStartsOn, DateAdapter, DatePickerLabels, DateRange, RangePickerLabels, TimePickerLabels, DateTimePickerLabels, CalendarGrid, TimeValue } from '@kalyx/core';
|
|
3
|
+
export { CalendarDay, CalendarGrid, CalendarOptions, CalendarWeek, DEFAULT_DATEPICKER_LABELS, DEFAULT_DATETIMEPICKER_LABELS, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, DateAdapter, DatePickerLabels, DateRange, DateTimePickerLabels, DisabledRule, ISODateString, RangePickerLabels, TimePickerLabels, TimeValue, WeekStartsOn, WeekdayInfo } from '@kalyx/core';
|
|
1
4
|
import * as react from 'react';
|
|
2
5
|
import { ReactNode, HTMLAttributes, InputHTMLAttributes, ButtonHTMLAttributes } from 'react';
|
|
3
6
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
-
import { ISODateString, DisabledRule, WeekStartsOn, DateAdapter, DatePickerLabels, DateRange, RangePickerLabels, TimePickerLabels, DateTimePickerLabels, CalendarGrid, TimeValue } from '@kalyx/core';
|
|
5
|
-
export { CalendarDay, DateAdapter, DateFnsAdapter, DateRange, DisabledRule, ISODateString, TimeValue } from '@kalyx/core';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Props for the DatePicker Root component.
|
|
@@ -61,7 +62,7 @@ interface DatePickerRootProps {
|
|
|
61
62
|
/** Child components */
|
|
62
63
|
children: ReactNode;
|
|
63
64
|
}
|
|
64
|
-
declare function DatePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: DatePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
65
|
+
declare function DatePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter: adapterProp, labels: labelsProp, children, }: DatePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
65
66
|
|
|
66
67
|
interface DatePickerPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
|
|
67
68
|
children?: ReactNode;
|
|
@@ -313,7 +314,7 @@ interface RangePickerRootProps {
|
|
|
313
314
|
/** Child components */
|
|
314
315
|
children: ReactNode;
|
|
315
316
|
}
|
|
316
|
-
declare function RangePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: RangePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
317
|
+
declare function RangePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter: adapterProp, labels: labelsProp, children, }: RangePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
317
318
|
|
|
318
319
|
interface RangePickerPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
|
|
319
320
|
children?: ReactNode;
|
|
@@ -503,12 +504,18 @@ interface TimePickerRootProps {
|
|
|
503
504
|
* predicate returns `true` for every step within the hour. Always receives 24-hour values.
|
|
504
505
|
*/
|
|
505
506
|
filterTime?: (hours: number, minutes: number) => boolean;
|
|
507
|
+
/**
|
|
508
|
+
* Date adapter. Only used when the controlled `value` is `null` to derive
|
|
509
|
+
* "today" as the base for the first time edit. The main `@kalyx/react` entry
|
|
510
|
+
* auto-injects `DateFnsAdapter`; on `@kalyx/react/headless` you must pass one.
|
|
511
|
+
*/
|
|
512
|
+
adapter?: DateAdapter;
|
|
506
513
|
/** Override ARIA labels (defaults to English) */
|
|
507
514
|
labels?: Partial<TimePickerLabels>;
|
|
508
515
|
/** Child components */
|
|
509
516
|
children: ReactNode;
|
|
510
517
|
}
|
|
511
|
-
declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
518
|
+
declare function TimePickerRoot({ value: controlledValue, defaultValue, onChange, format, step, withSeconds, displayTimezone, disabled, readOnly, filterTime, adapter: adapterProp, labels: labelsProp, children, }: TimePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
512
519
|
|
|
513
520
|
interface TimePickerHourListClassNames {
|
|
514
521
|
root?: string;
|
|
@@ -617,6 +624,15 @@ interface DateTimePickerRootProps {
|
|
|
617
624
|
format?: TimePickerFormat;
|
|
618
625
|
/** Minute step (e.g., 1, 5, 15, 30) */
|
|
619
626
|
step?: number;
|
|
627
|
+
/** Whether to display seconds in the time controls */
|
|
628
|
+
withSeconds?: boolean;
|
|
629
|
+
/**
|
|
630
|
+
* Programmatic per-slot disable predicate for the time controls. Returns `true` for any
|
|
631
|
+
* `(hours, minutes)` pair that should be unselectable — same polarity as MUI X's
|
|
632
|
+
* `shouldDisableTime`, and the **inverse** of react-datepicker's `filterTime`. Always
|
|
633
|
+
* receives 24-hour values.
|
|
634
|
+
*/
|
|
635
|
+
filterTime?: (hours: number, minutes: number) => boolean;
|
|
620
636
|
/** Disabled rules (applied to dates) */
|
|
621
637
|
disabled?: DisabledRule[] | boolean;
|
|
622
638
|
/** Read-only */
|
|
@@ -652,7 +668,7 @@ interface DateTimePickerRootProps {
|
|
|
652
668
|
* - Changing time in TimePicker -> changes only the time, preserves the date
|
|
653
669
|
* - Escape / outside click -> close the popover (commit)
|
|
654
670
|
*/
|
|
655
|
-
declare function DateTimePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, format, step, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter, labels: labelsProp, children, }: DateTimePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
671
|
+
declare function DateTimePickerRoot({ value: controlledValue, defaultValue, onChange, onOpenChange, onCalendarNavigate, format, step, withSeconds, filterTime, disabled, readOnly, weekStartsOn, displayFormat, locale, displayTimezone, adapter: adapterProp, labels: labelsProp, children, }: DateTimePickerRootProps): react_jsx_runtime.JSX.Element;
|
|
656
672
|
|
|
657
673
|
interface DateTimePickerInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
|
|
658
674
|
}
|
|
@@ -1044,6 +1060,12 @@ interface UseTimePickerOptions {
|
|
|
1044
1060
|
withSeconds?: boolean;
|
|
1045
1061
|
/** IANA timezone for time interpretation (see TimePickerRoot#displayTimezone) */
|
|
1046
1062
|
displayTimezone?: string;
|
|
1063
|
+
/**
|
|
1064
|
+
* Date adapter. Only used when the controlled `value` is `null` to derive
|
|
1065
|
+
* "today" as the base for the first time edit. The main `@kalyx/react` entry
|
|
1066
|
+
* auto-injects `DateFnsAdapter`; on `@kalyx/react/headless` you must pass one.
|
|
1067
|
+
*/
|
|
1068
|
+
adapter?: DateAdapter;
|
|
1047
1069
|
}
|
|
1048
1070
|
interface UseTimePickerReturn {
|
|
1049
1071
|
/** Current ISO datetime value */
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,29 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { DateFnsAdapter } from '@kalyx/adapter-date-fns';
|
|
3
|
+
export { DateFnsAdapter } from '@kalyx/adapter-date-fns';
|
|
4
|
+
import { createContext, forwardRef, useState, useRef, useEffect, useCallback, useContext, useId, useMemo } from 'react';
|
|
5
|
+
import { parseInputValue, formatTimeString, parseTimeString, getTimeInTimezone, getTime, DEFAULT_DATEPICKER_LABELS, civilMidnightFromUtcDay, getMonthName, getWeekdayNames, getCalendarDays, formatMonthYear, isDateDisabled, getISOWeekNumber, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS, setTimeInTimezone, setTime, to12Hour, to24Hour, generateMinutes, generateHours, formatFullDate } from '@kalyx/core';
|
|
6
|
+
export { DEFAULT_DATEPICKER_LABELS, DEFAULT_DATETIMEPICKER_LABELS, DEFAULT_RANGEPICKER_LABELS, DEFAULT_TIMEPICKER_LABELS } from '@kalyx/core';
|
|
5
7
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
6
8
|
import { offset, flip, shift, useFloating, autoUpdate } from '@floating-ui/react';
|
|
7
9
|
|
|
8
|
-
// src/
|
|
10
|
+
// src/index.ts
|
|
11
|
+
|
|
12
|
+
// src/internal/defaultAdapter.ts
|
|
13
|
+
var __defaultAdapter = null;
|
|
14
|
+
function setDefaultAdapter(adapter) {
|
|
15
|
+
__defaultAdapter = adapter;
|
|
16
|
+
}
|
|
17
|
+
function getDefaultAdapter() {
|
|
18
|
+
return __defaultAdapter;
|
|
19
|
+
}
|
|
20
|
+
function resolveAdapter(passed, fallback, componentName) {
|
|
21
|
+
if (passed) return passed;
|
|
22
|
+
if (fallback) return fallback;
|
|
23
|
+
throw new Error(
|
|
24
|
+
`[@kalyx/react/headless] ${componentName} requires an adapter. Pass one via <${componentName} adapter={...}>. If you don't need a custom adapter, import from '@kalyx/react' instead.`
|
|
25
|
+
);
|
|
26
|
+
}
|
|
9
27
|
var DatePickerContext = createContext(null);
|
|
10
28
|
function useDatePickerContext(componentName) {
|
|
11
29
|
const context = useContext(DatePickerContext);
|
|
@@ -44,10 +62,11 @@ function DatePickerRoot({
|
|
|
44
62
|
displayFormat = "yyyy-MM-dd",
|
|
45
63
|
locale = "en-US",
|
|
46
64
|
displayTimezone,
|
|
47
|
-
adapter
|
|
65
|
+
adapter: adapterProp,
|
|
48
66
|
labels: labelsProp,
|
|
49
67
|
children
|
|
50
68
|
}) {
|
|
69
|
+
const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "DatePicker");
|
|
51
70
|
const pickerId = useId();
|
|
52
71
|
const isControlled = useRef(controlledValue !== void 0).current;
|
|
53
72
|
const referenceRef = useRef(null);
|
|
@@ -156,6 +175,10 @@ var DatePickerInput = forwardRef(
|
|
|
156
175
|
const displayFormat = formatProp ?? ctx.displayFormat;
|
|
157
176
|
const [inputText, setInputText] = useState(null);
|
|
158
177
|
const isComposingRef = useRef(false);
|
|
178
|
+
useEffect(() => {
|
|
179
|
+
if (isComposingRef.current) return;
|
|
180
|
+
setInputText(null);
|
|
181
|
+
}, [ctx.value]);
|
|
159
182
|
let formattedValue = "";
|
|
160
183
|
if (ctx.value) {
|
|
161
184
|
try {
|
|
@@ -1098,6 +1121,17 @@ function useRangePickerContext(componentName) {
|
|
|
1098
1121
|
return context;
|
|
1099
1122
|
}
|
|
1100
1123
|
var EMPTY_RANGE = { start: null, end: null };
|
|
1124
|
+
var SR_ONLY = {
|
|
1125
|
+
position: "absolute",
|
|
1126
|
+
width: 1,
|
|
1127
|
+
height: 1,
|
|
1128
|
+
padding: 0,
|
|
1129
|
+
margin: -1,
|
|
1130
|
+
overflow: "hidden",
|
|
1131
|
+
clip: "rect(0, 0, 0, 0)",
|
|
1132
|
+
whiteSpace: "nowrap",
|
|
1133
|
+
border: 0
|
|
1134
|
+
};
|
|
1101
1135
|
function RangePickerRoot({
|
|
1102
1136
|
value: controlledValue,
|
|
1103
1137
|
defaultValue,
|
|
@@ -1110,10 +1144,11 @@ function RangePickerRoot({
|
|
|
1110
1144
|
displayFormat = "yyyy-MM-dd",
|
|
1111
1145
|
locale = "en-US",
|
|
1112
1146
|
displayTimezone,
|
|
1113
|
-
adapter
|
|
1147
|
+
adapter: adapterProp,
|
|
1114
1148
|
labels: labelsProp,
|
|
1115
1149
|
children
|
|
1116
1150
|
}) {
|
|
1151
|
+
const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "RangePicker");
|
|
1117
1152
|
const pickerId = useId();
|
|
1118
1153
|
const isControlled = useRef(controlledValue !== void 0).current;
|
|
1119
1154
|
const referenceRef = useRef(null);
|
|
@@ -1124,6 +1159,8 @@ function RangePickerRoot({
|
|
|
1124
1159
|
const [isOpen, setIsOpen] = useState(false);
|
|
1125
1160
|
const [selectingTarget, setSelectingTarget] = useState("start");
|
|
1126
1161
|
const [hoverDate, setHoverDate] = useState(null);
|
|
1162
|
+
const [announcement, setAnnouncement] = useState("");
|
|
1163
|
+
const announce = useCallback((message) => setAnnouncement(message), []);
|
|
1127
1164
|
const [viewMonth, setViewMonth] = useState(
|
|
1128
1165
|
() => currentValue.start ?? adapter.today(displayTimezone)
|
|
1129
1166
|
);
|
|
@@ -1226,7 +1263,8 @@ function RangePickerRoot({
|
|
|
1226
1263
|
isDisabled,
|
|
1227
1264
|
isReadOnly: readOnly,
|
|
1228
1265
|
pickerId,
|
|
1229
|
-
labels: mergedLabels
|
|
1266
|
+
labels: mergedLabels,
|
|
1267
|
+
announce
|
|
1230
1268
|
}),
|
|
1231
1269
|
[
|
|
1232
1270
|
currentValue,
|
|
@@ -1249,10 +1287,14 @@ function RangePickerRoot({
|
|
|
1249
1287
|
isDisabled,
|
|
1250
1288
|
readOnly,
|
|
1251
1289
|
pickerId,
|
|
1252
|
-
mergedLabels
|
|
1290
|
+
mergedLabels,
|
|
1291
|
+
announce
|
|
1253
1292
|
]
|
|
1254
1293
|
);
|
|
1255
|
-
return /* @__PURE__ */
|
|
1294
|
+
return /* @__PURE__ */ jsxs(RangePickerContext.Provider, { value: contextValue, children: [
|
|
1295
|
+
children,
|
|
1296
|
+
/* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: SR_ONLY, children: announcement })
|
|
1297
|
+
] });
|
|
1256
1298
|
}
|
|
1257
1299
|
var RangePickerInput = forwardRef(
|
|
1258
1300
|
function RangePickerInput2({ part, format: formatProp, onClick, onKeyDown, ...props }, ref) {
|
|
@@ -1352,17 +1394,6 @@ function safeFormatFullDate2(iso, locale) {
|
|
|
1352
1394
|
return iso;
|
|
1353
1395
|
}
|
|
1354
1396
|
}
|
|
1355
|
-
var srOnly2 = {
|
|
1356
|
-
position: "absolute",
|
|
1357
|
-
width: "1px",
|
|
1358
|
-
height: "1px",
|
|
1359
|
-
padding: 0,
|
|
1360
|
-
margin: "-1px",
|
|
1361
|
-
overflow: "hidden",
|
|
1362
|
-
clip: "rect(0, 0, 0, 0)",
|
|
1363
|
-
whiteSpace: "nowrap",
|
|
1364
|
-
border: 0
|
|
1365
|
-
};
|
|
1366
1397
|
function RangePickerCalendar({
|
|
1367
1398
|
classNames,
|
|
1368
1399
|
selectionMode = "range",
|
|
@@ -1372,7 +1403,6 @@ function RangePickerCalendar({
|
|
|
1372
1403
|
}) {
|
|
1373
1404
|
const ctx = useRangePickerContext("RangePicker.Calendar");
|
|
1374
1405
|
const gridRef = useRef(null);
|
|
1375
|
-
const [announcement, setAnnouncement] = useState("");
|
|
1376
1406
|
const {
|
|
1377
1407
|
adapter,
|
|
1378
1408
|
viewMonth,
|
|
@@ -1424,7 +1454,7 @@ function RangePickerCalendar({
|
|
|
1424
1454
|
ctx.setFocusedDate(adapter.startOfMonth(newMonth));
|
|
1425
1455
|
const y = adapter.getYear(newMonth);
|
|
1426
1456
|
const m = adapter.getMonth(newMonth);
|
|
1427
|
-
|
|
1457
|
+
ctx.announce(formatMonthYear(y, m, locale));
|
|
1428
1458
|
},
|
|
1429
1459
|
[adapter, viewMonth, ctx, locale]
|
|
1430
1460
|
);
|
|
@@ -1436,15 +1466,27 @@ function RangePickerCalendar({
|
|
|
1436
1466
|
const range = { start: weekStart, end: weekEnd };
|
|
1437
1467
|
ctx.setRange(range);
|
|
1438
1468
|
ctx.close();
|
|
1439
|
-
|
|
1440
|
-
`${safeFormatFullDate2(weekStart, locale)} \u2013 ${safeFormatFullDate2(weekEnd, locale)}`
|
|
1469
|
+
ctx.announce(
|
|
1470
|
+
`${ctx.labels.rangeSelected}: ${safeFormatFullDate2(weekStart, locale)} \u2013 ${safeFormatFullDate2(weekEnd, locale)}`
|
|
1441
1471
|
);
|
|
1442
1472
|
} else {
|
|
1473
|
+
const wasPickingStart = selectingTarget === "start";
|
|
1474
|
+
const previousStart = value.start;
|
|
1443
1475
|
ctx.selectDate(iso);
|
|
1444
|
-
|
|
1476
|
+
const formatted = safeFormatFullDate2(iso, locale);
|
|
1477
|
+
if (wasPickingStart) {
|
|
1478
|
+
ctx.announce(`${formatted}. ${ctx.labels.selectingEnd}`);
|
|
1479
|
+
} else if (previousStart) {
|
|
1480
|
+
const [start, end] = adapter.isBefore(iso, previousStart) ? [iso, previousStart] : [previousStart, iso];
|
|
1481
|
+
ctx.announce(
|
|
1482
|
+
`${ctx.labels.rangeSelected}: ${safeFormatFullDate2(start, locale)} \u2013 ${safeFormatFullDate2(end, locale)}`
|
|
1483
|
+
);
|
|
1484
|
+
} else {
|
|
1485
|
+
ctx.announce(formatted);
|
|
1486
|
+
}
|
|
1445
1487
|
}
|
|
1446
1488
|
},
|
|
1447
|
-
[selectionMode, adapter, weekStartsOn, ctx, locale]
|
|
1489
|
+
[selectionMode, adapter, weekStartsOn, ctx, locale, selectingTarget, value.start]
|
|
1448
1490
|
);
|
|
1449
1491
|
const handleDayClick = useCallback(
|
|
1450
1492
|
(day) => {
|
|
@@ -1653,8 +1695,7 @@ function RangePickerCalendar({
|
|
|
1653
1695
|
)) })
|
|
1654
1696
|
]
|
|
1655
1697
|
}
|
|
1656
|
-
)
|
|
1657
|
-
/* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: srOnly2, children: announcement })
|
|
1698
|
+
)
|
|
1658
1699
|
] });
|
|
1659
1700
|
}
|
|
1660
1701
|
function RangePickerPresets({ classNames, children, ...props }) {
|
|
@@ -1712,35 +1753,28 @@ function RangePickerPreset({
|
|
|
1712
1753
|
...props
|
|
1713
1754
|
}) {
|
|
1714
1755
|
const ctx = useRangePickerContext("RangePicker.Preset");
|
|
1756
|
+
const resolved = useMemo(() => {
|
|
1757
|
+
if (directRange) return directRange;
|
|
1758
|
+
if (presetKey)
|
|
1759
|
+
return resolvePreset(presetKey, ctx.adapter.today(ctx.displayTimezone), ctx.adapter);
|
|
1760
|
+
return null;
|
|
1761
|
+
}, [directRange, presetKey, ctx.adapter, ctx.displayTimezone]);
|
|
1715
1762
|
const handleClick = useCallback(
|
|
1716
1763
|
(e) => {
|
|
1717
1764
|
if (ctx.isDisabled || ctx.isReadOnly) return;
|
|
1718
|
-
|
|
1719
|
-
if (directRange) {
|
|
1720
|
-
resolved = directRange;
|
|
1721
|
-
} else if (presetKey) {
|
|
1722
|
-
resolved = resolvePreset(presetKey, ctx.adapter.today(), ctx.adapter);
|
|
1723
|
-
} else {
|
|
1724
|
-
return;
|
|
1725
|
-
}
|
|
1765
|
+
if (!resolved) return;
|
|
1726
1766
|
ctx.setRange(resolved);
|
|
1727
1767
|
ctx.close();
|
|
1728
1768
|
onClick?.(e);
|
|
1729
1769
|
},
|
|
1730
|
-
[ctx,
|
|
1770
|
+
[ctx, resolved, onClick]
|
|
1731
1771
|
);
|
|
1732
|
-
const isActive = (() => {
|
|
1733
|
-
if (!ctx.value.start || !ctx.value.end)
|
|
1734
|
-
let target;
|
|
1735
|
-
if (directRange) {
|
|
1736
|
-
target = directRange;
|
|
1737
|
-
} else if (presetKey) {
|
|
1738
|
-
target = resolvePreset(presetKey, ctx.adapter.today(), ctx.adapter);
|
|
1739
|
-
} else {
|
|
1772
|
+
const isActive = useMemo(() => {
|
|
1773
|
+
if (!ctx.value.start || !ctx.value.end || !resolved || !resolved.start || !resolved.end) {
|
|
1740
1774
|
return false;
|
|
1741
1775
|
}
|
|
1742
|
-
return
|
|
1743
|
-
})
|
|
1776
|
+
return ctx.adapter.isSameDay(ctx.value.start, resolved.start) && ctx.adapter.isSameDay(ctx.value.end, resolved.end);
|
|
1777
|
+
}, [ctx.value.start, ctx.value.end, ctx.adapter, resolved]);
|
|
1744
1778
|
return /* @__PURE__ */ jsx(
|
|
1745
1779
|
"button",
|
|
1746
1780
|
{
|
|
@@ -1778,9 +1812,6 @@ function useTimePickerContext(componentName) {
|
|
|
1778
1812
|
}
|
|
1779
1813
|
return context;
|
|
1780
1814
|
}
|
|
1781
|
-
function getDefaultIso() {
|
|
1782
|
-
return DateFnsAdapter.today();
|
|
1783
|
-
}
|
|
1784
1815
|
function TimePickerRoot({
|
|
1785
1816
|
value: controlledValue,
|
|
1786
1817
|
defaultValue,
|
|
@@ -1792,9 +1823,11 @@ function TimePickerRoot({
|
|
|
1792
1823
|
disabled = false,
|
|
1793
1824
|
readOnly = false,
|
|
1794
1825
|
filterTime,
|
|
1826
|
+
adapter: adapterProp,
|
|
1795
1827
|
labels: labelsProp,
|
|
1796
1828
|
children
|
|
1797
1829
|
}) {
|
|
1830
|
+
const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "TimePicker");
|
|
1798
1831
|
const pickerId = useId();
|
|
1799
1832
|
const mergedLabels = useMemo(
|
|
1800
1833
|
() => ({ ...DEFAULT_TIMEPICKER_LABELS, ...labelsProp }),
|
|
@@ -1805,21 +1838,21 @@ function TimePickerRoot({
|
|
|
1805
1838
|
defaultValue ?? null
|
|
1806
1839
|
);
|
|
1807
1840
|
const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
|
|
1808
|
-
const
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
);
|
|
1841
|
+
const currentTime = useMemo(() => {
|
|
1842
|
+
if (!currentValue) return { hours: 0, minutes: 0, seconds: 0 };
|
|
1843
|
+
return displayTimezone ? getTimeInTimezone(currentValue, displayTimezone) : getTime(currentValue);
|
|
1844
|
+
}, [currentValue, displayTimezone]);
|
|
1813
1845
|
const setTime$1 = useCallback(
|
|
1814
1846
|
(partial) => {
|
|
1815
1847
|
if (disabled || readOnly) return;
|
|
1816
|
-
const
|
|
1848
|
+
const base = currentValue ?? adapter.today(displayTimezone);
|
|
1849
|
+
const newIso = displayTimezone ? setTimeInTimezone(base, partial, displayTimezone) : setTime(base, partial);
|
|
1817
1850
|
if (!isControlled) {
|
|
1818
1851
|
setUncontrolledValue(newIso);
|
|
1819
1852
|
}
|
|
1820
1853
|
onChange?.(newIso);
|
|
1821
1854
|
},
|
|
1822
|
-
[disabled, readOnly,
|
|
1855
|
+
[disabled, readOnly, currentValue, displayTimezone, isControlled, onChange, adapter]
|
|
1823
1856
|
);
|
|
1824
1857
|
const contextValue = useMemo(
|
|
1825
1858
|
() => ({
|
|
@@ -1857,6 +1890,9 @@ var TimePickerInput = forwardRef(
|
|
|
1857
1890
|
function TimePickerInput2({ onBlur, onKeyDown, ...props }, ref) {
|
|
1858
1891
|
const ctx = useTimePickerContext("TimePicker.Input");
|
|
1859
1892
|
const [inputText, setInputText] = useState(null);
|
|
1893
|
+
useEffect(() => {
|
|
1894
|
+
setInputText(null);
|
|
1895
|
+
}, [ctx.value]);
|
|
1860
1896
|
const displayValue = inputText !== null ? inputText : formatTimeString(ctx.currentTime, ctx.withSeconds);
|
|
1861
1897
|
const commitInput = useCallback(() => {
|
|
1862
1898
|
if (inputText === null) return;
|
|
@@ -2176,9 +2212,6 @@ var TimePicker = Object.assign(TimePickerRoot, {
|
|
|
2176
2212
|
MinuteList: TimePickerMinuteList,
|
|
2177
2213
|
AmPmToggle: TimePickerAmPmToggle
|
|
2178
2214
|
});
|
|
2179
|
-
function getDefaultIso2() {
|
|
2180
|
-
return DateFnsAdapter.today();
|
|
2181
|
-
}
|
|
2182
2215
|
function DateTimePickerRoot({
|
|
2183
2216
|
value: controlledValue,
|
|
2184
2217
|
defaultValue,
|
|
@@ -2187,16 +2220,19 @@ function DateTimePickerRoot({
|
|
|
2187
2220
|
onCalendarNavigate,
|
|
2188
2221
|
format = "24h",
|
|
2189
2222
|
step = 1,
|
|
2223
|
+
withSeconds = false,
|
|
2224
|
+
filterTime,
|
|
2190
2225
|
disabled = false,
|
|
2191
2226
|
readOnly = false,
|
|
2192
2227
|
weekStartsOn = 0,
|
|
2193
2228
|
displayFormat = "yyyy-MM-dd HH:mm",
|
|
2194
2229
|
locale = "en-US",
|
|
2195
2230
|
displayTimezone,
|
|
2196
|
-
adapter
|
|
2231
|
+
adapter: adapterProp,
|
|
2197
2232
|
labels: labelsProp,
|
|
2198
2233
|
children
|
|
2199
2234
|
}) {
|
|
2235
|
+
const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "DateTimePicker");
|
|
2200
2236
|
const pickerId = useId();
|
|
2201
2237
|
const mergedDateLabels = useMemo(
|
|
2202
2238
|
() => ({ ...DEFAULT_DATEPICKER_LABELS, ...labelsProp }),
|
|
@@ -2227,11 +2263,10 @@ function DateTimePickerRoot({
|
|
|
2227
2263
|
() => Array.isArray(disabled) ? disabled : [],
|
|
2228
2264
|
[disabled]
|
|
2229
2265
|
);
|
|
2230
|
-
const
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
);
|
|
2266
|
+
const currentTime = useMemo(() => {
|
|
2267
|
+
if (!currentValue) return { hours: 0, minutes: 0, seconds: 0 };
|
|
2268
|
+
return displayTimezone ? getTimeInTimezone(currentValue, displayTimezone) : getTime(currentValue);
|
|
2269
|
+
}, [currentValue, displayTimezone]);
|
|
2235
2270
|
const updateValue = useCallback(
|
|
2236
2271
|
(next) => {
|
|
2237
2272
|
if (isDisabled || readOnly) return;
|
|
@@ -2257,11 +2292,11 @@ function DateTimePickerRoot({
|
|
|
2257
2292
|
);
|
|
2258
2293
|
const setTime$1 = useCallback(
|
|
2259
2294
|
(partial) => {
|
|
2260
|
-
const base = currentValue ??
|
|
2295
|
+
const base = currentValue ?? adapter.today(displayTimezone);
|
|
2261
2296
|
const merged = displayTimezone ? setTimeInTimezone(base, partial, displayTimezone) : setTime(base, partial);
|
|
2262
2297
|
updateValue(merged);
|
|
2263
2298
|
},
|
|
2264
|
-
[currentValue, updateValue, displayTimezone]
|
|
2299
|
+
[currentValue, updateValue, displayTimezone, adapter]
|
|
2265
2300
|
);
|
|
2266
2301
|
const open = useCallback(() => {
|
|
2267
2302
|
if (isDisabled || readOnly) return;
|
|
@@ -2328,25 +2363,28 @@ function DateTimePickerRoot({
|
|
|
2328
2363
|
setTime: setTime$1,
|
|
2329
2364
|
format,
|
|
2330
2365
|
step,
|
|
2331
|
-
withSeconds
|
|
2366
|
+
withSeconds,
|
|
2332
2367
|
displayTimezone,
|
|
2333
2368
|
isDisabled,
|
|
2334
2369
|
isReadOnly: readOnly,
|
|
2335
2370
|
currentTime,
|
|
2336
2371
|
pickerId,
|
|
2337
|
-
labels: mergedTimeLabels
|
|
2372
|
+
labels: mergedTimeLabels,
|
|
2373
|
+
filterTime
|
|
2338
2374
|
}),
|
|
2339
2375
|
[
|
|
2340
2376
|
currentValue,
|
|
2341
2377
|
setTime$1,
|
|
2342
2378
|
format,
|
|
2343
2379
|
step,
|
|
2380
|
+
withSeconds,
|
|
2344
2381
|
displayTimezone,
|
|
2345
2382
|
isDisabled,
|
|
2346
2383
|
readOnly,
|
|
2347
2384
|
currentTime,
|
|
2348
2385
|
pickerId,
|
|
2349
|
-
mergedTimeLabels
|
|
2386
|
+
mergedTimeLabels,
|
|
2387
|
+
filterTime
|
|
2350
2388
|
]
|
|
2351
2389
|
);
|
|
2352
2390
|
return /* @__PURE__ */ jsx(DatePickerContext.Provider, { value: dateContext, children: /* @__PURE__ */ jsx(TimePickerContext.Provider, { value: timeContext, children }) });
|
|
@@ -2729,9 +2767,10 @@ function useDatePicker(options = {}) {
|
|
|
2729
2767
|
onChange,
|
|
2730
2768
|
disabled = [],
|
|
2731
2769
|
weekStartsOn = 0,
|
|
2732
|
-
adapter
|
|
2770
|
+
adapter: adapterProp,
|
|
2733
2771
|
displayTimezone
|
|
2734
2772
|
} = options;
|
|
2773
|
+
const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "useDatePicker");
|
|
2735
2774
|
const pickerId = useId();
|
|
2736
2775
|
const isControlled = useRef(controlledValue !== void 0).current;
|
|
2737
2776
|
const [uncontrolledValue, setUncontrolledValue] = useState(
|
|
@@ -2812,9 +2851,10 @@ function useRangePicker(options = {}) {
|
|
|
2812
2851
|
onChange,
|
|
2813
2852
|
disabled = [],
|
|
2814
2853
|
weekStartsOn = 0,
|
|
2815
|
-
adapter
|
|
2854
|
+
adapter: adapterProp,
|
|
2816
2855
|
displayTimezone
|
|
2817
2856
|
} = options;
|
|
2857
|
+
const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "useRangePicker");
|
|
2818
2858
|
const pickerId = useId();
|
|
2819
2859
|
const isControlled = useRef(controlledValue !== void 0).current;
|
|
2820
2860
|
const [uncontrolledValue, setUncontrolledValue] = useState(
|
|
@@ -2919,9 +2959,6 @@ function useRangePicker(options = {}) {
|
|
|
2919
2959
|
adapter
|
|
2920
2960
|
};
|
|
2921
2961
|
}
|
|
2922
|
-
function getDefaultIso3() {
|
|
2923
|
-
return DateFnsAdapter.today();
|
|
2924
|
-
}
|
|
2925
2962
|
function useTimePicker(options = {}) {
|
|
2926
2963
|
const {
|
|
2927
2964
|
value: controlledValue,
|
|
@@ -2929,15 +2966,17 @@ function useTimePicker(options = {}) {
|
|
|
2929
2966
|
onChange,
|
|
2930
2967
|
format = "24h",
|
|
2931
2968
|
step = 1,
|
|
2932
|
-
displayTimezone
|
|
2969
|
+
displayTimezone,
|
|
2970
|
+
adapter: adapterProp
|
|
2933
2971
|
} = options;
|
|
2972
|
+
const adapter = resolveAdapter(adapterProp, getDefaultAdapter(), "useTimePicker");
|
|
2934
2973
|
const pickerId = useId();
|
|
2935
2974
|
const isControlled = useRef(controlledValue !== void 0).current;
|
|
2936
2975
|
const [uncontrolledValue, setUncontrolledValue] = useState(
|
|
2937
2976
|
defaultValue ?? null
|
|
2938
2977
|
);
|
|
2939
2978
|
const currentValue = isControlled ? controlledValue ?? null : uncontrolledValue;
|
|
2940
|
-
const baseIso = currentValue ??
|
|
2979
|
+
const baseIso = currentValue ?? adapter.today();
|
|
2941
2980
|
const currentTime = useMemo(
|
|
2942
2981
|
() => displayTimezone ? getTimeInTimezone(baseIso, displayTimezone) : getTime(baseIso),
|
|
2943
2982
|
[baseIso, displayTimezone]
|
|
@@ -2987,6 +3026,7 @@ function useTimePicker(options = {}) {
|
|
|
2987
3026
|
pickerId
|
|
2988
3027
|
};
|
|
2989
3028
|
}
|
|
3029
|
+
setDefaultAdapter(DateFnsAdapter);
|
|
2990
3030
|
|
|
2991
3031
|
export { DatePicker, DateTimePicker, MonthPicker, RangePicker, TimePicker, WeekPicker, YearPicker, useDatePicker, useRangePicker, useTimePicker };
|
|
2992
3032
|
//# sourceMappingURL=index.js.map
|