@aviala-design/spiral 1.0.0 → 2.0.0

package/dist/index.js

@@ -4175,7 +4175,7 @@ function ColorPickerInputs({
       }
     ) : null,
     format === "hex" ? /* @__PURE__ */ jsxs19("div", { className: "aviala-color-picker-field", children: [
-      /* @__PURE__ */ jsx26("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx26(Badge, { children: "#" }) }),
+      /* @__PURE__ */ jsx26("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx26(Badge, { style: "normal", children: "#" }) }),
       /* @__PURE__ */ jsx26(
         "input",
         {
@@ -4214,7 +4214,7 @@ function ColorPickerInputs({
           onKeyDown: (e) => e.key === "Enter" && commitAlpha()
         }
       ),
-      /* @__PURE__ */ jsx26("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx26(Badge, { children: "%" }) })
+      /* @__PURE__ */ jsx26("span", { className: "aviala-color-picker-field__badge-area", children: /* @__PURE__ */ jsx26(Badge, { style: "normal", children: "%" }) })
     ] }),
     /* @__PURE__ */ jsxs19(
       Select,
@@ -4749,6 +4749,7 @@ function Cascader({
   const isValueControlled = valueProp !== void 0;
   const open = isOpenControlled ? openProp : internalOpen;
   const selectedPath = isValueControlled ? valueProp ?? [] : internalValue;
+  const wasOpenRef = useRef7(open);
   useEffect5(() => {
     const markWindowBlur = () => {
       windowBlurCloseRef.current = true;
@@ -4757,10 +4758,20 @@ function Cascader({
     return () => window.removeEventListener("blur", markWindowBlur, true);
   }, []);
   useEffect5(() => {
-    if (open) {
-      setActivePath(selectedPath.length > 0 ? selectedPath.slice(0, -1) : []);
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+    if (!justOpened) return;
+    if (selectedPath.length === 0) {
+      setActivePath([]);
+      return;
+    }
+    const selectedOption = findOptionPath(options, selectedPath);
+    if (selectedOption?.children?.length) {
+      setActivePath(selectedPath);
+      return;
     }
-  }, [open, selectedPath]);
+    setActivePath(selectedPath.slice(0, -1));
+  }, [open, options, selectedPath]);
   useEffect5(() => {
     if (!open) {
       pointerDownCloseRef.current = false;
@@ -6054,12 +6065,19 @@ function DatePicker(props) {
       setActivePanel("date");
       return;
     }
+    setFocusedDay((current) => {
+      if (current) return current;
+      if (mode === "single" && singleValue) return startOfDay(singleValue);
+      const rangeAnchor = mode === "range" ? rangeValue.from ?? rangeValue.to : void 0;
+      if (rangeAnchor) return startOfDay(rangeAnchor);
+      return startOfDay(/* @__PURE__ */ new Date());
+    });
     const markPointerDown = () => {
       pointerDownCloseRef.current = true;
     };
     document.addEventListener("pointerdown", markPointerDown, true);
     return () => document.removeEventListener("pointerdown", markPointerDown, true);
-  }, [open]);
+  }, [mode, open, rangeValue.from, rangeValue.to, singleValue]);
   const handleOpenChange = useCallback12(
     (nextOpen) => {
       if (disabled && nextOpen) return;
@@ -6160,19 +6178,21 @@ function DatePicker(props) {
     ]
   );
   const selectDate = useCallback12(
-    (date) => {
+    (date, options) => {
       if (disabled || isDateDisabled(date, minDate, maxDate)) return;
       const day = startOfDay(date);
       setFocusedDay(day);
       if (!isSameMonth(day, viewMonth)) {
         setViewMonth(new Date(day.getFullYear(), day.getMonth(), 1));
       }
+      const switchToTime = options?.switchToTime ?? enableTime;
+      const shouldClose = options?.close ?? !enableTime;
       if (mode === "single") {
         const next = enableTime ? applyTimeToDate(day, timeValue.hours, timeValue.minutes) : day;
         commitSingle(next);
-        if (enableTime) {
+        if (switchToTime) {
           setActivePanel("time");
-        } else {
+        } else if (shouldClose) {
           handleOpenChange(false);
         }
         return;
@@ -6188,9 +6208,9 @@ function DatePicker(props) {
       if (isSameDay(day, currentFrom)) {
         commitRange({ from: withTime(day), to: withTime(day) });
         setRangeDraftFrom(void 0);
-        if (enableTime) {
+        if (switchToTime) {
           setActivePanel("time");
-        } else {
+        } else if (shouldClose) {
           handleOpenChange(false);
         }
         return;
@@ -6201,9 +6221,9 @@ function DatePicker(props) {
         to: normalized.to ? withTime(normalized.to) : void 0
       });
       setRangeDraftFrom(void 0);
-      if (enableTime) {
+      if (switchToTime) {
         setActivePanel("time");
-      } else {
+      } else if (shouldClose) {
         handleOpenChange(false);
       }
     },
@@ -6609,7 +6629,7 @@ function DatePickerPanelFooter() {
   if (!enableTime) return null;
   const panelValue = activePanel === "time" ? "time" : "date";
   const isRangeMode = mode === "range";
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsx37("div", { className: "aviala-datepicker-footer-wrap", children: /* @__PURE__ */ jsxs28(
     SegmentatorGroup,
     {
       value: panelValue,
@@ -6640,7 +6660,7 @@ function DatePickerPanelFooter() {
         )
       ]
     }
-  );
+  ) });
 }
 function monthDiff(from, to) {
   return (to.getFullYear() - from.getFullYear()) * 12 + (to.getMonth() - from.getMonth());
@@ -6668,6 +6688,8 @@ function DatePickerCalendar({ className }) {
   const today = useMemo7(() => startOfDay(/* @__PURE__ */ new Date()), []);
   const days = useMemo7(() => getCalendarDays(viewMonth), [viewMonth]);
   const prevViewMonthRef = useRef9(viewMonth);
+  const dayGridRef = useRef9(null);
+  const pendingDayFocusRef = useRef9(false);
   const [monthSlide, setMonthSlide] = useState11(null);
   const isMonthPanel = activePanel === "month";
   const isTimePanel = activePanel === "time" && enableTime;
@@ -6724,40 +6746,40 @@ function DatePickerCalendar({ className }) {
       outgoingMonth: previous
     });
   }, [contentView, panel, viewMonth]);
+  useLayoutEffect5(() => {
+    if (!pendingDayFocusRef.current || !focusedDay) return;
+    const grid = dayGridRef.current;
+    if (!grid) return;
+    const target = grid.querySelector(
+      `button[data-day="${formatIsoDate(focusedDay)}"]`
+    );
+    if (!target || target.disabled) return;
+    pendingDayFocusRef.current = false;
+    target.focus();
+  }, [focusedDay, days, monthSlide]);
   const outgoingDays = useMemo7(
     () => monthSlide ? getCalendarDays(monthSlide.outgoingMonth) : null,
     [monthSlide]
   );
   const handleDayKeyDown = (event, date) => {
-    let next = null;
+    let deltaDays = 0;
     switch (event.key) {
       case "ArrowLeft":
-        next = new Date(date);
-        next.setDate(next.getDate() - 1);
+        deltaDays = -1;
         break;
       case "ArrowRight":
-        next = new Date(date);
-        next.setDate(next.getDate() + 1);
+        deltaDays = 1;
         break;
       case "ArrowUp":
-        next = new Date(date);
-        next.setDate(next.getDate() - 7);
+        deltaDays = -7;
         break;
       case "ArrowDown":
-        next = new Date(date);
-        next.setDate(next.getDate() + 7);
+        deltaDays = 7;
         break;
       case "Home":
-        next = new Date(date.getFullYear(), date.getMonth(), 1);
-        break;
       case "End":
-        next = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-        break;
       case "PageUp":
-        next = addMonths(date, event.shiftKey ? -12 : -1);
-        break;
       case "PageDown":
-        next = addMonths(date, event.shiftKey ? 12 : 1);
         break;
       case "Enter":
       case " ":
@@ -6768,8 +6790,31 @@ function DatePickerCalendar({ className }) {
         return;
     }
     event.preventDefault();
-    if (!next) return;
+    let next;
+    if (event.key === "Home") {
+      next = new Date(date.getFullYear(), date.getMonth(), 1);
+    } else if (event.key === "End") {
+      next = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    } else if (event.key === "PageUp") {
+      next = addMonths(date, event.shiftKey ? -12 : -1);
+    } else if (event.key === "PageDown") {
+      next = addMonths(date, event.shiftKey ? 12 : 1);
+    } else {
+      next = new Date(date);
+      next.setDate(next.getDate() + deltaDays);
+      let guard = 0;
+      while (isDateDisabled(next, minDate, maxDate) && guard < 366) {
+        next.setDate(next.getDate() + (deltaDays > 0 ? 1 : -1));
+        guard += 1;
+      }
+    }
     const normalized = startOfDay(next);
+    if (isDateDisabled(normalized, minDate, maxDate)) return;
+    pendingDayFocusRef.current = true;
+    if (mode === "single") {
+      selectDate(normalized, { close: false, switchToTime: false });
+      return;
+    }
     setFocusedDay(normalized);
     if (!isSameMonth(normalized, viewMonth)) {
       setViewMonth(new Date(normalized.getFullYear(), normalized.getMonth(), 1));
@@ -6823,6 +6868,7 @@ function DatePickerCalendar({ className }) {
       /* @__PURE__ */ jsx37(
         "div",
         {
+          ref: dayGridRef,
           className: "aviala-datepicker-calendar__grid",
           role: "grid",
           "aria-labelledby": `${calendarId}-label`,
@@ -6842,11 +6888,13 @@ function DatePickerCalendar({ className }) {
             const isToday = isSameDay(day, today);
             const dayDisabled = isDateDisabled(day, minDate, maxDate);
             const focused = focusedDay ? isSameDay(day, focusedDay) : false;
+            const dayKey = formatIsoDate(day);
             return /* @__PURE__ */ jsxs28(
               "button",
               {
                 type: "button",
                 role: "gridcell",
+                "data-day": dayKey,
                 tabIndex: focused || !focusedDay && isToday ? 0 : -1,
                 className: "aviala-datepicker-day aviala-focus-ring",
                 "data-outside": outside ? "true" : void 0,
@@ -6876,7 +6924,7 @@ function DatePickerCalendar({ className }) {
                   isToday ? /* @__PURE__ */ jsx37("span", { className: "aviala-datepicker-day__today-dot", "aria-hidden": true }) : null
                 ]
               },
-              day.toISOString()
+              dayKey
             );
           })
         },
@@ -7557,21 +7605,27 @@ var ModalContent = forwardRef30(
     onOpenAutoFocus,
     ...props
   }, ref) => {
-    const content = /* @__PURE__ */ jsxs32(Fragment6, { children: [
-      showOverlay ? /* @__PURE__ */ jsx42(ModalOverlay, {}) : null,
-      /* @__PURE__ */ jsx42(
-        DialogPrimitive.Content,
-        {
-          ref,
-          className: cn(modalContentVariants({ size }), className),
-          onOpenAutoFocus,
-          ...props,
-          children: /* @__PURE__ */ jsx42("div", { className: "aviala-modal-content__surface", children })
-        }
-      )
+    const overlay = showOverlay ? /* @__PURE__ */ jsx42(ModalOverlay, {}) : null;
+    const panel = /* @__PURE__ */ jsx42(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(modalContentVariants({ size }), className),
+        onOpenAutoFocus,
+        ...props,
+        children: /* @__PURE__ */ jsx42("div", { className: "aviala-modal-content__surface", children })
+      }
+    );
+    if (!portalled) {
+      return /* @__PURE__ */ jsxs32(Fragment6, { children: [
+        overlay,
+        panel
+      ] });
+    }
+    return /* @__PURE__ */ jsxs32(DialogPrimitive.Portal, { children: [
+      overlay,
+      panel
     ] });
-    if (!portalled) return content;
-    return /* @__PURE__ */ jsx42(DialogPrimitive.Portal, { children: content });
   }
 );
 ModalContent.displayName = DialogPrimitive.Content.displayName;
@@ -7588,9 +7642,9 @@ var ModalHeader = forwardRef30(
     showIcon ? renderModalIcon(icon) : null,
     /* @__PURE__ */ jsx42("div", { className: "aviala-modal__header-main", children }),
     showClose ? /* @__PURE__ */ jsx42(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx42(
-      Link,
+      Button,
       {
-        level: "text",
+        type: "button",
         mode: "noBackgroundCustom",
         iconOnly: true,
         "aria-label": closeLabel,