@wipco/sdui 0.11.0 → 0.12.1

package/dist/{chunk-3YFDIRCI.js → chunk-PBGYAVQZ.js}

@@ -1,4 +1,4 @@
-import { includesLooseSearch } from './chunk-BJDWMECO.js';
+import { includesLooseSearch } from './chunk-QIDMPWZH.js';
 import { Icon, Button, Input, Spinner } from './chunk-B5JTXYDB.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useId, useRef, useState, useEffect, useMemo } from 'react';

package/dist/{chunk-BJDWMECO.js → chunk-QIDMPWZH.js}

@@ -1,4 +1,4 @@
-import { Tag, Input, Button, IconButton, Field, Checkbox } from './chunk-B5JTXYDB.js';
+import { Input, Button, IconButton, Tag, Field, Checkbox } from './chunk-B5JTXYDB.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -52,6 +52,63 @@ function Popover({
     ] })
   );
 }
+function normalizeSearchOptions(options, valueKey, labelKey) {
+  if (!Array.isArray(options)) return [];
+  return options.flatMap((raw) => {
+    if (raw === null || typeof raw !== "object") return [];
+    const row = raw;
+    const value = valueKey ? row[valueKey] : row.value;
+    if (value === void 0 || value === null) return [];
+    const label = (labelKey ? row[labelKey] : row.label) ?? value;
+    return [{ value: String(value), label: String(label) }];
+  });
+}
+function normalizeSearchFields(fields) {
+  return fields.map((field) => {
+    if (field.type === "select") {
+      if (!field.valueKey && !field.labelKey) return field;
+      return {
+        ...field,
+        options: normalizeSearchOptions(field.options, field.valueKey, field.labelKey),
+        valueKey: void 0,
+        labelKey: void 0
+      };
+    }
+    if (field.type === "cascading" && field.tree) {
+      return { ...field, options: buildCascadingTree(field.options, field.tree), tree: void 0 };
+    }
+    return field;
+  });
+}
+function buildCascadingTree(rows, tree) {
+  if (!Array.isArray(rows)) return [];
+  const nodes = /* @__PURE__ */ new Map();
+  const parents = /* @__PURE__ */ new Map();
+  for (const raw of rows) {
+    if (raw === null || typeof raw !== "object") continue;
+    const row = raw;
+    const id = row[tree.idKey];
+    if (id === void 0 || id === null) continue;
+    const parent = row[tree.parentIdKey];
+    nodes.set(String(id), {
+      value: String(id),
+      label: String(row[tree.labelKey] ?? id),
+      children: []
+    });
+    parents.set(String(id), parent === void 0 || parent === null ? null : String(parent));
+  }
+  const roots = [];
+  for (const [id, node] of nodes) {
+    const parent = parents.get(id);
+    const parentNode = parent === null || parent === void 0 ? void 0 : nodes.get(parent);
+    if (parentNode) parentNode.children.push(node);
+    else roots.push(node);
+  }
+  for (const node of nodes.values()) {
+    if (node.children.length === 0) delete node.children;
+  }
+  return roots;
+}
 function splitMultiValue(value) {
   return value.split(",").map((item) => item.trim()).filter(Boolean);
 }
