@wipco/sdui 1.4.2 → 1.6.0

package/dist/{chunk-I5SD7XRA.js → chunk-6TI4WF5Y.js}

@@ -1,6 +1,6 @@
-import { useSduiAdapter, hostFetchOf } from './chunk-KO6OEY3G.js';
-import { Badge, Tag } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useSduiAdapter, hostFetchOf } from './chunk-YNEEJCSZ.js';
+import { Badge, Tag } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useEffect, useMemo, useState } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-44TDRCKR.js → chunk-6XI2VF2O.js}

@@ -1,6 +1,6 @@
-import { DateRangePicker } from './chunk-RWSH2MBU.js';
-import { SegmentedControl, Select } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { DateRangePicker } from './chunk-X2NIRVLN.js';
+import { SegmentedControl, Select } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -161,14 +161,14 @@ function PeriodFilterImpl({ value, onChange, years, modes }) {
         gap: "var(--wp-space-2)"
       },
       children: [
-        /* @__PURE__ */ jsx(
+        modeItems.length > 1 ? /* @__PURE__ */ jsx(
           SegmentedControl,
           {
             items: [...modeItems],
             value: period.mode,
             onChange: (m) => emit(convertMode(period, m))
           }
-        ),
+        ) : null,
         period.mode !== "custom" ? /* @__PURE__ */ jsx("span", { style: { width: 96, flex: "none" }, children: /* @__PURE__ */ jsx(
           Select,
           {

package/dist/{chunk-HBIIEYKW.js → chunk-7C54CKFZ.js}

@@ -1,7 +1,7 @@
-import { includesLooseSearch } from './chunk-UV6HHFEW.js';
-import { OverlayLayer } from './chunk-XQPTSEJC.js';
-import { Button, Dialog, Input, Tag, Checkbox } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { includesLooseSearch } from './chunk-4OABUPIU.js';
+import { OverlayLayer } from './chunk-BITS7UJY.js';
+import { Button, Dialog, Input, Tag, Checkbox } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo, useState } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-IZ3JA2BR.js → chunk-7JP52QQO.js}

@@ -1,6 +1,6 @@
-import { useSduiAssetResolver } from './chunk-KO6OEY3G.js';
-import { Spinner, Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useSduiAssetResolver } from './chunk-YNEEJCSZ.js';
+import { Spinner, Icon } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-I45EUZC6.js → chunk-AY4GM6KQ.js}

@@ -1,5 +1,5 @@
-import { Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Icon } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -17,6 +17,8 @@ var SECURE_CSS = `
 @media print{
   .erp-secure--enabled .erp-secure__content{display:none !important}
   .erp-secure--enabled .erp-secure__print-warning{display:flex !important;position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:inherit;cursor:default}
+  /* \uBB38\uAD6C\uB294 \uD654\uBA74\uC6A9 \uBC18\uC804\uC0C9(\uD770 \uAE00\uC790)\uC744 \uB530\uB85C \uB4E4\uACE0 \uC788\uB2E4 \u2014 \uC885\uC774\uC5D0\uC11C\uB294 \uCEE8\uD14C\uC774\uB108 \uAE00\uC790\uC0C9\uC744 \uB530\uB77C\uC57C \uC77D\uD78C\uB2E4 */
+  .erp-secure--enabled .erp-secure__print-warning .erp-secure__cover-notice{color:inherit}
 }
 `;
 function SecureStyles() {

package/dist/{chunk-SAPBDJJQ.js → chunk-AZSLSAJB.js}

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

package/dist/chunk-BITS7UJY.js

@@ -0,0 +1,333 @@
+import { HoistedStyle } from './chunk-RIZRM7OO.js';
+import { MOBILE_MEDIA_QUERY } from './chunk-GSM664TX.js';
+import React, { useSyncExternalStore, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var OVERLAY_ROOT_ID = "wp-overlay-root";
+function isMobileViewport() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(MOBILE_MEDIA_QUERY).matches : false;
+}
+var DOCUMENT_POSITION_FOLLOWING = 4;
+function getOverlayRoot() {
+  if (typeof document === "undefined") return null;
+  const existing = document.getElementById(OVERLAY_ROOT_ID);
+  if (existing) return existing;
+  const created = document.createElement("div");
+  created.id = OVERLAY_ROOT_ID;
+  document.body.appendChild(created);
+  return created;
+}
+var layers = [];
+var nextId = 0;
+var subscribers = /* @__PURE__ */ new Set();
+var keyListenerBound = false;
+function emit() {
+  layers = layers.slice();
+  subscribers.forEach((fn) => fn());
+}
+function topLayer(list) {
+  let best;
+  let bestNode = null;
+  for (const layer of list) {
+    const node = layer.node();
+    if (!best) {
+      best = layer;
+      bestNode = node;
+      continue;
+    }
+    if (!node) continue;
+    if (!bestNode) {
+      best = layer;
+      bestNode = node;
+      continue;
+    }
+    if (bestNode.compareDocumentPosition(node) & DOCUMENT_POSITION_FOLLOWING) {
+      best = layer;
+      bestNode = node;
+    }
+  }
+  return best;
+}
+function layerHoldsTop(list, id) {
+  const top = topLayer(list);
+  if (!top) return false;
+  if (top.id === id) return true;
+  const mine = list.find((l) => l.id === id)?.node();
+  const topNode = top.node();
+  return !!mine && !!topNode && mine.contains(topNode);
+}
+function escapeTopmost() {
+  topLayer(layers)?.onEscape();
+}
+function handleKeyDown(event) {
+  if (event.key === "Tab") {
+    trapTab(event);
+    return;
+  }
+  if (event.key !== "Escape") return;
+  escapeTopmost();
+}
+var TABBABLE = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), iframe, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+function tabbablesIn(root) {
+  return Array.from(root.querySelectorAll(TABBABLE)).filter((el) => {
+    if (el.tabIndex < 0) return false;
+    if (el.closest("[inert]")) return false;
+    return typeof el.getClientRects !== "function" || el.getClientRects().length > 0 || !hasLayout();
+  });
+}
+function hasLayout() {
+  return typeof document !== "undefined" && document.documentElement.getClientRects().length > 0;
+}
+function topModal() {
+  return topLayer(layers.filter((layer) => layer.modal));
+}
+function trapTab(event) {
+  const modal = topModal();
+  const root = modal?.node();
+  if (!modal || !root) return;
+  const active = typeof document !== "undefined" ? document.activeElement : null;
+  if (active instanceof HTMLElement && !root.contains(active) && active.closest(".wp-anchored-pop")) return;
+  const stops = tabbablesIn(root);
+  const container = root.querySelector('[role="dialog"]');
+  if (stops.length === 0) {
+    event.preventDefault();
+    (container ?? root).focus?.();
+    return;
+  }
+  const first = stops[0];
+  const last = stops[stops.length - 1];
+  const inside = active instanceof HTMLElement && root.contains(active);
+  if (!inside) {
+    event.preventDefault();
+    (event.shiftKey ? last : first).focus();
+    return;
+  }
+  if (event.shiftKey && (active === first || active === container)) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && active === last) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+var FIELD = "input, select, textarea";
+var TEXT_INPUT_TYPES = /* @__PURE__ */ new Set(["", "text", "search", "email", "tel", "url", "number", "password"]);
+function isPlainTextField(el) {
+  if (el.matches(":disabled") || el.hasAttribute("readonly")) return false;
+  if (el.getAttribute("aria-haspopup") || el.getAttribute("role") === "combobox") return false;
+  if (el.tagName === "INPUT") return TEXT_INPUT_TYPES.has((el.getAttribute("type") ?? "").toLowerCase());
+  return true;
+}
+function initialFocusTarget(root, preferField) {
+  const explicit = root.querySelector("[autofocus], [data-autofocus]");
+  if (explicit) return explicit;
+  const container = root.querySelector('[role="dialog"]');
+  if (preferField) {
+    const body = root.querySelector(".wp-dialog__body") ?? container ?? root;
+    const firstField = Array.from(body.querySelectorAll(FIELD)).find(
+      (el) => !(el.tagName === "INPUT" && el.getAttribute("type") === "hidden") && !el.closest("[inert]")
+    );
+    if (firstField && isPlainTextField(firstField)) return firstField;
+  }
+  if (container) {
+    if (!container.hasAttribute("tabindex")) container.setAttribute("tabindex", "-1");
+    return container;
+  }
+  return tabbablesIn(root)[0] ?? null;
+}
+var pendingRestores = [];
+var restoreTimer = null;
+function scheduleRestore(target) {
+  if (target) pendingRestores.push(target);
+  if (restoreTimer) return;
+  restoreTimer = setTimeout(() => {
+    restoreTimer = null;
+    const candidates = pendingRestores;
+    pendingRestores = [];
+    const active = document.activeElement;
+    if (active && active !== document.body && active.isConnected) return;
+    const target2 = [...candidates].reverse().find((el) => el.isConnected);
+    if (target2) {
+      target2.focus({ preventScroll: true });
+      return;
+    }
+    const root = topModal()?.node();
+    if (root) initialFocusTarget(root, !isMobileViewport())?.focus({ preventScroll: true });
+  }, 0);
+}
+function takeRestoreTarget() {
+  const inherited = [...pendingRestores].reverse().find((el) => el.isConnected);
+  if (inherited) {
+    pendingRestores = pendingRestores.filter((el) => el !== inherited);
+    return inherited;
+  }
+  if (typeof document === "undefined") return null;
+  const active = document.activeElement;
+  return active instanceof HTMLElement && active !== document.body ? active : null;
+}
+var HISTORY_MARK = "__wpModal";
+var TOKEN_PREFIX = Date.now().toString(36);
+var tokenSeq = 0;
+var pushedToken = "";
+var historyPushed = false;
+var pushedPath = "";
+var pushedLength = 0;
+var ignorePops = 0;
+var popBound = false;
+var reconcileTimer = null;
+function historyModals() {
+  return layers.filter((layer) => layer.modal && layer.history);
+}
+function canUseHistory() {
+  return typeof window !== "undefined" && typeof window.history?.pushState === "function";
+}
+function pushHistoryEntry() {
+  if (historyPushed || !canUseHistory() || !isMobileViewport()) return;
+  const current = window.history.state;
+  tokenSeq += 1;
+  pushedToken = `${TOKEN_PREFIX}-${tokenSeq}`;
+  window.history.pushState({ ...current ?? {}, [HISTORY_MARK]: pushedToken }, "", window.location.href);
+  historyPushed = true;
+  pushedPath = window.location.pathname;
+  pushedLength = window.history.length;
+  if (!popBound) {
+    window.addEventListener("popstate", handlePopState);
+    popBound = true;
+  }
+}
+function reconcileHistory() {
+  reconcileTimer = null;
+  if (!canUseHistory()) return;
+  const open = historyModals().length > 0;
+  if (open && !historyPushed) {
+    pushHistoryEntry();
+    return;
+  }
+  if (!open && historyPushed) {
+    historyPushed = false;
+    if (window.location.pathname === pushedPath && window.history.length === pushedLength) {
+      ignorePops += 1;
+      window.history.back();
+    }
+  }
+}
+function scheduleReconcile(delay = 0) {
+  if (!canUseHistory()) return;
+  if (reconcileTimer) clearTimeout(reconcileTimer);
+  reconcileTimer = setTimeout(reconcileHistory, delay);
+}
+function handlePopState() {
+  if (ignorePops > 0) {
+    ignorePops -= 1;
+    return;
+  }
+  if (!historyPushed) return;
+  const landed = window.history.state;
+  if (landed?.[HISTORY_MARK] === pushedToken) return;
+  historyPushed = false;
+  if (historyModals().length === 0) return;
+  escapeTopmost();
+  scheduleReconcile(300);
+}
+function push(layer) {
+  layers.push(layer);
+  if (!keyListenerBound && typeof document !== "undefined") {
+    document.addEventListener("keydown", handleKeyDown);
+    keyListenerBound = true;
+  }
+  if (layer.modal && layer.history) pushHistoryEntry();
+  emit();
+}
+function remove(id) {
+  const removed = layers.find((l) => l.id === id);
+  layers = layers.filter((l) => l.id !== id);
+  if (removed?.modal && removed.history) scheduleReconcile();
+  emit();
+}
+function subscribe(fn) {
+  subscribers.add(fn);
+  return () => {
+    subscribers.delete(fn);
+  };
+}
+var snapshot = () => layers;
+var serverSnapshot = () => [];
+function useOverlayLayer(active, onEscape, nodeRef) {
+  return useLayer(active, onEscape, nodeRef, false, false);
+}
+var anyModalSnapshot = () => layers.some((layer) => layer.modal === true);
+var anyModalServerSnapshot = () => false;
+function useAnyModalOpen() {
+  return useSyncExternalStore(subscribe, anyModalSnapshot, anyModalServerSnapshot);
+}
+function useLayer(active, onEscape, nodeRef, modal, history) {
+  const idRef = useRef(0);
+  if (idRef.current === 0) idRef.current = ++nextId;
+  const escapeRef = useRef(onEscape);
+  escapeRef.current = onEscape;
+  const nodeRefRef = useRef(nodeRef);
+  nodeRefRef.current = nodeRef;
+  useEffect(() => {
+    if (!active) return;
+    const id2 = idRef.current;
+    push({
+      id: id2,
+      onEscape: () => escapeRef.current?.(),
+      node: () => nodeRefRef.current?.current ?? null,
+      modal,
+      history
+    });
+    return () => remove(id2);
+  }, [active, modal, history]);
+  const current = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+  const id = idRef.current;
+  return {
+    isTop: active && topLayer(current)?.id === id,
+    holdsTop: active && layerHoldsTop(current, id)
+  };
+}
+var OverlayContainerContext = React.createContext(null);
+function OverlayLayer({
+  onClose,
+  children
+}) {
+  const ref = useRef(null);
+  const container = React.useContext(OverlayContainerContext);
+  const { holdsTop } = useLayer(true, onClose, ref, true, container === null);
+  const restoreRef = useRef(null);
+  useEffect(() => {
+    restoreRef.current = takeRestoreTarget();
+    return () => scheduleRestore(restoreRef.current);
+  }, []);
+  const focusedRef = useRef(false);
+  useEffect(() => {
+    const root2 = ref.current;
+    root2?.toggleAttribute("inert", !holdsTop);
+    if (!root2 || !holdsTop || focusedRef.current) return;
+    focusedRef.current = true;
+    if (document.activeElement && root2.contains(document.activeElement)) return;
+    initialFocusTarget(root2, !isMobileViewport())?.focus({ preventScroll: true });
+  }, [holdsTop]);
+  const layer = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: "wp-overlay-layer",
+      onClick: (event) => {
+        if (onClose && event.target instanceof HTMLElement && event.target.classList.contains("wp-overlay")) {
+          onClose();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(HoistedStyle, { id: "wp-overlay-focus", css: OVERLAY_FOCUS_CSS }),
+        children
+      ]
+    }
+  );
+  const root = container ?? getOverlayRoot();
+  return root ? createPortal(layer, root) : layer;
+}
+var OVERLAY_FOCUS_CSS = `.wp-overlay-layer [role="dialog"][tabindex="-1"]:focus{outline:none}`;
+
+export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useAnyModalOpen, useOverlayLayer };