@topgrid/grid-features 0.3.0

package/dist/index.cjs

@@ -0,0 +1,835 @@
+'use strict';
+
+var gridCore = require('@topgrid/grid-core');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var dateFns = require('date-fns');
+var DatePicker = require('react-datepicker');
+var locale = require('date-fns/locale');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var DatePicker__default = /*#__PURE__*/_interopDefault(DatePicker);
+
+// src/column-drag/useColumnDrag.ts
+
+// src/multi-sort/useMultiSort.ts
+function useMultiSort(opts) {
+  const enableMultiSort = opts?.enableMultiSort ?? false;
+  const result = {
+    enableMultiSort,
+    isMultiSortEvent: (e) => {
+      if (e !== null && typeof e === "object" && "shiftKey" in e) {
+        return e.shiftKey === true;
+      }
+      return false;
+    }
+  };
+  if (opts?.maxMultiSortColCount !== void 0) {
+    result.maxMultiSortColCount = opts.maxMultiSortColCount;
+  }
+  return result;
+}
+function FilterPopover({ trigger, children, align = "left" }) {
+  const [open, setOpen] = react.useState(false);
+  const containerRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) return;
+    const handleMouseDown = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        const btn = triggerRef.current?.querySelector("button");
+        btn?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const id = setTimeout(() => {
+      const firstInput = contentRef.current?.querySelector("input, select");
+      firstInput?.focus();
+    }, 0);
+    return () => clearTimeout(id);
+  }, [open]);
+  const handleToggle = react.useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  const alignClass = align === "right" ? "right-0" : "left-0";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative inline-block", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref: triggerRef,
+        onClick: handleToggle,
+        className: "inline-flex",
+        children: trigger
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: contentRef,
+        role: "dialog",
+        "aria-label": "\uD14D\uC2A4\uD2B8 \uD544\uD130",
+        "aria-modal": "false",
+        className: `absolute top-full mt-1 ${alignClass} z-[50] min-w-[220px] overflow-hidden rounded border border-gray-200 bg-white shadow-lg`,
+        children
+      }
+    )
+  ] });
+}
+function FilterIndicator({ isFiltered }) {
+  if (!isFiltered) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-label": "\uD544\uD130 \uD65C\uC131",
+      "aria-hidden": "false",
+      className: "inline-block w-2 h-2 rounded-full bg-blue-500 flex-shrink-0"
+    }
+  );
+}
+function FunnelIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: "w-4 h-4",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 0 1 .628.74v2.288a2.25 2.25 0 0 1-.659 1.59l-4.682 4.683a2.25 2.25 0 0 0-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 0 1 9 18.25v-5.757a2.25 2.25 0 0 0-.659-1.591L3.659 6.22A2.25 2.25 0 0 1 3 4.629V2.34a.75.75 0 0 1 .628-.74z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function TextFilter({
+  column,
+  defaultOperator,
+  popoverAlign
+}) {
+  const currentValue = column.getFilterValue();
+  const [operator, setOperator] = react.useState(
+    currentValue?.operator ?? defaultOperator ?? "contains"
+  );
+  const [inputValue, setInputValue] = react.useState(currentValue?.value ?? "");
+  react.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (inputValue.trim() === "") {
+        column.setFilterValue(void 0);
+      } else {
+        column.setFilterValue({ operator, value: inputValue });
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [inputValue, operator, column]);
+  const handleClear = () => {
+    setInputValue("");
+    setOperator(defaultOperator ?? "contains");
+    column.setFilterValue(void 0);
+  };
+  const handleOperatorChange = (e) => {
+    setOperator(e.target.value);
+  };
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const alignProp = popoverAlign !== void 0 ? { align: popoverAlign } : {};
+  const isFiltered = column.getIsFiltered();
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FilterIndicator, { isFiltered }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FilterPopover,
+      {
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "\uD544\uD130",
+            "aria-pressed": isFiltered,
+            className: "inline-flex items-center justify-center w-5 h-5 rounded text-gray-400 hover:text-blue-500 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-400 transition-colors",
+            children: /* @__PURE__ */ jsxRuntime.jsx(FunnelIcon, {})
+          }
+        ),
+        ...alignProp,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              "aria-label": "\uC5F0\uC0B0\uC790",
+              value: operator,
+              onChange: handleOperatorChange,
+              className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-400 bg-white",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "contains", children: "\uD3EC\uD568" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "equals", children: "\uAC19\uC74C" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "startsWith", children: "\uC2DC\uC791" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "endsWith", children: "\uB05D" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              "aria-label": "\uD544\uD130 \uAC12",
+              value: inputValue,
+              onChange: handleInputChange,
+              placeholder: "\uAC12 \uC785\uB825...",
+              className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-400"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              className: "w-full px-2 py-1 text-xs text-gray-600 border border-gray-200 rounded hover:bg-gray-50 hover:text-gray-900 transition-colors",
+              children: "\uCD08\uAE30\uD654"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+var textFilterFn = (row, columnId, filterValue) => {
+  const rawCell = row.getValue(columnId);
+  if (rawCell == null) return false;
+  const cellStr = String(rawCell).toLowerCase();
+  const filterStr = filterValue.value.trim().toLowerCase();
+  if (filterStr === "") return true;
+  switch (filterValue.operator) {
+    case "contains":
+      return cellStr.includes(filterStr);
+    case "equals":
+      return cellStr === filterStr;
+    case "startsWith":
+      return cellStr.startsWith(filterStr);
+    case "endsWith":
+      return cellStr.endsWith(filterStr);
+    default: {
+      const _exhaustive = filterValue.operator;
+      return _exhaustive;
+    }
+  }
+};
+textFilterFn.autoRemove = (val) => !val || val.value.trim() === "";
+var numberFilterFn = (row, columnId, filterValue) => {
+  const rawCell = row.getValue(columnId);
+  if (rawCell == null) return false;
+  const cell = Number(rawCell);
+  if (isNaN(cell)) return false;
+  const { operator, value, min, max } = filterValue;
+  switch (operator) {
+    case "=":
+      return value !== void 0 && !isNaN(value) ? cell === value : true;
+    case "!=":
+      return value !== void 0 && !isNaN(value) ? cell !== value : true;
+    case ">":
+      return value !== void 0 && !isNaN(value) ? cell > value : true;
+    case "<":
+      return value !== void 0 && !isNaN(value) ? cell < value : true;
+    case ">=":
+      return value !== void 0 && !isNaN(value) ? cell >= value : true;
+    case "<=":
+      return value !== void 0 && !isNaN(value) ? cell <= value : true;
+    case "between": {
+      const minOk = min !== void 0 && !isNaN(min) ? cell >= min : true;
+      const maxOk = max !== void 0 && !isNaN(max) ? cell <= max : true;
+      return minOk && maxOk;
+    }
+    default: {
+      const _exhaustive = operator;
+      return _exhaustive;
+    }
+  }
+};
+numberFilterFn.autoRemove = (val) => {
+  if (!val) return true;
+  if (val.operator === "between") {
+    return (val.min === void 0 || isNaN(val.min)) && (val.max === void 0 || isNaN(val.max));
+  }
+  return val.value === void 0 || isNaN(val.value);
+};
+var dateRangeFilterFn = (row, columnId, filterValue) => {
+  const rawCell = row.getValue(columnId);
+  if (rawCell == null) return false;
+  const cellDate = new Date(rawCell);
+  if (isNaN(cellDate.getTime())) return false;
+  const { from, to } = filterValue;
+  if (from === void 0 && to === void 0) return true;
+  if (from !== void 0 && to === void 0) {
+    return cellDate >= dateFns.startOfDay(from);
+  }
+  if (from === void 0 && to !== void 0) {
+    return cellDate <= dateFns.endOfDay(to);
+  }
+  try {
+    return dateFns.isWithinInterval(cellDate, {
+      start: dateFns.startOfDay(from),
+      end: dateFns.endOfDay(to)
+    });
+  } catch {
+    return false;
+  }
+};
+dateRangeFilterFn.autoRemove = (val) => !val || val.from === void 0 && val.to === void 0;
+var selectFilterFn = reactTable.filterFns.arrIncludes;
+function FunnelIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: "w-4 h-4",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 0 1 .628.74v2.288a2.25 2.25 0 0 1-.659 1.59l-4.682 4.683a2.25 2.25 0 0 0-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 0 1 9 18.25v-5.757a2.25 2.25 0 0 0-.659-1.591L3.659 6.22A2.25 2.25 0 0 1 3 4.629V2.34a.75.75 0 0 1 .628-.74z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function NumberFilter({
+  column,
+  defaultOperator,
+  popoverAlign
+}) {
+  const currentValue = column.getFilterValue();
+  const [operator, setOperator] = react.useState(
+    currentValue?.operator ?? defaultOperator ?? "="
+  );
+  const [inputValue, setInputValue] = react.useState(
+    currentValue?.value !== void 0 ? String(currentValue.value) : ""
+  );
+  const [minValue, setMinValue] = react.useState(
+    currentValue?.min !== void 0 ? String(currentValue.min) : ""
+  );
+  const [maxValue, setMaxValue] = react.useState(
+    currentValue?.max !== void 0 ? String(currentValue.max) : ""
+  );
+  react.useEffect(() => {
+    const timer = setTimeout(() => {
+      const num = parseFloat(inputValue);
+      if (inputValue === "" || isNaN(num)) {
+        column.setFilterValue(void 0);
+      } else {
+        column.setFilterValue({ operator, value: num });
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [inputValue, operator, column]);
+  react.useEffect(() => {
+    if (operator !== "between") return;
+    const timer = setTimeout(() => {
+      const min = parseFloat(minValue);
+      const max = parseFloat(maxValue);
+      const hasMin = minValue !== "" && !isNaN(min);
+      const hasMax = maxValue !== "" && !isNaN(max);
+      if (!hasMin && !hasMax) {
+        column.setFilterValue(void 0);
+      } else {
+        column.setFilterValue({
+          operator: "between",
+          ...hasMin ? { min } : {},
+          ...hasMax ? { max } : {}
+        });
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [minValue, maxValue, operator, column]);
+  const handleClear = () => {
+    setInputValue("");
+    setMinValue("");
+    setMaxValue("");
+    setOperator(defaultOperator ?? "=");
+    column.setFilterValue(void 0);
+  };
+  const handleOperatorChange = (e) => {
+    setOperator(e.target.value);
+    setInputValue("");
+    setMinValue("");
+    setMaxValue("");
+    column.setFilterValue(void 0);
+  };
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const handleMinChange = (e) => {
+    setMinValue(e.target.value);
+  };
+  const handleMaxChange = (e) => {
+    setMaxValue(e.target.value);
+  };
+  const alignProp = popoverAlign !== void 0 ? { align: popoverAlign } : {};
+  const isFiltered = column.getIsFiltered();
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FilterIndicator, { isFiltered }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FilterPopover,
+      {
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "\uC22B\uC790 \uD544\uD130",
+            "aria-pressed": isFiltered,
+            className: "inline-flex items-center justify-center w-5 h-5 rounded text-gray-400 hover:text-blue-500 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-400 transition-colors",
+            children: /* @__PURE__ */ jsxRuntime.jsx(FunnelIcon2, {})
+          }
+        ),
+        ...alignProp,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              "aria-label": "\uC5F0\uC0B0\uC790",
+              value: operator,
+              onChange: handleOperatorChange,
+              className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-400 bg-white",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "=", children: "\uAC19\uC74C (=)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "!=", children: "\uB2E4\uB984 (\u2260)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: ">", children: "\uCD08\uACFC (>)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "<", children: "\uBBF8\uB9CC (<)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: ">=", children: "\uC774\uC0C1 (\u2265)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "<=", children: "\uC774\uD558 (\u2264)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "between", children: "\uC0AC\uC774 (between)" })
+              ]
+            }
+          ),
+          operator === "between" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                "aria-label": "\uCD5C\uC19F\uAC12",
+                value: minValue,
+                onChange: handleMinChange,
+                placeholder: "\uCD5C\uC19F\uAC12...",
+                className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-400"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-center text-xs text-gray-400", children: "~" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                "aria-label": "\uCD5C\uB313\uAC12",
+                value: maxValue,
+                onChange: handleMaxChange,
+                placeholder: "\uCD5C\uB313\uAC12...",
+                className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-400"
+              }
+            )
+          ] }) : (
+            /* 단항 연산자: 단일 value input */
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                "aria-label": "\uD544\uD130 \uAC12",
+                value: inputValue,
+                onChange: handleInputChange,
+                placeholder: "\uAC12 \uC785\uB825...",
+                className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-400"
+              }
+            )
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              className: "w-full px-2 py-1 text-xs text-gray-600 border border-gray-200 rounded hover:bg-gray-50 hover:text-gray-900 transition-colors",
+              children: "\uCD08\uAE30\uD654"
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+DatePicker.registerLocale("ko", locale.ko);
+function DateFilter({ column, popoverAlign }) {
+  const filterValue = column.getFilterValue();
+  const fromDate = filterValue?.from ?? null;
+  const toDate = filterValue?.to ?? null;
+  const handleFromChange = (date) => {
+    const from = date ?? void 0;
+    const to = filterValue?.to;
+    if (from === void 0 && to === void 0) {
+      column.setFilterValue(void 0);
+    } else {
+      const val = {
+        ...from !== void 0 ? { from } : {},
+        ...to !== void 0 ? { to } : {}
+      };
+      column.setFilterValue(val);
+    }
+  };
+  const handleToChange = (date) => {
+    const from = filterValue?.from;
+    const to = date ?? void 0;
+    if (from === void 0 && to === void 0) {
+      column.setFilterValue(void 0);
+    } else {
+      const val = {
+        ...from !== void 0 ? { from } : {},
+        ...to !== void 0 ? { to } : {}
+      };
+      column.setFilterValue(val);
+    }
+  };
+  const handleClear = () => {
+    column.setFilterValue(void 0);
+  };
+  const summaryText = () => {
+    if (fromDate && toDate) {
+      const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+      return `${fmt(fromDate)} ~ ${fmt(toDate)}`;
+    }
+    if (fromDate) {
+      const d = fromDate;
+      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")} ~`;
+    }
+    if (toDate) {
+      const d = toDate;
+      return `~ ${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+    }
+    return "\uB0A0\uC9DC \uD544\uD130";
+  };
+  const isFiltered = column.getIsFiltered();
+  const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": "\uB0A0\uC9DC \uD544\uD130",
+      "aria-pressed": isFiltered,
+      className: "inline-flex items-center gap-1 px-2 py-1 text-xs rounded border border-gray-300 bg-white hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-500",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FilterIndicator, { isFiltered }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[120px]", children: summaryText() })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FilterPopover,
+    {
+      trigger,
+      ...popoverAlign !== void 0 ? { align: popoverAlign } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-2 min-w-[220px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-700", children: "\uC2DC\uC791\uC77C" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DatePicker__default.default,
+            {
+              selected: fromDate,
+              onChange: handleFromChange,
+              locale: "ko",
+              placeholderText: "\uC2DC\uC791\uC77C",
+              dateFormat: "yyyy-MM-dd",
+              ...toDate !== null ? { maxDate: toDate } : {},
+              className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-700", children: "\uC885\uB8CC\uC77C" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DatePicker__default.default,
+            {
+              selected: toDate,
+              onChange: handleToChange,
+              locale: "ko",
+              placeholderText: "\uC885\uB8CC\uC77C",
+              dateFormat: "yyyy-MM-dd",
+              ...fromDate !== null ? { minDate: fromDate } : {},
+              className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleClear,
+            className: "w-full px-2 py-1 text-xs text-gray-600 border border-gray-200 rounded hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-500",
+            children: "\uCD08\uAE30\uD654"
+          }
+        )
+      ] })
+    }
+  );
+}
+function SelectFilter({
+  column,
+  searchThreshold = 50,
+  popoverAlign
+}) {
+  const [searchText, setSearchText] = react.useState("");
+  const searchInputId = react.useId();
+  const uniqueValues = column.getFacetedUniqueValues();
+  const currentFilter = column.getFilterValue();
+  const isFiltered = column.getIsFiltered();
+  const allOptions = Array.from(uniqueValues.entries());
+  const showSearch = uniqueValues.size >= searchThreshold;
+  const filteredOptions = showSearch ? allOptions.filter(
+    ([val]) => String(val === "" ? "" : val).toLowerCase().includes(searchText.toLowerCase())
+  ) : allOptions;
+  const selectedSet = new Set(currentFilter ?? []);
+  const allSelected = allOptions.length > 0 && allOptions.every(([val]) => selectedSet.has(String(val)));
+  const handleToggle = (optionValue) => {
+    const next = new Set(selectedSet);
+    if (next.has(optionValue)) {
+      next.delete(optionValue);
+    } else {
+      next.add(optionValue);
+    }
+    const arr = Array.from(next);
+    column.setFilterValue(arr.length > 0 ? arr : void 0);
+  };
+  const handleToggleAll = () => {
+    if (allSelected) {
+      column.setFilterValue(void 0);
+    } else {
+      column.setFilterValue(allOptions.map(([val]) => String(val)));
+    }
+  };
+  const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: "inline-flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900",
+      "aria-label": `${column.id} \uD544\uD130`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.id }),
+        /* @__PURE__ */ jsxRuntime.jsx(FilterIndicator, { isFiltered }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "w-3 h-3 text-gray-400",
+            fill: "none",
+            viewBox: "0 0 20 20",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M6 8l4 4 4-4"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FilterPopover,
+    {
+      ...popoverAlign !== void 0 ? { align: popoverAlign } : {},
+      trigger,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 w-52", children: [
+        showSearch && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: searchInputId, className: "sr-only", children: "\uC635\uC158 \uAC80\uC0C9" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: searchInputId,
+              type: "text",
+              value: searchText,
+              onChange: (e) => setSearchText(e.target.value),
+              placeholder: "Search options\u2026",
+              className: "w-full rounded border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500"
+            }
+          )
+        ] }),
+        allOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 border-b border-gray-100 pb-1", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer px-1 py-0.5 rounded hover:bg-gray-50 text-xs text-gray-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: allSelected,
+              onChange: handleToggleAll,
+              className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            }
+          ),
+          "\uC804\uCCB4 \uC120\uD0DD/\uD574\uC81C"
+        ] }) }),
+        filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-1 py-1 text-xs text-gray-400", children: "No options" }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "max-h-48 overflow-y-auto space-y-0.5", children: filteredOptions.map(([val, count]) => {
+          const rawStr = String(val);
+          const displayLabel = rawStr === "" ? "(blank)" : rawStr;
+          const optId = `${searchInputId}-opt-${rawStr}`;
+          const isChecked = selectedSet.has(rawStr);
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              htmlFor: optId,
+              className: "flex items-center gap-2 cursor-pointer px-1 py-0.5 rounded hover:bg-gray-50",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    id: optId,
+                    type: "checkbox",
+                    checked: isChecked,
+                    onChange: () => handleToggle(rawStr),
+                    className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-xs text-gray-700", children: displayLabel }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-400", children: [
+                  "(",
+                  count,
+                  ")"
+                ] })
+              ]
+            }
+          ) }, rawStr);
+        }) })
+      ] })
+    }
+  );
+}
+function GlobalSearchInput({
+  table,
+  debounceMs = 300,
+  placeholder = "Search all columns\u2026"
+}) {
+  const [inputValue, setInputValue] = react.useState("");
+  react.useEffect(() => {
+    const trimmed = inputValue.trim();
+    const timer = setTimeout(
+      () => table.setGlobalFilter(trimmed === "" ? void 0 : trimmed),
+      debounceMs
+    );
+    return () => clearTimeout(timer);
+  }, [inputValue, debounceMs, table]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: "absolute left-2 w-4 h-4 text-gray-400 pointer-events-none",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M21 21l-4.35-4.35M16.65 16.65A7.5 7.5 0 1 0 4.5 4.5a7.5 7.5 0 0 0 12.15 12.15z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        value: inputValue,
+        onChange: (e) => setInputValue(e.target.value),
+        placeholder,
+        className: "pl-8 pr-3 py-1.5 rounded border border-gray-300 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 w-56",
+        "aria-label": "\uC804\uCCB4 \uAC80\uC0C9"
+      }
+    )
+  ] });
+}
+function FilterResetButton({
+  table,
+  children
+}) {
+  const { columnFilters, globalFilter } = table.getState();
+  const isDisabled = columnFilters.length === 0 && !globalFilter;
+  const handleClick = () => {
+    table.resetColumnFilters();
+    table.setGlobalFilter(void 0);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: isDisabled,
+      className: [
+        "inline-flex items-center gap-1 rounded border px-3 py-1.5 text-sm font-medium transition-colors",
+        isDisabled ? "border-gray-200 bg-gray-50 text-gray-400 opacity-50 cursor-not-allowed" : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:text-gray-900"
+      ].join(" "),
+      "aria-label": "\uD544\uD130 \uCD08\uAE30\uD654",
+      children: children ?? "Reset Filters"
+    }
+  );
+}
+
+Object.defineProperty(exports, "DropIndicator", {
+  enumerable: true,
+  get: function () { return gridCore.DropIndicator; }
+});
+Object.defineProperty(exports, "SortBadge", {
+  enumerable: true,
+  get: function () { return gridCore.SortBadge; }
+});
+Object.defineProperty(exports, "SortClearButton", {
+  enumerable: true,
+  get: function () { return gridCore.SortClearButton; }
+});
+Object.defineProperty(exports, "useColumnDrag", {
+  enumerable: true,
+  get: function () { return gridCore.useColumnDrag; }
+});
+Object.defineProperty(exports, "useColumnOrderPersist", {
+  enumerable: true,
+  get: function () { return gridCore.useColumnOrderPersist; }
+});
+exports.DateFilter = DateFilter;
+exports.FilterIndicator = FilterIndicator;
+exports.FilterPopover = FilterPopover;
+exports.FilterResetButton = FilterResetButton;
+exports.GlobalSearchInput = GlobalSearchInput;
+exports.NumberFilter = NumberFilter;
+exports.SelectFilter = SelectFilter;
+exports.TextFilter = TextFilter;
+exports.dateRangeFilterFn = dateRangeFilterFn;
+exports.numberFilterFn = numberFilterFn;
+exports.selectFilterFn = selectFilterFn;
+exports.textFilterFn = textFilterFn;
+exports.useMultiSort = useMultiSort;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map