@flytedan/flytebot-design-system 0.45.0 → 0.47.0

package/dist/index.cjs

@@ -207,6 +207,7 @@ __export(index_exports, {
   installFlytedeskFavicon: () => installFlytedeskFavicon,
   isImage: () => isImage,
   isSystemMessage: () => isSystemMessage,
+  isWithinLayerTree: () => isWithinLayerTree,
   jobBucket: () => jobBucket,
   languageLabel: () => languageLabel,
   loadPrefs: () => loadPrefs,
@@ -342,11 +343,21 @@ var import_react_dom = require("react-dom");
 // src/kits/layerStack.tsx
 var React2 = __toESM(require("react"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])';
 var LayerContext = React2.createContext(null);
 var openLayers = /* @__PURE__ */ new Set();
 var lastOrder = 0;
 var pendingEscape = null;
+var lastClosed = null;
+function isOpener(el) {
+  return !!el && el !== document.body && el.isConnected;
+}
+function inheritedOpener() {
+  let l = lastClosed;
+  lastClosed = null;
+  for (; l; l = l.parent) if (isOpener(l.opener)) return l.opener;
+  return null;
+}
 function rank(layer) {
   const path = [];
   for (let l = layer; l; l = l.parent) if (l.order > 0) path.push(l.order);
@@ -432,11 +443,13 @@ function open(layer) {
   }
   openLayers.add(layer);
   layer.order = ++lastOrder;
+  lastClosed = null;
   if (layer.options.trap && !contains(scopeOf(layer), document.activeElement)) focusInto(layer);
 }
 function close(layer) {
   openLayers.delete(layer);
   layer.order = 0;
+  lastClosed = layer;
   if (openLayers.size === 0) {
     document.removeEventListener("keydown", onKeydownCapture, true);
     document.removeEventListener("keydown", onKeydown);
@@ -454,7 +467,7 @@ function returnFocus(layer) {
       focusInto(l);
       return;
     }
-    if (l.opener && l.opener.isConnected) {
+    if (isOpener(l.opener)) {
       l.opener.focus({ preventScroll: true });
       return;
     }
@@ -465,7 +478,9 @@ function useStackedLayer(options) {
   const [layer] = React2.useState(() => ({ parent, options, order: 0, opener: null }));
   const { active } = options;
   React2.useInsertionEffect(() => {
-    if (active) layer.opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    if (!active) return;
+    const current2 = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    layer.opener = isOpener(current2) ? current2 : inheritedOpener();
   }, [active, layer]);
   React2.useLayoutEffect(() => {
     layer.options = options;
@@ -484,6 +499,9 @@ function useStackedLayer(options) {
 function StackedLayerProvider({ layer, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LayerContext.Provider, { value: layer, children });
 }
+function isWithinLayerTree(layer, node) {
+  return contains(scopeOf(layer), node);
+}
 
 // src/components/actions/Popover.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -680,15 +698,14 @@ function Popover({
     const away = (e) => {
       if (!closeOnOutside) return;
       const target = e.target;
-      if (ref.current && ref.current.contains(target)) return;
+      if (isWithinLayerTree(layer, target)) return;
       const trigger = (triggerRef || anchorRef).current;
       if (trigger && trigger.contains(target)) return;
-      if (e.target.closest && e.target.closest(".fd-pop")) return;
       onClose && onClose();
     };
     document.addEventListener("pointerdown", away, true);
     return () => document.removeEventListener("pointerdown", away, true);
-  }, [open2, closeOnOutside, onClose, anchorRef, triggerRef]);
+  }, [open2, closeOnOutside, onClose, anchorRef, triggerRef, layer]);
   if (!open2 || !pos) return null;
   return portal(
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StackedLayerProvider, { layer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -3292,6 +3309,21 @@ var fmt = (s) => {
   const d = parse(s);
   return d ? MONTHS[d.getMonth()].slice(0, 3) + " " + d.getDate() + ", " + d.getFullYear() : "";
 };
+var fullDateLabel = (d) => new Intl.DateTimeFormat(void 0, { dateStyle: "full" }).format(d);
+var monthYearLabel = (d) => new Intl.DateTimeFormat(void 0, { month: "long", year: "numeric" }).format(d);
+var weekdayLong = (i) => new Intl.DateTimeFormat(void 0, { weekday: "long" }).format(new Date(2023, 0, 1 + i));
+var daysInMonth = (y, m) => new Date(y, m + 1, 0).getDate();
+var addMonths = (d, n) => {
+  const total = d.getFullYear() * 12 + d.getMonth() + n;
+  const y = Math.floor(total / 12), m = (total % 12 + 12) % 12;
+  return new Date(y, m, Math.min(d.getDate(), daysInMonth(y, m)));
+};
+var addYears = (d, n) => {
+  const y = d.getFullYear() + n;
+  return new Date(y, d.getMonth(), Math.min(d.getDate(), daysInMonth(y, d.getMonth())));
+};
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var sameMonth = (d, y, m) => d.getFullYear() === y && d.getMonth() === m;
 function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
   const today = /* @__PURE__ */ new Date();
   const sel = range ? value || {} : { start: value, end: value };
@@ -3306,8 +3338,38 @@ function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
     const lo = s, hi = e || hoverEnd;
     return lo && hi && d > (lo < hi ? lo : hi) && d < (lo < hi ? hi : lo);
   };
-  const isEdge = (d) => s && iso(d) === iso(s) || e && iso(d) === iso(e);
+  const isStart = (d) => !!s && iso(d) === iso(s);
+  const isEnd = (d) => !!e && iso(d) === iso(e);
+  const isEdge = (d) => isStart(d) || isEnd(d);
+  const nextY = vm === 11 ? vy + 1 : vy, nextM = (vm + 1) % 12;
+  const [activeDate, setActiveDate] = React23.useState(() => {
+    if (s) return s;
+    if (sameMonth(today, anchor.getFullYear(), anchor.getMonth())) return today;
+    return new Date(anchor.getFullYear(), anchor.getMonth(), 1);
+  });
+  const calRef = React23.useRef(null);
+  const pageToShow = (y, m) => {
+    const idx = y * 12 + m, firstIdx = vy * 12 + vm, secondIdx = firstIdx + 1;
+    if (idx === firstIdx || months > 1 && idx === secondIdx) return;
+    if (idx < firstIdx || months === 1) {
+      setVy(y);
+      setVm(m);
+      return;
+    }
+    const baseIdx = idx - 1;
+    setVy(Math.floor(baseIdx / 12));
+    setVm((baseIdx % 12 + 12) % 12);
+  };
+  const moveActive = (next) => {
+    setActiveDate(next);
+    pageToShow(next.getFullYear(), next.getMonth());
+  };
+  React23.useEffect(() => {
+    const el = calRef.current?.querySelector('[data-iso="' + iso(activeDate) + '"]');
+    if (el) el.focus({ preventScroll: true });
+  }, [activeDate, vy, vm]);
   const clickDay = (d) => {
+    setActiveDate(d);
     const v = iso(d);
     if (!range) {
       onPick(v);
@@ -3332,36 +3394,115 @@ function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
     setVm(m);
     setVy(y);
   };
+  const onGridKeyDown = (ev) => {
+    const d = activeDate;
+    switch (ev.key) {
+      case "ArrowLeft":
+        ev.preventDefault();
+        moveActive(addDays(d, -1));
+        return;
+      case "ArrowRight":
+        ev.preventDefault();
+        moveActive(addDays(d, 1));
+        return;
+      case "ArrowUp":
+        ev.preventDefault();
+        moveActive(addDays(d, -7));
+        return;
+      case "ArrowDown":
+        ev.preventDefault();
+        moveActive(addDays(d, 7));
+        return;
+      case "Home":
+        ev.preventDefault();
+        moveActive(addDays(d, -d.getDay()));
+        return;
+      case "End":
+        ev.preventDefault();
+        moveActive(addDays(d, 6 - d.getDay()));
+        return;
+      case "PageUp":
+        ev.preventDefault();
+        moveActive(ev.shiftKey ? addYears(d, -1) : addMonths(d, -1));
+        return;
+      case "PageDown":
+        ev.preventDefault();
+        moveActive(ev.shiftKey ? addYears(d, 1) : addMonths(d, 1));
+        return;
+      case "Enter":
+      case " ":
+        ev.preventDefault();
+        clickDay(d);
+        return;
+      default:
+        return;
+    }
+  };
+  const monthHeading = mode2 === "days" ? MONTHS[vm] + " " + vy : mode2 === "months" ? String(vy) : vy - 5 + " \u2013 " + (vy + 6);
+  const prevLabel = mode2 === "days" ? "Previous month, " + monthYearLabel(new Date(vy, vm - 1, 1)) : mode2 === "months" ? "Previous year, " + (vy - 1) : "Previous years, " + (vy - 17) + " \u2013 " + (vy - 6);
+  const nextLabel = mode2 === "days" ? "Next month, " + monthYearLabel(new Date(vy, vm + 1, 1)) : mode2 === "months" ? "Next year, " + (vy + 1) : "Next years, " + (vy + 7) + " \u2013 " + (vy + 18);
   const monthGrid = (y, m) => {
     const startPad = new Date(y, m, 1).getDay();
+    const last = daysInMonth(y, m);
     const cells = [];
-    for (let i = 0; i < 42; i++) cells.push(new Date(y, m, i - startPad + 1));
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "fd-cal-grid", style: { width: months > 1 ? 252 : "auto", flex: "none" }, onMouseLeave: () => setHover(null), children: [
-      DOW.map((d) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-cal-dow", children: d }, d)),
-      cells.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        "button",
-        {
-          type: "button",
-          className: ["fd-cal-day", d.getMonth() !== m ? "is-out" : "", iso(d) === iso(today) ? "is-today" : "", inRange(d) ? "in-range" : "", isEdge(d) ? "is-edge" : ""].filter(Boolean).join(" "),
-          onClick: () => clickDay(d),
-          onMouseEnter: () => range && setHover(iso(d)),
-          children: d.getDate()
-        },
-        i
-      ))
-    ] });
+    for (let i = 0; i < 42; i++) {
+      const dom = i - startPad + 1;
+      cells.push(dom >= 1 && dom <= last ? new Date(y, m, dom) : null);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      "div",
+      {
+        className: "fd-cal-grid",
+        role: "grid",
+        "aria-label": monthYearLabel(new Date(y, m, 1)),
+        style: { width: months > 1 ? 252 : "auto", flex: "none" },
+        onMouseLeave: () => setHover(null),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-cal-row", role: "row", children: DOW.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-cal-dow", role: "columnheader", "aria-label": weekdayLong(i), children: d }, d)) }),
+          Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-cal-row", role: "row", children: cells.slice(row * 7, row * 7 + 7).map((d, col) => {
+            if (!d) return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-cal-day is-empty", role: "presentation", "aria-hidden": "true" }, col);
+            const today_ = iso(d) === iso(today);
+            const start = isStart(d), end = isEnd(d), selected = isEdge(d);
+            const bits = [];
+            if (range && start) bits.push("start date");
+            if (range && end) bits.push("end date");
+            if (selected && !range) bits.push("selected");
+            if (today_) bits.push("today");
+            const name = bits.length ? fullDateLabel(d) + ", " + bits.join(", ") : fullDateLabel(d);
+            return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              "div",
+              {
+                "data-iso": iso(d),
+                role: "gridcell",
+                tabIndex: iso(d) === iso(activeDate) ? 0 : -1,
+                "aria-label": name,
+                "aria-selected": selected,
+                "aria-current": today_ ? "date" : void 0,
+                className: ["fd-cal-day", today_ ? "is-today" : "", inRange(d) ? "in-range" : "", selected ? "is-edge" : ""].filter(Boolean).join(" "),
+                onClick: () => clickDay(d),
+                onMouseEnter: () => range && setHover(iso(d)),
+                onKeyDown: onGridKeyDown,
+                onFocus: () => setActiveDate(d),
+                children: d.getDate()
+              },
+              col
+            );
+          }) }, row))
+        ]
+      }
+    );
   };
