@dimaan/ui 0.0.24 → 0.0.27

package/dist/index.cjs

@@ -2948,37 +2948,130 @@ function hasActiveFilters(filters, values) {
   }
   return false;
 }
+function DebouncedFilterInput({
+  value,
+  onChange,
+  debounceMs,
+  ariaLabel,
+  placeholder,
+  wrapperClassName,
+  disabled
+}) {
+  const [local, setLocal] = react.useState(value);
+  const timerRef = react.useRef(null);
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  react.useEffect(() => {
+    setLocal(value);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, [value]);
+  react.useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const handleChange = (next) => {
+    setLocal(next);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (debounceMs <= 0) {
+      onChangeRef.current(next);
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null;
+      onChangeRef.current(next);
+    }, debounceMs);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      type: "search",
+      "aria-label": ariaLabel,
+      placeholder,
+      value: local,
+      onChange: (e) => handleChange(e.target.value),
+      leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4" }),
+      wrapperClassName,
+      disabled
+    }
+  );
+}
+var DEFAULT_TEXT_DEBOUNCE_MS = 400;
 function ListPageFilterBar({
   filters,
   values,
   onChange,
   disabled = false,
+  mode = "live",
   labels
 }) {
+  const manual = mode === "manual";
   const active = hasActiveFilters(filters, values);
+  const appliedKey = JSON.stringify(values ?? {});
+  const [draft, setDraft] = react.useState(values ?? {});
+  react.useEffect(() => {
+    if (manual) setDraft(values ?? {});
+  }, [appliedKey, manual]);
+  const effectiveValues = manual ? draft : values ?? {};
+  const handleChange = (key, value) => {
+    if (manual) {
+      setDraft((prev) => ({ ...prev, [key]: value }));
+    } else {
+      onChange?.(key, value);
+    }
+  };
+  const dirty = manual && (filters ?? []).some((filter) => {
+    const next = draft[filter.key] ?? filterDefaultValue(filter);
+    const current = values?.[filter.key] ?? filterDefaultValue(filter);
+    return next !== current;
+  });
+  const apply = (event) => {
+    event.preventDefault();
+    for (const filter of filters ?? []) {
+      const next = draft[filter.key] ?? filterDefaultValue(filter);
+      const current = values?.[filter.key] ?? filterDefaultValue(filter);
+      if (next !== current) onChange?.(filter.key, next);
+    }
+  };
   const reset = () => {
     for (const filter of filters ?? []) {
       onChange?.(filter.key, filterDefaultValue(filter));
     }
   };
+  const controls = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters?.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
+    FilterControl,
+    {
+      filter,
+      value: effectiveValues[filter.key],
+      onChange: handleChange,
+      disabled,
+      mode
+    },
+    filter.key
+  )) });
+  const resetButton = active && !disabled ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-4" }),
+    labels.reset
+  ] }) : null;
+  if (manual) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("form", { "data-slot": "list-page-filter-bar", className: "space-y-3", onSubmit: apply, children: [
+      controls,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+        resetButton,
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", disabled: disabled || !dirty, children: labels.apply ?? "Apply" })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "list-page-filter-bar", className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: filters?.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
-      FilterControl,
-      {
-        filter,
-        value: values?.[filter.key],
-        onChange,
-        disabled
-      },
-      filter.key
-    )) }),
-    active && !disabled ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "size-4" }),
-      labels.reset
-    ] }) }) : null
+    controls,
+    resetButton ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: resetButton }) : null
   ] });
 }
-function FilterControl({ filter, value, onChange, disabled }) {
+function FilterControl({ filter, value, onChange, disabled, mode }) {
   const spanClass = FILTER_SPAN_CLASS[filter.width ?? "default"];
   const ariaLabel = typeof filter.label === "string" ? filter.label : filter.key;
   switch (filter.type) {
@@ -2996,14 +3089,13 @@ function FilterControl({ filter, value, onChange, disabled }) {
       );
     case "text":
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
+        DebouncedFilterInput,
         {
-          type: "search",
-          "aria-label": ariaLabel,
-          placeholder: filter.placeholder,
           value: value ?? "",
-          onChange: (e) => onChange?.(filter.key, e.target.value),
-          leadingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-4" }),
+          onChange: (v) => onChange?.(filter.key, v),
+          debounceMs: mode === "live" ? filter.debounceMs ?? DEFAULT_TEXT_DEBOUNCE_MS : 0,
+          ariaLabel,
+          placeholder: filter.placeholder,
           wrapperClassName: spanClass,
           disabled
         }
@@ -3035,13 +3127,22 @@ function FilterControl({ filter, value, onChange, disabled }) {
       );
   }
 }
-var DEFAULT_LABELS = {
+var EN_LABELS2 = {
   reset: "Reset filters",
+  apply: "Apply",
   emptyTitle: "No results",
   emptyDescription: "Try clearing the search or adjusting the filters.",
   noDataTitle: "No data yet",
   noDataDescription: "Nothing has been added here so far."
 };
+var AR_LABELS2 = {
+  reset: "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646 \u0627\u0644\u0641\u0644\u0627\u062A\u0631",
+  apply: "\u062A\u0637\u0628\u064A\u0642",
+  emptyTitle: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0646\u062A\u0627\u0626\u062C",
+  emptyDescription: "\u062C\u0631\u0651\u0628 \u0645\u0633\u062D \u0627\u0644\u0628\u062D\u062B \u0623\u0648 \u062A\u0639\u062F\u064A\u0644 \u0627\u0644\u0641\u0644\u0627\u062A\u0631.",
+  noDataTitle: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0628\u064A\u0627\u0646\u0627\u062A \u0628\u0639\u062F",
+  noDataDescription: "\u0644\u0645 \u062A\u062A\u0645 \u0625\u0636\u0627\u0641\u0629 \u0623\u064A \u0634\u064A\u0621 \u0647\u0646\u0627 \u062D\u062A\u0649 \u0627\u0644\u0622\u0646."
+};
 function ListPage({
   title,
   description,
@@ -3055,6 +3156,7 @@ function ListPage({
   filters,
   filterValues,
   onFilterChange,
+  filterMode = "manual",
   enableRowSelection,
   bulkActions,
   pagination,
@@ -3066,7 +3168,8 @@ function ListPage({
   labels: labelsProp,
   className
 }) {
-  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const dir = useDirection();
+  const labels = { ...dir === "rtl" ? AR_LABELS2 : EN_LABELS2, ...labelsProp };
   const showFilterBar = Boolean(filters?.length);
   const hasActiveQuery = react.useMemo(
     () => hasActiveFilters(filters, filterValues),
@@ -3086,8 +3189,8 @@ function ListPage({
         filters,
         values: filterValues,
         onChange: onFilterChange,
-        disabled: isLoading,
-        labels: { reset: labels.reset }
+        mode: filterMode,
+        labels: { reset: labels.reset, apply: labels.apply }
       }
     ) : null,
     tableMode === "loading" || tableMode === "rows" ? /* @__PURE__ */ jsxRuntime.jsx(