@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/List/ListContext.js

@@ -1,265 +1,217 @@
-"use client";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { toPropertyKey } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/toPropertyKey.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectWithoutProperties.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, createContext, useState, useCallback, useMemo, useEffect } from "react";
+
+//#region src/components/List/ListContext.tsx
 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 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,
-  selectable,
-  expandButton,
-  onSelectedChange,
-  columns,
-  colMode
-}) => {
-  const [expandedRowIds, setExpandedRowIds] = useState({});
-  const [selectedRowIds, setSelectedRowIds] = useState({});
-  const [lastCheckedCheckbox, setLastCheckedCheckbox] = useState();
-  const [inRange, setInRange] = useState([]);
-  const [refList, setRefList] = useState([]);
-  const registerExpandableRow = useCallback(
-    (rowId, expanded = false) => {
-      setExpandedRowIds((current) => ({ ...current, [rowId]: expanded }));
-      return () => {
-        setExpandedRowIds((current) => {
-          const { [rowId]: relatedId, ...otherIds } = current;
-          return otherIds;
-        });
-      };
-    },
-    []
-  );
-  const registerSelectableRow = useCallback((rowId) => {
-    setSelectedRowIds((current) => ({ ...current, [rowId]: false }));
-    return () => {
-      setSelectedRowIds((current) => {
-        const { [rowId]: relatedId, ...otherIds } = current;
-        return otherIds;
-      });
-    };
-  }, []);
-  const expandRow = useCallback(
-    (rowId) => {
-      setExpandedRowIds((current) => ({
-        ...autoCollapse ? {} : current,
-        [rowId]: true
-      }));
-    },
-    [autoCollapse]
-  );
-  const collapseRow = useCallback((rowId) => {
-    setExpandedRowIds((current) => ({
-      ...current,
-      [rowId]: false
-    }));
-  }, []);
-  const allRowSelectValue = useMemo(
-    () => checkStateOfCheckboxs(selectedRowIds),
-    [selectedRowIds]
-  );
-  const selectRows = useCallback(
-    (rowIds, state) => {
-      const newSelectedRowIds = rowIds.reduce(
-        (acc, rowId) => ({ ...acc, [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(() => {
-    selectRows(Object.keys(selectedRowIds), false);
-  }, [selectRows, selectedRowIds]);
-  const selectRow = useCallback(
-    (rowId) => {
-      selectRows([rowId], true);
-    },
-    [selectRows]
-  );
-  const unselectRow = useCallback(
-    (rowId) => {
-      selectRows([rowId], false);
-    },
-    [selectRows]
-  );
-  const selectAllHandler = useCallback(() => {
-    if (allRowSelectValue && [true, "indeterminate"].includes(allRowSelectValue)) {
-      unselectAll();
-    }
-    if (allRowSelectValue === false) {
-      selectAll();
-    }
-    setLastCheckedCheckbox(void 0);
-  }, [allRowSelectValue, unselectAll, selectAll]);
-  const subscribeHandler = useCallback(() => {
-    const handlers = [];
-    const updatedRefList = [
-      ...new Set(
-        refList.filter(
-          (checkbox) => document.contains(checkbox.current) && checkbox.current
-        )
-      )
-    ];
-    setRefList(updatedRefList);
-    const handleHover = (index, isShiftPressed, leaving) => {
-      const newRange = [];
-      if (lastCheckedCheckbox) {
-        const targetCheckbox = updatedRefList.find(
-          (checkbox) => checkbox.current?.value === lastCheckedCheckbox
-        );
-        if (isShiftPressed && targetCheckbox && !leaving) {
-          const lastCheckedIndex = updatedRefList.indexOf(targetCheckbox);
-          const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
-          const end = Math.max(lastCheckedIndex, index);
-          updatedRefList.forEach((checkbox, i) => {
-            if (!checkbox.current?.disabled && i > start && i < end) {
-              newRange.push(checkbox.current?.value);
-            }
-          });
-        }
-      }
-      setInRange(newRange);
-    };
-    const handleClickRange = (currentCheckbox, index, isShiftPressed) => {
-      if (isShiftPressed) {
-        const checkboxesInRange = [];
-        const targetCheckbox = updatedRefList.find(
-          (checkbox) => checkbox.current?.value === lastCheckedCheckbox
-        );
-        const lastCheckedIndex = targetCheckbox ? updatedRefList.indexOf(targetCheckbox) : void 0;
-        if (lastCheckedIndex !== void 0) {
-          const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
-          const end = Math.max(lastCheckedIndex, index);
-          updatedRefList.forEach((checkbox, key) => {
-            if (start < key && key <= end && !checkbox.current?.disabled) {
-              checkboxesInRange.push(checkbox.current?.value);
-            }
-          });
-          selectRows(checkboxesInRange, currentCheckbox.checked);
-          setLastCheckedCheckbox(currentCheckbox.value);
-        }
-      }
-      setTimeout(() => {
-        setInRange([]);
-        setLastCheckedCheckbox(currentCheckbox.value);
-      }, 1);
-    };
-    refList.forEach((checkbox, index) => {
-      const clickHandler = function clickHandler2(event) {
-        handleClickRange(this, index, event.shiftKey);
-      };
-      const hoverEnteringHandler = (event) => handleHover(index, event.shiftKey, false);
-      const hoverLeavingHandler = (event) => handleHover(index, event.shiftKey, true);
-      if (checkbox.current) {
-        checkbox.current.addEventListener("click", clickHandler);
-        checkbox.current.addEventListener("mousemove", hoverEnteringHandler);
-        checkbox.current.addEventListener("mouseout", hoverLeavingHandler);
-        handlers.push(() => {
-          if (checkbox.current) {
-            checkbox.current.removeEventListener("click", clickHandler);
-            checkbox.current.removeEventListener(
-              "mouseout",
-              hoverEnteringHandler
-            );
-            checkbox.current.removeEventListener(
-              "mousemove",
-              hoverLeavingHandler
-            );
-          }
-        });
-      }
-    });
-    return () => {
-      for (const cleanup of handlers) {
-        cleanup();
-      }
-    };
-  }, [lastCheckedCheckbox, selectRows]);
-  useEffect(() => {
-    subscribeHandler();
-  }, [subscribeHandler]);
-  const handleOnChange = useCallback(
-    (value2, checked) => {
-      selectRows([value2], !checked);
-      setLastCheckedCheckbox(value2);
-    },
-    [selectRows]
-  );
-  const value = useMemo(
-    () => ({
-      allRowSelectValue,
-      collapseRow,
-      colMode,
-      columns,
-      expandButton,
-      expandedRowIds,
-      expandRow,
-      handleOnChange,
-      inRange,
-      refList,
-      registerExpandableRow,
-      registerSelectableRow,
-      selectAll,
-      selectAllHandler,
-      selectable,
-      selectedRowIds,
-      selectRow,
-      setRefList,
-      subscribeHandler,
-      unselectAll,
-      unselectRow
-    }),
-    [
-      allRowSelectValue,
-      selectAllHandler,
-      subscribeHandler,
-      collapseRow,
-      columns,
-      expandButton,
-      expandedRowIds,
-      expandRow,
-      inRange,
-      refList,
-      registerExpandableRow,
-      registerSelectableRow,
-      selectable,
-      selectAll,
-      selectedRowIds,
-      selectRow,
-      unselectAll,
-      unselectRow,
-      handleOnChange,
-      colMode
-    ]
-  );
-  return /* @__PURE__ */ jsx(ListContext.Provider, { value, children });
+const ListProvider = ({ children, autoCollapse, selectable, expandButton, onSelectedChange, columns, colMode }) => {
+	const [expandedRowIds, setExpandedRowIds] = useState({});
+	const [selectedRowIds, setSelectedRowIds] = useState({});
+	const [lastCheckedCheckbox, setLastCheckedCheckbox] = useState();
+	const [inRange, setInRange] = useState([]);
+	const [refList, setRefList] = useState([]);
+	const registerExpandableRow = useCallback((rowId, expanded = false) => {
+		setExpandedRowIds((current) => _objectSpread2(_objectSpread2({}, current), {}, { [rowId]: expanded }));
+		return () => {
+			setExpandedRowIds((current) => {
+				const { [rowId]: relatedId } = current;
+				return _objectWithoutProperties(current, [rowId].map(toPropertyKey));
+			});
+		};
+	}, []);
+	const registerSelectableRow = useCallback((rowId) => {
+		setSelectedRowIds((current) => _objectSpread2(_objectSpread2({}, current), {}, { [rowId]: false }));
+		return () => {
+			setSelectedRowIds((current) => {
+				const { [rowId]: relatedId } = current;
+				return _objectWithoutProperties(current, [rowId].map(toPropertyKey));
+			});
+		};
+	}, []);
+	const expandRow = useCallback((rowId) => {
+		setExpandedRowIds((current) => _objectSpread2(_objectSpread2({}, autoCollapse ? {} : current), {}, { [rowId]: true }));
+	}, [autoCollapse]);
+	const collapseRow = useCallback((rowId) => {
+		setExpandedRowIds((current) => _objectSpread2(_objectSpread2({}, current), {}, { [rowId]: false }));
+	}, []);
+	const allRowSelectValue = useMemo(() => checkStateOfCheckboxs(selectedRowIds), [selectedRowIds]);
+	const selectRows = useCallback((rowIds, state) => {
+		const newSelectedRowIds = rowIds.reduce((acc, rowId) => _objectSpread2(_objectSpread2({}, acc), {}, { [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(() => {
+		selectRows(Object.keys(selectedRowIds), false);
+	}, [selectRows, selectedRowIds]);
+	const selectRow = useCallback((rowId) => {
+		selectRows([rowId], true);
+	}, [selectRows]);
+	const unselectRow = useCallback((rowId) => {
+		selectRows([rowId], false);
+	}, [selectRows]);
+	const selectAllHandler = useCallback(() => {
+		if (allRowSelectValue && [true, "indeterminate"].includes(allRowSelectValue)) unselectAll();
+		if (allRowSelectValue === false) selectAll();
+		setLastCheckedCheckbox(void 0);
+	}, [
+		allRowSelectValue,
+		unselectAll,
+		selectAll
+	]);
+	const subscribeHandler = useCallback(() => {
+		const handlers = [];
+		const updatedRefList = [...new Set(refList.filter((checkbox) => document.contains(checkbox.current) && checkbox.current))];
+		setRefList(updatedRefList);
+		const handleHover = (index, isShiftPressed, leaving) => {
+			const newRange = [];
+			if (lastCheckedCheckbox) {
+				const targetCheckbox = updatedRefList.find((checkbox) => {
+					var _checkbox$current;
+					return ((_checkbox$current = checkbox.current) === null || _checkbox$current === void 0 ? void 0 : _checkbox$current.value) === lastCheckedCheckbox;
+				});
+				if (isShiftPressed && targetCheckbox && !leaving) {
+					const lastCheckedIndex = updatedRefList.indexOf(targetCheckbox);
+					const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
+					const end = Math.max(lastCheckedIndex, index);
+					updatedRefList.forEach((checkbox, i) => {
+						var _checkbox$current2;
+						if (!((_checkbox$current2 = checkbox.current) === null || _checkbox$current2 === void 0 ? void 0 : _checkbox$current2.disabled) && i > start && i < end) {
+							var _checkbox$current3;
+							newRange.push((_checkbox$current3 = checkbox.current) === null || _checkbox$current3 === void 0 ? void 0 : _checkbox$current3.value);
+						}
+					});
+				}
+			}
+			setInRange(newRange);
+		};
+		const handleClickRange = (currentCheckbox, index, isShiftPressed) => {
+			if (isShiftPressed) {
+				const checkboxesInRange = [];
+				const targetCheckbox = updatedRefList.find((checkbox) => {
+					var _checkbox$current4;
+					return ((_checkbox$current4 = checkbox.current) === null || _checkbox$current4 === void 0 ? void 0 : _checkbox$current4.value) === lastCheckedCheckbox;
+				});
+				const lastCheckedIndex = targetCheckbox ? updatedRefList.indexOf(targetCheckbox) : void 0;
+				if (lastCheckedIndex !== void 0) {
+					const start = Math.min(lastCheckedIndex, index) - (Math.min(lastCheckedIndex, index) === index ? 1 : 0);
+					const end = Math.max(lastCheckedIndex, index);
+					updatedRefList.forEach((checkbox, key) => {
+						var _checkbox$current5;
+						if (start < key && key <= end && !((_checkbox$current5 = checkbox.current) === null || _checkbox$current5 === void 0 ? void 0 : _checkbox$current5.disabled)) {
+							var _checkbox$current6;
+							checkboxesInRange.push((_checkbox$current6 = checkbox.current) === null || _checkbox$current6 === void 0 ? void 0 : _checkbox$current6.value);
+						}
+					});
+					selectRows(checkboxesInRange, currentCheckbox.checked);
+					setLastCheckedCheckbox(currentCheckbox.value);
+				}
+			}
+			/**
+			* Handle the case when there is multiple selected value during a time, and the user click without shift event
+			*/
+			setTimeout(() => {
+				setInRange([]);
+				setLastCheckedCheckbox(currentCheckbox.value);
+			}, 1);
+		};
+		refList.forEach((checkbox, index) => {
+			const clickHandler = function clickHandler(event) {
+				handleClickRange(this, index, event.shiftKey);
+			};
+			const hoverEnteringHandler = (event) => handleHover(index, event.shiftKey, false);
+			const hoverLeavingHandler = (event) => handleHover(index, event.shiftKey, true);
+			if (checkbox.current) {
+				checkbox.current.addEventListener("click", clickHandler);
+				checkbox.current.addEventListener("mousemove", hoverEnteringHandler);
+				checkbox.current.addEventListener("mouseout", hoverLeavingHandler);
+				handlers.push(() => {
+					if (checkbox.current) {
+						checkbox.current.removeEventListener("click", clickHandler);
+						checkbox.current.removeEventListener("mouseout", hoverEnteringHandler);
+						checkbox.current.removeEventListener("mousemove", hoverLeavingHandler);
+					}
+				});
+			}
+		});
+		return () => {
+			for (const cleanup of handlers) cleanup();
+		};
+	}, [lastCheckedCheckbox, selectRows]);
+	useEffect(() => {
+		subscribeHandler();
+	}, [subscribeHandler]);
+	const handleOnChange = useCallback((value, checked) => {
+		selectRows([value], !checked);
+		setLastCheckedCheckbox(value);
+	}, [selectRows]);
+	const value = useMemo(() => ({
+		allRowSelectValue,
+		collapseRow,
+		colMode,
+		columns,
+		expandButton,
+		expandedRowIds,
+		expandRow,
+		handleOnChange,
+		inRange,
+		refList,
+		registerExpandableRow,
+		registerSelectableRow,
+		selectAll,
+		selectAllHandler,
+		selectable,
+		selectedRowIds,
+		selectRow,
+		setRefList,
+		subscribeHandler,
+		unselectAll,
+		unselectRow
+	}), [
+		allRowSelectValue,
+		selectAllHandler,
+		subscribeHandler,
+		collapseRow,
+		columns,
+		expandButton,
+		expandedRowIds,
+		expandRow,
+		inRange,
+		refList,
+		registerExpandableRow,
+		registerSelectableRow,
+		selectable,
+		selectAll,
+		selectedRowIds,
+		selectRow,
+		unselectAll,
+		unselectRow,
+		handleOnChange,
+		colMode
+	]);
+	return /* @__PURE__ */ jsx(ListContext.Provider, {
+		value,
+		children
+	});
 };
 const useListContext = () => {
-  const context = useContext(ListContext);
-  if (!context) {
-    throw new Error("useListContext should be used inside a List component");
-  }
-  return context;
-};
-export {
-  ListProvider,
-  useListContext
+	const context = useContext(ListContext);
+	if (!context) throw new Error("useListContext should be used inside a List component");
+	return context;
 };
+
+//#endregion
+export { ListProvider, useListContext };