@@ -179,7 +236,7 @@ function SearchToolbar({
   search,
   onSearchChange,
   onSearch,
-  advancedFields = EMPTY_FIELDS,
+  advancedFields: rawAdvancedFields = EMPTY_FIELDS,
   advancedValues = EMPTY_VALUES,
   placeholder = "\uAC80\uC0C9",
   className,
@@ -187,6 +244,7 @@ function SearchToolbar({
 }) {
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState(advancedValues);
+  const advancedFields = useMemo(() => normalizeSearchFields(rawAdvancedFields), [rawAdvancedFields]);
   const hasAdvanced = advancedFields.length > 0;
   useEffect(() => {
     if (!open) setDraft(advancedValues);
@@ -223,59 +281,76 @@ function SearchToolbar({
     setDraft(nextValues);
     onSearch(search.trim(), cleanSearchValues(advancedFields, nextValues));
   };
-  return /* @__PURE__ */ jsxs("form", { className: ["wp-row", className].filter(Boolean).join(" "), onSubmit: submit, children: [
-    activeCriteria.length > 0 ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { flexWrap: "wrap" }, children: activeCriteria.map((criterion) => /* @__PURE__ */ jsx(Tag, { onRemove: () => removeCriterion(criterion), children: criterion.label }, criterion.key)) }) : null,
-    !hideSearchInput ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          icon: "search",
-          value: search,
-          onChange: (event) => onSearchChange(event.target.value),
-          placeholder
-        }
-      ),
-      /* @__PURE__ */ jsx(Button, { type: "submit", variant: "secondary", icon: "search", children: "\uAC80\uC0C9" })
-    ] }) : null,
-    hasAdvanced ? /* @__PURE__ */ jsx(
-      Popover,
+  return (
+    /*
+     * 세로 축(컨트롤 행 + 칩 행) — 원래 칩이 컨트롤과 같은 행 **앞**에 끼어들어,
+     * 조건 몇 개만 적용해도 검색창·보기 전환·등록 버튼이 밀려 헤더가 통째로
+     * 무너졌다(실사용 지적, 장비 목록 스크린샷). 칩은 자기 행에서 개행한다.
+     */
+    /* @__PURE__ */ jsxs(
+      "form",
       {
-        open,
-        onClose: () => setOpen(false),
-        alignLeft: false,
-        width: "min(560px, 80vw)",
-        trigger: (
-          // 검색 입력창 옆에 나란히 서는 자리라 테두리가 있어야 한 덩어리로 읽힌다.
-          // 열린 상태는 인라인 배경이 아니라 pressed(aria-pressed 틴트)로 알린다.
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              type: "button",
-              icon: "sliders-horizontal",
-              label: "\uC0C1\uC138\uAC80\uC0C9",
-              variant: "outlined",
-              pressed: open,
-              "aria-expanded": open,
-              onClick: () => setOpen((value) => !value)
-            }
-          )
-        ),
-        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: "refresh-cw", onClick: resetAdvancedSearch, children: "\uCD08\uAE30\uD654" }),
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: applyAdvancedSearch, children: "\uC801\uC6A9" })
-        ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "wp-grid wp-grid--2", children: advancedFields.map((field) => /* @__PURE__ */ jsx(
-          SearchFieldInput,
-          {
-            field,
-            values: draft,
-            onChange: (patch) => setDraft((current) => ({ ...current, ...patch }))
-          },
-          field.key
-        )) })
+        className: ["wp-col", className].filter(Boolean).join(" "),
+        style: { gap: "var(--wp-space-2)" },
+        onSubmit: submit,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "wp-row", children: [
+            !hideSearchInput ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  icon: "search",
+                  value: search,
+                  onChange: (event) => onSearchChange(event.target.value),
+                  placeholder
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "submit", variant: "secondary", icon: "search", children: "\uAC80\uC0C9" })
+            ] }) : null,
+            hasAdvanced ? /* @__PURE__ */ jsx(
+              Popover,
+              {
+                open,
+                onClose: () => setOpen(false),
+                alignLeft: false,
+                width: "min(560px, 80vw)",
+                trigger: (
+                  // 검색 입력창 옆에 나란히 서는 자리라 테두리가 있어야 한 덩어리로 읽힌다.
+                  // 열린 상태는 인라인 배경이 아니라 pressed(aria-pressed 틴트)로 알린다.
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      type: "button",
+                      icon: "sliders-horizontal",
+                      label: "\uC0C1\uC138\uAC80\uC0C9",
+                      variant: "outlined",
+                      pressed: open,
+                      "aria-expanded": open,
+                      onClick: () => setOpen((value) => !value)
+                    }
+                  )
+                ),
+                footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: "refresh-cw", onClick: resetAdvancedSearch, children: "\uCD08\uAE30\uD654" }),
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: applyAdvancedSearch, children: "\uC801\uC6A9" })
+                ] }),
+                children: /* @__PURE__ */ jsx("div", { className: "wp-grid wp-grid--2", children: advancedFields.map((field) => /* @__PURE__ */ jsx(
+                  SearchFieldInput,
+                  {
+                    field,
+                    values: draft,
+                    onChange: (patch) => setDraft((current) => ({ ...current, ...patch }))
+                  },
+                  field.key
+                )) })
+              }
+            ) : null
+          ] }),
+          activeCriteria.length > 0 ? /* @__PURE__ */ jsx("div", { className: "wp-row", style: { flexWrap: "wrap" }, children: activeCriteria.map((criterion) => /* @__PURE__ */ jsx(Tag, { onRemove: () => removeCriterion(criterion), children: criterion.label }, criterion.key)) }) : null
+        ]
       }
