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

package/dist/index.js

@@ -10416,6 +10416,14 @@ var SStepper = /* @__PURE__ */ 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) {
@@ -10813,7 +10821,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   error = false,
   rules,
   labelTooltipProps,
-  dropdownHeight = "260px",
+  dropdownHeight = "640px",
   dropdownWidth,
   maxDropdownWidth = "640px",
   label,
@@ -11174,6 +11182,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
             placement: "bottom",
             align: "start",
             offset: 4,
+            viewportPadding: 24,
             fit: !dropdownWidth,
             onOpenAutoFocus: (event) => {
               if (!showSearch) {
@@ -11206,7 +11215,7 @@ var SSelectImpl = /* @__PURE__ */ 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__ */ jsx(
@@ -17359,6 +17368,8 @@ var SEditor = /* @__PURE__ */ 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)",
@@ -17398,6 +17409,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" },
@@ -17406,6 +17418,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) => {
@@ -17430,23 +17456,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;
@@ -17995,6 +18037,7 @@ var SChipFilter = /* @__PURE__ */ 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,
@@ -18160,6 +18203,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) : [];
@@ -18169,7 +18213,7 @@ function EditorPanel({
       allSelected ? selectedValues.filter((v) => !selectableValues.includes(v)) : [...selectedValues, ...selectableValues.filter((v) => !selectedValues.includes(v))]
     );
   };
-  return /* @__PURE__ */ jsxs(ListBox, { children: [
+  return /* @__PURE__ */ jsxs(ListBox, { maxHeight: isScrollableListField ? EDITOR_LISTBOX_MAX_HEIGHT : void 0, children: [
     wrapsInPaddedTop ? /* @__PURE__ */ 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__ */ jsx(
       FilterEditor,
       {
@@ -18192,7 +18236,7 @@ function EditorPanel({
     /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
@@ -18307,6 +18351,7 @@ function DatePresetEditor({
   onValueChange
 }) {
   const presets = getFieldPresets(field);
+  const maxRange = getEffectiveMaxRange(field);
   const [selectedId, setSelectedId] = useState(() => matchPresetId(presets, value));
   const syncedInitialValueRef = useRef(!isEmptyValue(value));
   useEffect(() => {
@@ -18317,7 +18362,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__ */ jsx(
@@ -18326,7 +18377,7 @@ function DatePresetEditor({
         value: Array.isArray(value) && value.length === 2 ? value : null,
         onValueChange,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled,
         width: "100%"
       }
@@ -18338,7 +18389,7 @@ function DatePresetEditor({
       {
         val: preset.value,
         value: selectedId,
-        label: preset.label,
+        label: getPresetLabel(preset, maxRange),
         disabled,
         onValueChange: () => selectPreset(preset)
       },
@@ -18350,7 +18401,7 @@ function DatePresetEditor({
         value: Array.isArray(value) && value.length === 2 ? value : null,
         onValueChange,
         selectable: field.selectable,
-        maxRange: field.maxRange,
+        maxRange,
         disabled
       }
     )
@@ -18363,9 +18414,10 @@ function PeriodPresetEditor({
   onValueChange
 }) {
   const presets = getFieldPresets(field);
+  const maxRange = getEffectiveMaxRange(field);
   const firstUnit = presets.find((preset) => !preset.custom)?.value ?? "day";
   const [selectedId, setSelectedId] = 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;
   useEffect(() => {
     if (isEmptyValue(value)) return;
@@ -18374,7 +18426,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 });
@@ -18457,7 +18509,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%"
       }
@@ -18469,7 +18521,7 @@ function PeriodPresetEditor({
       {
         val: preset.value,
         value: selectedId,
-        label: preset.label,
+        label: getPresetLabel(preset, maxRange),
         disabled,
         onValueChange: () => selectPreset(preset)
       },
@@ -18681,7 +18733,7 @@ function KeywordEditor({
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx(
           "span",
@@ -18723,7 +18775,7 @@ function KeywordEditor({
     entries3.length > 0 && /* @__PURE__ */ 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__ */ jsx(
           KeywordEntryRow,
@@ -18781,6 +18833,7 @@ function OptionList({
   const selected = multiple ? toArrayValue(value) : [];
   const singleValue = !multiple && (typeof value === "string" || typeof value === "number") ? value : null;
   const [search, setSearch] = useState("");
+  const searchInputRef = useRef(null);
   const options = field.options ?? [];
   const showSearch = options.length >= OPTION_SEARCH_THRESHOLD;
   const filteredOptions = useMemo(() => {
@@ -18788,74 +18841,70 @@ function OptionList({
     const query = search.trim().toLowerCase();
     return options.filter((option) => option.label.toLowerCase().includes(query));
   }, [options, search, showSearch]);
+  useEffect(() => {
+    if (!showSearch || disabled) return;
+    searchInputRef.current?.focus();
+  }, [showSearch, disabled]);
   if (options.length === 0) return /* @__PURE__ */ jsx(EmptyItem, { children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." });
-  return /* @__PURE__ */ 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__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    showSearch && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(SIcon, { name: "search", size: 16, color: "var(--sys-color-field-icon-default)" }),
-              /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(OptionCheckbox, { checked }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
+                ]
               },
-              children: [
-                multiple && /* @__PURE__ */ jsx(OptionCheckbox, { checked }),
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
-              ]
-            },
-            String(option.value)
-          );
-        })
-      ]
-    }
-  );
+              String(option.value)
+            );
+          })
+        ]
+      }
+    )
+  ] });
 }
 function OptionCheckbox({ checked }) {
   return /* @__PURE__ */ jsx(
@@ -18869,15 +18918,22 @@ function OptionCheckbox({ checked }) {
     }
   );
 }
-function ListBox({ children }) {
+function ListBox({
+  children,
+  maxHeight
+}) {
   return /* @__PURE__ */ 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
     }