lizaui 9.0.53 → 9.0.54

package/dist/table/index.es.js

@@ -3,10 +3,18 @@ import { c } from "react/compiler-runtime";
 import React__default, { isValidElement, createContext, useContext, memo, forwardRef, useId, useMemo, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { T as Tooltip } from "../chunks/tooltip-BVafMD5T.js";
+import { C as ChevronUp } from "../chunks/chevron-up-BBd-SipB.js";
+import { C as ChevronDown } from "../chunks/chevron-down-D-14pIT_.js";
+import { c as createLucideIcon } from "../chunks/createLucideIcon-C5oU6LEj.js";
 import { L as LoaderCircle } from "../chunks/loader-circle-CeKbzHTN.js";
 import clsx from "clsx";
 import { C as Checkbox } from "../chunks/checkbox-upIIzsyW.js";
 import { AnimatePresence, LazyMotion } from "framer-motion";
+const __iconNode = [
+  ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
+  ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
+];
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode);
 const TableHeader = React__default.memo((t0) => {
   const $ = c(14);
   let children;
@@ -68,8 +76,24 @@ const TableHeader = React__default.memo((t0) => {
   return t3;
 });
 TableHeader.displayName = "TableHeader";
+const initialValues = {
+  color: "primary",
+  disabledKeys: [],
+  isChecks: true,
+  selectKeys: [],
+  isActions: true,
+  widthAction: 100,
+  totalColumn: 0,
+  sortDescriptors: [],
+  onSortChange: () => {
+  }
+};
+const TableContext = createContext(initialValues);
+const useTableContext = () => {
+  return useContext(TableContext);
+};
 const TableHeaderColumn = React__default.memo((t0) => {
-  const $ = c(21);
+  const $ = c(41);
   const {
     children,
     className,
@@ -92,6 +116,10 @@ const TableHeaderColumn = React__default.memo((t0) => {
   const icon = t2 === void 0 ? null : t2;
   const text = t3 === void 0 ? "" : t3;
   const colspan = t4 === void 0 ? void 0 : t4;
+  const {
+    sortDescriptors,
+    onSortChange
+  } = useTableContext();
   let t6;
   if ($[2] !== className) {
     t6 = twMerge("px-2 border-b border-divider", className);
@@ -127,9 +155,86 @@ const TableHeaderColumn = React__default.memo((t0) => {
     t10 = $[9];
   }
   const isChildrenEmpty = t10;
+  const isSortable = header?.sort;
+  header?.id;
   let t11;
-  if ($[10] !== children || $[11] !== header?.information || $[12] !== icon || $[13] !== isChildrenEmpty || $[14] !== text) {
-    t11 = isChildrenEmpty ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-x-2 font-medium", children: [
+  if ($[10] !== header?.id || $[11] !== sortDescriptors) {
+    t11 = sortDescriptors?.find((d) => d.column === header?.id);
+    $[10] = header?.id;
+    $[11] = sortDescriptors;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  const currentSort = t11;
+  let t12;
+  if ($[13] !== currentSort || $[14] !== header?.id || $[15] !== sortDescriptors) {
+    t12 = () => {
+      if (!sortDescriptors || sortDescriptors.length <= 1 || !currentSort) {
+        return null;
+      }
+      return sortDescriptors.findIndex((d_0) => d_0.column === header?.id) + 1;
+    };
+    $[13] = currentSort;
+    $[14] = header?.id;
+    $[15] = sortDescriptors;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  header?.id;
+  const sortOrderIndex = t12();
+  let t13;
+  if ($[17] !== header || $[18] !== isSortable || $[19] !== onSortChange) {
+    t13 = () => {
+      if (isSortable && onSortChange && header?.id) {
+        onSortChange(header.id);
+      }
+    };
+    $[17] = header;
+    $[18] = isSortable;
+    $[19] = onSortChange;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  const handleSort = t13;
+  let t14;
+  if ($[21] !== currentSort || $[22] !== icon || $[23] !== isSortable || $[24] !== sortOrderIndex) {
+    t14 = () => {
+      if (!isSortable) {
+        return icon;
+      }
+      if (currentSort) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+          sortOrderIndex && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-default-400", children: sortOrderIndex }),
+          currentSort.direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-primary" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-primary" })
+        ] });
+      }
+      return /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 text-default-300" });
+    };
+    $[21] = currentSort;
+    $[22] = icon;
+    $[23] = isSortable;
+    $[24] = sortOrderIndex;
+    $[25] = t14;
+  } else {
+    t14 = $[25];
+  }
+  const renderSortIcon = t14;
+  const t15 = isSortable ? "cursor-pointer hover:bg-default-100 transition-colors" : "";
+  let t16;
+  if ($[26] !== mergedClass || $[27] !== t15) {
+    t16 = twMerge(mergedClass, t15);
+    $[26] = mergedClass;
+    $[27] = t15;
+    $[28] = t16;
+  } else {
+    t16 = $[28];
+  }
+  let t17;
+  if ($[29] !== children || $[30] !== header?.information || $[31] !== isChildrenEmpty || $[32] !== renderSortIcon || $[33] !== text) {
+    t17 = isChildrenEmpty ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center gap-x-2 font-medium", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex  items-center gap-x-2", children: [
         /* @__PURE__ */ jsx("p", { className: "line-clamp-1 text-xs text-foreground-500 dark:text-foreground-500 text-left", children: text }),
         header?.information && /* @__PURE__ */ jsx(Tooltip, { content: header?.information || "", children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", role: "img", className: "text-default-300 cursor-pointer dark:text-foreground-500", width: 16, height: 16, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxs("g", { fill: "none", children: [
@@ -138,44 +243,32 @@ const TableHeaderColumn = React__default.memo((t0) => {
           /* @__PURE__ */ jsx("circle", { cx: 1, cy: 1, r: 1, fill: "currentColor", transform: "matrix(1 0 0 -1 11 9)" })
         ] }) }) })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 flex", children: icon })
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-end", children: renderSortIcon() })
     ] }) : children;
-    $[10] = children;
-    $[11] = header?.information;
-    $[12] = icon;
-    $[13] = isChildrenEmpty;
-    $[14] = text;
-    $[15] = t11;
+    $[29] = children;
+    $[30] = header?.information;
+    $[31] = isChildrenEmpty;
+    $[32] = renderSortIcon;
+    $[33] = text;
+    $[34] = t17;
   } else {
-    t11 = $[15];
+    t17 = $[34];
   }
-  let t12;
-  if ($[16] !== colspan || $[17] !== mergedClass || $[18] !== mergedStyle || $[19] !== t11) {
-    t12 = /* @__PURE__ */ jsx("th", { className: mergedClass, style: mergedStyle, colSpan: colspan, children: t11 });
-    $[16] = colspan;
-    $[17] = mergedClass;
-    $[18] = mergedStyle;
-    $[19] = t11;
-    $[20] = t12;
+  let t18;
+  if ($[35] !== colspan || $[36] !== handleSort || $[37] !== mergedStyle || $[38] !== t16 || $[39] !== t17) {
+    t18 = /* @__PURE__ */ jsx("th", { className: t16, style: mergedStyle, colSpan: colspan, onClick: handleSort, children: t17 });
+    $[35] = colspan;
+    $[36] = handleSort;
+    $[37] = mergedStyle;
+    $[38] = t16;
+    $[39] = t17;
+    $[40] = t18;
   } else {
-    t12 = $[20];
+    t18 = $[40];
   }
-  return t12;
+  return t18;
 });
 TableHeaderColumn.displayName = "TableHeaderColumn";
-const initialValues = {
-  color: "primary",
-  disabledKeys: [],
-  isChecks: true,
-  selectKeys: [],
-  isActions: true,
-  widthAction: 100,
-  totalColumn: 0
-};
-const TableContext = createContext(initialValues);
-const useTableContext = () => {
-  return useContext(TableContext);
-};
 const TableEmptyState = memo((t0) => {
   const $ = c(3);
   const {
@@ -945,6 +1038,8 @@ const TableHOC = ({
     isActions = true,
     widthAction = 100,
     dataHeader,
+    sortDescriptors,
+    onSortChange,
     ...otherProps
   } = props;
   const tableClass = useMemo(() => twMerge("table-main-container w-full border-collapse table-auto", className), [className]);
@@ -956,7 +1051,9 @@ const TableHOC = ({
     selectKeys,
     isActions,
     widthAction,
-    totalColumn: dataHeader?.length || 0
+    totalColumn: dataHeader?.length || 0,
+    sortDescriptors,
+    onSortChange
   }, children: /* @__PURE__ */ jsx("div", { className: containerClass, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LazyMotion, { features: () => import("framer-motion").then((res) => res.domAnimation), children: /* @__PURE__ */ jsx("table", { className: tableClass, children: React__default.Children.map(children, (child) => isValidElement(child) ? React__default.cloneElement(child, {
     dataHeader,
     ...otherProps
@@ -973,45 +1070,56 @@ const Table = Object.assign(TableHOC, {
   BodyColumn: TableBodyColumn
 });
 const useTable = (t0) => {
-  const $ = c(15);
+  const $ = c(19);
   const {
     initialDisabledKeys: t1,
     initialSelectKey: t2,
-    initialValueSearch: t3
+    initialValueSearch: t3,
+    initialSortDescriptors: t4
   } = t0;
-  let t4;
+  let t5;
   if ($[0] !== t1) {
-    t4 = t1 === void 0 ? [] : t1;
+    t5 = t1 === void 0 ? [] : t1;
     $[0] = t1;
-    $[1] = t4;
+    $[1] = t5;
   } else {
-    t4 = $[1];
+    t5 = $[1];
   }
-  const initialDisabledKeys = t4;
-  let t5;
+  const initialDisabledKeys = t5;
+  let t6;
   if ($[2] !== t2) {
-    t5 = t2 === void 0 ? [] : t2;
+    t6 = t2 === void 0 ? [] : t2;
     $[2] = t2;
-    $[3] = t5;
+    $[3] = t6;
   } else {
-    t5 = $[3];
+    t6 = $[3];
   }
-  const initialSelectKey = t5;
-  let t6;
+  const initialSelectKey = t6;
+  let t7;
   if ($[4] !== t3) {
-    t6 = t3 === void 0 ? {} : t3;
+    t7 = t3 === void 0 ? {} : t3;
     $[4] = t3;
-    $[5] = t6;
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  const initialValueSearch = t7;
+  let t8;
+  if ($[6] !== t4) {
+    t8 = t4 === void 0 ? [] : t4;
+    $[6] = t4;
+    $[7] = t8;
   } else {
-    t6 = $[5];
+    t8 = $[7];
   }
-  const initialValueSearch = t6;
+  const initialSortDescriptors = t8;
   const [selectKeys, setSelectKeys] = useState(initialSelectKey);
   const [disabledKeys, setDisabledKeys] = useState(initialDisabledKeys);
   const [valueSearch, setValueSearch] = useState(initialValueSearch);
-  let t7;
-  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = (value) => {
+  const [sortDescriptors, setSortDescriptors] = useState(initialSortDescriptors);
+  let t9;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = (value) => {
       setSelectKeys((prev) => {
         const exists = prev.some((el) => el.id === value.id);
         if (exists) {
@@ -1020,44 +1128,44 @@ const useTable = (t0) => {
         return [...prev, value];
       });
     };
-    $[6] = t7;
+    $[8] = t9;
   } else {
-    t7 = $[6];
+    t9 = $[8];
   }
-  const handleSelectKey = t7;
-  let t8;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = (value_0) => {
+  const handleSelectKey = t9;
+  let t10;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = (value_0) => {
       setSelectKeys(value_0);
     };
-    $[7] = t8;
+    $[9] = t10;
   } else {
-    t8 = $[7];
+    t10 = $[9];
   }
-  const handleSelectKeys = t8;
-  let t9;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = (value_1) => {
+  const handleSelectKeys = t10;
+  let t11;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = (value_1) => {
       setDisabledKeys(value_1);
     };
-    $[8] = t9;
+    $[10] = t11;
   } else {
-    t9 = $[8];
+    t11 = $[10];
   }
-  const handleDisabledKeys = t9;
-  let t10;
-  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = () => {
+  const handleDisabledKeys = t11;
+  let t12;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = () => {
       setSelectKeys([]);
     };
-    $[9] = t10;
+    $[11] = t12;
   } else {
-    t10 = $[9];
+    t12 = $[11];
   }
-  const handleResetSelectKeys = t10;
-  let t11;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = (key, value_2) => {
+  const handleResetSelectKeys = t12;
+  let t13;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = (key, value_2) => {
       setValueSearch((prev_0) => {
         if (prev_0[key] === value_2) {
           return prev_0;
@@ -1073,31 +1181,63 @@ const useTable = (t0) => {
         return newState;
       });
     };
-    $[10] = t11;
+    $[12] = t13;
   } else {
-    t11 = $[10];
+    t13 = $[12];
   }
-  const handleSetValueSearch = t11;
-  let t12;
-  if ($[11] !== disabledKeys || $[12] !== selectKeys || $[13] !== valueSearch) {
-    t12 = {
+  const handleSetValueSearch = t13;
+  let t14;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = (column) => {
+      setSortDescriptors((prev_1) => {
+        const existingIndex = prev_1.findIndex((s) => s.column === column);
+        if (existingIndex !== -1) {
+          const existing = prev_1[existingIndex];
+          if (existing.direction === "asc") {
+            const newSorts = [...prev_1];
+            newSorts[existingIndex] = {
+              ...existing,
+              direction: "desc"
+            };
+            return newSorts;
+          } else {
+            return prev_1.filter((s_0) => s_0.column !== column);
+          }
+        }
+        return [...prev_1, {
+          column,
+          direction: "asc"
+        }];
+      });
+    };
+    $[13] = t14;
+  } else {
+    t14 = $[13];
+  }
+  const handleSort = t14;
+  let t15;
+  if ($[14] !== disabledKeys || $[15] !== selectKeys || $[16] !== sortDescriptors || $[17] !== valueSearch) {
+    t15 = {
       selectKeys,
       disabledKeys,
       valueSearch,
+      sortDescriptors,
       handleSelectKeys,
       handleSelectKey,
       handleDisabledKeys,
       handleSetValueSearch,
-      handleResetSelectKeys
+      handleResetSelectKeys,
+      handleSort
     };
-    $[11] = disabledKeys;
-    $[12] = selectKeys;
-    $[13] = valueSearch;
-    $[14] = t12;
+    $[14] = disabledKeys;
+    $[15] = selectKeys;
+    $[16] = sortDescriptors;
+    $[17] = valueSearch;
+    $[18] = t15;
   } else {
-    t12 = $[14];
+    t15 = $[18];
   }
-  return t12;
+  return t15;
 };
 export {
   Table,