eidos-ui 3.3.0 → 3.5.0

package/dist/{chunk-MCWTQT3M.cjs → chunk-6JHVXWDV.cjs}

@@ -1,18 +1,20 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkK7T25Y3Acjs = require('./chunk-K7T25Y3A.cjs');
+var _chunkXZLSHEHEcjs = require('./chunk-XZLSHEHE.cjs');
 
 
-var _chunkTEVZHN5Icjs = require('./chunk-TEVZHN5I.cjs');
+var _chunk7VJCGKVPcjs = require('./chunk-7VJCGKVP.cjs');
 
 
-var _chunkP2JM22BFcjs = require('./chunk-P2JM22BF.cjs');
+var _chunkKIZVY57Hcjs = require('./chunk-KIZVY57H.cjs');
 
 
-var _chunkWWYJNWJYcjs = require('./chunk-WWYJNWJY.cjs');
+var _chunkDA375AI6cjs = require('./chunk-DA375AI6.cjs');
 
 
-var _chunkCUJBNRJJcjs = require('./chunk-CUJBNRJJ.cjs');
+
+
+var _chunk35LGEPLPcjs = require('./chunk-35LGEPLP.cjs');
 
 
 
@@ -634,49 +636,84 @@ var Calendar = ({
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-calendar", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-calendar-header", children: showNavigation ? granularity === "month" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWWYJNWJYcjs.Button, { variant: "text", icon: _lucidereact.ChevronLeft, onClick: handlePrevYear }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkDA375AI6cjs.Button,
+        {
+          variant: "text",
+          icon: _lucidereact.ChevronLeft,
+          onClick: handlePrevYear,
+          "aria-label": "Previous year"
+        }
+      ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-calendar-selectors", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkK7T25Y3Acjs.Select,
+        _chunkXZLSHEHEcjs.Select,
         {
           options: yearOptions,
           value: currentDate.year().toString(),
           onChange: handleYearSelect,
           clearable: false,
+          inputProps: { "aria-label": "Year" },
           dropdownProps: {
             dropdownGroup: "calendar-navigation"
           }
         }
       ) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWWYJNWJYcjs.Button, { variant: "text", icon: _lucidereact.ChevronRight, onClick: handleNextYear })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkDA375AI6cjs.Button,
+        {
+          variant: "text",
+          icon: _lucidereact.ChevronRight,
+          onClick: handleNextYear,
+          "aria-label": "Next year"
+        }
+      )
     ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWWYJNWJYcjs.Button, { variant: "text", icon: _lucidereact.ChevronLeft, onClick: handlePrevMonth }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkDA375AI6cjs.Button,
+        {
+          variant: "text",
+          icon: _lucidereact.ChevronLeft,
+          onClick: handlePrevMonth,
+          "aria-label": "Previous month"
+        }
+      ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-calendar-selectors", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkK7T25Y3Acjs.Select,
+          _chunkXZLSHEHEcjs.Select,
           {
             options: monthOptions,
             value: currentDate.month().toString(),
             onChange: handleMonthSelect,
             clearable: false,
+            inputProps: { "aria-label": "Month" },
             dropdownProps: {
               dropdownGroup: "calendar-navigation"
             }
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkK7T25Y3Acjs.Select,
+          _chunkXZLSHEHEcjs.Select,
           {
             options: yearOptions,
             value: currentDate.year().toString(),
             onChange: handleYearSelect,
             clearable: false,
+            inputProps: { "aria-label": "Year" },
             dropdownProps: {
               dropdownGroup: "calendar-navigation"
             }
           }
         )
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWWYJNWJYcjs.Button, { variant: "text", icon: _lucidereact.ChevronRight, onClick: handleNextMonth })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkDA375AI6cjs.Button,
+        {
+          variant: "text",
+          icon: _lucidereact.ChevronRight,
+          onClick: handleNextMonth,
+          "aria-label": "Next month"
+        }
+      )
     ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-calendar-label", children: currentDate.format(granularity === "month" ? "YYYY" : "MMMM YYYY") }) }),
     granularity === "month" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-calendar-month-cells", children: monthCells.map((month, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
