@uipath/apollo-wind 2.80.1 → 2.82.0

package/dist/components/ui/datetime-picker.js

@@ -1,33 +1,45 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { format, isValid } from "date-fns";
+import { isValid } from "date-fns";
 import { CalendarIcon, Clock } from "lucide-react";
 import { forwardRef, useId, useState } from "react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
-import { Input } from "./input.js";
 import { InputGroupPopoverTrigger } from "./input-group.js";
-import { Label } from "./label.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
+import { formatDateTime, resolveUse12Hour } from "../../lib/date-locale.js";
 import { FormFieldError } from "./form-field.js";
 import { useControlValidation, useInputGroup } from "./input-group-context.js";
-const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, onOpenChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, id, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
+import { useDateLocale, useDatePickerStrings } from "./locale-provider.js";
+import { TimeField } from "./time-field.js";
+function timeOf(date) {
+    return date ? {
+        hours: date.getHours(),
+        minutes: date.getMinutes()
+    } : void 0;
+}
+const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, onOpenChange, disabled, placeholder: placeholderProp, className, use12Hour: use12HourProp, locale: localeProp, strings: stringsProp, id, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [open, setOpenState] = useState(false);
     const setOpen = (next)=>{
         setOpenState(next);
         onOpenChange?.(next);
     };
     const generatedId = useId();
-    const validationId = errorId ?? `${id ?? `datetime-picker-${generatedId.replace(/:/g, '')}`}-error`;
+    const baseId = id ?? `datetime-picker-${generatedId.replace(/:/g, '')}`;
+    const validationId = errorId ?? `${baseId}-error`;
+    const timeLabelId = `${baseId}-time-label`;
+    const locale = useDateLocale(localeProp);
+    const strings = useDatePickerStrings(stringsProp);
+    const placeholder = placeholderProp ?? strings.pickDateTime;
     const date = value instanceof Date && isValid(value) ? value : void 0;
     const [selectedDate, setSelectedDate] = useState(date);
-    const [timeValue, setTimeValue] = useState(date ? format(date, 'HH:mm') : '');
+    const [time, setTime] = useState(()=>timeOf(date));
     const valueTime = date?.getTime();
     const [seededTime, setSeededTime] = useState(valueTime);
     if (!Object.is(valueTime, seededTime)) {
         setSeededTime(valueTime);
         setSelectedDate(date);
-        setTimeValue(date ? format(date, 'HH:mm') : '');
+        setTime(timeOf(date));
     }
     const handleDateSelect = (date)=>{
         if (!date) return;
@@ -36,26 +48,22 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
             date.setMinutes(selectedDate.getMinutes());
             date.setSeconds(selectedDate.getSeconds());
             date.setMilliseconds(selectedDate.getMilliseconds());
-        }
+        } else if (time) date.setHours(time.hours, time.minutes);
         setSelectedDate(date);
         onValueChange?.(date);
     };