-    ) : null
-  ] });
+    )
+  );
 }
 function SearchFieldInput({
   field,
@@ -382,7 +457,7 @@ function MultiSelectInput({
           children: multiSelectLabel(field, selected)
         }
       ),
-      children: /* @__PURE__ */ jsx("div", { className: "wp-col", children: field.options.map((option) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx("div", { className: "wp-col", style: { maxHeight: "min(320px, 40vh)", overflowY: "auto" }, children: field.options.map((option) => /* @__PURE__ */ jsx(
         Checkbox,
         {
           label: option.label,
@@ -528,17 +603,24 @@ function CascadingLevelSelect({
         }
       ),
       footer: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "xs", icon: "refresh-cw", onClick: onClear, children: allLabel }),
-      children: /* @__PURE__ */ jsx("div", { className: "wp-col", style: { minWidth: 200 }, children: options.map((option) => /* @__PURE__ */ jsx(
-        Checkbox,
+      children: /* @__PURE__ */ jsx(
+        "div",
         {
-          label: cascadingOptionLabel(option, pathMap, showPathLabels),
-          checked: selectedSet.has(option.value),
-          onChange: (e) => onToggle(option, e.target.checked)
-        },
-        option.value
-      )) })
+          className: "wp-col",
+          style: { minWidth: 200, maxHeight: "min(320px, 40vh)", overflowY: "auto" },
+          children: options.map((option) => /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              label: cascadingOptionLabel(option, pathMap, showPathLabels),
+              checked: selectedSet.has(option.value),
+              onChange: (e) => onToggle(option, e.target.checked)
+            },
+            option.value
+          ))
+        }
+      )
     }
   );
 }
 
-export { Popover, SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue };
+export { Popover, SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchFields, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue };

package/dist/{chunk-IEUPUFRF.js → chunk-UA5CT24N.js}

@@ -1,4 +1,4 @@
-import { includesLooseSearch } from './chunk-BJDWMECO.js';
+import { includesLooseSearch } from './chunk-QIDMPWZH.js';
 import { Button, Dialog, Input, Tag, Checkbox } from './chunk-B5JTXYDB.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import React, { useMemo, useState, useEffect } from 'react';

package/dist/index.d.ts

@@ -221,11 +221,21 @@ type SearchField = {
     label: string;
     placeholder?: string;
 } | {
-    /** 다중 선택 — 값은 쉼표로 합쳐 저장한다 */
+    /**
+     * 다중 선택 — 값은 쉼표로 합쳐 저장한다.
+     *
+     * `valueKey`/`labelKey` 를 주면 options 를 도메인 객체 배열로 받는다
+     * (`Select` 0.7.0 과 같은 계약). 스펙에서는 options 에
+     * `{"$state":"rt.departments","default":[]}` 를 바인딩하면 page.data 가 채운
+     * 실데이터가 그대로 선택지가 된다 — 정적 {label,value}만 받던 것이
+     * 예시값 필터가 화면마다 남던 근본 원인이었다(실사용 지적).
+     */
     type: 'select';
     key: string;
     label: string;
-    options: SearchOption[];
+    options: Array<SearchOption | Record<string, unknown>>;
+    valueKey?: string;
+    labelKey?: string;
     allLabel?: string;
 } | {
     type: 'dateRange';
@@ -245,11 +255,20 @@ type SearchField = {
     /**
      * 계층 다중 선택 — 단계별 체크박스 목록 체인. 선택된 값들을 쉼표로 합쳐 저장하며,
      * 부모를 선택하면 그 자손 선택은 제거되고 자손을 선택하면 그 조상 선택이 제거된다.
+     *
+     * `tree` 를 주면 options 를 **평면 행 배열**로 받아 여기서 계층을 세운다 —
+     * `/categories` 처럼 {id, parent_id, name} 평면 목록을 주는 API 를 스펙이
+     * 트리로 재조립할 방법이 없어서다($calc 에 그런 연산이 없다).
      */
     type: 'cascading';
     key: string;
     label: string;
-    options: CascadingSearchOption[];
+    options: Array<CascadingSearchOption | Record<string, unknown>>;
+    tree?: {
+        idKey: string;
+        parentIdKey: string;
+        labelKey: string;
+    };
     allLabel?: string;
 };
 type SearchValues = Record<string, string>;
@@ -277,7 +296,7 @@ interface SearchToolbarProps {
     /** 필터 전용 모드: 검색 입력창 없이 상세검색 버튼+칩만 보여준다 */
     hideSearchInput?: boolean;
 }
-declare function SearchToolbar({ search, onSearchChange, onSearch, advancedFields, advancedValues, placeholder, className, hideSearchInput, }: SearchToolbarProps): React__default.JSX.Element;
+declare function SearchToolbar({ search, onSearchChange, onSearch, advancedFields: rawAdvancedFields, advancedValues, placeholder, className, hideSearchInput, }: SearchToolbarProps): React__default.JSX.Element;
 
 /**
  * 검색 결과 목록 — ERP `app/components/search/SearchResults.tsx`의 계약을 그대로 가져온 포팅.
@@ -403,7 +422,7 @@ interface SearchResultsProps<T> {
 declare function normalizePageSizes(sizes: number[] | undefined): number[] | undefined;
 declare function SearchResults<T extends {
     id: string;
-}>({ item, columns, gridConfig, leftFilters, rightFilters, initialView, views, pageSizes, className, style, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields, searchPlaceholder, virtual, }: SearchResultsProps<T>): React__default.JSX.Element;
+}>({ item, columns, gridConfig, leftFilters, rightFilters, initialView, views, pageSizes, className, style, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields: rawAdvancedSearchFields, searchPlaceholder, virtual, }: SearchResultsProps<T>): React__default.JSX.Element;
 
 /**
  * 셀 표현 어휘 — 목록 컬럼의 셀과 카드 행의 값이 **같은 규칙**을 쓴다.

package/dist/index.js

@@ -1,7 +1,7 @@
 import { DEV, HoistedStyle, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, DateRangePicker, DatePicker, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-5A7BWIGN.js';
 export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-5A7BWIGN.js';
-import { searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-BJDWMECO.js';
-export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-BJDWMECO.js';
+import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-QIDMPWZH.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-QIDMPWZH.js';
 import { EmptyState, Button, Checkbox, SegmentedControl, Spinner, Select, Pagination, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Tabs, Table, Switch, StatCard, Input, IconButton, Field, Alert, warnOnce, Dialog } from './chunk-B5JTXYDB.js';
 export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip } from './chunk-B5JTXYDB.js';
 import { boxed, mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-SAN4IX6N.js';
@@ -643,11 +643,15 @@ function SearchResults({
   headerActions,
   isLoading = false,
   hideHeader = false,
-  advancedSearchFields = EMPTY_FIELDS,
+  advancedSearchFields: rawAdvancedSearchFields = EMPTY_FIELDS,
   searchPlaceholder,
   virtual
 }) {
   const hasActions = actions.length > 0;
+  const advancedSearchFields = useMemo(
+    () => normalizeSearchFields(rawAdvancedSearchFields),
+    [rawAdvancedSearchFields]
+  );
   const sizeChoices = normalizePageSizes(pageSizes) ?? PAGE_SIZE_CHOICES;
   const defaultPageSize = sizeChoices[0];
   const page = Number(searchParams.get("page")) || 1;

package/dist/styles.css

@@ -947,7 +947,11 @@
   z-index: var(--wp-z-dropdown);
 }
 .erp-popover--left { right: auto; left: 0; }
-.erp-popover__body { max-height: 60vh; overflow: auto; padding: var(--wp-space-4); }
+/* 내부 스크롤을 두지 않는다 — 낮은 창에서 60vh 캡이 필드 두 줄짜리 패널마저 잘라
+   컨트롤이 반쯤 걸친 채 스크롤됐다(실사용 지적, 법인차 관리). 패널은 내용만큼 크고,
+   화면보다 길면 페이지가 스크롤된다. 정말 긴 목록(분류 175종)은 목록 자신이
+   스크롤한다(SearchToolbar 의 옵션 목록 max-height). */
+.erp-popover__body { padding: var(--wp-space-4); }
 .erp-popover__foot {
   display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-2);
   padding: var(--wp-space-3); border-top: var(--wp-border-w) solid var(--wp-divider);

package/dist/widgets/AutocompleteField.js

@@ -1,4 +1,4 @@
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-3YFDIRCI.js';
-import '../chunk-BJDWMECO.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-PBGYAVQZ.js';
+import '../chunk-QIDMPWZH.js';
 import '../chunk-B5JTXYDB.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/SearchableMultiPicker.js

@@ -1,4 +1,4 @@
-export { SearchableMultiPicker } from '../chunk-IEUPUFRF.js';
-import '../chunk-BJDWMECO.js';
+export { SearchableMultiPicker } from '../chunk-UA5CT24N.js';
+import '../chunk-QIDMPWZH.js';
 import '../chunk-B5JTXYDB.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/index.js

@@ -1,5 +1,5 @@
-import { SearchableMultiPicker } from '../chunk-IEUPUFRF.js';
-export { SearchableMultiPicker } from '../chunk-IEUPUFRF.js';
+import { SearchableMultiPicker } from '../chunk-UA5CT24N.js';
+export { SearchableMultiPicker } from '../chunk-UA5CT24N.js';
 import { SecureScreen } from '../chunk-4CZJF5PR.js';
 export { SecureScreen } from '../chunk-4CZJF5PR.js';
 import { StackedMeter } from '../chunk-BMZKZGJF.js';
@@ -32,8 +32,8 @@ import { PeriodFilter } from '../chunk-WJEGCCPY.js';
 export { PeriodFilter } from '../chunk-WJEGCCPY.js';
 import { PrintSheet } from '../chunk-JWYBFODH.js';
 export { PrintSheet } from '../chunk-JWYBFODH.js';
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-3YFDIRCI.js';
-import '../chunk-BJDWMECO.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-PBGYAVQZ.js';
+import '../chunk-QIDMPWZH.js';
 import { ColumnBoard } from '../chunk-VK6KWB65.js';
 export { ColumnBoard } from '../chunk-VK6KWB65.js';
 import { DiffView } from '../chunk-4IRLQWQC.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",