@@ -771,7 +808,7 @@ var TimeInput = ({
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-time-input-inputs", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-time-input-input-group", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkTEVZHN5Icjs.Input,
+          _chunk7VJCGKVPcjs.Input,
           {
             type: "number",
             value: hours,
@@ -788,7 +825,7 @@ var TimeInput = ({
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-time-input-input-group", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkTEVZHN5Icjs.Input,
+          _chunk7VJCGKVPcjs.Input,
           {
             type: "number",
             value: minutes,
@@ -804,7 +841,7 @@ var TimeInput = ({
         includeSeconds && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-time-input-separator", children: ":" })
       ] }),
       includeSeconds && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-time-input-input-group", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkTEVZHN5Icjs.Input,
+        _chunk7VJCGKVPcjs.Input,
         {
           type: "number",
           value: seconds,
@@ -838,6 +875,7 @@ var DatePicker = ({
     timeFormat: "HH:mm",
     timezone: "UTC"
   },
+  label,
   placeholder = "Select date...",
   disabled = false,
   required = false,
@@ -856,7 +894,22 @@ var DatePicker = ({
   maxHeight,
   autoWidth = false
 }) => {
-  const [dropdownKey, setDropdownKey] = _react.useState.call(void 0, 0);
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const panelId = `${_react.useId.call(void 0, )}-date-panel`;
+  const panelRef = _react.useRef.call(void 0, null);
+  _chunk35LGEPLPcjs.useDialogFocus.call(void 0, isOpen, panelRef, { trapTab: false });
+  const fieldRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const element = fieldRef.current;
+    if (!element) return;
+    const named = (_nullishCoalesce(_optionalChain([element, 'access', _10 => _10.labels, 'optionalAccess', _11 => _11.length]), () => ( 0))) > 0 || element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
+    if (!named) {
+      _chunk35LGEPLPcjs.devWarn.call(void 0, 
+        "date-picker-missing-label",
+        'DatePicker: no accessible name. Pass `label` for a visible one, or `inputProps={{ "aria-label": "..." }}` where it must stay visually unlabelled - otherwise the field is announced as just "combobox". A placeholder is not a label, and disappears as soon as a date is chosen.'
+      );
+    }
+  }, []);
   const pickerTimezone = format.timezone || "UTC";
   const composeDateOnly = _react.useCallback.call(void 0, 
     (date, boundary = "start") => {
@@ -919,7 +972,7 @@ var DatePicker = ({
     [time.enabled, pickerTimezone]
   );
   const { selectedDates, rangeStart, rangeEnd } = _react.useMemo.call(void 0, () => {
-    if (!_optionalChain([value, 'optionalAccess', _10 => _10.date])) {
+    if (!_optionalChain([value, 'optionalAccess', _12 => _12.date])) {
       return { selectedDates: [], rangeStart: null, rangeEnd: null };
     }
     switch (mode) {
@@ -962,7 +1015,7 @@ var DatePicker = ({
       switch (mode) {
         case "single": {
           let dateWithTime;
-          const activeTime = _nullishCoalesce(_optionalChain([value, 'optionalAccess', _11 => _11.time]), () => ( defaultStartTime));
+          const activeTime = _nullishCoalesce(_optionalChain([value, 'optionalAccess', _13 => _13.time]), () => ( defaultStartTime));
           if (time.enabled) {
             dateWithTime = composeLocalDateTime(effectiveDate, activeTime);
           } else {
@@ -972,35 +1025,35 @@ var DatePicker = ({
             date: dateWithTime.toISOString(),
             time: time.enabled ? activeTime : void 0
           };
-          _optionalChain([onChange, 'optionalCall', _12 => _12(newValue)]);
-          setDropdownKey((prev) => prev + 1);
+          _optionalChain([onChange, 'optionalCall', _14 => _14(newValue)]);
+          setIsOpen(false);
           break;
         }
         case "multiple": {
-          const currentDates = _optionalChain([value, 'optionalAccess', _13 => _13.date]) || [];
+          const currentDates = _optionalChain([value, 'optionalAccess', _15 => _15.date]) || [];
           const currentDayjs = currentDates.map((d) => (0, import_dayjs2.default)(d));
           const existingIndex = currentDayjs.findIndex((d) => d.isSame(effectiveDate, compareUnit));
           let newDates;
           if (existingIndex >= 0) {
             newDates = currentDayjs.filter((_, index) => index !== existingIndex);
           } else {
-            const activeTime = _nullishCoalesce(_optionalChain([value, 'optionalAccess', _14 => _14.time]), () => ( defaultStartTime));
+            const activeTime = _nullishCoalesce(_optionalChain([value, 'optionalAccess', _16 => _16.time]), () => ( defaultStartTime));
             const dateWithTime = time.enabled ? composeLocalDateTime(effectiveDate, activeTime) : composeDateOnly(effectiveDate, "start");
             newDates = [...currentDayjs, dateWithTime];
           }
           const newValue = {
             date: newDates.map((d) => d.toISOString()),
-            time: time.enabled ? _nullishCoalesce(_optionalChain([value, 'optionalAccess', _15 => _15.time]), () => ( defaultStartTime)) : void 0
+            time: time.enabled ? _nullishCoalesce(_optionalChain([value, 'optionalAccess', _17 => _17.time]), () => ( defaultStartTime)) : void 0
           };
-          _optionalChain([onChange, 'optionalCall', _16 => _16(newValue)]);
+          _optionalChain([onChange, 'optionalCall', _18 => _18(newValue)]);
           break;
         }
         case "range": {
-          const currentRange = _optionalChain([value, 'optionalAccess', _17 => _17.date]) || {
+          const currentRange = _optionalChain([value, 'optionalAccess', _19 => _19.date]) || {
             start: null,
             end: null
           };
-          const currentRangeTime = _optionalChain([value, 'optionalAccess', _18 => _18.time]) || {
+          const currentRangeTime = _optionalChain([value, 'optionalAccess', _20 => _20.time]) || {
             start: defaultStartTime,
             end: defaultEndTime
           };
@@ -1010,7 +1063,7 @@ var DatePicker = ({
               date: { start: startWithTime.toISOString(), end: null },
               time: time.enabled ? currentRangeTime : void 0
             };
-            _optionalChain([onChange, 'optionalCall', _19 => _19(newValue)]);
+            _optionalChain([onChange, 'optionalCall', _21 => _21(newValue)]);
           } else {
             const start = time.enabled ? (0, import_dayjs2.default)(currentRange.start) : (0, import_dayjs2.default)(currentRange.start).tz(pickerTimezone);
             let end = effectiveDate;
@@ -1025,8 +1078,8 @@ var DatePicker = ({
               },
               time: time.enabled ? currentRangeTime : void 0
             };
-            _optionalChain([onChange, 'optionalCall', _20 => _20(newValue)]);
-            setDropdownKey((prev) => prev + 1);
+            _optionalChain([onChange, 'optionalCall', _22 => _22(newValue)]);
+            setIsOpen(false);
           }
           break;
         }
@@ -1046,7 +1099,7 @@ var DatePicker = ({
     ]
   );
   const displayValue = _react.useMemo.call(void 0, () => {
-    if (!_optionalChain([value, 'optionalAccess', _21 => _21.date])) return "";
+    if (!_optionalChain([value, 'optionalAccess', _23 => _23.date])) return "";
     const displayFmt = format.displayFormat || (granularity === "month" ? "MMM YYYY" : "MMM DD, YYYY");
     const parseDateOnlyAware = (iso) => time.enabled ? (0, import_dayjs2.default)(iso) : (0, import_dayjs2.default)(iso).tz(pickerTimezone);
     switch (mode) {
@@ -1127,8 +1180,8 @@ var DatePicker = ({
           };
         }
       })();
-      _optionalChain([onChange, 'optionalCall', _22 => _22(clearedValue)]);
-      setDropdownKey((prev) => prev + 1);
+      _optionalChain([onChange, 'optionalCall', _24 => _24(clearedValue)]);
+      setIsOpen(false);
     },
     [mode, time, onChange, defaultStartTime, defaultEndTime]
   );
@@ -1136,29 +1189,46 @@ var DatePicker = ({
     "div",
     {
       ref: triggerRef,
-      className: `eidos-date-picker-trigger${fullWidth ? ` ${_chunkCUJBNRJJcjs.fullWidthModifier.call(void 0, "eidos-date-picker-trigger")}` : ""}`,
+      className: `eidos-date-picker-trigger${fullWidth ? ` ${_chunk35LGEPLPcjs.fullWidthModifier.call(void 0, "eidos-date-picker-trigger")}` : ""}`,
+      onKeyDown: (event) => {
+        if (disabled) return;
+        if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+          event.preventDefault();
+          setIsOpen(true);
+        } else if (event.key === "Escape" && isOpen) {
+          event.preventDefault();
+          setIsOpen(false);
+        }
+      },
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkTEVZHN5Icjs.Input,
+        _chunk7VJCGKVPcjs.Input,
         {
+          ref: fieldRef,
           value: displayValue,
+          label,
           placeholder,
           disabled,
           required,
           name,
           id,
+          role: "combobox",
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpen,
+          "aria-controls": isOpen ? panelId : void 0,
           fullWidth,
           readOnly: true,
           preIcon: _lucidereact.Calendar,
           posIcon: displayValue ? _lucidereact.X : void 0,
           posIconButton: !!displayValue,
           onPosIconClick: displayValue ? handleClear : void 0,
+          posIconLabel: "Clear date",
           ...inputProps,
           clearable: false
         }
       )
     }
   );
-  const dropdownContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-date-picker-content", children: [
+  const dropdownContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: panelRef, id: panelId, className: "eidos-date-picker-content", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-date-picker-calendars-wrapper", children: Array.from({ length: numberOfCalendars }, (_, index) => {
       const calendarDate = _nullishCoalesce(calendarDates[index], () => ( (0, import_dayjs2.default)().add(index, "month")));
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1187,15 +1257,15 @@ var DatePicker = ({
       mode === "single" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         TimeInput,
         {
-          value: _optionalChain([value, 'optionalAccess', _23 => _23.time]) || defaultStartTime,
+          value: _optionalChain([value, 'optionalAccess', _25 => _25.time]) || defaultStartTime,
           onChange: (newTime) => {
-            const currentIso = _optionalChain([value, 'optionalAccess', _24 => _24.date]);
+            const currentIso = _optionalChain([value, 'optionalAccess', _26 => _26.date]);
             const newValue = {
               ...value,
               date: currentIso ? recomposeIsoWithTime(currentIso, newTime) : currentIso,
               time: newTime
             };
-            _optionalChain([onChange, 'optionalCall', _25 => _25(newValue)]);
+            _optionalChain([onChange, 'optionalCall', _27 => _27(newValue)]);
           },
           includeSeconds: time.includeSeconds,
           disabled,
@@ -1205,9 +1275,9 @@ var DatePicker = ({
       mode === "multiple" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         TimeInput,
         {
-          value: _optionalChain([value, 'optionalAccess', _26 => _26.time]) || defaultStartTime,
+          value: _optionalChain([value, 'optionalAccess', _28 => _28.time]) || defaultStartTime,
           onChange: (newTime) => {
-            const currentDates = _optionalChain([value, 'optionalAccess', _27 => _27.date]) || [];
+            const currentDates = _optionalChain([value, 'optionalAccess', _29 => _29.date]) || [];
             const newValue = {
               ...value,
               date: currentDates.map(
@@ -1215,7 +1285,7 @@ var DatePicker = ({
               ),
               time: newTime
             };
-            _optionalChain([onChange, 'optionalCall', _28 => _28(newValue)]);
+            _optionalChain([onChange, 'optionalCall', _30 => _30(newValue)]);
           },
           includeSeconds: time.includeSeconds,
           disabled,
@@ -1226,13 +1296,13 @@ var DatePicker = ({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TimeInput,
           {
-            value: _optionalChain([value, 'optionalAccess', _29 => _29.time, 'optionalAccess', _30 => _30.start]) || defaultStartTime,
+            value: _optionalChain([value, 'optionalAccess', _31 => _31.time, 'optionalAccess', _32 => _32.start]) || defaultStartTime,
             onChange: (newTime) => {
-              const currentRangeTime = _optionalChain([value, 'optionalAccess', _31 => _31.time]) || {
+              const currentRangeTime = _optionalChain([value, 'optionalAccess', _33 => _33.time]) || {
                 start: defaultStartTime,
                 end: defaultEndTime
               };
-              const currentRange = _optionalChain([value, 'optionalAccess', _32 => _32.date]) || {
+              const currentRange = _optionalChain([value, 'optionalAccess', _34 => _34.date]) || {
                 start: null,
                 end: null
               };
@@ -1247,7 +1317,7 @@ var DatePicker = ({
                   start: newTime
                 }
               };
-              _optionalChain([onChange, 'optionalCall', _33 => _33(newValue)]);
+              _optionalChain([onChange, 'optionalCall', _35 => _35(newValue)]);
             },
             includeSeconds: time.includeSeconds,
             disabled,
@@ -1257,13 +1327,13 @@ var DatePicker = ({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TimeInput,
           {
-            value: _optionalChain([value, 'optionalAccess', _34 => _34.time, 'optionalAccess', _35 => _35.end]) || defaultEndTime,
+            value: _optionalChain([value, 'optionalAccess', _36 => _36.time, 'optionalAccess', _37 => _37.end]) || defaultEndTime,
             onChange: (newTime) => {
-              const currentRangeTime = _optionalChain([value, 'optionalAccess', _36 => _36.time]) || {
+              const currentRangeTime = _optionalChain([value, 'optionalAccess', _38 => _38.time]) || {
                 start: defaultStartTime,
                 end: defaultEndTime
               };
-              const currentRange = _optionalChain([value, 'optionalAccess', _37 => _37.date]) || {
+              const currentRange = _optionalChain([value, 'optionalAccess', _39 => _39.date]) || {
                 start: null,
                 end: null
               };
@@ -1278,7 +1348,7 @@ var DatePicker = ({
                   end: newTime
                 }
               };
-              _optionalChain([onChange, 'optionalCall', _38 => _38(newValue)]);
+              _optionalChain([onChange, 'optionalCall', _40 => _40(newValue)]);
             },
             includeSeconds: time.includeSeconds,
             disabled,
@@ -1291,10 +1361,12 @@ var DatePicker = ({
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
-      className: `eidos-date-picker-container${fullWidth ? ` ${_chunkCUJBNRJJcjs.fullWidthModifier.call(void 0, "eidos-date-picker-container")}` : ""} ${className}`.trim(),
+      className: `eidos-date-picker-container${fullWidth ? ` ${_chunk35LGEPLPcjs.fullWidthModifier.call(void 0, "eidos-date-picker-container")}` : ""} ${className}`.trim(),
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkP2JM22BFcjs.Dropdown,
+        _chunkKIZVY57Hcjs.Dropdown,
         {
+          open: isOpen,
+          onOpenChange: setIsOpen,
           trigger: triggerElement,
           content: dropdownContent,
           placement: "bottom",
@@ -1305,8 +1377,7 @@ var DatePicker = ({
           autoWidth,
           fullWidth,
           triggerRef
-        },
-        dropdownKey
+        }
       )
     }
   );
@@ -1318,4 +1389,4 @@ DatePicker.displayName = "DatePicker";
 
 
 exports.Calendar = Calendar; exports.TimeInput = TimeInput; exports.DatePicker = DatePicker;
-//# sourceMappingURL=chunk-MCWTQT3M.cjs.map
+//# sourceMappingURL=chunk-6JHVXWDV.cjs.map