@wipco/sdui 1.5.0 → 1.6.1

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 };

package/dist/{chunk-DOL57OOP.js → chunk-BV37UCDF.js}

@@ -1,7 +1,7 @@
 import { fetchAllJobPositions } from './chunk-XRHR452N.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Select, Button } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
+import { Select, Button } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useState, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-CSZCWBOE.js

@@ -0,0 +1,256 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+// src/widgets/usePanZoomCanvas.ts
+var MIN_ZOOM = 0.35;
+var MAX_ZOOM = 1.8;
+var PINCH_CLICK_GRACE_MS = 400;
+var PAN_SLOP_PX = 6;
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function applyZoom(current, nextScale, focal) {
+  const scale = clamp(nextScale, MIN_ZOOM, MAX_ZOOM);
+  return {
+    scale,
+    x: focal.x - (focal.x - current.x) / current.scale * scale,
+    y: focal.y - (focal.y - current.y) / current.scale * scale
+  };
+}
+function applyPinch(start, startDistance, startMid, distance, mid) {
+  const ratio = startDistance > 0 ? distance / startDistance : 1;
+  const zoomed = applyZoom(start, start.scale * ratio, startMid);
+  return { ...zoomed, x: zoomed.x + mid.x - startMid.x, y: zoomed.y + mid.y - startMid.y };
+}
+function usePanZoomCanvas(options) {
+  const { stopSelector, initialView } = options;
+  const viewportRef = useRef(null);
+  const dragRef = useRef(null);
+  const interactedRef = useRef(false);
+  const pointersRef = useRef(/* @__PURE__ */ new Map());
+  const pinchRef = useRef(null);
+  const pendingRef = useRef(null);
+  const gestureEndedAtRef = useRef(0);
+  const dragFromStopRef = useRef(false);
+  const viewRef = useRef(initialView);
+  const [view, setViewState] = useState(initialView);
+  const setView = useCallback((next) => {
+    setViewState((current) => {
+      const resolved = typeof next === "function" ? next(current) : next;
+      viewRef.current = resolved;
+      return resolved;
+    });
+  }, []);
+  const [dragging, setDragging] = useState(false);
+  const [nativeFullscreen, setNativeFullscreen] = useState(false);
+  const [pseudoFullscreen, setPseudoFullscreen] = useState(false);
+  const isFullscreen = nativeFullscreen || pseudoFullscreen;
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setNativeFullscreen(document.fullscreenElement === viewportRef.current);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+  useEffect(() => {
+    if (!pseudoFullscreen) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") setPseudoFullscreen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [pseudoFullscreen]);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const onTouchMove = (event) => {
+      if (event.touches.length >= 2 && event.cancelable) event.preventDefault();
+    };
+    viewport.addEventListener("touchmove", onTouchMove, { passive: false });
+    return () => viewport.removeEventListener("touchmove", onTouchMove);
+  }, []);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const onWheel = (event) => {
+      event.preventDefault();
+      interactedRef.current = true;
+      const rect = viewport.getBoundingClientRect();
+      const focal = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      setView(
+        (current) => applyZoom(current, current.scale * (event.deltaY > 0 ? 0.9 : 1.1), focal)
+      );
+    };
+    viewport.addEventListener("wheel", onWheel, { passive: false });
+    return () => viewport.removeEventListener("wheel", onWheel);
+  }, []);
+  const viewportCenter = useCallback(() => {
+    const rect = viewportRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+    return { x: rect.width / 2, y: rect.height / 2 };
+  }, []);
+  const zoomAt = useCallback((nextScale, focal) => {
+    interactedRef.current = true;
+    setView((current) => applyZoom(current, nextScale, focal));
+  }, []);
+  const localPoint = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const pinchGeometry = () => {
+    const [a, b] = [...pointersRef.current.values()];
+    return {
+      distance: Math.hypot(b.x - a.x, b.y - a.y),
+      mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+    };
+  };
+  const restartPan = (pointerId, point, event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    dragRef.current = {
+      pointerId,
+      startX: point.x + rect.left,
+      startY: point.y + rect.top,
+      originX: viewRef.current.x,
+      originY: viewRef.current.y
+    };
+    dragFromStopRef.current = true;
+  };
+  const capturePointer = (event, pointerId) => {
+    try {
+      event.currentTarget.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const startPan = (event, pointerId, start, fromStop) => {
+    interactedRef.current = true;
+    dragRef.current = {
+      pointerId,
+      startX: start.x,
+      startY: start.y,
+      originX: viewRef.current.x,
+      originY: viewRef.current.y
+    };
+    dragFromStopRef.current = fromStop;
+    setDragging(true);
+    capturePointer(event, pointerId);
+  };
+  const handlePointerDown = (event) => {
+    const onStop = Boolean(event.target.closest(stopSelector));
+    if (onStop && event.pointerType !== "touch") return;
+    pointersRef.current.set(event.pointerId, localPoint(event));
+    if (pointersRef.current.size === 2) {
+      interactedRef.current = true;
+      dragRef.current = null;
+      pendingRef.current = null;
+      const { distance, mid } = pinchGeometry();
+      pinchRef.current = { start: viewRef.current, distance, mid };
+      for (const pointerId of pointersRef.current.keys()) capturePointer(event, pointerId);
+      setDragging(true);
+      return;
+    }
+    if (pointersRef.current.size > 2) return;
+    if (onStop || event.pointerType === "touch" && !isFullscreen) {
+      pendingRef.current = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, fromStop: onStop };
+      return;
+    }
+    startPan(event, event.pointerId, { x: event.clientX, y: event.clientY }, false);
+  };
+  const handleClickCapture = (event) => {
+    const dragFromStop = dragRef.current !== null && dragFromStopRef.current;
+    if (pinchRef.current || dragFromStop || Date.now() - gestureEndedAtRef.current < PINCH_CLICK_GRACE_MS) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  const handlePointerMove = (event) => {
+    if (!pointersRef.current.has(event.pointerId)) return;
+    pointersRef.current.set(event.pointerId, localPoint(event));
+    const pinch = pinchRef.current;
+    if (pinch && pointersRef.current.size >= 2) {
+      const { distance, mid } = pinchGeometry();
+      setView(applyPinch(pinch.start, pinch.distance, pinch.mid, distance, mid));
+      return;
+    }
+    const pending = pendingRef.current;
+    if (pending && pending.pointerId === event.pointerId) {
+      const dx = event.clientX - pending.startX;
+      const dy = event.clientY - pending.startY;
+      if (Math.hypot(dx, dy) < PAN_SLOP_PX) return;
+      pendingRef.current = null;
+      if (!isFullscreen && Math.abs(dy) > Math.abs(dx)) return;
+      startPan(event, event.pointerId, { x: pending.startX, y: pending.startY }, pending.fromStop);
+    }
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    setView((current) => ({
+      ...current,
+      x: drag.originX + event.clientX - drag.startX,
+      y: drag.originY + event.clientY - drag.startY
+    }));
+  };
+  const handlePointerUp = (event) => {
+    if (!pointersRef.current.has(event.pointerId)) return;
+    pointersRef.current.delete(event.pointerId);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    if (pendingRef.current?.pointerId === event.pointerId) pendingRef.current = null;
+    if (pinchRef.current && pointersRef.current.size < 2) {
+      pinchRef.current = null;
+      gestureEndedAtRef.current = Date.now();
+      const rest = [...pointersRef.current.entries()][0];
+      if (rest) restartPan(rest[0], rest[1], event);
+    }
+    if (dragRef.current?.pointerId === event.pointerId) {
+      if (dragFromStopRef.current) gestureEndedAtRef.current = Date.now();
+      dragRef.current = null;
+      dragFromStopRef.current = false;
+    }
+    if (pointersRef.current.size === 0) {
+      dragRef.current = null;
+      dragFromStopRef.current = false;
+      setDragging(false);
+    }
+  };
+  const toggleFullscreen = async () => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    if (pseudoFullscreen) {
+      setPseudoFullscreen(false);
+      return;
+    }
+    if (document.fullscreenElement === viewport) {
+      try {
+        await document.exitFullscreen();
+      } catch {
+      }
+      return;
+    }
+    try {
+      if (typeof viewport.requestFullscreen !== "function") throw new Error("unsupported");
+      await viewport.requestFullscreen();
+    } catch {
+      setPseudoFullscreen(true);
+    }
+  };
+  return {
+    viewportRef,
+    view,
+    setView,
+    dragging,
+    isFullscreen,
+    /** 브라우저 전체화면 대신 화면을 덮는 고정 배치로 들어가 있는가(위젯이 배치 클래스를 붙인다). */
+    pseudoFullscreen,
+    interactedRef,
+    viewportCenter,
+    zoomAt,
+    toggleFullscreen,
+    /** 뷰포트 div에 그대로 spread — 패닝 4종 + 핀치 직후 click 차단. */
+    pointerHandlers: {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onClickCapture: handleClickCapture
+    }
+  };
+}
+
+export { MAX_ZOOM, MIN_ZOOM, usePanZoomCanvas };