@uipath/apollo-wind 2.80.0 → 2.81.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
                         })
                     ]
                 })

package/dist/components/ui/field-addons/field-addon-button.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    FIELD_ADDON_BUTTON_CLASS: ()=>FIELD_ADDON_BUTTON_CLASS
+});
+const FIELD_ADDON_BUTTON_CLASS = 'size-6 shrink-0 rounded-md p-0 text-muted-foreground hover:bg-accent hover:text-foreground';
+exports.FIELD_ADDON_BUTTON_CLASS = __webpack_exports__.FIELD_ADDON_BUTTON_CLASS;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FIELD_ADDON_BUTTON_CLASS"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/field-addons/field-addon-button.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The square icon button an `InputGroupAddon` expects, on a 3xs InputGroupButton. Shared by
+ * FieldMenu's trigger and QuickFormField's lock toggle so both addon slots match, and not
+ * exported from the package.
+ */
+export declare const FIELD_ADDON_BUTTON_CLASS = "size-6 shrink-0 rounded-md p-0 text-muted-foreground hover:bg-accent hover:text-foreground";

package/dist/components/ui/field-addons/field-addon-button.js

@@ -0,0 +1,2 @@
+const FIELD_ADDON_BUTTON_CLASS = 'size-6 shrink-0 rounded-md p-0 text-muted-foreground hover:bg-accent hover:text-foreground';
+export { FIELD_ADDON_BUTTON_CLASS };

package/dist/components/ui/field-addons/field-menu.cjs

@@ -29,10 +29,11 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
-const external_button_cjs_namespaceObject = require("../button.cjs");
 const external_dropdown_menu_cjs_namespaceObject = require("../dropdown-menu.cjs");
+const external_input_group_cjs_namespaceObject = require("../input-group.cjs");
 const index_cjs_namespaceObject = require("../../../lib/index.cjs");
 const external_built_in_value_modes_cjs_namespaceObject = require("./built-in-value-modes.cjs");
+const external_field_addon_button_cjs_namespaceObject = require("./field-addon-button.cjs");
 const external_value_mode_strings_cjs_namespaceObject = require("./value-mode-strings.cjs");
 const DEFAULT_MODES = [
     'literal',
@@ -90,13 +91,11 @@ function FieldMenu({ mode, onSelect, modes, extraModes, actions, checked, modesD
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
                 asChild: true,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
-                    type: "button",
-                    variant: "ghost",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupButton, {
                     size: "3xs",
                     disabled: disabled,
                     "aria-label": triggerLabel,
-                    className: "size-6 shrink-0 rounded-md p-0 text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:size-3.5",
+                    className: external_field_addon_button_cjs_namespaceObject.FIELD_ADDON_BUTTON_CLASS,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TriggerIcon, {})
                 })
             }),

package/dist/components/ui/field-addons/field-menu.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { MoreHorizontal, Type } from "lucide-react";
-import { Button } from "../button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu.js";
+import { InputGroupButton } from "../input-group.js";
 import { cn } from "../../../lib/index.js";
 import { builtInValueModes, isBuiltInValueMode } from "./built-in-value-modes.js";
+import { FIELD_ADDON_BUTTON_CLASS } from "./field-addon-button.js";
 import { DEFAULT_VALUE_MODE_STRINGS } from "./value-mode-strings.js";
 const DEFAULT_MODES = [
     'literal',
@@ -61,13 +62,11 @@ function FieldMenu({ mode, onSelect, modes, extraModes, actions, checked, modesD
         children: [
             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                 asChild: true,
-                children: /*#__PURE__*/ jsx(Button, {
-                    type: "button",
-                    variant: "ghost",
+                children: /*#__PURE__*/ jsx(InputGroupButton, {
                     size: "3xs",
                     disabled: disabled,
                     "aria-label": triggerLabel,
-                    className: "size-6 shrink-0 rounded-md p-0 text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:size-3.5",
+                    className: FIELD_ADDON_BUTTON_CLASS,
                     children: /*#__PURE__*/ jsx(TriggerIcon, {})
                 })
             }),