@wipco/sdui 1.5.0 → 1.6.1

package/dist/{chunk-2HLXCKK7.js → chunk-OCYJ2ZOV.js}

@@ -1,5 +1,5 @@
-import { Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Icon } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useId, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-OQ52XMGG.js → chunk-OKNF2SBB.js}

@@ -1,7 +1,7 @@
-import { resolveTreeNodes, TreeView } from './chunk-GZBY7I4Y.js';
-import { OverlayLayer } from './chunk-XQPTSEJC.js';
-import { Field, Dialog, Icon, Button, Input } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { resolveTreeNodes, TreeView } from './chunk-TWUKNUUQ.js';
+import { OverlayLayer } from './chunk-BITS7UJY.js';
+import { Field, Dialog, Icon, Button, Input } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-GNA6SX2H.js → chunk-OQ7A3SFM.js}

@@ -1,6 +1,6 @@
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { Tag } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Tag } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-A5XQOEVH.js → chunk-PCFH74RD.js}

@@ -1,7 +1,7 @@
-import { fetchAllPages } from './chunk-Q4SWUINA.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { fetchAllPages } from './chunk-VAXRTBJH.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
+import { Alert, Badge, Spinner, Button, Input, Checkbox } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-BEM2YS7U.js → chunk-SGGIWPP6.js}

@@ -1,6 +1,6 @@
-import { Text } from './chunk-WPSK2CB5.js';
-import { Switch, Field, Select, Input } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Text } from './chunk-UC725BGW.js';
+import { Switch, Field, Select, Input } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-NIJUVTEW.js → chunk-TB7G5DXQ.js}

@@ -1,6 +1,6 @@
-import { DatePicker, TimePicker } from './chunk-RWSH2MBU.js';
-import { Field } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { DatePicker, TimePicker } from './chunk-FP32LNFK.js';
+import { Field } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-GZBY7I4Y.js → chunk-TWUKNUUQ.js}

@@ -1,6 +1,6 @@
-import { buildCascadingTree } from './chunk-UV6HHFEW.js';
-import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { buildCascadingTree } from './chunk-A57GKV5F.js';
+import { Input, IconButton, EmptyState, Icon, Badge } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -66,6 +66,35 @@ function collectExpandedIds(nodes, maxDepth, depth = 0, acc = /* @__PURE__ */ ne
   }
   return acc;
 }