-  const nextY = vm === 11 ? vy + 1 : vy, nextM = (vm + 1) % 12;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "fd-cal", style: { width: months > 1 && mode2 === "days" ? "auto" : void 0 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "fd-cal", style: { width: months > 1 && mode2 === "days" ? "auto" : void 0 }, ref: calRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "fd-cal-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Previous", onClick: () => mode2 === "years" ? setVy(vy - 12) : mode2 === "months" ? setVy(vy - 1) : nav(-1), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "ph ph-caret-left" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": prevLabel, onClick: () => mode2 === "years" ? setVy(vy - 12) : mode2 === "months" ? setVy(vy - 1) : nav(-1), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "ph ph-caret-left" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("button", { type: "button", className: "fd-cal-title", onClick: () => setMode(mode2 === "days" ? "months" : mode2 === "months" ? "years" : "days"), children: [
-        mode2 === "days" ? MONTHS[vm] + " " + vy : mode2 === "months" ? vy : vy - 5 + " \u2013 " + (vy + 6),
+        monthHeading,
         /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "ph ph-caret-down", style: { fontSize: 10, marginLeft: 6, color: "var(--text-muted)" } })
       ] }),
       months > 1 && mode2 === "days" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fd-cal-title", style: { cursor: "default", background: "none" }, children: MONTHS[nextM] + " " + nextY }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Next", onClick: () => mode2 === "years" ? setVy(vy + 12) : mode2 === "months" ? setVy(vy + 1) : nav(1), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "ph ph-caret-right" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": nextLabel, onClick: () => mode2 === "years" ? setVy(vy + 12) : mode2 === "months" ? setVy(vy + 1) : nav(1), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "ph ph-caret-right" }) })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-live": "polite", className: "fd-sr-only", children: monthHeading }),
     mode2 === "days" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: 18 }, children: [
       monthGrid(vy, vm),
       months > 1 ? monthGrid(nextY, nextM) : null
@@ -3401,6 +3542,7 @@ function Calendar({ value, range = false, onPick, initialMonth, months = 1 }) {
             setVy(today.getFullYear());
             setVm(today.getMonth());
             setMode("days");
+            moveActive(today);
           },
           children: "Today"
         }
@@ -14250,6 +14392,7 @@ function useDocumentTitle(routeTitle, appName) {
   installFlytedeskFavicon,
   isImage,
   isSystemMessage,
+  isWithinLayerTree,
   jobBucket,
   languageLabel,
   loadPrefs,