@bsol-oss/react-datatable5 13.0.1-beta.29 → 13.0.1-beta.30
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/index.js +41 -89
- package/dist/index.mjs +41 -89
- package/dist/types/components/DatePicker/DateTimePicker.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4465,6 +4465,7 @@ function DatePickerInput({ value, onChange, placeholder = 'Select a date', dateF
|
|
|
4465
4465
|
}, timezone = 'Asia/Hong_Kong', minDate, maxDate, firstDayOfWeek, showOutsideDays, monthsToDisplay = 1, insideDialog = false, readOnly = false, showHelperButtons = true, }) {
|
|
4466
4466
|
const [open, setOpen] = React.useState(false);
|
|
4467
4467
|
const [inputValue, setInputValue] = React.useState('');
|
|
4468
|
+
const initialFocusEl = React.useRef(null);
|
|
4468
4469
|
// Sync inputValue with value prop changes
|
|
4469
4470
|
React.useEffect(() => {
|
|
4470
4471
|
if (value) {
|
|
@@ -4600,7 +4601,7 @@ function DatePickerInput({ value, onChange, placeholder = 'Select a date', dateF
|
|
|
4600
4601
|
const yesterday = getYesterday();
|
|
4601
4602
|
const tomorrow = getTomorrow();
|
|
4602
4603
|
const datePickerContent = (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [showHelperButtons && (jsxRuntime.jsxs(react.Grid, { templateColumns: "repeat(3, 1fr)", gap: 2, children: [jsxRuntime.jsx(react.Button, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(yesterday), disabled: !isDateValid(yesterday), children: labels.yesterdayLabel ?? 'Yesterday' }), jsxRuntime.jsx(react.Button, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(today), disabled: !isDateValid(today), children: labels.todayLabel ?? 'Today' }), jsxRuntime.jsx(react.Button, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(tomorrow), disabled: !isDateValid(tomorrow), children: labels.tomorrowLabel ?? 'Tomorrow' })] })), jsxRuntime.jsx(DatePicker$1, { selected: selectedDate, onDateSelected: handleDateSelected, labels: labels, minDate: minDate, maxDate: maxDate, firstDayOfWeek: firstDayOfWeek, showOutsideDays: showOutsideDays, monthsToDisplay: monthsToDisplay })] }));
|
|
4603
|
-
return (jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside:
|
|
4604
|
+
return (jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: false, autoFocus: false, initialFocusEl: () => initialFocusEl.current, children: [jsxRuntime.jsx(InputGroup, { endElement: jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdDateRange, {}) }) }) }), children: jsxRuntime.jsx(react.Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, readOnly: readOnly, ref: initialFocusEl }) }), jsxRuntime.jsx(react.Portal, { disabled: insideDialog, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) }) })] }));
|
|
4604
4605
|
}
|
|
4605
4606
|
|
|
4606
4607
|
dayjs.extend(utc);
|
|
@@ -4617,6 +4618,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
4617
4618
|
const [open, setOpen] = React.useState(false);
|
|
4618
4619
|
const [inputValue, setInputValue] = React.useState('');
|
|
4619
4620
|
const selectedDate = watch(colLabel);
|
|
4621
|
+
const initialFocusEl = React.useRef(null);
|
|
4620
4622
|
// Update input value when form value changes
|
|
4621
4623
|
React.useEffect(() => {
|
|
4622
4624
|
if (selectedDate) {
|
|
@@ -4767,8 +4769,8 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
4767
4769
|
setOpen(false);
|
|
4768
4770
|
};
|
|
4769
4771
|
const datePickerContent = (jsxRuntime.jsx(DatePicker$1, { selected: selectedDateObj, onDateSelected: handleDateSelected, labels: datePickerLabels }));
|
|
4770
|
-
return (jsxRuntime.
|
|
4771
|
-
gridRow, errorText: jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldError }), invalid: !!fieldError, children: jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside:
|
|
4772
|
+
return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
|
|
4773
|
+
gridRow, errorText: jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldError }), invalid: !!fieldError, children: [jsxRuntime.jsx("input", { type: "hidden", name: colLabel, value: selectedDate ?? '', readOnly: true, "aria-hidden": true }), jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), initialFocusEl: () => initialFocusEl.current, closeOnInteractOutside: false, autoFocus: false, children: [jsxRuntime.jsx(InputGroup, { endElement: jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsxRuntime.jsx(react.Icon, { children: jsxRuntime.jsx(md.MdDateRange, {}) }) }) }), children: jsxRuntime.jsx(react.Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: formI18n.label(), ref: initialFocusEl, size: "sm", "aria-label": formI18n.label() }) }), jsxRuntime.jsx(react.Portal, { disabled: insideDialog, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minH: "25rem", children: jsxRuntime.jsx(react.Popover.Body, { children: datePickerContent }) }) }) })] })] }));
|
|
4772
4774
|
};
|
|
4773
4775
|
|
|
4774
4776
|
dayjs.extend(utc);
|
|
@@ -6874,7 +6876,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
6874
6876
|
weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
|
6875
6877
|
backButtonLabel: 'Back',
|
|
6876
6878
|
forwardButtonLabel: 'Forward',
|
|
6877
|
-
}, timePickerLabels, timezone: tz = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, defaultDate, defaultTime,
|
|
6879
|
+
}, timePickerLabels, timezone: tz = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, defaultDate, defaultTime, quickActionLabels = {
|
|
6878
6880
|
yesterday: 'Yesterday',
|
|
6879
6881
|
today: 'Today',
|
|
6880
6882
|
tomorrow: 'Tomorrow',
|
|
@@ -6898,9 +6900,11 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
6898
6900
|
}
|
|
6899
6901
|
if (defaultDate) {
|
|
6900
6902
|
const defaultDateObj = dayjs(defaultDate).tz(tz);
|
|
6901
|
-
return defaultDateObj.isValid()
|
|
6903
|
+
return defaultDateObj.isValid()
|
|
6904
|
+
? defaultDateObj.toDate()
|
|
6905
|
+
: dayjs().tz(tz).toDate();
|
|
6902
6906
|
}
|
|
6903
|
-
return
|
|
6907
|
+
return dayjs().tz(tz).toDate();
|
|
6904
6908
|
});
|
|
6905
6909
|
// Initialize time state
|
|
6906
6910
|
const [hour, setHour] = React.useState(() => {
|
|
@@ -6940,8 +6944,8 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
6940
6944
|
}
|
|
6941
6945
|
return is24Hour ? null : 'am';
|
|
6942
6946
|
});
|
|
6947
|
+
const dateInitialFocusEl = React.useRef(null);
|
|
6943
6948
|
// Popover state - separate for date, time, and timezone
|
|
6944
|
-
const [datePopoverOpen, setDatePopoverOpen] = React.useState(false);
|
|
6945
6949
|
const [timePopoverOpen, setTimePopoverOpen] = React.useState(false);
|
|
6946
6950
|
const [timezonePopoverOpen, setTimezonePopoverOpen] = React.useState(false);
|
|
6947
6951
|
const [calendarPopoverOpen, setCalendarPopoverOpen] = React.useState(false);
|
|
@@ -7081,43 +7085,13 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7081
7085
|
parseAndValidateDateInput(dateInputValue);
|
|
7082
7086
|
}
|
|
7083
7087
|
};
|
|
7084
|
-
// Helper functions to get dates in the correct timezone
|
|
7085
|
-
const getToday = () => dayjs().tz(tz).startOf('day').toDate();
|
|
7086
|
-
const getYesterday = () => dayjs().tz(tz).subtract(1, 'day').startOf('day').toDate();
|
|
7087
|
-
const getTomorrow = () => dayjs().tz(tz).add(1, 'day').startOf('day').toDate();
|
|
7088
|
-
const getPlus7Days = () => dayjs().tz(tz).add(7, 'day').startOf('day').toDate();
|
|
7089
|
-
// Check if a date is within min/max constraints
|
|
7090
|
-
const isDateValid = (date) => {
|
|
7091
|
-
if (minDate) {
|
|
7092
|
-
const minDateStart = dayjs(minDate).tz(tz).startOf('day').toDate();
|
|
7093
|
-
const dateStart = dayjs(date).tz(tz).startOf('day').toDate();
|
|
7094
|
-
if (dateStart < minDateStart)
|
|
7095
|
-
return false;
|
|
7096
|
-
}
|
|
7097
|
-
if (maxDate) {
|
|
7098
|
-
const maxDateStart = dayjs(maxDate).tz(tz).startOf('day').toDate();
|
|
7099
|
-
const dateStart = dayjs(date).tz(tz).startOf('day').toDate();
|
|
7100
|
-
if (dateStart > maxDateStart)
|
|
7101
|
-
return false;
|
|
7102
|
-
}
|
|
7103
|
-
return true;
|
|
7104
|
-
};
|
|
7105
|
-
// Handle quick action button clicks
|
|
7106
|
-
const handleQuickActionClick = (date) => {
|
|
7107
|
-
if (isDateValid(date)) {
|
|
7108
|
-
setSelectedDate(date);
|
|
7109
|
-
updateDateTime(date, hour, minute, second, meridiem);
|
|
7110
|
-
// Close the calendar popover if open
|
|
7111
|
-
setCalendarPopoverOpen(false);
|
|
7112
|
-
}
|
|
7113
|
-
};
|
|
7114
7088
|
// Display text for buttons
|
|
7115
|
-
|
|
7089
|
+
React.useMemo(() => {
|
|
7116
7090
|
if (!selectedDate)
|
|
7117
7091
|
return labels?.selectDateLabel ?? 'Select date';
|
|
7118
7092
|
return dayjs(selectedDate).tz(tz).format('YYYY-MM-DD');
|
|
7119
7093
|
}, [selectedDate, tz, labels]);
|
|
7120
|
-
|
|
7094
|
+
React.useMemo(() => {
|
|
7121
7095
|
const selectTimeLabel = timePickerLabels?.selectTimeLabel ?? 'Select time';
|
|
7122
7096
|
if (hour === null || minute === null)
|
|
7123
7097
|
return selectTimeLabel;
|
|
@@ -7246,6 +7220,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7246
7220
|
const handleDateSelected = ({ date, }) => {
|
|
7247
7221
|
setSelectedDate(date);
|
|
7248
7222
|
updateDateTime(date, hour, minute, second, meridiem);
|
|
7223
|
+
setCalendarPopoverOpen(false);
|
|
7249
7224
|
};
|
|
7250
7225
|
// Handle time change
|
|
7251
7226
|
const handleTimeChange = (newHour, newMinute, newSecond, newMeridiem) => {
|
|
@@ -7523,14 +7498,13 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7523
7498
|
if (hour === null || minute === null) {
|
|
7524
7499
|
return '';
|
|
7525
7500
|
}
|
|
7526
|
-
|
|
7527
|
-
return `${hour}:${minute}:${s}`;
|
|
7501
|
+
return `${hour}:${minute}`;
|
|
7528
7502
|
}
|
|
7529
7503
|
else {
|
|
7530
7504
|
if (hour === null || minute === null || meridiem === null) {
|
|
7531
7505
|
return '';
|
|
7532
7506
|
}
|
|
7533
|
-
return `${hour}:${minute}
|
|
7507
|
+
return `${(hour % 12 || 12).toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')} ${meridiem}`;
|
|
7534
7508
|
}
|
|
7535
7509
|
}, [hour, minute, second, meridiem, is24Hour]);
|
|
7536
7510
|
// Parse custom time input formats like "1400", "2pm", "14:00", "2:00 PM"
|
|
@@ -7671,13 +7645,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7671
7645
|
}
|
|
7672
7646
|
return { hour: null, minute: null, second: null, meridiem: null };
|
|
7673
7647
|
};
|
|
7674
|
-
const
|
|
7675
|
-
if (details.value.length === 0) {
|
|
7676
|
-
handleTimeChange(null, null, null, null);
|
|
7677
|
-
filter('');
|
|
7678
|
-
return;
|
|
7679
|
-
}
|
|
7680
|
-
const selectedValue = details.value[0];
|
|
7648
|
+
const handleTimeOptionSelect = (selectedValue) => {
|
|
7681
7649
|
const selectedOption = timeOptions.find((opt) => opt.value === selectedValue);
|
|
7682
7650
|
if (selectedOption) {
|
|
7683
7651
|
filter('');
|
|
@@ -7689,19 +7657,28 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7689
7657
|
const opt12 = selectedOption;
|
|
7690
7658
|
handleTimeChange(opt12.hour, opt12.minute, null, opt12.meridiem);
|
|
7691
7659
|
}
|
|
7660
|
+
setTimePopoverOpen(false);
|
|
7692
7661
|
}
|
|
7693
7662
|
};
|
|
7694
7663
|
// Track the current input value for Enter key handling
|
|
7695
7664
|
const [timeInputValue, setTimeInputValue] = React.useState('');
|
|
7696
|
-
const
|
|
7697
|
-
|
|
7698
|
-
|
|
7699
|
-
|
|
7665
|
+
const timeInitialFocusEl = React.useRef(null);
|
|
7666
|
+
const timeDisplayValue = timePopoverOpen ? timeInputValue : currentTimeValue;
|
|
7667
|
+
const handleTimeInputChange = (e) => {
|
|
7668
|
+
const value = e.target.value;
|
|
7669
|
+
setTimeInputValue(value);
|
|
7670
|
+
filter(value);
|
|
7700
7671
|
};
|
|
7701
7672
|
const handleTimeInputKeyDown = (e) => {
|
|
7702
7673
|
if (e.key === 'Enter') {
|
|
7703
7674
|
e.preventDefault();
|
|
7704
|
-
|
|
7675
|
+
const trimmed = timeInputValue.trim();
|
|
7676
|
+
if (trimmed === '') {
|
|
7677
|
+
filter('');
|
|
7678
|
+
setTimeInputValue('');
|
|
7679
|
+
setTimePopoverOpen(false);
|
|
7680
|
+
return;
|
|
7681
|
+
}
|
|
7705
7682
|
const parsed = parseCustomTimeInput(timeInputValue);
|
|
7706
7683
|
if (parsed.hour !== null && parsed.minute !== null) {
|
|
7707
7684
|
if (is24Hour) {
|
|
@@ -7709,27 +7686,21 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7709
7686
|
}
|
|
7710
7687
|
else {
|
|
7711
7688
|
if (parsed.meridiem !== null) {
|
|
7712
|
-
handleTimeChange(parsed.hour, parsed.minute,
|
|
7689
|
+
handleTimeChange(parsed.hour, parsed.minute, parsed.second, parsed.meridiem);
|
|
7713
7690
|
}
|
|
7714
7691
|
}
|
|
7715
|
-
// Clear the filter and input value after applying
|
|
7716
7692
|
filter('');
|
|
7717
7693
|
setTimeInputValue('');
|
|
7718
|
-
// Close the popover if value is valid
|
|
7719
7694
|
setTimePopoverOpen(false);
|
|
7720
7695
|
}
|
|
7721
7696
|
}
|
|
7722
7697
|
};
|
|
7723
|
-
return (jsxRuntime.jsxs(react.
|
|
7724
|
-
|
|
7725
|
-
|
|
7726
|
-
|
|
7727
|
-
|
|
7728
|
-
|
|
7729
|
-
(is24Hour ? 'HH:mm' : 'hh:mm AM/PM'), onKeyDown: handleTimeInputKeyDown }) }), jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: jsxRuntime.jsx(react.Combobox.Trigger, {}) })] }), jsxRuntime.jsx(react.Portal, { disabled: true, children: jsxRuntime.jsx(react.Combobox.Positioner, { children: jsxRuntime.jsxs(react.Combobox.Content, { children: [jsxRuntime.jsx(react.Combobox.Empty, { children: timePickerLabels?.emptyMessage ?? 'No time found' }), collection.items.map((item) => {
|
|
7730
|
-
const option = item;
|
|
7731
|
-
return (jsxRuntime.jsxs(react.Combobox.Item, { item: item, children: [jsxRuntime.jsxs(react.Flex, { justify: "space-between", align: "center", w: "100%", children: [jsxRuntime.jsx(react.Text, { children: option.label }), option.durationText && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", children: option.durationText }))] }), jsxRuntime.jsx(react.Combobox.ItemIndicator, {})] }, option.value));
|
|
7732
|
-
})] }) }) })] }) }) }) }) }))] }), showTimezoneSelector && (jsxRuntime.jsxs(react.Popover.Root, { open: timezonePopoverOpen, onOpenChange: (e) => setTimezonePopoverOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.Button, { size: "sm", variant: "outline", onClick: () => setTimezonePopoverOpen(true), justifyContent: "start", children: timezoneDisplayText || 'Select timezone' }) }), portalled ? (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "250px", children: jsxRuntime.jsx(react.Popover.Body, { p: 4, children: jsxRuntime.jsx(react.Grid, { gap: 2, children: jsxRuntime.jsxs(react.Select.Root, { size: "sm", collection: timezoneCollection, value: validTimezoneOffset ? [validTimezoneOffset] : [], onValueChange: (e) => {
|
|
7698
|
+
return (jsxRuntime.jsxs(react.HStack, { justifyContent: 'start', alignItems: 'center', gap: 2, children: [jsxRuntime.jsx(react.InputGroup, { endElement: jsxRuntime.jsxs(react.Popover.Root, { open: calendarPopoverOpen, onOpenChange: (e) => setCalendarPopoverOpen(e.open), closeOnInteractOutside: false, autoFocus: false, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.Button, { variant: "ghost", size: "xs", "aria-label": "Open calendar", onClick: () => setCalendarPopoverOpen(true), children: jsxRuntime.jsx(md.MdDateRange, {}) }) }), jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", zIndex: 1500, children: jsxRuntime.jsx(react.Popover.Body, { p: 4, children: jsxRuntime.jsx(DatePickerContext.Provider, { value: { labels: calendarLabels }, children: jsxRuntime.jsx(Calendar, { ...calendarProps, firstDayOfWeek: 0 }) }) }) }) })] }), children: jsxRuntime.jsx(react.Input, { value: dateInputValue, onChange: handleDateInputChange, onBlur: handleDateInputBlur, onKeyDown: handleDateInputKeyDown, placeholder: "YYYY-MM-DD", ref: dateInitialFocusEl }) }), jsxRuntime.jsxs(react.Popover.Root, { open: timePopoverOpen, onOpenChange: (e) => setTimePopoverOpen(e.open), initialFocusEl: () => timeInitialFocusEl.current, closeOnInteractOutside: true, autoFocus: false, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.InputGroup, { startElement: jsxRuntime.jsx(bs.BsClock, {}), children: jsxRuntime.jsx(react.Input, { value: timeDisplayValue, onChange: handleTimeInputChange, onKeyDown: handleTimeInputKeyDown, placeholder: timePickerLabels?.placeholder ??
|
|
7699
|
+
(is24Hour ? 'HH:mm' : 'hh:mm AM/PM'), ref: timeInitialFocusEl }) }) }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { overflowY: "auto", children: jsxRuntime.jsx(react.Popover.Body, { p: 0, maxH: "70vh", width: "fit-content", children: collection.items.length === 0 ? (jsxRuntime.jsx(react.Text, { px: 3, py: 2, color: "gray.500", fontSize: "sm", children: timePickerLabels?.emptyMessage ?? 'No time found' })) : (collection.items.map((item) => {
|
|
7700
|
+
const option = item;
|
|
7701
|
+
const isSelected = option.value === currentTimeValue;
|
|
7702
|
+
return (jsxRuntime.jsx(react.Button, { variant: "ghost", size: "sm", w: "100%", borderRadius: 0, fontWeight: isSelected ? 'semibold' : 'normal', onClick: () => handleTimeOptionSelect(option.value), children: jsxRuntime.jsxs(react.Flex, { justify: "space-between", align: "center", w: "100%", children: [jsxRuntime.jsx(react.Text, { children: option.label }), option.durationText && (jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.500", children: option.durationText }))] }) }, option.value));
|
|
7703
|
+
})) }) }) }) })] }), showTimezoneSelector && (jsxRuntime.jsxs(react.Popover.Root, { open: timezonePopoverOpen, onOpenChange: (e) => setTimezonePopoverOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsx(react.Button, { size: "sm", variant: "outline", onClick: () => setTimezonePopoverOpen(true), justifyContent: "start", children: timezoneDisplayText || 'Select timezone' }) }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { width: "fit-content", minW: "250px", children: jsxRuntime.jsx(react.Popover.Body, { p: 4, children: jsxRuntime.jsx(react.Grid, { gap: 2, children: jsxRuntime.jsxs(react.Select.Root, { size: "sm", collection: timezoneCollection, value: validTimezoneOffset ? [validTimezoneOffset] : [], onValueChange: (e) => {
|
|
7733
7704
|
const newOffset = e.value[0];
|
|
7734
7705
|
if (newOffset) {
|
|
7735
7706
|
// Update controlled or internal state
|
|
@@ -7748,26 +7719,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7748
7719
|
// Close popover after selection
|
|
7749
7720
|
setTimezonePopoverOpen(false);
|
|
7750
7721
|
}
|
|
7751
|
-
}, children: [jsxRuntime.jsxs(react.Select.Control, { children: [jsxRuntime.jsx(react.Select.Trigger, {}), jsxRuntime.jsx(react.Select.IndicatorGroup, { children: jsxRuntime.jsx(react.Select.Indicator, {}) })] }), jsxRuntime.jsx(react.Select.Positioner, { children: jsxRuntime.jsx(react.Select.Content, { children: timezoneCollection.items.map((item) => (jsxRuntime.jsxs(react.Select.Item, { item: item, children: [jsxRuntime.jsx(react.Select.ItemText, { children: item.label }), jsxRuntime.jsx(react.Select.ItemIndicator, {})] }, item.value))) }) })] }) }) }) }) }) })
|
|
7752
|
-
const newOffset = e.value[0];
|
|
7753
|
-
if (newOffset) {
|
|
7754
|
-
// Update controlled or internal state
|
|
7755
|
-
if (onTimezoneOffsetChange) {
|
|
7756
|
-
onTimezoneOffsetChange(newOffset);
|
|
7757
|
-
}
|
|
7758
|
-
else {
|
|
7759
|
-
setInternalTimezoneOffset(newOffset);
|
|
7760
|
-
}
|
|
7761
|
-
// Update date-time with new offset (pass it directly to avoid stale state)
|
|
7762
|
-
if (selectedDate &&
|
|
7763
|
-
hour !== null &&
|
|
7764
|
-
minute !== null) {
|
|
7765
|
-
updateDateTime(selectedDate, hour, minute, second, meridiem, newOffset);
|
|
7766
|
-
}
|
|
7767
|
-
// Close popover after selection
|
|
7768
|
-
setTimezonePopoverOpen(false);
|
|
7769
|
-
}
|
|
7770
|
-
}, children: [jsxRuntime.jsxs(react.Select.Control, { children: [jsxRuntime.jsx(react.Select.Trigger, {}), jsxRuntime.jsx(react.Select.IndicatorGroup, { children: jsxRuntime.jsx(react.Select.Indicator, {}) })] }), jsxRuntime.jsx(react.Select.Positioner, { children: jsxRuntime.jsx(react.Select.Content, { children: timezoneCollection.items.map((item) => (jsxRuntime.jsxs(react.Select.Item, { item: item, children: [jsxRuntime.jsx(react.Select.ItemText, { children: item.label }), jsxRuntime.jsx(react.Select.ItemIndicator, {})] }, item.value))) }) })] }) }) }) }) }))] }))] }));
|
|
7722
|
+
}, children: [jsxRuntime.jsxs(react.Select.Control, { children: [jsxRuntime.jsx(react.Select.Trigger, {}), jsxRuntime.jsx(react.Select.IndicatorGroup, { children: jsxRuntime.jsx(react.Select.Indicator, {}) })] }), jsxRuntime.jsx(react.Select.Positioner, { children: jsxRuntime.jsx(react.Select.Content, { children: timezoneCollection.items.map((item) => (jsxRuntime.jsxs(react.Select.Item, { item: item, children: [jsxRuntime.jsx(react.Select.ItemText, { children: item.label }), jsxRuntime.jsx(react.Select.ItemIndicator, {})] }, item.value))) }) })] }) }) }) }) }) })] }))] }));
|
|
7771
7723
|
}
|
|
7772
7724
|
|
|
7773
7725
|
dayjs.extend(utc);
|
|
@@ -7825,8 +7777,8 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
|
|
|
7825
7777
|
}
|
|
7826
7778
|
}, timezone: timezone, labels: dateTimePickerLabelsConfig, timePickerLabels: timePickerLabels, showQuickActions: dateTimePicker?.showQuickActions ?? false, quickActionLabels: dateTimePickerLabels?.quickActionLabels ??
|
|
7827
7779
|
dateTimePicker?.quickActionLabels, showTimezoneSelector: dateTimePicker?.showTimezoneSelector ?? false }));
|
|
7828
|
-
return (jsxRuntime.
|
|
7829
|
-
gridRow, errorText: jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldError }), invalid: !!fieldError, children: dateTimePickerContent }));
|
|
7780
|
+
return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
|
|
7781
|
+
gridRow, errorText: jsxRuntime.jsx(jsxRuntime.Fragment, { children: fieldError }), invalid: !!fieldError, children: [jsxRuntime.jsx("input", { type: "hidden", name: colLabel, value: selectedDate ?? '', readOnly: true, "aria-hidden": true }), dateTimePickerContent] }));
|
|
7830
7782
|
};
|
|
7831
7783
|
|
|
7832
7784
|
const SchemaRenderer = ({ schema, prefix, column, }) => {
|
package/dist/index.mjs
CHANGED
|
@@ -4445,6 +4445,7 @@ function DatePickerInput({ value, onChange, placeholder = 'Select a date', dateF
|
|
|
4445
4445
|
}, timezone = 'Asia/Hong_Kong', minDate, maxDate, firstDayOfWeek, showOutsideDays, monthsToDisplay = 1, insideDialog = false, readOnly = false, showHelperButtons = true, }) {
|
|
4446
4446
|
const [open, setOpen] = useState(false);
|
|
4447
4447
|
const [inputValue, setInputValue] = useState('');
|
|
4448
|
+
const initialFocusEl = useRef(null);
|
|
4448
4449
|
// Sync inputValue with value prop changes
|
|
4449
4450
|
useEffect(() => {
|
|
4450
4451
|
if (value) {
|
|
@@ -4580,7 +4581,7 @@ function DatePickerInput({ value, onChange, placeholder = 'Select a date', dateF
|
|
|
4580
4581
|
const yesterday = getYesterday();
|
|
4581
4582
|
const tomorrow = getTomorrow();
|
|
4582
4583
|
const datePickerContent = (jsxs(Grid, { gap: 2, children: [showHelperButtons && (jsxs(Grid, { templateColumns: "repeat(3, 1fr)", gap: 2, children: [jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(yesterday), disabled: !isDateValid(yesterday), children: labels.yesterdayLabel ?? 'Yesterday' }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(today), disabled: !isDateValid(today), children: labels.todayLabel ?? 'Today' }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(tomorrow), disabled: !isDateValid(tomorrow), children: labels.tomorrowLabel ?? 'Tomorrow' })] })), jsx(DatePicker$1, { selected: selectedDate, onDateSelected: handleDateSelected, labels: labels, minDate: minDate, maxDate: maxDate, firstDayOfWeek: firstDayOfWeek, showOutsideDays: showOutsideDays, monthsToDisplay: monthsToDisplay })] }));
|
|
4583
|
-
return (jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside:
|
|
4584
|
+
return (jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: false, autoFocus: false, initialFocusEl: () => initialFocusEl.current, children: [jsx(InputGroup, { endElement: jsx(Popover.Trigger, { asChild: true, children: jsx(IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsx(Icon, { children: jsx(MdDateRange, {}) }) }) }), children: jsx(Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, readOnly: readOnly, ref: initialFocusEl }) }), jsx(Portal, { disabled: insideDialog, children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) }) })] }));
|
|
4584
4585
|
}
|
|
4585
4586
|
|
|
4586
4587
|
dayjs.extend(utc);
|
|
@@ -4597,6 +4598,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
4597
4598
|
const [open, setOpen] = useState(false);
|
|
4598
4599
|
const [inputValue, setInputValue] = useState('');
|
|
4599
4600
|
const selectedDate = watch(colLabel);
|
|
4601
|
+
const initialFocusEl = useRef(null);
|
|
4600
4602
|
// Update input value when form value changes
|
|
4601
4603
|
useEffect(() => {
|
|
4602
4604
|
if (selectedDate) {
|
|
@@ -4747,8 +4749,8 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
4747
4749
|
setOpen(false);
|
|
4748
4750
|
};
|
|
4749
4751
|
const datePickerContent = (jsx(DatePicker$1, { selected: selectedDateObj, onDateSelected: handleDateSelected, labels: datePickerLabels }));
|
|
4750
|
-
return (
|
|
4751
|
-
gridRow, errorText: jsx(Fragment, { children: fieldError }), invalid: !!fieldError, children: jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside:
|
|
4752
|
+
return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
|
|
4753
|
+
gridRow, errorText: jsx(Fragment, { children: fieldError }), invalid: !!fieldError, children: [jsx("input", { type: "hidden", name: colLabel, value: selectedDate ?? '', readOnly: true, "aria-hidden": true }), jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), initialFocusEl: () => initialFocusEl.current, closeOnInteractOutside: false, autoFocus: false, children: [jsx(InputGroup, { endElement: jsx(Popover.Trigger, { asChild: true, children: jsx(IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsx(Icon, { children: jsx(MdDateRange, {}) }) }) }), children: jsx(Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: formI18n.label(), ref: initialFocusEl, size: "sm", "aria-label": formI18n.label() }) }), jsx(Portal, { disabled: insideDialog, children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) }) })] })] }));
|
|
4752
4754
|
};
|
|
4753
4755
|
|
|
4754
4756
|
dayjs.extend(utc);
|
|
@@ -6854,7 +6856,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
6854
6856
|
weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
|
6855
6857
|
backButtonLabel: 'Back',
|
|
6856
6858
|
forwardButtonLabel: 'Forward',
|
|
6857
|
-
}, timePickerLabels, timezone: tz = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, defaultDate, defaultTime,
|
|
6859
|
+
}, timePickerLabels, timezone: tz = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, defaultDate, defaultTime, quickActionLabels = {
|
|
6858
6860
|
yesterday: 'Yesterday',
|
|
6859
6861
|
today: 'Today',
|
|
6860
6862
|
tomorrow: 'Tomorrow',
|
|
@@ -6878,9 +6880,11 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
6878
6880
|
}
|
|
6879
6881
|
if (defaultDate) {
|
|
6880
6882
|
const defaultDateObj = dayjs(defaultDate).tz(tz);
|
|
6881
|
-
return defaultDateObj.isValid()
|
|
6883
|
+
return defaultDateObj.isValid()
|
|
6884
|
+
? defaultDateObj.toDate()
|
|
6885
|
+
: dayjs().tz(tz).toDate();
|
|
6882
6886
|
}
|
|
6883
|
-
return
|
|
6887
|
+
return dayjs().tz(tz).toDate();
|
|
6884
6888
|
});
|
|
6885
6889
|
// Initialize time state
|
|
6886
6890
|
const [hour, setHour] = useState(() => {
|
|
@@ -6920,8 +6924,8 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
6920
6924
|
}
|
|
6921
6925
|
return is24Hour ? null : 'am';
|
|
6922
6926
|
});
|
|
6927
|
+
const dateInitialFocusEl = useRef(null);
|
|
6923
6928
|
// Popover state - separate for date, time, and timezone
|
|
6924
|
-
const [datePopoverOpen, setDatePopoverOpen] = useState(false);
|
|
6925
6929
|
const [timePopoverOpen, setTimePopoverOpen] = useState(false);
|
|
6926
6930
|
const [timezonePopoverOpen, setTimezonePopoverOpen] = useState(false);
|
|
6927
6931
|
const [calendarPopoverOpen, setCalendarPopoverOpen] = useState(false);
|
|
@@ -7061,43 +7065,13 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7061
7065
|
parseAndValidateDateInput(dateInputValue);
|
|
7062
7066
|
}
|
|
7063
7067
|
};
|
|
7064
|
-
// Helper functions to get dates in the correct timezone
|
|
7065
|
-
const getToday = () => dayjs().tz(tz).startOf('day').toDate();
|
|
7066
|
-
const getYesterday = () => dayjs().tz(tz).subtract(1, 'day').startOf('day').toDate();
|
|
7067
|
-
const getTomorrow = () => dayjs().tz(tz).add(1, 'day').startOf('day').toDate();
|
|
7068
|
-
const getPlus7Days = () => dayjs().tz(tz).add(7, 'day').startOf('day').toDate();
|
|
7069
|
-
// Check if a date is within min/max constraints
|
|
7070
|
-
const isDateValid = (date) => {
|
|
7071
|
-
if (minDate) {
|
|
7072
|
-
const minDateStart = dayjs(minDate).tz(tz).startOf('day').toDate();
|
|
7073
|
-
const dateStart = dayjs(date).tz(tz).startOf('day').toDate();
|
|
7074
|
-
if (dateStart < minDateStart)
|
|
7075
|
-
return false;
|
|
7076
|
-
}
|
|
7077
|
-
if (maxDate) {
|
|
7078
|
-
const maxDateStart = dayjs(maxDate).tz(tz).startOf('day').toDate();
|
|
7079
|
-
const dateStart = dayjs(date).tz(tz).startOf('day').toDate();
|
|
7080
|
-
if (dateStart > maxDateStart)
|
|
7081
|
-
return false;
|
|
7082
|
-
}
|
|
7083
|
-
return true;
|
|
7084
|
-
};
|
|
7085
|
-
// Handle quick action button clicks
|
|
7086
|
-
const handleQuickActionClick = (date) => {
|
|
7087
|
-
if (isDateValid(date)) {
|
|
7088
|
-
setSelectedDate(date);
|
|
7089
|
-
updateDateTime(date, hour, minute, second, meridiem);
|
|
7090
|
-
// Close the calendar popover if open
|
|
7091
|
-
setCalendarPopoverOpen(false);
|
|
7092
|
-
}
|
|
7093
|
-
};
|
|
7094
7068
|
// Display text for buttons
|
|
7095
|
-
|
|
7069
|
+
useMemo(() => {
|
|
7096
7070
|
if (!selectedDate)
|
|
7097
7071
|
return labels?.selectDateLabel ?? 'Select date';
|
|
7098
7072
|
return dayjs(selectedDate).tz(tz).format('YYYY-MM-DD');
|
|
7099
7073
|
}, [selectedDate, tz, labels]);
|
|
7100
|
-
|
|
7074
|
+
useMemo(() => {
|
|
7101
7075
|
const selectTimeLabel = timePickerLabels?.selectTimeLabel ?? 'Select time';
|
|
7102
7076
|
if (hour === null || minute === null)
|
|
7103
7077
|
return selectTimeLabel;
|
|
@@ -7226,6 +7200,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7226
7200
|
const handleDateSelected = ({ date, }) => {
|
|
7227
7201
|
setSelectedDate(date);
|
|
7228
7202
|
updateDateTime(date, hour, minute, second, meridiem);
|
|
7203
|
+
setCalendarPopoverOpen(false);
|
|
7229
7204
|
};
|
|
7230
7205
|
// Handle time change
|
|
7231
7206
|
const handleTimeChange = (newHour, newMinute, newSecond, newMeridiem) => {
|
|
@@ -7503,14 +7478,13 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7503
7478
|
if (hour === null || minute === null) {
|
|
7504
7479
|
return '';
|
|
7505
7480
|
}
|
|
7506
|
-
|
|
7507
|
-
return `${hour}:${minute}:${s}`;
|
|
7481
|
+
return `${hour}:${minute}`;
|
|
7508
7482
|
}
|
|
7509
7483
|
else {
|
|
7510
7484
|
if (hour === null || minute === null || meridiem === null) {
|
|
7511
7485
|
return '';
|
|
7512
7486
|
}
|
|
7513
|
-
return `${hour}:${minute}
|
|
7487
|
+
return `${(hour % 12 || 12).toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')} ${meridiem}`;
|
|
7514
7488
|
}
|
|
7515
7489
|
}, [hour, minute, second, meridiem, is24Hour]);
|
|
7516
7490
|
// Parse custom time input formats like "1400", "2pm", "14:00", "2:00 PM"
|
|
@@ -7651,13 +7625,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7651
7625
|
}
|
|
7652
7626
|
return { hour: null, minute: null, second: null, meridiem: null };
|
|
7653
7627
|
};
|
|
7654
|
-
const
|
|
7655
|
-
if (details.value.length === 0) {
|
|
7656
|
-
handleTimeChange(null, null, null, null);
|
|
7657
|
-
filter('');
|
|
7658
|
-
return;
|
|
7659
|
-
}
|
|
7660
|
-
const selectedValue = details.value[0];
|
|
7628
|
+
const handleTimeOptionSelect = (selectedValue) => {
|
|
7661
7629
|
const selectedOption = timeOptions.find((opt) => opt.value === selectedValue);
|
|
7662
7630
|
if (selectedOption) {
|
|
7663
7631
|
filter('');
|
|
@@ -7669,19 +7637,28 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7669
7637
|
const opt12 = selectedOption;
|
|
7670
7638
|
handleTimeChange(opt12.hour, opt12.minute, null, opt12.meridiem);
|
|
7671
7639
|
}
|
|
7640
|
+
setTimePopoverOpen(false);
|
|
7672
7641
|
}
|
|
7673
7642
|
};
|
|
7674
7643
|
// Track the current input value for Enter key handling
|
|
7675
7644
|
const [timeInputValue, setTimeInputValue] = useState('');
|
|
7676
|
-
const
|
|
7677
|
-
|
|
7678
|
-
|
|
7679
|
-
|
|
7645
|
+
const timeInitialFocusEl = useRef(null);
|
|
7646
|
+
const timeDisplayValue = timePopoverOpen ? timeInputValue : currentTimeValue;
|
|
7647
|
+
const handleTimeInputChange = (e) => {
|
|
7648
|
+
const value = e.target.value;
|
|
7649
|
+
setTimeInputValue(value);
|
|
7650
|
+
filter(value);
|
|
7680
7651
|
};
|
|
7681
7652
|
const handleTimeInputKeyDown = (e) => {
|
|
7682
7653
|
if (e.key === 'Enter') {
|
|
7683
7654
|
e.preventDefault();
|
|
7684
|
-
|
|
7655
|
+
const trimmed = timeInputValue.trim();
|
|
7656
|
+
if (trimmed === '') {
|
|
7657
|
+
filter('');
|
|
7658
|
+
setTimeInputValue('');
|
|
7659
|
+
setTimePopoverOpen(false);
|
|
7660
|
+
return;
|
|
7661
|
+
}
|
|
7685
7662
|
const parsed = parseCustomTimeInput(timeInputValue);
|
|
7686
7663
|
if (parsed.hour !== null && parsed.minute !== null) {
|
|
7687
7664
|
if (is24Hour) {
|
|
@@ -7689,27 +7666,21 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7689
7666
|
}
|
|
7690
7667
|
else {
|
|
7691
7668
|
if (parsed.meridiem !== null) {
|
|
7692
|
-
handleTimeChange(parsed.hour, parsed.minute,
|
|
7669
|
+
handleTimeChange(parsed.hour, parsed.minute, parsed.second, parsed.meridiem);
|
|
7693
7670
|
}
|
|
7694
7671
|
}
|
|
7695
|
-
// Clear the filter and input value after applying
|
|
7696
7672
|
filter('');
|
|
7697
7673
|
setTimeInputValue('');
|
|
7698
|
-
// Close the popover if value is valid
|
|
7699
7674
|
setTimePopoverOpen(false);
|
|
7700
7675
|
}
|
|
7701
7676
|
}
|
|
7702
7677
|
};
|
|
7703
|
-
return (jsxs(
|
|
7704
|
-
|
|
7705
|
-
|
|
7706
|
-
|
|
7707
|
-
|
|
7708
|
-
|
|
7709
|
-
(is24Hour ? 'HH:mm' : 'hh:mm AM/PM'), onKeyDown: handleTimeInputKeyDown }) }), jsx(Combobox.IndicatorGroup, { children: jsx(Combobox.Trigger, {}) })] }), jsx(Portal, { disabled: true, children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: timePickerLabels?.emptyMessage ?? 'No time found' }), collection.items.map((item) => {
|
|
7710
|
-
const option = item;
|
|
7711
|
-
return (jsxs(Combobox.Item, { item: item, children: [jsxs(Flex, { justify: "space-between", align: "center", w: "100%", children: [jsx(Text, { children: option.label }), option.durationText && (jsx(Text, { fontSize: "xs", color: "gray.500", children: option.durationText }))] }), jsx(Combobox.ItemIndicator, {})] }, option.value));
|
|
7712
|
-
})] }) }) })] }) }) }) }) }))] }), showTimezoneSelector && (jsxs(Popover.Root, { open: timezonePopoverOpen, onOpenChange: (e) => setTimezonePopoverOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsx(Button$1, { size: "sm", variant: "outline", onClick: () => setTimezonePopoverOpen(true), justifyContent: "start", children: timezoneDisplayText || 'Select timezone' }) }), portalled ? (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "250px", children: jsx(Popover.Body, { p: 4, children: jsx(Grid, { gap: 2, children: jsxs(Select.Root, { size: "sm", collection: timezoneCollection, value: validTimezoneOffset ? [validTimezoneOffset] : [], onValueChange: (e) => {
|
|
7678
|
+
return (jsxs(HStack, { justifyContent: 'start', alignItems: 'center', gap: 2, children: [jsx(InputGroup$1, { endElement: jsxs(Popover.Root, { open: calendarPopoverOpen, onOpenChange: (e) => setCalendarPopoverOpen(e.open), closeOnInteractOutside: false, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsx(Button$1, { variant: "ghost", size: "xs", "aria-label": "Open calendar", onClick: () => setCalendarPopoverOpen(true), children: jsx(MdDateRange, {}) }) }), jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", zIndex: 1500, children: jsx(Popover.Body, { p: 4, children: jsx(DatePickerContext.Provider, { value: { labels: calendarLabels }, children: jsx(Calendar, { ...calendarProps, firstDayOfWeek: 0 }) }) }) }) })] }), children: jsx(Input, { value: dateInputValue, onChange: handleDateInputChange, onBlur: handleDateInputBlur, onKeyDown: handleDateInputKeyDown, placeholder: "YYYY-MM-DD", ref: dateInitialFocusEl }) }), jsxs(Popover.Root, { open: timePopoverOpen, onOpenChange: (e) => setTimePopoverOpen(e.open), initialFocusEl: () => timeInitialFocusEl.current, closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Input, { value: timeDisplayValue, onChange: handleTimeInputChange, onKeyDown: handleTimeInputKeyDown, placeholder: timePickerLabels?.placeholder ??
|
|
7679
|
+
(is24Hour ? 'HH:mm' : 'hh:mm AM/PM'), ref: timeInitialFocusEl }) }) }), jsx(Portal, { disabled: !portalled, children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { overflowY: "auto", children: jsx(Popover.Body, { p: 0, maxH: "70vh", width: "fit-content", children: collection.items.length === 0 ? (jsx(Text, { px: 3, py: 2, color: "gray.500", fontSize: "sm", children: timePickerLabels?.emptyMessage ?? 'No time found' })) : (collection.items.map((item) => {
|
|
7680
|
+
const option = item;
|
|
7681
|
+
const isSelected = option.value === currentTimeValue;
|
|
7682
|
+
return (jsx(Button$1, { variant: "ghost", size: "sm", w: "100%", borderRadius: 0, fontWeight: isSelected ? 'semibold' : 'normal', onClick: () => handleTimeOptionSelect(option.value), children: jsxs(Flex, { justify: "space-between", align: "center", w: "100%", children: [jsx(Text, { children: option.label }), option.durationText && (jsx(Text, { fontSize: "xs", color: "gray.500", children: option.durationText }))] }) }, option.value));
|
|
7683
|
+
})) }) }) }) })] }), showTimezoneSelector && (jsxs(Popover.Root, { open: timezonePopoverOpen, onOpenChange: (e) => setTimezonePopoverOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsx(Button$1, { size: "sm", variant: "outline", onClick: () => setTimezonePopoverOpen(true), justifyContent: "start", children: timezoneDisplayText || 'Select timezone' }) }), jsx(Portal, { disabled: !portalled, children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "250px", children: jsx(Popover.Body, { p: 4, children: jsx(Grid, { gap: 2, children: jsxs(Select.Root, { size: "sm", collection: timezoneCollection, value: validTimezoneOffset ? [validTimezoneOffset] : [], onValueChange: (e) => {
|
|
7713
7684
|
const newOffset = e.value[0];
|
|
7714
7685
|
if (newOffset) {
|
|
7715
7686
|
// Update controlled or internal state
|
|
@@ -7728,26 +7699,7 @@ function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds =
|
|
|
7728
7699
|
// Close popover after selection
|
|
7729
7700
|
setTimezonePopoverOpen(false);
|
|
7730
7701
|
}
|
|
7731
|
-
}, children: [jsxs(Select.Control, { children: [jsx(Select.Trigger, {}), jsx(Select.IndicatorGroup, { children: jsx(Select.Indicator, {}) })] }), jsx(Select.Positioner, { children: jsx(Select.Content, { children: timezoneCollection.items.map((item) => (jsxs(Select.Item, { item: item, children: [jsx(Select.ItemText, { children: item.label }), jsx(Select.ItemIndicator, {})] }, item.value))) }) })] }) }) }) }) }) })
|
|
7732
|
-
const newOffset = e.value[0];
|
|
7733
|
-
if (newOffset) {
|
|
7734
|
-
// Update controlled or internal state
|
|
7735
|
-
if (onTimezoneOffsetChange) {
|
|
7736
|
-
onTimezoneOffsetChange(newOffset);
|
|
7737
|
-
}
|
|
7738
|
-
else {
|
|
7739
|
-
setInternalTimezoneOffset(newOffset);
|
|
7740
|
-
}
|
|
7741
|
-
// Update date-time with new offset (pass it directly to avoid stale state)
|
|
7742
|
-
if (selectedDate &&
|
|
7743
|
-
hour !== null &&
|
|
7744
|
-
minute !== null) {
|
|
7745
|
-
updateDateTime(selectedDate, hour, minute, second, meridiem, newOffset);
|
|
7746
|
-
}
|
|
7747
|
-
// Close popover after selection
|
|
7748
|
-
setTimezonePopoverOpen(false);
|
|
7749
|
-
}
|
|
7750
|
-
}, children: [jsxs(Select.Control, { children: [jsx(Select.Trigger, {}), jsx(Select.IndicatorGroup, { children: jsx(Select.Indicator, {}) })] }), jsx(Select.Positioner, { children: jsx(Select.Content, { children: timezoneCollection.items.map((item) => (jsxs(Select.Item, { item: item, children: [jsx(Select.ItemText, { children: item.label }), jsx(Select.ItemIndicator, {})] }, item.value))) }) })] }) }) }) }) }))] }))] }));
|
|
7702
|
+
}, children: [jsxs(Select.Control, { children: [jsx(Select.Trigger, {}), jsx(Select.IndicatorGroup, { children: jsx(Select.Indicator, {}) })] }), jsx(Select.Positioner, { children: jsx(Select.Content, { children: timezoneCollection.items.map((item) => (jsxs(Select.Item, { item: item, children: [jsx(Select.ItemText, { children: item.label }), jsx(Select.ItemIndicator, {})] }, item.value))) }) })] }) }) }) }) }) })] }))] }));
|
|
7751
7703
|
}
|
|
7752
7704
|
|
|
7753
7705
|
dayjs.extend(utc);
|
|
@@ -7805,8 +7757,8 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
|
|
|
7805
7757
|
}
|
|
7806
7758
|
}, timezone: timezone, labels: dateTimePickerLabelsConfig, timePickerLabels: timePickerLabels, showQuickActions: dateTimePicker?.showQuickActions ?? false, quickActionLabels: dateTimePickerLabels?.quickActionLabels ??
|
|
7807
7759
|
dateTimePicker?.quickActionLabels, showTimezoneSelector: dateTimePicker?.showTimezoneSelector ?? false }));
|
|
7808
|
-
return (
|
|
7809
|
-
gridRow, errorText: jsx(Fragment, { children: fieldError }), invalid: !!fieldError, children: dateTimePickerContent }));
|
|
7760
|
+
return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
|
|
7761
|
+
gridRow, errorText: jsx(Fragment, { children: fieldError }), invalid: !!fieldError, children: [jsx("input", { type: "hidden", name: colLabel, value: selectedDate ?? '', readOnly: true, "aria-hidden": true }), dateTimePickerContent] }));
|
|
7810
7762
|
};
|
|
7811
7763
|
|
|
7812
7764
|
const SchemaRenderer = ({ schema, prefix, column, }) => {
|
|
@@ -29,5 +29,5 @@ interface DateTimePickerProps {
|
|
|
29
29
|
timezoneOffset?: string;
|
|
30
30
|
onTimezoneOffsetChange?: (offset: string) => void;
|
|
31
31
|
}
|
|
32
|
-
export declare function DateTimePicker({ value, onChange, format, showSeconds, labels, timePickerLabels, timezone: tz, startTime, minDate, maxDate, portalled, defaultDate, defaultTime,
|
|
32
|
+
export declare function DateTimePicker({ value, onChange, format, showSeconds, labels, timePickerLabels, timezone: tz, startTime, minDate, maxDate, portalled, defaultDate, defaultTime, quickActionLabels, showTimezoneSelector, timezoneOffset: controlledTimezoneOffset, onTimezoneOffsetChange, }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
33
33
|
export {};
|