+function ancestorIdsOf(nodes, id) {
+  const path = [];
+  const walk = (list) => {
+    for (const node of list) {
+      if (node.id === id) return true;
+      if (node.children && node.children.length > 0) {
+        path.push(node.id);
+        if (walk(node.children)) return true;
+        path.pop();
+      }
+    }
+    return false;
+  };
+  return walk(nodes) ? path : null;
+}
+function withAncestors(prev, nodes, selected) {
+  if (selected == null || selected === "") return prev;
+  const ancestors = ancestorIdsOf(nodes, selected);
+  if (!ancestors || ancestors.every((id) => prev.has(id))) return prev;
+  return /* @__PURE__ */ new Set([...prev, ...ancestors]);
+}
+function scrollRowIntoBox(box, row) {
+  if (box.scrollHeight <= box.clientHeight) return;
+  const boxRect = box.getBoundingClientRect();
+  const rowRect = row.getBoundingClientRect();
+  const scale = box.offsetHeight && boxRect.height > 0 ? boxRect.height / box.offsetHeight : 1;
+  if (rowRect.top < boxRect.top) box.scrollTop -= (boxRect.top - rowRect.top) / scale;
+  else if (rowRect.bottom > boxRect.bottom) box.scrollTop += (rowRect.bottom - boxRect.bottom) / scale;
+}
 function toggled(prev, id) {
   const next = new Set(prev);
   if (next.has(id)) next.delete(id);
@@ -84,18 +113,44 @@ function TreeViewImpl({
   maxHeight
 }) {
   const sourceNodes = useMemo(() => resolveTreeNodes(nodes, rows, tree), [nodes, rows, tree]);
-  const [expanded, setExpanded] = useState(() => collectExpandedIds(sourceNodes, defaultExpandedDepth));
+  const [innerSelected, setInnerSelected] = useState(null);
+  const isControlled = selectedId !== void 0;
+  const currentSelected = isControlled ? selectedId : innerSelected;
+  const [expanded, setExpanded] = useState(
+    () => withAncestors(collectExpandedIds(sourceNodes, defaultExpandedDepth), sourceNodes, currentSelected)
+  );
   const [searchCollapsed, setSearchCollapsed] = useState(() => /* @__PURE__ */ new Set());
   const [query, setQuery] = useState("");
-  const [innerSelected, setInnerSelected] = useState(null);
+  const treeRef = useRef(null);
   const hadRows = useRef(Array.isArray(rows) && rows.length > 0);
   useEffect(() => {
     const hasRows = Array.isArray(rows) && rows.length > 0;
-    if (hasRows && !hadRows.current) setExpanded(collectExpandedIds(sourceNodes, defaultExpandedDepth));
+    if (hasRows && !hadRows.current) {
+      setExpanded(withAncestors(collectExpandedIds(sourceNodes, defaultExpandedDepth), sourceNodes, currentSelected));
+    }
     hadRows.current = hasRows;
-  }, [rows, sourceNodes, defaultExpandedDepth]);
-  const isControlled = selectedId !== void 0;
-  const currentSelected = isControlled ? selectedId : innerSelected;
+  }, [rows, sourceNodes, defaultExpandedDepth, currentSelected]);
+  const revealedFor = useRef(null);
+  const scrollPending = useRef(false);
+  useEffect(() => {
+    if (currentSelected == null || currentSelected === "") {
+      revealedFor.current = null;
+      return;
+    }
+    if (revealedFor.current === currentSelected) return;
+    if (ancestorIdsOf(sourceNodes, currentSelected) === null) return;
+    revealedFor.current = currentSelected;
+    scrollPending.current = true;
+    setExpanded((prev) => withAncestors(prev, sourceNodes, currentSelected));
+  }, [currentSelected, sourceNodes]);
+  useEffect(() => {
+    if (!scrollPending.current) return;
+    const box = treeRef.current;
+    const row = box?.querySelector('[aria-current="true"]');
+    if (!box || !row) return;
+    scrollPending.current = false;
+    scrollRowIntoBox(box, row);
+  });
   const trimmedQuery = query.trim().toLowerCase();
   const searching = trimmedQuery.length > 0;
   const visibleNodes = useMemo(() => {
@@ -271,6 +326,7 @@ function TreeViewImpl({
         /* @__PURE__ */ jsx(
           "div",
           {
+            ref: treeRef,
             role: "tree",
             className: "wp-scroll",
             style: { overflowY: "auto", ...maxHeight ? { maxHeight } : null },
@@ -283,4 +339,4 @@ function TreeViewImpl({
 }
 var TreeView = boxed(TreeViewImpl, "TreeView");
 
-export { TreeView, buildTreeNodes, pruneExcluded, resolveTreeNodes };
+export { TreeView, ancestorIdsOf, buildTreeNodes, pruneExcluded, resolveTreeNodes, scrollRowIntoBox };

package/dist/{chunk-WPSK2CB5.js → chunk-UC725BGW.js}

@@ -1,4 +1,5 @@
-import { mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, GAP_CSS } from './chunk-5WW4MBRO.js';
+import { formatDisplayValue } from './chunk-YYAGE733.js';
+import { mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, GAP_CSS } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -9,6 +10,7 @@ function paddingStyle(padding) {
 function Grid({
   columns = 3,
   template,
+  collapse = true,
   gap,
   rowGap,
   columnGap,
@@ -23,10 +25,16 @@ function Grid({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: joinClass("wp-grid", !template && columnsClass(columns), className),
+      className: joinClass(
+        "wp-grid",
+        template ? "wp-grid--custom" : columnsClass(columns),
+        collapse === false && "wp-grid--nocollapse",
+        className
+      ),
       style: mergeStyle(
         {
-          ...template ? { gridTemplateColumns: template } : null,
+          // 규칙(`.wp-grid--custom{grid-template-columns:var(--wp-grid-template)}`)은 LAYOUT_CSS 에 있다.
+          ...template ? { "--wp-grid-template": String(template) } : null,
           ...containerLayoutStyle({ gap, rowGap, columnGap, align, justify, wrap }),
           ...paddingStyle(padding)
         },
@@ -135,6 +143,7 @@ function Text({
     }
   );
 }
+var KV_BLOCK_AUTO_LENGTH = 80;
 function KeyValueList({ source, items, className, style }) {
   return /* @__PURE__ */ jsx("div", { className: joinClass("wp-kv", className), style, children: (items ?? []).map((item, index) => {
     const raw = item.key ? source?.[item.key] : item.value;
@@ -147,11 +156,13 @@ function KeyValueList({ source, items, className, style }) {
         word
       ] }, `${word}-${wordIndex}`)) });
     } else {
-      content = raw === null || raw === void 0 || raw === "" ? "\u2014" : raw;
+      const shown = formatDisplayValue(raw, item.format);
+      content = shown === null || shown === void 0 || shown === "" ? "\u2014" : shown;
     }
+    const block = item.block ?? (typeof content === "string" && (content.includes("\n") || content.length > KV_BLOCK_AUTO_LENGTH));
     return /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "wp-kv__k", children: item.label }),
-      /* @__PURE__ */ jsx("span", { className: joinClass("wp-kv__v", item.mono && "wp-mono"), children: content })
+      /* @__PURE__ */ jsx("span", { className: joinClass("wp-kv__v", block && "wp-kv__v--block", item.mono && "wp-mono"), children: content })
     ] }, index);
   }) });
 }

package/dist/{chunk-ZFNFPXPR.js → chunk-US3K6Q5T.js}

@@ -1,5 +1,5 @@
-import { Textarea, Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Textarea, Icon } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-MPT7WJG2.js → chunk-USNPJEXH.js}

