@economic/taco 2.70.3-day-picker-v9.0 → 2.70.3-day-picker-v9.1

package/dist/taco.cjs

@@ -23864,7 +23864,7 @@ const YearsDropdown = (props) => {
   return /* @__PURE__ */ React__namespace.createElement("select", { className: "h-8 px-2", name: "year", onChange, value }, years.map((year) => /* @__PURE__ */ React__namespace.createElement("option", { key: year, value: year }, String(year))));
 };
 const Calendar = (props) => {
-  const { onChange: handleChange, value, disabledDays, autoFocus = false, ...otherProps } = props;
+  const { onChange: handleChange, value, disabledDays, ...otherProps } = props;
   const [visibleMonth, setVisibleMonth] = React__namespace.useState(value ?? /* @__PURE__ */ new Date());
   const { texts } = useLocalization();
   React__namespace.useEffect(() => {
@@ -23882,7 +23882,6 @@ const Calendar = (props) => {
   return /* @__PURE__ */ React__namespace.createElement("div", { "data-taco": "calendar" }, /* @__PURE__ */ React__namespace.createElement(
     DayPicker,
     {
-      autoFocus,
       captionLayout: "dropdown",
       className,
       components: {
@@ -25859,6 +25858,7 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
   const { calendar: calendar2, input } = useDatepicker(otherProps, ref);
   const { texts } = useLocalization();
   const className = clsx("inline-flex w-full text-black font-normal", externalClassName);
+  const popoverContentRef = React__namespace.useRef(null);
   const handlePopoverClick = React__namespace.useCallback((event) => {
     event.stopPropagation();
   }, []);
@@ -25870,6 +25870,12 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
     },
     [input.ref]
   );
+  const handleOpenAutoFocus = (event) => {
+    var _a;
+    event.preventDefault();
+    const currentDay = ((_a = popoverContentRef == null ? void 0 : popoverContentRef.current) == null ? void 0 : _a.querySelector("td.rdp-selected button")) ?? null;
+    currentDay == null ? void 0 : currentDay.focus();
+  };
   const handleInputKeyDown = (event) => {
     var _a, _b;
     (_a = props.onKeyDown) == null ? void 0 : _a.call(props, event);
@@ -25889,43 +25895,49 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
           disabled: input.disabled || input.readOnly,
           icon: "calendar",
           tabIndex: -1,
-          popover: (props2) => /* @__PURE__ */ React__namespace.createElement(Popover, { ...props2 }, /* @__PURE__ */ React__namespace.createElement(Popover.Content, { onCloseAutoFocus: handleCloseAutoFocus }, ({ close }) => /* @__PURE__ */ React__namespace.createElement("div", { className: "-m-3 flex", onClick: handlePopoverClick }, /* @__PURE__ */ React__namespace.createElement(
-            Calendar,
-            {
-              ...calendar2,
-              autoFocus: true,
-              onChange: (date2, event) => {
-                calendar2.onChange(date2, event);
-                close();
-              }
-            }
-          ), shortcuts && /* @__PURE__ */ React__namespace.createElement("div", { className: "border-grey-300 flex flex-col border-l" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React__namespace.createElement("ul", null, shortcuts.map((shortcut2) => /* @__PURE__ */ React__namespace.createElement("li", { key: shortcut2.text }, /* @__PURE__ */ React__namespace.createElement(
-            "button",
+          popover: (props2) => /* @__PURE__ */ React__namespace.createElement(Popover, { ...props2 }, /* @__PURE__ */ React__namespace.createElement(
+            Popover.Content,
             {
-              type: "button",
-              className: "hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs",
-              "data-taco": "datepicker-shortcut",
-              onClick: (event) => {
-                event.persist();
-                shortcut2.onClick(event);
-                close();
-              }
+              onOpenAutoFocus: handleOpenAutoFocus,
+              onCloseAutoFocus: handleCloseAutoFocus
             },
-            shortcut2.text
-          )))), handleReset && /* @__PURE__ */ React__namespace.createElement(
-            "button",
-            {
-              type: "button",
-              className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
-              "data-taco": "datepicker-clear-button",
-              onClick: (event) => {
-                event.persist();
-                handleReset(event);
-                close();
+            ({ close }) => /* @__PURE__ */ React__namespace.createElement("div", { ref: popoverContentRef, className: "-m-3 flex", onClick: handlePopoverClick }, /* @__PURE__ */ React__namespace.createElement(
+              Calendar,
+              {
+                ...calendar2,
+                onChange: (date2, event) => {
+                  calendar2.onChange(date2, event);
+                  close();
+                }
               }
-            },
-            texts.datepicker.clear
-          ))))),
+            ), shortcuts && /* @__PURE__ */ React__namespace.createElement("div", { className: "border-grey-300 flex flex-col border-l" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React__namespace.createElement("ul", null, shortcuts.map((shortcut2) => /* @__PURE__ */ React__namespace.createElement("li", { key: shortcut2.text }, /* @__PURE__ */ React__namespace.createElement(
+              "button",
+              {
+                type: "button",
+                className: "hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs",
+                "data-taco": "datepicker-shortcut",
+                onClick: (event) => {
+                  event.persist();
+                  shortcut2.onClick(event);
+                  close();
+                }
+              },
+              shortcut2.text
+            )))), handleReset && /* @__PURE__ */ React__namespace.createElement(
+              "button",
+              {
+                type: "button",
+                className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
+                "data-taco": "datepicker-clear-button",
+                onClick: (event) => {
+                  event.persist();
+                  handleReset(event);
+                  close();
+                }
+              },
+              texts.datepicker.clear
+            )))
+          )),
           tooltip: texts.datepicker.calendar,
           "data-taco": "toggle-calendar-button"
         }