sellmate-design-system-react 9.0.0-beta.26 → 9.0.0-beta.27

package/dist/components/SChipFilter/README.md

@@ -288,12 +288,17 @@ export interface SChipFilterFieldBase {
 ```ts
 /** 프리셋으로 기간을 고르는 필터 — datepicker-range·datepicker-statistics */
 export interface SChipFilterPresetsField extends SChipFilterFieldBase {
-  /** 프리셋 라디오 목록. datepicker-range에서 지정하지 않으면 프리셋 없이 기간 피커 하나만 놓이고,
-   *  datepicker-statistics에서 지정하지 않으면 일별·월별·분기별·반기별·연도별·사용자 지정 기본 목록을 쓴다 */
+  /** 프리셋 라디오 목록. 지정하지 않으면 타입별 기본 목록을 쓴다 —
+   *  datepicker-range: 오늘·지난 7일·지난 30일·사용자 지정,
+   *  datepicker-statistics: 일별·월별·분기별·반기별·연도별·사용자 지정.
+   *  프리셋 라디오 없이 캘린더(datepicker-range) 하나만 두려면 presets: [] 를 명시한다 */
   presets?: SChipFilterDatePreset[];
   /** 선택 가능 범위 */
   selectable?: [string, string];
-  /** "사용자 지정" 프리셋으로 기간을 고를 때의 최대 선택 일수 */
+  /** "사용자 지정" 프리셋으로 기간을 고를 때의 최대 선택 일수.
+   *  지정하지 않아도 presets에 custom 프리셋이 있으면 기본 90일이 적용된다 — 무제한 기간
+   *  집계·조회로 백엔드에 과도한 요청이 가는 것을 막기 위한 안전장치. 다른 상한이 필요하면
+   *  이 값을 직접 지정한다 */
   maxRange?: number;
 }
 ```
@@ -350,10 +355,10 @@ export interface SChipFilterDatePreset {
 
 - [SDatePicker](../SDatePicker)
 - [SDateRangePicker](../SDateRangePicker)
-- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SRadio](../SRadio)
 - [SRadioButton](../SRadioButton)
+- [SSearchInput](../SSearchInput)
 - [STag](../STag)
 - [STextLink](../STextLink)
 - [STooltip](../STooltip)
@@ -364,10 +369,10 @@ export interface SChipFilterDatePreset {
 graph TD;
   SChipFilter --> SDatePicker
   SChipFilter --> SDateRangePicker
-  SChipFilter --> SGhostButton
   SChipFilter --> SIcon
   SChipFilter --> SRadio
   SChipFilter --> SRadioButton
+  SChipFilter --> SSearchInput
   SChipFilter --> STag
   SChipFilter --> STextLink
   SChipFilter --> STooltip

package/dist/components/SChipFilter/SChipFilter.d.ts

@@ -75,12 +75,17 @@ export interface SChipFilterOptionsField extends SChipFilterFieldBase {
 }
 /** 프리셋으로 기간을 고르는 필터 — datepicker-range·datepicker-statistics */
 export interface SChipFilterPresetsField extends SChipFilterFieldBase {
-    /** 프리셋 라디오 목록. datepicker-range에서 지정하지 않으면 프리셋 없이 기간 피커 하나만 놓이고,
-     *  datepicker-statistics에서 지정하지 않으면 일별·월별·분기별·반기별·연도별·사용자 지정 기본 목록을 쓴다 */
+    /** 프리셋 라디오 목록. 지정하지 않으면 타입별 기본 목록을 쓴다 —
+     *  datepicker-range: 오늘·지난 7일·지난 30일·사용자 지정,
+     *  datepicker-statistics: 일별·월별·분기별·반기별·연도별·사용자 지정.
+     *  프리셋 라디오 없이 캘린더(datepicker-range) 하나만 두려면 presets: [] 를 명시한다 */
     presets?: SChipFilterDatePreset[];
     /** 선택 가능 범위 */
     selectable?: [string, string];
-    /** "사용자 지정" 프리셋으로 기간을 고를 때의 최대 선택 일수 */
+    /** "사용자 지정" 프리셋으로 기간을 고를 때의 최대 선택 일수.
+     *  지정하지 않아도 presets에 custom 프리셋이 있으면 기본 90일이 적용된다 — 무제한 기간
+     *  집계·조회로 백엔드에 과도한 요청이 가는 것을 막기 위한 안전장치. 다른 상한이 필요하면
+     *  이 값을 직접 지정한다 */
     maxRange?: number;
 }
 /** 후보 하나를 고른다 */

package/dist/components/SGhostButton/README.md

@@ -48,7 +48,6 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
  - [SBarcodeInput](../SBarcodeInput)
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
- - [SChipFilter](../SChipFilter)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
@@ -81,7 +80,6 @@ graph TD;
   SBarcodeInput --> SGhostButton
   SCalendar --> SGhostButton
   SChip --> SGhostButton
-  SChipFilter --> SGhostButton
   SDatePicker --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton

package/dist/components/SSearchInput/README.md

@@ -41,6 +41,7 @@ export type SSearchInputSize = SFieldSize;
 
 ### Used by
 
+ - [SChipFilter](../SChipFilter)
  - [SSelect](../SSelect)
 
 ### Depends on
@@ -56,6 +57,7 @@ graph TD;
   SSearchInput --> SField
   SSearchInput --> SGhostButton
   SSearchInput --> SIcon
+  SChipFilter --> SSearchInput
   SSelect --> SSearchInput
   style SSearchInput fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SSelect/README.md

@@ -22,7 +22,7 @@
 | `error?` | `boolean` | `false` | 에러 상태 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — 닫힐 때 자동 검증 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
-| `dropdownHeight?` | `string` | `'260px'` | 드롭다운 최대 높이 |
+| `dropdownHeight?` | `string` | `'640px'` | 드롭다운 최대 높이. 기본 640px — 창이 이보다 작으면 창 안에 남는 만큼까지만 채워진다 |
 | `dropdownWidth?` | `string` | — | 드롭다운 너비 (없으면 트리거 너비). 창보다 넓게 줘도 창 폭까지만 벌어진다. |
 | `maxDropdownWidth?` | `string` | `'640px'` | 드롭다운 최대 너비. 창이 이보다 좁으면 창 폭이 상한이 된다. |
 | `label?` | `string` | — |  |

package/dist/components/SSelect/SSelect.d.ts

@@ -49,7 +49,7 @@ export interface SSelectProps {
     rules?: Rule[];
     /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps?: Partial<STooltipProps>;
-    /** 드롭다운 최대 높이 */
+    /** 드롭다운 최대 높이. 기본 640px — 창이 이보다 작으면 창 안에 남는 만큼까지만 채워진다 */
     dropdownHeight?: string;
     /** 드롭다운 너비 (없으면 트리거 너비). 창보다 넓게 줘도 창 폭까지만 벌어진다. */
     dropdownWidth?: string;

package/dist/index.cjs

@@ -10444,6 +10444,14 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
     }
   );
 });