@@ -1,8 +1,8 @@
-import { orderCircleStyle, ellipsisStyle, unwrapRows, uid } from './chunk-Q4SWUINA.js';
-import { includesLooseSearch } from './chunk-UV6HHFEW.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Icon, Badge, IconButton, Field, Select, Input, Tag, Spinner, Button, isPlainObject } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { orderCircleStyle, ellipsisStyle, unwrapRows, uid } from './chunk-VAXRTBJH.js';
+import { includesLooseSearch } from './chunk-A57GKV5F.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
+import { Icon, Badge, IconButton, Field, Select, Input, Tag, Spinner, Button, isPlainObject } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useState, useId, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-SAPBDJJQ.js → chunk-UZZLMPRW.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-YYAGE733.js';
 import { useState, useRef, useCallback, useEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-Q4SWUINA.js → chunk-VAXRTBJH.js}

@@ -1,4 +1,4 @@
-import { isPlainObject } from './chunk-RNOUXUBO.js';
+import { isPlainObject } from './chunk-YYAGE733.js';
 
 // src/widgets/shared.ts
 function unwrapRows(payload) {

package/dist/{chunk-RYBBPFI7.js → chunk-VQKX5PJ4.js}

@@ -1,8 +1,8 @@
 import { fetchAllJobPositions } from './chunk-XRHR452N.js';
-import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-TFGNKFL2.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-VR5MFUD2.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
+import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/chunk-VR5MFUD2.js

@@ -0,0 +1,106 @@
+import { OverlayLayer } from './chunk-BITS7UJY.js';
+import { Dialog, Button, warnOnce } from './chunk-YYAGE733.js';
+import { createContext, useContext, useMemo, useRef, useCallback, useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SduiDispatchContext = createContext(null);
+function useSduiDispatch() {
+  const dispatch = useContext(SduiDispatchContext);
+  if (!dispatch) {
+    throw new Error("useSduiDispatch\uB294 SduiRenderer \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
+  }
+  return dispatch;
+}
+var ALLOW_ALL = () => true;
+var DENY_ALL = () => false;
+var MISSING = () => {
+  warnOnce(
+    "permission:missing",
+    '[sdui] \uAD8C\uD55C \uD310\uC815(can)\uC774 \uC8FC\uC785\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4 \u2014 <Can>\uC774 \uC804\uBD80 \uD1B5\uACFC\uD569\uB2C8\uB2E4. SduiRenderer\uC5D0 can \uCF5C\uBC31\uC744 \uB118\uAE30\uAC70\uB098, \uC138\uC158\uC774 \uC5C6\uB294 \uBBF8\uB9AC\uBCF4\uAE30\uB77C\uBA74 can="allow-all"\uC744 \uBA85\uC2DC\uD558\uC138\uC694.'
+  );
+  return true;
+};
+var SduiPermissionContext = createContext(null);
+function SduiPermissionProvider({ can, children }) {
+  const value = useMemo(() => {
+    if (can === "allow-all") return ALLOW_ALL;
+    if (can === "deny-all") return DENY_ALL;
+    return typeof can === "function" ? can : null;
+  }, [can]);
+  return /* @__PURE__ */ jsx(SduiPermissionContext.Provider, { value, children });
+}
+function useSduiCan() {
+  return useContext(SduiPermissionContext) ?? MISSING;
+}
+var SduiRuntimeContext = createContext(null);
+function useSduiRuntime() {
+  const runtime = useContext(SduiRuntimeContext);
+  if (!runtime) throw new Error("useSduiRuntime\uC740 SduiRenderer \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
+  return runtime;
+}
+var SduiFormScopeContext = createContext(null);
+var SduiDirtyRegistryContext = createContext(null);
+var SduiLeaveRegistryContext = createContext(null);
+var DEFAULT_CONFIRM_MESSAGE = "\uC9C0\uAE08 \uB2EB\uC73C\uBA74 \uC785\uB825\uD55C \uB0B4\uC6A9\uC774 \uC800\uC7A5\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.";
+function isInsideBody(target) {
+  return target instanceof Element && target.closest(".wp-dialog__body, .wp-anchored-pop") !== null;
+}
+function SduiDialog({ confirmClose, ...props }) {
+  const { onClose } = props;
+  const dirtyChecks = useRef(/* @__PURE__ */ new Set());
+  const registry = useMemo(
+    () => ({
+      register: (isDirty) => {
+        dirtyChecks.current.add(isDirty);
+        return () => {
+          dirtyChecks.current.delete(isDirty);
+        };
+      }
+    }),
+    []
+  );
+  const touched = useRef(false);
+  const markTouched = useCallback((event) => {
+    if (isInsideBody(event.target)) touched.current = true;
+  }, []);
+  const [asking, setAsking] = useState(false);
+  const explicit = confirmClose === true || typeof confirmClose === "string" && confirmClose !== "";
+  const needsConfirm = () => {
+    if (confirmClose === false) return false;
+    if (explicit) return true;
+    if (!touched.current) return false;
+    for (const isDirty of dirtyChecks.current) if (isDirty()) return true;
+    return false;
+  };
+  const guardedClose = () => {
+    if (!onClose || asking) return;
+    if (needsConfirm()) setAsking(true);
+    else onClose();
+  };
+  const message = typeof confirmClose === "string" && confirmClose !== "" ? confirmClose : DEFAULT_CONFIRM_MESSAGE;
+  const keep = () => setAsking(false);
+  const discard = () => {
+    setAsking(false);
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsxs(SduiDirtyRegistryContext.Provider, { value: registry, children: [
+    /* @__PURE__ */ jsx(OverlayLayer, { onClose: onClose ? guardedClose : void 0, children: /* @__PURE__ */ jsx(Dialog, { ...props, onInputCapture: markTouched, onChangeCapture: markTouched, onPointerDownCapture: markTouched }) }),
+    asking ? /* @__PURE__ */ jsx(OverlayLayer, { onClose: keep, children: /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        size: "sm",
+        icon: "triangle-alert",
+        tone: "danger",
+        title: "\uC791\uC131 \uC911\uC778 \uB0B4\uC6A9\uC744 \uBC84\uB9B4\uAE4C\uC694?",
+        onClose: keep,
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", "data-autofocus": "", onClick: keep, children: "\uACC4\uC18D \uC791\uC131" }),
+          /* @__PURE__ */ jsx(Button, { variant: "danger", onClick: discard, children: "\uBC84\uB9AC\uACE0 \uB2EB\uAE30" })
+        ] }),
+        children: message
+      }
+    ) }) : null
+  ] });
+}
+
+export { SduiDialog, SduiDirtyRegistryContext, SduiDispatchContext, SduiFormScopeContext, SduiLeaveRegistryContext, SduiPermissionProvider, SduiRuntimeContext, useSduiCan, useSduiDispatch, useSduiRuntime };