-    const handleTimeChange = (e)=>{
-        const time = e.target.value;
-        setTimeValue(time);
+    const handleTimeChange = (next)=>{
+        setTime(next);
         if (!selectedDate) return;
-        const [hours, minutes] = time.split(':').map(Number);
         const newDate = new Date(selectedDate);
-        newDate.setHours(hours);
-        newDate.setMinutes(minutes);
+        newDate.setHours(next.hours);
+        newDate.setMinutes(next.minutes);
         setSelectedDate(newDate);
         onValueChange?.(newDate);
     };
     const formatDisplayValue = ()=>{
         if (!selectedDate) return null;
-        const datePart = format(selectedDate, 'PPP');
-        const timePart = format(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
-        return `${datePart} at ${timePart}`;
+        return formatDateTime(selectedDate, locale, use12HourProp);
     };
     const group = useInputGroup();
     const grouped = group.inGroup;
@@ -116,25 +124,30 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
                                     mode: "single",
                                     selected: selectedDate,
                                     onSelect: handleDateSelect,
-                                    initialFocus: true
+                                    initialFocus: true,
+                                    locale: locale
                                 }),
                                 /*#__PURE__*/ jsxs("div", {
                                     className: "border-t pt-3 space-y-2",
                                     children: [
-                                        /*#__PURE__*/ jsxs(Label, {
+                                        /*#__PURE__*/ jsxs("div", {
+                                            id: timeLabelId,
                                             className: "text-sm font-medium flex items-center gap-2",
                                             children: [
                                                 /*#__PURE__*/ jsx(Clock, {
-                                                    className: "h-4 w-4"
+                                                    className: "h-4 w-4",
+                                                    "aria-hidden": "true"
                                                 }),
-                                                "Time"
+                                                strings.time
                                             ]
                                         }),
-                                        /*#__PURE__*/ jsx(Input, {
-                                            type: "time",
-                                            value: timeValue,
-                                            onChange: handleTimeChange,
-                                            className: "w-full"
+                                        /*#__PURE__*/ jsx(TimeField, {
+                                            "aria-labelledby": timeLabelId,
+                                            value: time,
+                                            onValueChange: handleTimeChange,
+                                            use12Hour: resolveUse12Hour(use12HourProp, locale),
+                                            locale: locale,
+                                            strings: strings
                                         })
                                     ]
                                 }),
@@ -146,17 +159,17 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
                                             className: "w-full",
                                             onClick: ()=>{
                                                 setSelectedDate(void 0);
-                                                setTimeValue('');
+                                                setTime(void 0);
                                                 onValueChange?.(void 0);
                                                 setOpen(false);
                                             },
-                                            children: "Clear"
+                                            children: strings.clear
                                         }),
                                         /*#__PURE__*/ jsx(Button, {
                                             className: "w-full",
                                             onClick: ()=>setOpen(false),
                                             disabled: !selectedDate,
-                                            children: "Done"
+                                            children: strings.done
                                         })
                                     ]
                                 })

package/dist/components/ui/editable-cell.cjs

@@ -36,6 +36,7 @@ const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_checkbox_cjs_namespaceObject = require("./checkbox.cjs");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
+const external_locale_provider_cjs_namespaceObject = require("./locale-provider.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const external_select_cjs_namespaceObject = require("./select.cjs");
 function EditableCell({ cell, onUpdate }) {
@@ -200,6 +201,7 @@ function createEditableColumn(accessorKey, header, meta) {
 }
 function DatePickerCell({ value, onValueChange, onClose, placeholder }) {
     const [open, setOpen] = external_react_namespaceObject.useState(true);
+    const locale = (0, external_locale_provider_cjs_namespaceObject.useDateLocale)();
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
         open: open,
         onOpenChange: (isOpen)=>{
@@ -218,7 +220,9 @@ function DatePickerCell({ value, onValueChange, onClose, placeholder }) {
                         }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                             className: "truncate",
-                            children: value ? (0, external_date_fns_namespaceObject.format)(value, 'PP') : placeholder
+                            children: value ? (0, external_date_fns_namespaceObject.format)(value, 'PP', {
+                                locale
+                            }) : placeholder
                         })
                     ]
                 })

package/dist/components/ui/editable-cell.js

@@ -7,6 +7,7 @@ import { Input } from "./input.js";
 import { Checkbox } from "./checkbox.js";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
+import { useDateLocale } from "./locale-provider.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 function EditableCell({ cell, onUpdate }) {
@@ -171,6 +172,7 @@ function createEditableColumn(accessorKey, header, meta) {
 }
 function DatePickerCell({ value, onValueChange, onClose, placeholder }) {
     const [open, setOpen] = useState(true);
+    const locale = useDateLocale();
     return /*#__PURE__*/ jsxs(Popover, {
         open: open,
         onOpenChange: (isOpen)=>{
@@ -189,7 +191,9 @@ function DatePickerCell({ value, onValueChange, onClose, placeholder }) {
                         }),
                         /*#__PURE__*/ jsx("span", {
                             className: "truncate",
-                            children: value ? format(value, 'PP') : placeholder
+                            children: value ? format(value, 'PP', {
+                                locale
+                            }) : placeholder
                         })
                     ]
                 })