+
+// src/lib/floating-height.ts
+var POPOVER_AVAILABLE_HEIGHT = "var(--radix-popover-content-available-height)";
+function clampToAvailableHeight(value, availableHeight) {
+  if (value == null || value === "") return availableHeight;
+  const css = typeof value === "number" ? `${value}px` : value;
+  return `min(${css}, ${availableHeight})`;
+}
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
   for (const rule of rules) {
@@ -10841,7 +10849,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   error = false,
   rules,
   labelTooltipProps,
-  dropdownHeight = "260px",
+  dropdownHeight = "640px",
   dropdownWidth,
   maxDropdownWidth = "640px",
   label,
@@ -11202,6 +11210,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             placement: "bottom",
             align: "start",
             offset: 4,
+            viewportPadding: 24,
             fit: !dropdownWidth,
             onOpenAutoFocus: (event) => {
               if (!showSearch) {
@@ -11234,7 +11243,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   SCROLLBAR_TRACK_BG_CLASS,
                   SCROLLBAR_TRACK_BORDER_CLASS
                 ),
-                style: { maxHeight: dropdownHeight },
+                style: { maxHeight: clampToAvailableHeight(dropdownHeight, POPOVER_AVAILABLE_HEIGHT) },
                 onMouseLeave: () => setFocusedIndex(-1),
                 children: [
                   showSearch && /* @__PURE__ */ jsxRuntime.jsx(
@@ -17387,6 +17396,8 @@ var SEditor = /* @__PURE__ */ react.forwardRef(function SEditor2({
 });
 var CHIPFILTER_LISTBOX_WIDTH = 240;
 var CHIPFILTER_DATE_PRESET_LISTBOX_WIDTH = 246;
+var EDITOR_LISTBOX_MAX_HEIGHT = "min(640px, var(--radix-popover-content-available-height))";
+var EDITOR_POPOVER_VIEWPORT_PADDING = 24;
 var CHIPFILTER = {
   barBg: "var(--cmp-chipFilter-bar-bg)",
   barBorder: "var(--cmp-chipFilter-bar-border)",
@@ -17426,6 +17437,7 @@ var CHIPFILTER = {
   itemTextDefault: "var(--cmp-chipFilter-item-text-default)",
   itemTextSelected: "var(--cmp-chipFilter-item-text-selected)"
 };
+var DEFAULT_CUSTOM_MAX_RANGE = 90;
 var DEFAULT_PERIOD_PRESETS = [
   { value: "day", label: "\uC77C\uBCC4" },
   { value: "month", label: "\uC6D4\uBCC4" },
@@ -17434,6 +17446,20 @@ var DEFAULT_PERIOD_PRESETS = [
   { value: "year", label: "\uC5F0\uB3C4\uBCC4" },
   { value: "custom", label: "\uC0AC\uC6A9\uC790 \uC9C0\uC815", custom: true }
 ];
+var DEFAULT_DATE_RANGE_PRESETS = [
+  { value: "today", label: "\uC624\uB298", resolve: () => todayIso() },
+  {
+    value: "last7",
+    label: "\uC9C0\uB09C 7\uC77C",
+    resolve: () => [addDaysIso(todayIso(), -7), todayIso()]
+  },
+  {
+    value: "last30",
+    label: "\uC9C0\uB09C 30\uC77C",
+    resolve: () => [addDaysIso(todayIso(), -30), todayIso()]
+  },
+  { value: "custom", label: "\uC0AC\uC6A9\uC790 \uC9C0\uC815", custom: true }
+];
 var isKeywordValue = (value) => typeof value === "object" && value != null && !Array.isArray(value) && "keywords" in value;
 var isPeriodValue = (value) => typeof value === "object" && value != null && !Array.isArray(value) && "unit" in value;
 var keywordEntries = (value) => {
@@ -17458,23 +17484,39 @@ var todayIso = () => {
   const pad = (n) => String(n).padStart(2, "0");
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 };
+var addDaysIso = (iso, n) => {
+  const d = /* @__PURE__ */ new Date(`${iso}T00:00:00`);
+  d.setDate(d.getDate() + n);
+  const pad = (v) => String(v).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+};
 var isInlineDateField = (field) => field.type === "datepicker-range" && field.radioButton === true && (field.presets?.length ?? 0) > 0;
 var getFieldPresets = (field) => {
   if (field.type === "datepicker-statistics") return field.presets ?? DEFAULT_PERIOD_PRESETS;
-  return field.presets ?? [];
+  return field.presets ?? DEFAULT_DATE_RANGE_PRESETS;
 };
-var getDefaultPeriodInputValue = (unit) => {
+var getEffectiveMaxRange = (field) => {
+  if (field.maxRange !== void 0) return field.maxRange;
+  const hasCustomPreset = getFieldPresets(field).some((preset) => preset.custom);
+  return hasCustomPreset ? DEFAULT_CUSTOM_MAX_RANGE : void 0;
+};
+var getPresetLabel = (preset, maxRange) => {
+  if (!preset.custom || !maxRange || preset.label.includes("\uCD5C\uB300")) return preset.label;
+  return `${preset.label} (\uCD5C\uB300 ${maxRange}\uC77C\uC529)`;
+};
+var getDefaultPeriodInputValue = (unit, maxRange) => {
   const today = todayIso();
   if (unit === "day") return today;
   if (unit === "month") return today.slice(0, 7);
   if (unit === "quarter") return 1;
   if (unit === "half") return "first";
   if (unit === "year") return today.slice(0, 4);
-  return [today, today];
+  const days = maxRange && maxRange > 0 ? maxRange : DEFAULT_CUSTOM_MAX_RANGE;
+  return [addDaysIso(today, -days), today];
 };
-var createPeriodValue = (unit) => ({
+var createPeriodValue = (unit, maxRange) => ({
   unit,
-  value: getDefaultPeriodInputValue(unit)
+  value: getDefaultPeriodInputValue(unit, maxRange)
 });
 var resolveFieldDefault = (field) => {
   if (field.defaultValue !== void 0 && isFixedField(field)) return field.defaultValue;
@@ -18023,6 +18065,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
               side: "bottom",
               align: "start",
               sideOffset: 4,
+              collisionPadding: EDITOR_POPOVER_VIEWPORT_PADDING,
               onOpenAutoFocus: (event) => event.preventDefault(),
               className: cn("z-50", FLOATING_SLIDE_ANIM),
               style: editorPopoverStyle,
@@ -18188,6 +18231,7 @@ function EditorPanel({
   onClose
 }) {
   const wrapsInPaddedTop = field.type === "datepicker-day" || field.type === "datepicker-range" || field.type === "datepicker-statistics";
+  const isScrollableListField = field.type === "select" || field.type === "select-multi" || field.type === "keyword";
   const isMulti = field.type === "select-multi";
   const selectableValues = isMulti ? (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value) : [];
   const selectedValues = isMulti ? toArrayValue(value) : [];
@@ -18197,7 +18241,7 @@ function EditorPanel({
       allSelected ? selectedValues.filter((v) => !selectableValues.includes(v)) : [...selectedValues, ...selectableValues.filter((v) => !selectedValues.includes(v))]
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ListBox, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(ListBox, { maxHeight: isScrollableListField ? EDITOR_LISTBOX_MAX_HEIGHT : void 0, children: [
     wrapsInPaddedTop ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: /* @__PURE__ */ jsxRuntime.jsx(
       FilterEditor,
       {
@@ -18220,7 +18264,7 @@ function EditorPanel({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "flex items-center justify-end gap-[var(--cmp-chipFilter-listbox-bottom-gap)] border-t border-solid px-[var(--cmp-chipFilter-listbox-bottom-paddingX)] py-[var(--cmp-chipFilter-listbox-bottom-paddingY)]",
+        className: "flex shrink-0 items-center justify-end gap-[var(--cmp-chipFilter-listbox-bottom-gap)] border-t border-solid px-[var(--cmp-chipFilter-listbox-bottom-paddingX)] py-[var(--cmp-chipFilter-listbox-bottom-paddingY)]",
         style: { borderColor: CHIPFILTER.listboxBorder },
         children: [
           isMulti && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -18335,6 +18379,7 @@ function DatePresetEditor({
   onValueChange
 }) {
   const presets = getFieldPresets(field);
+  const maxRange = getEffectiveMaxRange(field);
   const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value));
   const syncedInitialValueRef = react.useRef(!isEmptyValue(value));
   react.useEffect(() => {
@@ -18345,7 +18390,13 @@ function DatePresetEditor({
   const selectedPreset = presets.find((preset) => preset.value === selectedId);
   const selectPreset = (preset) => {
     setSelectedId(preset.value);
-    if (!preset.custom) onValueChange(preset.resolve ? preset.resolve() : preset.value);
+    if (!preset.custom) {
+      onValueChange(preset.resolve ? preset.resolve() : preset.value);
+      return;
+    }
+    const today = todayIso();
+    const days = maxRange && maxRange > 0 ? maxRange : DEFAULT_CUSTOM_MAX_RANGE;
+    onValueChange([addDaysIso(today, -days), today]);
   };
   if (presets.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -18354,7 +18405,7 @@ function DatePresetEditor({
         value: Array.isArray(value) && value.length === 2 ? value : null,
         onValueChange,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled,
         width: "100%"
       }
@@ -18366,7 +18417,7 @@ function DatePresetEditor({
       {
         val: preset.value,
         value: selectedId,
-        label: preset.label,
+        label: getPresetLabel(preset, maxRange),
         disabled,
         onValueChange: () => selectPreset(preset)
       },
@@ -18378,7 +18429,7 @@ function DatePresetEditor({
         value: Array.isArray(value) && value.length === 2 ? value : null,
         onValueChange,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled
       }
     )
@@ -18391,9 +18442,10 @@ function PeriodPresetEditor({
   onValueChange
 }) {
   const presets = getFieldPresets(field);
+  const maxRange = getEffectiveMaxRange(field);
   const firstUnit = presets.find((preset) => !preset.custom)?.value ?? "day";
   const [selectedId, setSelectedId] = react.useState(() => matchPresetId(presets, value) ?? firstUnit);
-  const periodValue = isPeriodValue(value) ? value : createPeriodValue(selectedId ?? firstUnit);
+  const periodValue = isPeriodValue(value) ? value : createPeriodValue(selectedId ?? firstUnit, maxRange);
   const selectedUnit = selectedId ?? periodValue.unit;
   react.useEffect(() => {
     if (isEmptyValue(value)) return;
@@ -18402,7 +18454,7 @@ function PeriodPresetEditor({
   const selectPreset = (preset) => {
     const nextUnit = preset.value;
     setSelectedId(nextUnit);
-    onValueChange(createPeriodValue(nextUnit));
+    onValueChange(createPeriodValue(nextUnit, maxRange));
   };
   const updateInputValue = (nextValue) => {
     onValueChange({ unit: selectedUnit, value: nextValue });
@@ -18485,7 +18537,7 @@ function PeriodPresetEditor({
         value: Array.isArray(periodValue.value) && periodValue.value.length === 2 ? periodValue.value : null,
         onValueChange: updateInputValue,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled,
         width: "100%"
       }
@@ -18497,7 +18549,7 @@ function PeriodPresetEditor({
       {
         val: preset.value,
         value: selectedId,
-        label: preset.label,
+        label: getPresetLabel(preset, maxRange),
         disabled,
         onValueChange: () => selectPreset(preset)
       },
@@ -18709,7 +18761,7 @@ function KeywordEditor({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-col gap-[var(--cmp-chipFilter-listbox-top-gap)] px-[var(--cmp-chipFilter-listbox-top-paddingX)] py-[var(--cmp-chipFilter-listbox-top-paddingY)]", children: [
       field.matchModes && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -18751,7 +18803,7 @@ function KeywordEditor({
     entries3.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "max-h-[220px] overflow-auto border-t border-solid py-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        className: "min-h-0 flex-1 overflow-auto border-t border-solid py-[var(--cmp-chipFilter-listbox-list-paddingY)]",
         style: { borderColor: CHIPFILTER.listboxBorder },
         children: entries3.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
           KeywordEntryRow,
@@ -18809,6 +18861,7 @@ function OptionList({
   const selected = multiple ? toArrayValue(value) : [];
   const singleValue = !multiple && (typeof value === "string" || typeof value === "number") ? value : null;
   const [search, setSearch] = react.useState("");
+  const searchInputRef = react.useRef(null);
   const options = field.options ?? [];
   const showSearch = options.length >= OPTION_SEARCH_THRESHOLD;
   const filteredOptions = react.useMemo(() => {
@@ -18816,74 +18869,70 @@ function OptionList({
     const query = search.trim().toLowerCase();
     return options.filter((option) => option.label.toLowerCase().includes(query));
   }, [options, search, showSearch]);
+  react.useEffect(() => {
+    if (!showSearch || disabled) return;
+    searchInputRef.current?.focus();
+  }, [showSearch, disabled]);
   if (options.length === 0) return /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "max-h-[240px] overflow-auto",
-        !showSearch && "pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
-        "pb-[var(--cmp-chipFilter-listbox-list-paddingY)]"
-      ),
-      children: [
-        showSearch && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "shrink-0 border-b border-solid px-[8px] pb-[4px] pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+        style: { borderColor: CHIPFILTER.listboxBorder },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SSearchInput,
           {
-            className: "sticky top-0 z-[1] border-b border-solid px-[8px] pb-[4px] pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
-            style: { background: CHIPFILTER.listboxBg, borderColor: CHIPFILTER.listboxBorder },
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--sys-color-field-border-default)] bg-[var(--sys-color-field-bg-default)] px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "search", size: 16, color: "var(--sys-color-field-icon-default)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  value: search,
-                  disabled,
-                  placeholder: "\uAC80\uC0C9",
-                  onChange: (event) => setSearch(event.target.value),
-                  className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--sys-color-field-text-default)] outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed"
-                }
-              ),
-              search !== "" && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-                SGhostButton,
-                {
-                  icon: "close",
-                  size: "xxs",
-                  ariaLabel: "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
-                  className: "flex-shrink-0",
-                  onClick: () => setSearch("")
-                }
-              )
-            ] })
+            ref: searchInputRef,
+            size: "sm",
+            value: search,
+            onValueChange: setSearch,
+            disabled,
+            placeholder: "\uAC80\uC0C9",
+            clearable: true,
+            width: "100%"
           }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "min-h-0 flex-1 overflow-auto",
+          !showSearch && "pt-[var(--cmp-chipFilter-listbox-list-paddingY)]",
+          "pb-[var(--cmp-chipFilter-listbox-list-paddingY)]"
         ),
-        showSearch && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
-        filteredOptions.map((option) => {
-          const checked = multiple ? selected.includes(option.value) : singleValue === option.value;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            MenuItem,
-            {
-              selected: checked,
-              disabled: disabled || option.disabled,
-              multi: multiple,
-              onClick: () => {
-                if (multiple) {
-                  const next = checked ? selected.filter((v) => v !== option.value) : [...selected, option.value];
-                  onValueChange(next);
-                } else {
-                  onValueChange(option.value);
-                }
+        children: [
+          showSearch && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyItem, { children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+          filteredOptions.map((option) => {
+            const checked = multiple ? selected.includes(option.value) : singleValue === option.value;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              MenuItem,
+              {
+                selected: checked,
+                disabled: disabled || option.disabled,
+                multi: multiple,
+                onClick: () => {
+                  if (multiple) {
+                    const next = checked ? selected.filter((v) => v !== option.value) : [...selected, option.value];
+                    onValueChange(next);
+                  } else {
+                    onValueChange(option.value);
+                  }
+                },
+                children: [
+                  multiple && /* @__PURE__ */ jsxRuntime.jsx(OptionCheckbox, { checked }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+                ]
               },
-              children: [
-                multiple && /* @__PURE__ */ jsxRuntime.jsx(OptionCheckbox, { checked }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
-              ]
-            },
-            String(option.value)
-          );
-        })
-      ]
-    }
-  );
+              String(option.value)
+            );
+          })
+        ]
+      }
+    )
+  ] });
 }
 function OptionCheckbox({ checked }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -18897,15 +18946,22 @@ function OptionCheckbox({ checked }) {
     }
   );
 }
-function ListBox({ children }) {
+function ListBox({
+  children,
+  maxHeight
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "overflow-hidden border border-solid shadow-[var(--shadow-overlay)]",
+      className: cn(
+        "overflow-hidden border border-solid shadow-[var(--shadow-overlay)]",
+        maxHeight && "flex flex-col"
+      ),
       style: {
         borderRadius: CHIPFILTER.listboxRadius,
         background: CHIPFILTER.listboxBg,
-        borderColor: CHIPFILTER.listboxBorder
+        borderColor: CHIPFILTER.listboxBorder,
+        maxHeight
       },
       children
     }