@algorithm-shift/design-system 1.2.965 → 1.2.967

package/dist/index.mjs

@@ -27358,71 +27358,168 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-import { useCallback, useEffect as useEffect11, useState as useState3 } from "react";
+import { useEffect as useEffect11, useState as useState3, useRef, useCallback } from "react";
 import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
-var MultiCheckbox = ({
-  className,
-  style,
+function MultiCheckbox({
+  apiUrl,
+  axiosInstance,
   data = [],
-  dataKey = "value",
-  dataLabel = "label",
-  value: propValue = {},
+  dataKey = "id",
+  dataLabel = "name",
+  pageSize = 20,
+  value,
   onChange,
-  isEditable = true,
-  isDisabled = false,
+  outputFormat = "array",
+  className,
+  style,
+  source,
+  loading,
+  onUncheckItems,
   ...props
-}) => {
-  const list = Array.isArray(data) ? data : [];
-  const [value, setValue] = useState3(propValue);
-  const options = (list || []).map((item) => ({
-    value: item[dataKey || "value"],
-    label: item[dataLabel || "label"]
-  }));
-  useEffect11(() => {
-    if (propValue !== void 0) {
-      onChange?.(propValue, props?.name || "");
+}) {
+  const [options, setOptions] = useState3([]);
+  const [page, setPage] = useState3(1);
+  const [hasMore, setHasMore] = useState3(true);
+  const [pageLoading, setPageLoading] = useState3(false);
+  const loadMoreRef = useRef(null);
+  const normalizeInput = (val) => {
+    if (!val) return [];
+    if (Array.isArray(val)) return val;
+    if (typeof val === "string") {
+      if (val.includes(";")) return val.split(";").map((s) => s.trim());
+      if (val.includes(",")) return val.split(",").map((s) => s.trim());
+      return [val.trim()];
     }
-  }, []);
-  const handleChange = useCallback(
-    (key, checked) => {
-      setValue((prev) => {
-        const newValue = { ...prev, [key]: checked };
-        onChange?.(newValue, props?.name || "");
-        return newValue;
-      });
+    return [];
+  };
+  const selected = normalizeInput(value);
+  const convertOutput = (arr) => {
+    switch (outputFormat) {
+      case "comma":
+        return arr.join(",");
+      case "semicolon":
+        return arr.join(";");
+      default:
+        return arr;
+    }
+  };
+  const fetchApiPage = useCallback(async () => {
+    if (!apiUrl) return [];
+    const client = axiosInstance || (await import("axios")).default;
+    const res = await client.get(apiUrl, {
+      params: { page, limit: pageSize },
+      withCredentials: true
+    });
+    if (res.data?.success && Array.isArray(res.data.data)) {
+      return res.data.data;
+    }
+    return Array.isArray(res.data) ? res.data : [];
+  }, [apiUrl, axiosInstance, page, pageSize]);
+  const mapData = useCallback(
+    (items) => {
+      if (Array.isArray(items) === false) return [];
+      return (items || []).map((item) => ({
+        value: item[dataKey],
+        label: item[dataLabel]
+      }));
     },
-    [onChange]
+    [dataKey, dataLabel]
   );
-  return /* @__PURE__ */ jsxs15(
-    "div",
-    {
-      className: cn("flex flex-col gap-3", className),
-      style,
-      children: [
-        options.length === 0 && /* @__PURE__ */ jsx32("p", { className: "text-sm text-gray-500", children: "No options available." }),
-        options.map((opt) => /* @__PURE__ */ jsxs15("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsx32(
-            Checkbox,
-            {
-              id: opt.value,
-              checked: !!value[opt.value],
-              onCheckedChange: (checked) => handleChange(opt.value, checked === true),
-              disabled: !isEditable || isDisabled
-            }
-          ),
-          /* @__PURE__ */ jsx32(Label2, { htmlFor: opt.value, children: opt.label })
-        ] }, opt.value))
-      ]
+  const loadPage = useCallback(async () => {
+    if (source !== "api") return;
+    if (pageLoading) return;
+    setPageLoading(true);
+    try {
+      const pageData = await fetchApiPage();
+      const mapped = mapData(pageData);
+      setOptions((prev) => [...prev, ...mapped]);
+      if (pageData.length < pageSize) {
+        setHasMore(false);
+      }
+    } finally {
+      setPageLoading(false);
     }
-  );
-};
-var MultiCheckbox_default = MultiCheckbox;
+  }, [source, pageLoading, fetchApiPage, mapData, pageSize]);
+  useEffect11(() => {
+    if (source === "api") {
+      setOptions([]);
+      setPage(1);
+      setHasMore(true);
+    } else {
+      setOptions(mapData(data));
+      setHasMore(false);
+    }
+  }, [source, JSON.stringify(data)]);
+  useEffect11(() => {
+    if (source === "api") loadPage();
+  }, [page, source]);
+  useEffect11(() => {
+    if (source !== "api") return;
+    if (!hasMore || pageLoading) return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        setPage((prev) => prev + 1);
+      }
+    });
+    if (loadMoreRef.current) observer.observe(loadMoreRef.current);
+    return () => observer.disconnect();
+  }, [source, hasMore, pageLoading]);
+  const toggle = (val) => {
+    if (props.isDisabled || props.isReadonly) return;
+    const updated = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];
+    onChange?.(convertOutput(updated), props.name || "");
+    onUncheckItems?.(convertOutput(
+      options.filter((opt) => !updated.includes(opt.value)).map((opt) => opt.value)
+    ), props.name || "");
+  };
+  return /* @__PURE__ */ jsxs15("div", { className: cn("flex flex-col gap-2 max-h-64 overflow-auto", className), style, children: [
+    options.length === 0 && !pageLoading && !loading && /* @__PURE__ */ jsx32("div", { className: "text-center py-2 text-gray-500 text-sm", children: "No options available." }),
+    options.map((opt, index) => {
+      const hasError = !!props.errorMessage;
+      return /* @__PURE__ */ jsxs15(
+        "div",
+        {
+          className: cn(
+            "flex items-center space-x-2 p-1 rounded",
+            hasError && "bg-red-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx32(
+              Checkbox,
+              {
+                id: props.name ? `${props.name}-${opt.value}` : opt.value,
+                checked: selected.includes(opt.value),
+                onCheckedChange: () => toggle(opt.value),
+                disabled: props.isDisabled || props.isReadonly,
+                className: cn(
+                  hasError && "border-red-500 data-[state=checked]:bg-red-500"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx32(
+              Label2,
+              {
+                id: props.name ? `${props.name}-${opt.value}` : opt.value,
+                className: cn(hasError && "text-red-600"),
+                children: opt.label
+              }
+            )
+          ]
+        },
+        `${index}-${opt.value}`
+      );
+    }),
+    source === "api" && hasMore && /* @__PURE__ */ jsx32("div", { ref: loadMoreRef, className: "h-4" }),
+    (pageLoading || loading) && /* @__PURE__ */ jsx32("div", { className: "text-center py-2 text-gray-500 text-sm", children: "Loading\u2026" }),
+    props.errorMessage && /* @__PURE__ */ jsx32("p", { className: "mt-1 text-xs text-red-500", children: props.errorMessage })
+  ] });
+}
 
 // src/components/Inputs/RichText/RichText.tsx
 import { useEffect as useEffect12 } from "react";
 
 // src/components/Global/TinyMceEditor.tsx
-import { useMemo as useMemo2, useRef } from "react";
+import { useMemo as useMemo2, useRef as useRef2 } from "react";
 import { Editor } from "@tinymce/tinymce-react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 function MyEditor({
@@ -27430,7 +27527,7 @@ function MyEditor({
   onChange,
   isDefault
 }) {
-  const editorRef = useRef(null);
+  const editorRef = useRef2(null);
   function stripOuterP(html) {
     const trimmedHtml = html.trim();
     if (!trimmedHtml) return "";
@@ -27649,10 +27746,10 @@ function SelectScrollDownButton({
 }
 
 // src/components/Inputs/Dropdown/LazyDropdown.tsx
-import { useState as useState5, useRef as useRef3, useEffect as useEffect14, useMemo as useMemo3 } from "react";
+import { useState as useState5, useRef as useRef4, useEffect as useEffect14, useMemo as useMemo3 } from "react";
 
 // src/hooks/useLazyDropdown.ts
-import { useState as useState4, useEffect as useEffect13, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { useState as useState4, useEffect as useEffect13, useRef as useRef3, useCallback as useCallback2 } from "react";
 import axios from "axios";
 function useLazyDropdown(config) {
   const [options, setOptions] = useState4([]);
@@ -27660,9 +27757,9 @@ function useLazyDropdown(config) {
   const [hasMore, setHasMore] = useState4(true);
   const [loading, setLoading] = useState4(false);
   const [searchTerm, setSearchTerm] = useState4("");
-  const debounceTimer = useRef2(null);
-  const allDataRef = useRef2([]);
-  const configRef = useRef2(config);
+  const debounceTimer = useRef3(null);
+  const allDataRef = useRef3([]);
+  const configRef = useRef3(config);
   const PAGE_SIZE = config.pageSize || 10;
   const uniqueOptions = (items) => {
     const seen = /* @__PURE__ */ new Set();
@@ -27699,7 +27796,7 @@ function useLazyDropdown(config) {
     if (!configRef.current.apiUrl) return [];
     const limit = PAGE_SIZE;
     const params = { page: pageNum, limit };
-    if (term) params[configRef.current.dataLabel ?? "search"] = term;
+    if (term) params[configRef.current.dataLabel ? `${configRef.current.dataLabel}[ilike]` : "search[ilike]"] = term;
     const axiosClient = configRef.current.axiosInstance ?? axios;
     const res = await axiosClient.get(configRef.current.apiUrl, {
       params,
@@ -27753,8 +27850,20 @@ function useLazyDropdown(config) {
     try {
       setLoading(true);
       const axiosClient = configRef.current.axiosInstance ?? axios;
+      let params = {
+        [configRef.current.dataKey]: configRef.current.value
+      };
+      if (Array.isArray(configRef.current.value)) {
+        if (configRef.current.value.length === 0) {
+          setLoading(false);
+          return;
+        }
+        params = {
+          [`${configRef.current.dataKey}[in]`]: configRef.current.value.join(",")
+        };
+      }
       const res = await axiosClient.get(configRef.current.apiUrl, {
-        params: { [configRef.current.dataKey]: configRef.current.value },
+        params,
         withCredentials: true
       });
       if (res.data?.success && Array.isArray(res.data.data) && res.data.data.length > 0) {
@@ -27770,8 +27879,8 @@ function useLazyDropdown(config) {
   useEffect13(() => {
     const cfg = configRef.current;
     if (!cfg.enabled || !cfg.value || cfg.dataSource !== "api" || !cfg.apiUrl) return;
-    if (!!cfg.isMultiSelect) {
-      const values = String(cfg.value).split(",").map((v) => v.trim());
+    if (cfg.isMultiSelect) {
+      const values = Array.isArray(cfg.value) ? cfg.value.map((v) => v.trim()) : [];
       const valueExists = values.every((val) => options.some((opt) => opt.value === val));
       if (valueExists) return;
     } else {
@@ -27779,19 +27888,19 @@ function useLazyDropdown(config) {
       if (valueExists) return;
     }
     fetchValueItem();
-  }, [config.value, config.dataKey, config.apiUrl, config.dataSource, transformToOptions]);
+  }, [JSON.stringify(config.value), config.dataKey, config.apiUrl, config.dataSource]);
   const loadMore = useCallback2(() => {
     if (!loading && hasMore) {
       loadPage(page + 1, searchTerm);
     }
-  }, [loading, hasMore, page, searchTerm, loadPage]);
+  }, [loading, hasMore, page, searchTerm]);
   const search = useCallback2((term) => {
     setSearchTerm(term);
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
     debounceTimer.current = setTimeout(() => {
       loadPage(1, term);
     }, 300);
-  }, [loadPage]);
+  }, []);
   const reset = useCallback2(() => {
     setSearchTerm("");
     setPage(1);
@@ -27801,7 +27910,7 @@ function useLazyDropdown(config) {
       allDataRef.current = config.initialData;
       loadPage(1, "");
     }
-  }, [config.initialData, loadPage]);
+  }, [config.initialData]);
   useEffect13(() => {
     return () => {
       if (debounceTimer.current) clearTimeout(debounceTimer.current);
@@ -27839,8 +27948,8 @@ function LazySelectDropdown({
 }) {
   const [isOpen, setIsOpen] = useState5(false);
   const [searchTerm, setSearchTerm] = useState5("");
-  const dropdownRef = useRef3(null);
-  const observerTarget = useRef3(null);
+  const dropdownRef = useRef4(null);
+  const observerTarget = useRef4(null);
   const {
     options: lazyOptions,
     loading,
@@ -28659,7 +28768,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/Inputs/Multiselect/MultiSelect.tsx
-import { useState as useState6, useRef as useRef5, useEffect as useEffect24, useMemo as useMemo4 } from "react";
+import { useState as useState6, useRef as useRef6, useEffect as useEffect24, useMemo as useMemo4 } from "react";
 import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 function LazyMultiSelectDropdown({
   options = [],
@@ -28681,8 +28790,24 @@ function LazyMultiSelectDropdown({
 }) {
   const [isOpen, setIsOpen] = useState6(false);
   const [searchTerm, setSearchTerm] = useState6("");
-  const dropdownRef = useRef5(null);
-  const observerTarget = useRef5(null);
+  const dropdownRef = useRef6(null);
+  const observerTarget = useRef6(null);
+  const ensureUnique = (arr) => {
+    return Array.from(new Set(arr));
+  };
+  const normalizeInput = (value2) => {
+    let arr = [];
+    if (Array.isArray(value2)) {
+      arr = value2;
+    } else if (typeof value2 === "string") {
+      if (!value2.trim()) return [];
+      if (value2.includes(";")) arr = value2.split(";").map((v) => v.trim());
+      else if (value2.includes(",")) arr = value2.split(",").map((v) => v.trim());
+      else arr = [value2.trim()];
+    }
+    return ensureUnique(arr);
+  };
+  const normalizedValue = normalizeInput(value);
   const {
     options: lazyOptions,
     loading,
@@ -28699,13 +28824,10 @@ function LazyMultiSelectDropdown({
     dataKey,
     dataLabel,
     initialData: options || [],
-    value,
+    value: normalizedValue,
     axiosInstance,
     isMultiSelect: true
   });
-  const ensureUnique = (arr) => {
-    return Array.from(new Set(arr));
-  };
   const convertOutput = (values) => {
     const unique = ensureUnique(values);
     switch (outputFormat) {
@@ -28717,19 +28839,6 @@ function LazyMultiSelectDropdown({
         return unique;
     }
   };
-  const normalizeInput = (value2) => {
-    let arr = [];
-    if (Array.isArray(value2)) {
-      arr = value2;
-    } else if (typeof value2 === "string") {
-      if (!value2.trim()) return [];
-      if (value2.includes(";")) arr = value2.split(";").map((v) => v.trim());
-      else if (value2.includes(",")) arr = value2.split(",").map((v) => v.trim());
-      else arr = [value2.trim()];
-    }
-    return ensureUnique(arr);
-  };
-  const normalizedValue = normalizeInput(value);
   const selectedOptions = useMemo4(() => {
     return lazyOptions.filter((opt) => normalizedValue.includes(opt.value));
   }, [lazyOptions, normalizedValue]);
@@ -28982,7 +29091,7 @@ var dayjs_setup_default = dayjs;
 // src/lib/table/valueFormatter.ts
 var valueFormatter = (value, format2, customFormatters = {}) => {
   if (!format2) return value;
-  if (value == null) return "";
+  if (value == null || value === "" || value === void 0) return "-";
   if (format2.startsWith("custom:")) {
     const key = format2.replace("custom:", "");
     return customFormatters[key] ? customFormatters[key](value) : value;
@@ -29072,19 +29181,20 @@ var sanitizeValue = (val) => {
 };
 var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers = {}, format2, customFormatters = {}) => {
   const formattedValue = valueFormatter(value, format2, customFormatters);
+  const rowValue = row?.[rendererProps?.rowField];
   switch (renderer) {
     /* -------------------- BASIC -------------------- */
     case "text":
-      return /* @__PURE__ */ jsx50("span", { children: row?.[rendererProps?.rowField] || formattedValue });
+      return /* @__PURE__ */ jsx50("span", { children: rowValue || formattedValue });
     case "number":
-      return /* @__PURE__ */ jsx50("span", { className: "tabular-nums text-right", children: valueFormatter(row?.[rendererProps?.rowField] || value, "number:2") });
+      return /* @__PURE__ */ jsx50("span", { className: "tabular-nums text-right", children: valueFormatter(rowValue || value, "number:2") });
     case "date":
-      return /* @__PURE__ */ jsx50("span", { children: valueFormatter(row?.[rendererProps?.rowField] || value, format2) });
+      return /* @__PURE__ */ jsx50("span", { children: valueFormatter(rowValue || value, format2) });
     case "link":
       return /* @__PURE__ */ jsx50(
         "a",
         {
-          href: `${rendererProps?.prefix || ""}${row?.[rendererProps?.rowField] || formattedValue}`,
+          href: `${rendererProps?.prefix || ""}${rowValue || formattedValue}`,
           target: "_blank",
           rel: "noreferrer",
           className: `text-blue-500 underline ${rendererProps?.className || ""}`,
@@ -29096,7 +29206,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
       return /* @__PURE__ */ jsx50("div", { className: "relative", children: /* @__PURE__ */ jsx50(
         Image2,
         {
-          src: row?.[rendererProps?.rowField] || formattedValue || rendererProps?.fallback || "/placeholder.png",
+          src: rowValue || formattedValue || rendererProps?.fallback || "/placeholder.png",
           alt: rendererProps?.alt || "",
           width: rendererProps?.width || 40,
           height: rendererProps?.height || 40,
@@ -29156,7 +29266,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
         {
           onClick: () => rendererProps?.onClick?.(row, formattedValue),
           className: `px-2 py-1 rounded text-white bg-blue-600 hover:bg-blue-700 ${rendererProps?.className || ""}`,
-          children: row?.[rendererProps?.rowField] || rendererProps.value || formattedValue
+          children: rowValue || rendererProps.value || formattedValue
         }
       );
     case "switch":
@@ -29177,11 +29287,11 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
         "div",
         {
           className: "bg-blue-600 h-2 rounded-full transition-all",
-          style: { width: `${row?.[rendererProps?.rowField] || formattedValue || 0}%` }
+          style: { width: `${rowValue || formattedValue || 0}%` }
         }
       ) });
     case "rating": {
-      const stars = Math.round(Number(row?.[rendererProps?.rowField] || formattedValue) || 0);
+      const stars = Math.round(Number(rowValue || formattedValue) || 0);
       return /* @__PURE__ */ jsx50("div", { className: "flex items-center", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx50(
         Star,
         {
@@ -29208,7 +29318,7 @@ var cellRendererFactory = (renderer, rendererProps, value, row, customRenderers
     }
     /* -------------------- DEFAULT -------------------- */
     default:
-      return /* @__PURE__ */ jsx50("span", { children: formattedValue });
+      return /* @__PURE__ */ jsx50("span", { children: formattedValue || "-" });
   }
 };
 
@@ -29233,7 +29343,7 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
     };
     return columnHelper.accessor(accessorFn, {
       ...col,
-      size: col.size > 0 ? col.size : 180,
+      size: col.size && col.size > 0 ? col.size : 180,
       id: col.id ?? accessorKey,
       header: col.header,
       cell: (info) => {
@@ -29292,7 +29402,7 @@ function DataTable({
       ...paginationMode === "server" ? {
         pagination: {
           pageIndex: controlledPageIndex ?? 0,
-          pageSize
+          pageSize: localPageSize
         }
       } : {}
     },
@@ -29302,7 +29412,7 @@ function DataTable({
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination && paginationMode === "client" ? getPaginationRowModel() : void 0,
     manualPagination: paginationMode === "server",
-    pageCount: paginationMode === "server" ? Math.ceil(totalRecords / pageSize) : void 0,
+    pageCount: paginationMode === "server" ? Math.ceil(totalRecords / localPageSize) : void 0,
     ...paginationMode === "server" ? {
       onPaginationChange: (updater) => {
         const prev = table.getState().pagination;
@@ -30891,7 +31001,7 @@ export {
   Icon_default as Icon,
   Image_default as Image,
   Modal,
-  MultiCheckbox_default as MultiCheckbox,
+  MultiCheckbox,
   LazyMultiSelectDropdown as MultiSelect,
   Navbar,
   NumberInput_default as NumberInput,