@ultraviolet/ui 1.82.0 → 1.82.2

package/dist/components/List/ListContext.d.ts

@@ -1,8 +1,9 @@
-import type { ComponentProps, Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
+import type { ChangeEvent, ComponentProps, Dispatch, ReactNode, SetStateAction } from 'react';
 import type { Checkbox } from '../Checkbox';
 import type { ColumnProps } from './types';
-type RowState = Record<string, boolean>;
-type ListContextValue = {
+type RowState = Record<string | number, boolean>;
+type MapCheckbox = Map<string | number, HTMLInputElement>;
+export type ListContextValue = {
     /**
      * @returns an unregister function
      * */
@@ -15,18 +16,20 @@ type ListContextValue = {
      * @returns an unregister function
      * */
     registerSelectableRow: (rowId: string) => () => void;
-    selectedRowIds: RowState;
-    selectRow: (rowId: string) => void;
-    unselectRow: (rowId: string) => void;
-    selectable: boolean;
     allRowSelectValue: ComponentProps<typeof Checkbox>['checked'];
+    selectAllHandler: (event: ChangeEvent<HTMLInputElement>) => void;
+    subscribeHandler: () => void;
+    columns: ColumnProps[];
+    inRange: Set<number | string>;
+    mapCheckbox: MapCheckbox;
+    selectable: boolean;
     selectAll: () => void;
+    selectedRowIds: RowState;
+    selectRow: (rowId: string) => void;
     unselectAll: () => void;
-    refList: RefObject<HTMLInputElement[]>;
-    inRange: string[];
-    columns: ColumnProps[];
+    unselectRow: (rowId: string) => void;
 };
-type ListProviderProps = {
+export type ListProviderProps = {
     children: ReactNode;
     autoCollapse: boolean;
     selectable: boolean;

package/dist/components/List/ListContext.js

@@ -1,6 +1,17 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { createContext, useState, useRef, useCallback, useMemo, useEffect, useContext } from "react";
 const ListContext = createContext(void 0);
+const checkStateOfCheckboxs = (ids) => {
+  const selectableRowCount = Object.keys(ids).length;
+  const selectableValuesCount = new Set(Object.values(ids));
+  if (!selectableRowCount) {
+    return false;
+  }
+  if (selectableValuesCount.size === 1) {
+    return [...selectableValuesCount][0];
+  }
+  return "indeterminate";
+};
 const ListProvider = ({
   children,
   autoCollapse,
@@ -11,7 +22,9 @@ const ListProvider = ({
 }) => {
   const [expandedRowIds, setExpandedRowIds] = useState({});
   const [selectedRowIds, setSelectedRowIds] = useState({});
-  const refList = useRef([]);
+  const [lastCheckedIndex, setLastCheckedIndex] = useState(null);
+  const [inRange, setInRange] = useState(/* @__PURE__ */ new Set([]));
+  const refList = useRef(/* @__PURE__ */ new Map());
   const registerExpandableRow = useCallback((rowId, expanded = false) => {
     setExpandedRowIds((current) => ({
       ...current,
@@ -54,142 +67,130 @@ const ListProvider = ({
       [rowId]: false
     }));
   }, []);
-  const allRowSelectValue = useMemo(() => {
-    const selectableRowCount = Object.keys(selectedRowIds).length;
-    if (!selectableRowCount) {
-      return false;
-    }
-    const selectedRowCount = Object.values(selectedRowIds).reduce((acc, isSelected) => acc + (isSelected ? 1 : 0), 0);
-    if (selectedRowCount === 0) {
-      return false;
-    }
-    if (selectableRowCount === selectedRowCount) {
-      return true;
-    }
-    return "indeterminate";
-  }, [selectedRowIds]);
-  const selectAll = useCallback(() => {
-    const newSelectedRowIds = Object.keys(selectedRowIds).reduce((acc, rowId) => ({
+  const allRowSelectValue = useMemo(() => checkStateOfCheckboxs(selectedRowIds), [selectedRowIds]);
+  const selectRows = useCallback((rowIds, state) => {
+    const newSelectedRowIds = rowIds.reduce((acc, rowId) => ({
       ...acc,
-      [rowId]: true
-    }), {});
+      [rowId]: state
+    }), selectedRowIds);
     setSelectedRowIds(newSelectedRowIds);
     if (onSelectedChange) {
       onSelectedChange(Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row]));
     }
   }, [onSelectedChange, selectedRowIds]);
+  const selectAll = useCallback(() => {
+    selectRows(Object.keys(selectedRowIds), true);
+  }, [selectRows, selectedRowIds]);
   const unselectAll = useCallback(() => {
-    const newSelectedRowIds = Object.keys(selectedRowIds).reduce((acc, rowId) => ({
-      ...acc,
-      [rowId]: false
-    }), {});
-    setSelectedRowIds(newSelectedRowIds);
-    if (onSelectedChange) {
-      onSelectedChange(Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row]));
-    }
-  }, [onSelectedChange, selectedRowIds]);
+    selectRows(Object.keys(selectedRowIds), false);
+  }, [selectRows, selectedRowIds]);
   const selectRow = useCallback((rowId) => {
-    const newSelectedRowIds = {
-      ...selectedRowIds,
-      [rowId]: true
-    };
-    setSelectedRowIds(newSelectedRowIds);
-    if (onSelectedChange) {
-      onSelectedChange(Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row]));
-    }
-  }, [onSelectedChange, selectedRowIds]);
+    selectRows([rowId], true);
+  }, [selectRows]);
   const unselectRow = useCallback((rowId) => {
-    const newSelectedRowIds = {
-      ...selectedRowIds,
-      [rowId]: false
-    };
-    setSelectedRowIds(newSelectedRowIds);
-    if (onSelectedChange) {
-      onSelectedChange(Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row]));
+    selectRows([rowId], false);
+  }, [selectRows]);
+  const selectAllHandler = useCallback(() => {
+    if (allRowSelectValue && [true, "indeterminate"].includes(allRowSelectValue)) {
+      unselectAll();
     }
-  }, [onSelectedChange, selectedRowIds]);
-  const [lastCheckedIndex, setLastCheckedIndex] = useState(null);
-  const [inRange, setInRange] = useState([]);
-  useEffect(() => {
+    if (allRowSelectValue === false) {
+      selectAll();
+    }
+  }, [allRowSelectValue, unselectAll, selectAll]);
+  const subscribeHandler = useCallback(() => {
     const handlers = [];
     if (refList.current) {
-      const handleClick = (index, isShiftPressed, checked) => {
-        if (index !== 0) {
-          setLastCheckedIndex(index);
-          if (isShiftPressed && lastCheckedIndex !== null) {
-            const start = Math.min(lastCheckedIndex, index);
-            const end = Math.max(lastCheckedIndex, index);
-            const newSelectedRowIds = {
-              ...selectedRowIds
-            };
-            for (let i = start; i <= end; i += 1) {
-              const checkbox = refList.current[i];
-              const checkboxValue = checkbox.value;
-              if (!checkbox.disabled) {
-                if (checked) {
-                  newSelectedRowIds[checkboxValue] = false;
-                } else {
-                  newSelectedRowIds[checkboxValue] = true;
-                }
-              }
-            }
-            setSelectedRowIds(newSelectedRowIds);
-            if (onSelectedChange) {
-              onSelectedChange(Object.keys(newSelectedRowIds).filter((row) => newSelectedRowIds[row]));
-            }
-          }
-        } else setLastCheckedIndex(null);
+      const handleHover = (checkbox, event) => {
+        const isShiftPressed = event.shiftKey;
+        const isHoverActive = isShiftPressed && lastCheckedIndex !== null && !checkbox.disabled;
+        if (isHoverActive) {
+          setInRange((prev) => /* @__PURE__ */ new Set([...prev, checkbox.value]));
+        }
+        if (!lastCheckedIndex && !checkbox.disabled) {
+          setLastCheckedIndex(checkbox.value);
+        }
       };
-      const handleHover = (index, isShiftPressed, leaving) => {
-        const newRange = [];
-        if (isShiftPressed && lastCheckedIndex !== null) {
-          const start = Math.min(lastCheckedIndex, index);
-          const end = Math.max(lastCheckedIndex, index);
-          for (let i = start; i < end; i += 1) {
-            const checkbox = refList.current[i];
-            if (!checkbox.disabled && !leaving) {
-              newRange.push(checkbox.value);
+      const handleClickRange = (checkbox) => {
+        const shouldShiftEvent = inRange.size > 0;
+        const isClickInsideRange = inRange.has(checkbox.value);
+        if (shouldShiftEvent && isClickInsideRange) {
+          let checkboxRows = {};
+          refList.current.forEach((value2, key) => {
+            if (inRange.has(key)) {
+              checkboxRows = {
+                ...checkboxRows,
+                // handle the conflict event ( click and onChange in the same time on the last checkbox click)
+                [key]: key === checkbox.value ? !value2.checked : value2.checked
+              };
             }
+          });
+          const state = checkStateOfCheckboxs(checkboxRows);
+          const checkboxIds = Object.keys(checkboxRows);
+          if (state === true) {
+            selectRows(checkboxIds, false);
+          }
+          if ([false, "indeterminate"].includes(state)) {
+            selectRows(checkboxIds, true);
           }
         }
-        setInRange(newRange);
+        setTimeout(() => {
+          setInRange(/* @__PURE__ */ new Set([]));
+          setLastCheckedIndex(checkbox.value);
+        }, 1);
+      };
+      const handleOnChange = (checkbox) => {
+        const shouldHandleEvent = inRange.size === 0;
+        if (shouldHandleEvent) {
+          selectRows([checkbox.value], !checkbox.checked);
+        }
+        setLastCheckedIndex(checkbox.value);
       };
-      refList.current.forEach((checkbox, index) => {
-        const clickHandler = (event) => handleClick(index, event.shiftKey, selectedRowIds[event.target.value]);
-        const hoverEnteringHandler = (event) => handleHover(index, event.shiftKey, false);
-        const hoverLeavingHandler = (event) => handleHover(index, event.shiftKey, true);
+      refList.current.forEach((checkbox) => {
+        function clickHandler() {
+          handleClickRange(this);
+        }
+        function hoverHandler(event) {
+          handleHover(this, event);
+        }
+        function changeHandler() {
+          handleOnChange(this);
+        }
+        checkbox.addEventListener("change", changeHandler);
         checkbox.addEventListener("click", clickHandler);
-        checkbox.addEventListener("mousemove", hoverEnteringHandler);
-        checkbox.addEventListener("mouseout", hoverLeavingHandler);
+        checkbox.addEventListener("mouseover", hoverHandler);
         handlers.push(() => {
+          checkbox.removeEventListener("change", changeHandler);
           checkbox.removeEventListener("click", clickHandler);
-          checkbox.removeEventListener("mouseout", hoverEnteringHandler);
-          checkbox.removeEventListener("mousemove", hoverLeavingHandler);
+          checkbox.removeEventListener("mouseover", hoverHandler);
         });
       });
     }
     return () => {
       handlers.forEach((cleanup) => cleanup());
     };
-  }, [lastCheckedIndex, onSelectedChange, selectedRowIds, unselectRow]);
+  }, [inRange, lastCheckedIndex, selectRows]);
+  useEffect(subscribeHandler, [subscribeHandler]);
   const value = useMemo(() => ({
-    registerExpandableRow,
+    allRowSelectValue,
+    selectAllHandler,
+    subscribeHandler,
+    collapseRow,
+    columns,
+    expandButton,
     expandedRowIds,
     expandRow,
-    collapseRow,
+    inRange,
+    mapCheckbox: refList.current,
+    registerExpandableRow,
     registerSelectableRow,
-    selectedRowIds,
-    selectRow,
-    unselectRow,
     selectable,
     selectAll,
+    selectedRowIds,
+    selectRow,
     unselectAll,
-    allRowSelectValue,
-    expandButton,
-    refList,
-    inRange,
-    columns
-  }), [registerExpandableRow, expandedRowIds, expandRow, collapseRow, registerSelectableRow, selectedRowIds, selectRow, unselectRow, selectable, selectAll, unselectAll, allRowSelectValue, expandButton, refList, inRange, columns]);
+    unselectRow
+  }), [allRowSelectValue, selectAllHandler, subscribeHandler, collapseRow, columns, expandButton, expandedRowIds, expandRow, inRange, refList, registerExpandableRow, registerSelectableRow, selectable, selectAll, selectedRowIds, selectRow, unselectAll, unselectRow]);
   return /* @__PURE__ */ jsx(ListContext.Provider, { value, children });
 };
 const useListContext = () => {