@undefine-ui/design-system 2.3.0 → 2.4.0

package/dist/index.cjs

@@ -152,6 +152,8 @@ __export(index_exports, {
   useEventListener: () => useEventListener,
   useLocalStorage: () => useLocalStorage,
   useResponsive: () => useResponsive,
+  useScrollOffSetTop: () => useScrollOffSetTop,
+  useSetState: () => useSetState,
   useSettings: () => useSettings,
   useWidth: () => useWidth,
   varAlpha: () => varAlpha,
@@ -709,13 +711,43 @@ var useSettings = () => {
   return context;
 };
 
-// src/hooks/useResponsive.ts
+// src/hooks/useSetState.ts
 var import_react5 = require("react");
+var useSetState = (initialState) => {
+  const [state, set] = (0, import_react5.useState)(initialState);
+  const canReset = !isEqual(state, initialState);
+  const setState = (0, import_react5.useCallback)((updateState) => {
+    set((prevValue) => ({ ...prevValue, ...updateState }));
+  }, []);
+  const setField = (0, import_react5.useCallback)(
+    (name, updateValue) => {
+      setState({ [name]: updateValue });
+    },
+    [setState]
+  );
+  const onResetState = (0, import_react5.useCallback)(() => {
+    set(initialState);
+  }, [initialState]);
+  const memoizedValue = (0, import_react5.useMemo)(
+    () => ({
+      state,
+      setState,
+      setField,
+      onResetState,
+      canReset
+    }),
+    [canReset, onResetState, setField, setState, state]
+  );
+  return memoizedValue;
+};
+
+// src/hooks/useResponsive.ts
+var import_react6 = require("react");
 var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"), 1);
 var import_styles = require("@mui/material/styles");
 var useResponsive = (query, start, end) => {
   const theme = (0, import_styles.useTheme)();
-  const getQuery = (0, import_react5.useMemo)(() => {
+  const getQuery = (0, import_react6.useMemo)(() => {
     switch (query) {
       case "up":
         return theme.breakpoints.up(start);
@@ -734,7 +766,7 @@ var useResponsive = (query, start, end) => {
 };
 var useWidth = () => {
   const theme = (0, import_styles.useTheme)();
-  const keys = (0, import_react5.useMemo)(() => [...theme.breakpoints.keys].reverse(), [theme]);
+  const keys = (0, import_react6.useMemo)(() => [...theme.breakpoints.keys].reverse(), [theme]);
   const width = keys.reduce((output, key) => {
     const matches = (0, import_useMediaQuery.default)(theme.breakpoints.up(key));
     return !output && matches ? key : output;
@@ -743,19 +775,19 @@ var useWidth = () => {
 };
 
 // src/hooks/useEventListener.ts
-var import_react6 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react6.useLayoutEffect : import_react6.useEffect;
+var import_react7 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react7.useLayoutEffect : import_react7.useEffect;
 var useEventListener = ({
   eventName,
   handler,
   element,
   options
 }) => {
-  const savedHandler = (0, import_react6.useRef)(handler);
+  const savedHandler = (0, import_react7.useRef)(handler);
   useIsomorphicLayoutEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const targetElement = element?.current || window;
     if (!(targetElement && targetElement.addEventListener)) {
       return;
@@ -769,11 +801,11 @@ var useEventListener = ({
 };
 
 // src/hooks/useCopyToClipboard.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var useCopyToClipboard = () => {
-  const [copiedText, setCopiedText] = (0, import_react7.useState)("");
-  const [isCopied, setIsCopied] = (0, import_react7.useState)(false);
-  const copy = (0, import_react7.useCallback)(
+  const [copiedText, setCopiedText] = (0, import_react8.useState)("");
+  const [isCopied, setIsCopied] = (0, import_react8.useState)(false);
+  const copy = (0, import_react8.useCallback)(
     async (text2) => {
       if (!navigator?.clipboard) {
         console.warn("Clipboard not supported");
@@ -793,13 +825,39 @@ var useCopyToClipboard = () => {
     },
     [setCopiedText]
   );
-  const memoizedValue = (0, import_react7.useMemo)(
+  const memoizedValue = (0, import_react8.useMemo)(
     () => ({ copy, copiedText, isCopied }),
     [copy, copiedText, isCopied]
   );
   return memoizedValue;
 };
 
+// src/hooks/useScrollOffsetTop.ts
+var import_react9 = require("react");
+var useScrollOffSetTop = (top = 0) => {
+  const elementRef = (0, import_react9.useRef)(null);
+  const [offsetTop, setOffsetTop] = (0, import_react9.useState)(false);
+  const handleScrollChange = (0, import_react9.useCallback)(() => {
+    const scrollHeight = Math.round(window.scrollY);
+    if (elementRef?.current) {
+      const rect = elementRef.current.getBoundingClientRect();
+      const elementTop = Math.round(rect.top);
+      setOffsetTop(elementTop < top);
+    } else {
+      setOffsetTop(scrollHeight > top);
+    }
+  }, [top]);
+  (0, import_react9.useEffect)(() => {
+    handleScrollChange();
+    window.addEventListener("scroll", handleScrollChange, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScrollChange);
+    };
+  }, [handleScrollChange]);
+  const memoizedValue = (0, import_react9.useMemo)(() => ({ elementRef, offsetTop }), [offsetTop]);
+  return memoizedValue;
+};
+
 // src/theme/core/radius.ts
 function radius(baseRadius) {
   return {
@@ -6075,7 +6133,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_Box9 = __toESM(require("@mui/material/Box"), 1);
 var import_IconButton3 = __toESM(require("@mui/material/IconButton"), 1);
 
@@ -6143,7 +6201,7 @@ var DeleteButton = ({ sx, ...rest }) => {
 // src/components/Upload/components/MultiFilePreview.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var MultiFilePreview = ({ files, onRemove }) => {
-  const scrollRef = (0, import_react8.useRef)(null);
+  const scrollRef = (0, import_react10.useRef)(null);
   const handleScroll = (direction) => {
     if (scrollRef.current) {
       const scrollAmount = 300;
@@ -7114,6 +7172,8 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   useEventListener,
   useLocalStorage,
   useResponsive,
+  useScrollOffSetTop,
+  useSetState,
   useSettings,
   useWidth,
   varAlpha,