@wipco/sdui 1.6.1 → 1.7.1

package/dist/{chunk-O4EMQWCV.js → chunk-FYVDPEJU.js}

@@ -1,8 +1,10 @@
+import { useDismiss, usePopoverAnchor, usePanelPointer, usePortalTo, CalendarNav, KO_CALENDAR_NAV_LOCALE, CalendarZoom, anchorStyle, AnchoredPopoverStyles } from './chunk-QVNJMZUF.js';
+import { tabbablesIn } from './chunk-R2ORCOTG.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { useIsMobile } from './chunk-GSM664TX.js';
-import { SegmentedControl, IconButton, Button, Tag, EmptyState, Icon, Badge } from './chunk-YYAGE733.js';
+import { useIsMobile } from './chunk-TAVKGYH5.js';
+import { SegmentedControl, Button, Tag, EmptyState, Icon, Badge } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useRef, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var DAY_MS = 864e5;
@@ -185,6 +187,20 @@ var VIEW_ITEMS = [
   { value: "agenda", label: "\uC77C\uC815" }
 ];
 var VIEW_VALUES = ["month", "week", "day", "agenda"];
+var VIEW_NAV = {
+  month: { small: "month", big: "year", keepDay: false, labels: { prevBig: "\uC774\uC804 \uD574", prev: "\uC774\uC804 \uB2EC", next: "\uB2E4\uC74C \uB2EC", nextBig: "\uB2E4\uC74C \uD574" } },
+  week: { small: "week", big: "month", keepDay: true, labels: { prevBig: "\uC774\uC804 \uB2EC", prev: "\uC774\uC804 \uC8FC", next: "\uB2E4\uC74C \uC8FC", nextBig: "\uB2E4\uC74C \uB2EC" } },
+  day: { small: "day", big: "week", keepDay: true, labels: { prevBig: "\uC774\uC804 \uC8FC", prev: "\uC774\uC804 \uB0A0", next: "\uB2E4\uC74C \uB0A0", nextBig: "\uB2E4\uC74C \uC8FC" } },
+  agenda: { small: "month", big: "year", keepDay: false, labels: { prevBig: "\uC774\uC804 \uD574", prev: "\uC774\uC804 \uB2EC", next: "\uB2E4\uC74C \uB2EC", nextBig: "\uB2E4\uC74C \uD574" } }
+};
+var addMonthsKeepDay = (ts, amount) => {
+  const d = new Date(ts);
+  const month = d.getMonth() + amount;
+  const lastDay = new Date(d.getFullYear(), month + 1, 0).getDate();
+  return new Date(d.getFullYear(), month, Math.min(d.getDate(), lastDay)).getTime();
+};
+var shiftBy = (ts, unit, dir, keepDay) => unit === "day" ? addDays(ts, dir) : unit === "week" ? addDays(ts, dir * 7) : (keepDay ? addMonthsKeepDay : addMonths)(ts, dir * (unit === "month" ? 1 : 12));
+var ZOOM_HEIGHT = 200;
 function normalizeViews(views) {
   if (!Array.isArray(views)) return VIEW_ITEMS;
   const seen = /* @__PURE__ */ new Set();
@@ -203,6 +219,11 @@ var cellBorder = "1px solid var(--wp-border-subtle)";
 var EVCAL_CSS = `
 .wp-evcal{display:flex;flex-direction:column;gap:var(--wp-space-3);min-width:0}
 .wp-evcal__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp-space-2)}
+.wp-evcal__tools{display:flex;align-items:center;gap:var(--wp-space-2);flex:none}
+.wp-evcal__nav{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0}
+.wp-evcal__nav .wp-calnav{flex:0 1 auto}
+.wp-evcal__nav .wp-calnav__title{min-width:7.5em}
+.wp-evcal__zoom{padding:var(--wp-space-3)}
 .wp-evcal__types{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wp-space-1);margin-left:auto}
 .wp-evcal__item{display:flex;align-items:center;gap:var(--wp-space-3);width:100%;padding:var(--wp-space-3) var(--wp-space-4);border-radius:var(--wp-radius-md);cursor:pointer;text-align:left;min-width:0;transition:background var(--wp-duration-fast),border-color var(--wp-duration-fast)}
 .wp-evcal__item-bar{width:4px;height:26px;flex:none;border-radius:var(--wp-radius-pill)}
@@ -216,6 +237,9 @@ var EVCAL_CSS = `
   .wp-evcal--month .wp-evcal__bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:32px;margin-top:-16px;z-index:-1}
 }
 @media screen and (max-width:767.98px){
+  .wp-evcal__nav{order:-1;flex:1 1 100%}
+  .wp-evcal__nav .wp-calnav{flex:1 1 auto}
+  .wp-evcal__tools{flex:1 1 100%;justify-content:space-between}
   .wp-evcal__types{flex:1 1 100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
   .wp-evcal__types::-webkit-scrollbar{display:none}
   .wp-evcal__types>*{flex:none}
@@ -283,10 +307,33 @@ var EventCalendarImpl = ({
     () => dayEvents.filter((e) => !hiddenTypes.has(e.type)),
     [dayEvents, hiddenTypes]
   );
-  const move = (dir) => {
-    if (activeView === "week") setDate(addDays(anchor, dir * 7));
-    else if (activeView === "day") setDate(addDays(anchor, dir));
-    else setDate(addMonths(anchor, dir));
+  const nav = VIEW_NAV[activeView];
+  const step = (which) => {
+    const dir = which === "prev" || which === "prevBig" ? -1 : 1;
+    setDate(shiftBy(anchor, which === "prev" || which === "next" ? nav.small : nav.big, dir, nav.keepDay));
+  };
+  const titleRef = useRef(null);
+  const zoomPopRef = useRef(null);
+  const [zoomOpen, setZoomOpen] = useState(false);
+  const closeZoom = useCallback((refocus) => {
+    setZoomOpen(false);
+    if (refocus) titleRef.current?.focus();
+  }, []);
+  const dismissZoom = useCallback((reason) => closeZoom(reason === "escape"), [closeZoom]);
+  useDismiss(zoomOpen, titleRef, zoomPopRef, dismissZoom);
+  const zoomAnchor = usePopoverAnchor(zoomOpen, titleRef, zoomPopRef, ZOOM_HEIGHT);
+  const zoomPointer = usePanelPointer(zoomPopRef);
+  const navRef = useRef(null);
+  const navPointer = usePanelPointer(navRef);
+  const portal = usePortalTo();
+  const anchorDate = new Date(anchor);
+  const anchorMonthIdx = anchorDate.getFullYear() * 12 + anchorDate.getMonth();
+  const pickMonth = (idx) => {
+    const year = Math.floor(idx / 12);
+    const month = idx % 12;
+    const lastDay = new Date(year, month + 1, 0).getDate();
+    setDate(new Date(year, month, Math.min(anchorDate.getDate(), lastDay)).getTime());
+    closeZoom(true);
   };
   const headline = (() => {
     const d = new Date(anchor);
@@ -429,25 +476,30 @@ var EventCalendarImpl = ({
   };
   return /* @__PURE__ */ jsxs("div", { className: `wp-evcal wp-evcal--${activeView}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "wp-evcal__toolbar", children: [
-      /* @__PURE__ */ jsx(
-        SegmentedControl,
-        {
-          items: [...viewItems],
-          value: activeView,
-          onChange: (v) => setView(v)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
+      /* @__PURE__ */ jsxs("div", { className: "wp-evcal__tools", children: [
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            items: [...viewItems],
+            value: activeView,
+            onChange: (v) => setView(v)
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setDate(today), children: "\uC624\uB298" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "wp-evcal__nav", ref: navRef, onClick: navPointer.panelProps.onClick, children: /* @__PURE__ */ jsx(
+        CalendarNav,
         {
-          "aria-hidden": true,
-          style: { width: 1, height: 20, background: "var(--wp-border-subtle)" }
+          size: "md",
+          title: headline,
+          labels: nav.labels,
+          onStep: step,
+          onZoomOut: () => zoomOpen ? closeZoom(false) : setZoomOpen(true),
+          zoomLabel: KO_CALENDAR_NAV_LOCALE.zoomLabel,
+          titleRef,
+          titleProps: { "aria-haspopup": "dialog", "aria-expanded": zoomOpen }
         }
-      ),
-      /* @__PURE__ */ jsx(IconButton, { icon: "chevron-left", label: "\uC774\uC804", onClick: () => move(-1) }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setDate(today), children: "\uC624\uB298" }),
-      /* @__PURE__ */ jsx(IconButton, { icon: "chevron-right", label: "\uB2E4\uC74C", onClick: () => move(1) }),
-      /* @__PURE__ */ jsx("h3", { className: "wp-h4", style: { margin: "0 0 0 var(--wp-space-2)" }, children: headline }),
+      ) }),
       types && types.length > 0 && /* @__PURE__ */ jsx("span", { className: "wp-evcal__types", role: "group", "aria-label": "\uC77C\uC815 \uC720\uD615", children: types.map((t) => {
         const off = hiddenTypes.has(t.value);
         const color = dayEvents.find((e) => e.type === t.value)?.color ?? t.color;
@@ -732,9 +784,51 @@ var EventCalendarImpl = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-evcal", css: EVCAL_CSS })
+    portal(
+      zoomAnchor,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: zoomPopRef,
+          className: "wp-anchored-pop wp-evcal__zoom",
+          style: anchorStyle(zoomAnchor),
+          role: "dialog",
+          "aria-label": KO_CALENDAR_NAV_LOCALE.monthGridLabel,
+          ...zoomPointer.panelProps,
+          onBlur: (event) => {
+            const next = event.relatedTarget;
+            if (!(next instanceof Node) || zoomPopRef.current?.contains(next) || next === titleRef.current) return;
+            if (zoomPointer.interacting() && zoomPopRef.current && next.contains(zoomPopRef.current)) return;
+            if (titleRef.current && next.contains(titleRef.current)) return;
+            closeZoom(false);
+          },
+          onKeyDown: (event) => {
+            if (event.key !== "Tab" || !zoomPopRef.current) return;
+            const stops = tabbablesIn(zoomPopRef.current);
+            const at = stops.indexOf(document.activeElement);
+            const atEdge = event.shiftKey ? at <= 0 : at === stops.length - 1 || at < 0;
+            if (!atEdge) return;
+            event.preventDefault();
+            closeZoom(true);
+          },
+          children: /* @__PURE__ */ jsx(
+            CalendarZoom,
+            {
+              monthIndex: anchorMonthIdx,
+              selectedMonthIndexes: [anchorMonthIdx],
+              onPick: pickMonth,
+              onExit: () => closeZoom(true),
+              autoFocus: true,
+              locale: KO_CALENDAR_NAV_LOCALE
+            }
+          )
+        }
+      )
+    ),
+    /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-evcal", css: EVCAL_CSS }),
+    /* @__PURE__ */ jsx(AnchoredPopoverStyles, {})
   ] });
 };
 var EventCalendar = boxed(EventCalendarImpl, "EventCalendar");
 
-export { EventCalendar, statusToneOf };
+export { EventCalendar, VIEW_NAV, statusToneOf };

package/dist/{chunk-GKYUDTMI.js → chunk-J6YDTBKY.js}

@@ -1,5 +1,5 @@
-import { DateRangePicker } from './chunk-FP32LNFK.js';
-import { SegmentedControl, Select } from './chunk-YYAGE733.js';
+import { DateRangePicker } from './chunk-KAQ2VZBM.js';
+import { SegmentedControl, Select } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-UZZLMPRW.js → chunk-JCG4575S.js}

@@ -1,5 +1,5 @@
-import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-BITS7UJY.js';
-import { IconButton } from './chunk-YYAGE733.js';
+import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-R2ORCOTG.js';
+import { IconButton } from './chunk-OWM7E55U.js';
 import { useState, useRef, useCallback, useEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-34BABTH4.js → chunk-JMNUFA5M.js}

@@ -1,4 +1,4 @@
-import { IconButton, Input } from './chunk-YYAGE733.js';
+import { IconButton, Input } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';