@farmzone/fz-react-ui 1.0.7 → 1.0.8

package/dist/index.d.cts

@@ -650,6 +650,8 @@ interface CheckboxInfo {
     selectedKeys: Array<string | number>;
     onSelectionChange: (keys: Array<string | number>) => void;
     fixed?: boolean;
+    disabledKeys?: Array<string | number>;
+    disabledTooltip?: React.ReactNode | ((key: string | number) => React.ReactNode);
 }
 type DragEndResult = {
     type: "row" | "column";
@@ -674,6 +676,8 @@ interface TableProps<T> {
     onColumnDragEnd?: (result: DragEndResult) => void;
     tooltipConfig?: "always" | "overflow" | false;
     isDynamicHeight?: boolean;
+    showHorizontalDivider?: boolean;
+    showVerticalDivider?: boolean;
 }
 declare function Table<T>(props: TableProps<T>): react.JSX.Element;
 

package/dist/index.d.ts

@@ -650,6 +650,8 @@ interface CheckboxInfo {
     selectedKeys: Array<string | number>;
     onSelectionChange: (keys: Array<string | number>) => void;
     fixed?: boolean;
+    disabledKeys?: Array<string | number>;
+    disabledTooltip?: React.ReactNode | ((key: string | number) => React.ReactNode);
 }
 type DragEndResult = {
     type: "row" | "column";
@@ -674,6 +676,8 @@ interface TableProps<T> {
     onColumnDragEnd?: (result: DragEndResult) => void;
     tooltipConfig?: "always" | "overflow" | false;
     isDynamicHeight?: boolean;
+    showHorizontalDivider?: boolean;
+    showVerticalDivider?: boolean;
 }
 declare function Table<T>(props: TableProps<T>): react.JSX.Element;
 

package/dist/index.js

@@ -465,12 +465,10 @@ function Input2(props) {
   const actualType = type === "password" && showPassword ? "text" : type;
   const handlePasswordToggle = () => setShowPassword((prev) => !prev);
   const finalRightIcon = rightIcon || (shouldShowPasswordToggle ? /* @__PURE__ */ jsx(
-    "button",
+    "div",
     {
-      type: "button",
       onClick: handlePasswordToggle,
       className: "text-muted-foreground hover:text-foreground cursor-pointer transition-colors",
-      disabled,
       children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
     }
   ) : null);
@@ -3929,8 +3927,6 @@ function ArrowIcon(props) {
     }
   );
 }
-var DEFAULT_SORT_KEY = "";
-var DEFAULT_SORT_ORDER = "asc";
 var DEFAULT_SORT_OPTIONS = {
   visibleType: "always",
   sortKey: "",
@@ -3979,27 +3975,18 @@ function TableHeader(props) {
     if (onSortChange) {
       const isActive = sortOption?.sortKey === columnKey;
       const currentOrder = sortOption?.sortOrder;
-      if (isActive) {
-        if (currentOrder === "desc") {
-          onSortChange(columnKey, "asc");
-        } else if (currentOrder === "asc") {
-          onSortChange(DEFAULT_SORT_KEY, DEFAULT_SORT_ORDER);
-        } else {
-          onSortChange(columnKey, "desc");
-        }
+      if (isActive && currentOrder === "desc") {
+        onSortChange(columnKey, "asc");
       } else {
         onSortChange(columnKey, "desc");
       }
       return;
     }
     setInternalSortState((prev) => {
-      if (prev.columnKey !== columnKey) {
-        return { columnKey, order: "desc" };
-      }
-      if (prev.order === "desc") {
+      if (prev.columnKey === columnKey && prev.order === "desc") {
         return { columnKey, order: "asc" };
       }
-      return { columnKey: null, order: null };
+      return { columnKey, order: "desc" };
     });
   };
   const renderSortIcon = (columnKey) => {
@@ -4635,9 +4622,11 @@ function Table(props) {
     paginationInfo,
     renderFooter,
     tooltipConfig = "overflow",
-    isDynamicHeight = true
+    isDynamicHeight = true,
+    showHorizontalDivider = true,
+    showVerticalDivider = true
   } = props;
-  const { fixed = false, onSelectionChange, selectedKeys = [] } = checkboxInfo ?? {};
+  const { fixed = false, onSelectionChange, selectedKeys = [], disabledKeys = [], disabledTooltip } = checkboxInfo ?? {};
   const scrollRef = useRef(null);
   const footerRef = useRef(null);
   const [tableHeight, setTableHeight] = useState(500);
@@ -4679,11 +4668,14 @@ function Table(props) {
     const footerH = footerRef.current?.getBoundingClientRect().height ?? 0;
     setTableHeight(window.innerHeight - top - footerH - 24);
   }, [showSkeleton, showEmpty]);
-  const isAllSelected = data.length > 0 && selectedKeys.length === data.length;
   const selectedKeysRef = useRef(selectedKeys);
   selectedKeysRef.current = selectedKeys;
   const onSelectionChangeRef = useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
+  const disabledKeysRef = useRef(disabledKeys);
+  disabledKeysRef.current = disabledKeys;
+  const disabledTooltipRef = useRef(disabledTooltip);
+  disabledTooltipRef.current = disabledTooltip;
   const dataRef = useRef(data);
   dataRef.current = data;
   const onRowClickRef = useRef(onRowClick);
@@ -4698,6 +4690,8 @@ function Table(props) {
     },
     [rowKey]
   );
+  const selectableKeys = data.map((record, index) => getRowKey(record, index)).filter((key) => !disabledKeys.includes(key));
+  const isAllSelected = selectableKeys.length > 0 && selectableKeys.every((key) => selectedKeys.includes(key));
   const allColumns = useMemo(() => {
     const checkboxCol = {
       key: "__checkbox__",
@@ -4712,19 +4706,24 @@ function Table(props) {
           checked: isAllSelected,
           onChange: () => {
             if (!onSelectionChangeRef.current) return;
-            const allKeys = dataRef.current.map((record, index) => getRowKey(record, index));
+            const allKeys = dataRef.current.map((record, index) => getRowKey(record, index)).filter((key) => !disabledKeysRef.current.includes(key));
             onSelectionChangeRef.current(isAllSelected ? [] : allKeys);
           }
         }
       ),
       render: (_value, record, rowIdx) => {
         const key = getRowKey(record, rowIdx);
+        const isDisabled = disabledKeysRef.current.includes(key);
+        const tooltip = disabledTooltipRef.current;
+        const tooltipContent = isDisabled && tooltip ? typeof tooltip === "function" ? tooltip(key) : tooltip : void 0;
         return /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx(
           Checkbox,
           {
             checked: selectedKeysRef.current.includes(key),
+            disabled: isDisabled,
+            tooltipConfig: tooltipContent ? { content: tooltipContent, position: "bottom" } : void 0,
             onChange: () => {
-              if (!onSelectionChangeRef.current) return;
+              if (!onSelectionChangeRef.current || isDisabled) return;
               const cur = selectedKeysRef.current;
               const next = cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key];
               onSelectionChangeRef.current(next);
@@ -4985,7 +4984,7 @@ function Table(props) {
           id: `${col.key}-body`,
           "data-row-cell": "true",
           "data-col-key": col.key,
-          className: `${isCheckbox ? "p-0" : "p-3"} whitespace-nowrap text-sm text-gray-900 border-r border-b border-gray-300/70 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all`,
+          className: `${isCheckbox ? "p-0" : "p-3"} whitespace-nowrap text-sm text-gray-900 border-gray-300/70 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all ${showVerticalDivider ? "border-r" : ""} ${showHorizontalDivider ? "border-b" : ""}`,
           style: {
             width,
             minWidth: minWidth || width,