@wipco/sdui 0.10.0 → 0.12.0

package/dist/{chunk-OINKP2BE.js → chunk-4TS2N5KU.js}

@@ -1,4 +1,4 @@
-import { includesLooseSearch } from './chunk-NIRR6KSQ.js';
+import { includesLooseSearch } from './chunk-CDYIUQAD.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/{chunk-NIRR6KSQ.js → chunk-CDYIUQAD.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,57 @@ 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") {
+      return { ...field, options: normalizeSearchOptions(field.options, field.valueKey, field.labelKey) };
+    }
+    if (field.type === "cascading" && field.tree) {
+      return { ...field, options: buildCascadingTree(field.options, field.tree) };
+    }
+    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 +230,7 @@ function SearchToolbar({
   search,
   onSearchChange,
   onSearch,
-  advancedFields = EMPTY_FIELDS,
+  advancedFields: rawAdvancedFields = EMPTY_FIELDS,
   advancedValues = EMPTY_VALUES,
   placeholder = "\uAC80\uC0C9",
   className,
@@ -187,6 +238,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,56 +275,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__ */ jsx(
-      Input,
-      {
-        icon: "search",
-        value: search,
-        onChange: (event) => onSearchChange(event.target.value),
-        placeholder
-      }
-    ) : 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,
@@ -379,7 +451,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,
@@ -525,17 +597,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-TBAIREB3.js → chunk-PEDU6LQK.js}

@@ -1,4 +1,4 @@
-import { includesLooseSearch } from './chunk-NIRR6KSQ.js';
+import { includesLooseSearch } from './chunk-CDYIUQAD.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/index.d.ts

@@ -202,7 +202,8 @@ declare function useRemoteSearchPage(endpoint: string, params: URLSearchParams):
  * 그대로 옮긴 것. 스펙 호환이 목적이므로 값 규칙(쉼표 다중값, 느슨한 검색, 범위 키 이름)은
  * 한 글자도 바꾸지 않았다.
  *
- * - 검색 버튼은 두지 않는다(Enter로 검색) — 시안 규칙 유지
+ * - 검색 버튼을 입력창과 상세검색 토글 사이에 둔다(Enter 도 그대로 동작) —
+ *   원래 시안은 Enter 전용이었는데 실사용 지적으로 명시 버튼을 되돌렸다
  * - 상세검색은 아이콘 버튼 → 드롭다운 패널(초기화/적용)
  * - 적용된 조건은 칩(Tag)으로 나열되고, 다중 선택 칩은 값 하나씩 제거된다
  */
@@ -220,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';
@@ -244,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>;
@@ -276,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`의 계약을 그대로 가져온 포팅.
@@ -402,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-NIRR6KSQ.js';
-export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-NIRR6KSQ.js';
+import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-CDYIUQAD.js';
+export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-CDYIUQAD.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/widgets/AutocompleteField.js

@@ -1,4 +1,4 @@
-export { AutocompleteField, toAutocompleteOptions } from '../chunk-TBAIREB3.js';
-import '../chunk-NIRR6KSQ.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-PEDU6LQK.js';
+import '../chunk-CDYIUQAD.js';
 import '../chunk-B5JTXYDB.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/SearchableMultiPicker.js

@@ -1,4 +1,4 @@
-export { SearchableMultiPicker } from '../chunk-OINKP2BE.js';
-import '../chunk-NIRR6KSQ.js';
+export { SearchableMultiPicker } from '../chunk-4TS2N5KU.js';
+import '../chunk-CDYIUQAD.js';
 import '../chunk-B5JTXYDB.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/index.js

@@ -1,5 +1,5 @@
-import { SearchableMultiPicker } from '../chunk-OINKP2BE.js';
-export { SearchableMultiPicker } from '../chunk-OINKP2BE.js';
+import { SearchableMultiPicker } from '../chunk-4TS2N5KU.js';
+export { SearchableMultiPicker } from '../chunk-4TS2N5KU.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-TBAIREB3.js';
-import '../chunk-NIRR6KSQ.js';
+export { AutocompleteField, toAutocompleteOptions } from '../chunk-PEDU6LQK.js';
+import '../chunk-CDYIUQAD.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.10.0",
+  "version": "0.12.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",