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

package/dist/taco.css

@@ -263,6 +263,11 @@ table.yt-table tbody.yt-table__body tr.yt-table__row td.yt-table__cell {
 [data-taco='calendar'] .calendar-caption {
     @apply font-semibold;
 }
+
+/* focus style gets overriden by global taco css otherwise */
+[data-taco='calendar'] [data-taco='calendar-today-button'] {
+    @apply focus-visible:!yt-focus;
+}
 [data-taco='card'] [data-taco='report'],
 [data-taco='card'] [data-taco='table2'] {
     @apply !border-0;

package/dist/taco.js

@@ -23846,7 +23846,7 @@ const YearsDropdown = (props) => {
   return /* @__PURE__ */ React.createElement("select", { className: "h-8 px-2", name: "year", onChange, value }, years.map((year) => /* @__PURE__ */ React.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.useState(value ?? /* @__PURE__ */ new Date());
   const { texts } = useLocalization();
   React.useEffect(() => {
@@ -23864,7 +23864,6 @@ const Calendar = (props) => {
   return /* @__PURE__ */ React.createElement("div", { "data-taco": "calendar" }, /* @__PURE__ */ React.createElement(
     DayPicker,
     {
-      autoFocus,
       captionLayout: "dropdown",
       className,
       components: {
@@ -25841,6 +25840,7 @@ const Datepicker = React.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.useRef(null);
   const handlePopoverClick = React.useCallback((event) => {
     event.stopPropagation();
   }, []);
@@ -25852,6 +25852,12 @@ const Datepicker = React.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);
@@ -25871,43 +25877,49 @@ const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
           disabled: input.disabled || input.readOnly,
           icon: "calendar",
           tabIndex: -1,
-          popover: (props2) => /* @__PURE__ */ React.createElement(Popover, { ...props2 }, /* @__PURE__ */ React.createElement(Popover.Content, { onCloseAutoFocus: handleCloseAutoFocus }, ({ close }) => /* @__PURE__ */ React.createElement("div", { className: "-m-3 flex", onClick: handlePopoverClick }, /* @__PURE__ */ React.createElement(
-            Calendar,
-            {
-              ...calendar2,
-              autoFocus: true,
-              onChange: (date2, event) => {
-                calendar2.onChange(date2, event);
-                close();
-              }
-            }
-          ), shortcuts && /* @__PURE__ */ React.createElement("div", { className: "border-grey-300 flex flex-col border-l" }, /* @__PURE__ */ React.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React.createElement("ul", null, shortcuts.map((shortcut2) => /* @__PURE__ */ React.createElement("li", { key: shortcut2.text }, /* @__PURE__ */ React.createElement(
-            "button",
+          popover: (props2) => /* @__PURE__ */ React.createElement(Popover, { ...props2 }, /* @__PURE__ */ React.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.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.createElement("div", { ref: popoverContentRef, className: "-m-3 flex", onClick: handlePopoverClick }, /* @__PURE__ */ React.createElement(
+              Calendar,
+              {
+                ...calendar2,
+                onChange: (date2, event) => {
+                  calendar2.onChange(date2, event);
+                  close();
+                }
               }
-            },
-            texts.datepicker.clear
-          ))))),
+            ), shortcuts && /* @__PURE__ */ React.createElement("div", { className: "border-grey-300 flex flex-col border-l" }, /* @__PURE__ */ React.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React.createElement("ul", null, shortcuts.map((shortcut2) => /* @__PURE__ */ React.createElement("li", { key: shortcut2.text }, /* @__PURE__ */ React.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.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"
         }