@undefine-ui/design-system 2.5.0 → 2.7.0

package/README.md

@@ -173,10 +173,10 @@ Everything is re-exported from `src/index.ts`. Key groups:
 | Group      | Exports                                                                                                                                                                    |
 | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Components | `CopyButton`, `HookForm` helpers (`Form`, `Field`, `RHFSwitch`, etc.), `Icon`, `Logo`, `LoadingScreen`, `Table`, `Upload`                                                  |
-| Hooks      | `useBoolean`, `useCopyToClipboard`, `useEventListener`, `useLocalStorage`, `useResponsive`, `useSettings`, `useSetState`, `useScrollOffsetTop`                             |
+| Hooks      | `useBoolean`, `useCopyToClipboard`, `useEventListener`, `useLocalStorage`, `useResponsive`, `useSettings`, `useSetState`, `useScrollOffsetTop`, `usePopover`               |
 | Contexts   | `SettingsProvider`, `SettingsContext`, `defaultSettings`, `SettingsValueProps`                                                                                             |
 | Theme      | `ThemeProvider`, `createTheme`, `colorSchemes`, `components`, `palette`, `radius`, `shadows`, `customSpacing`, utilities such as `varAlpha`, `bgGradient`, `hideScrollX/Y` |
-| Utilities  | `changeCase` helpers, `formatNumber`, generic `helpers`                                                                                                                    |
+| Utilities  | `changeCase` helpers, `formatNumber`, `fullname-utils`, generic `helpers`                                                                                                  |
 
 You can also import the theme pieces directly to compose your own MUI theme or to extend tokens in Storybook.
 

package/dist/index.cjs

@@ -107,8 +107,10 @@ __export(index_exports, {
   fNumber: () => fNumber,
   fPercent: () => fPercent,
   fShortenNumber: () => fShortenNumber,
+  formatFullname: () => formatFullname,
   getCurrencySymbol: () => getCurrencySymbol,
   getInitColorSchemeScript: () => getInitColorSchemeScript,
+  getInitials: () => getInitials,
   getStorage: () => getStorage,
   grey: () => grey,
   hexToRgbChannel: () => hexToRgbChannel,
@@ -141,6 +143,7 @@ __export(index_exports, {
   setStorage: () => setStorage,
   shadows: () => shadows,
   snakeCase: () => snakeCase,
+  splitFullname: () => splitFullname,
   stylesMode: () => stylesMode,
   success: () => success,
   surface: () => surface,
@@ -154,6 +157,7 @@ __export(index_exports, {
   useCopyToClipboard: () => useCopyToClipboard,
   useEventListener: () => useEventListener,
   useLocalStorage: () => useLocalStorage,
+  usePopover: () => usePopover,
   useResponsive: () => useResponsive,
   useScrollOffSetTop: () => useScrollOffSetTop,
   useSetState: () => useSetState,
@@ -293,6 +297,25 @@ var fData = (inputValue) => {
   return fm;
 };
 
+// src/libs/fullname-utils.ts
+var getInitials = (name) => {
+  const names = name?.split(" ");
+  const initials = names?.map((n) => n.charAt(0)?.toUpperCase())?.join("");
+  return initials;
+};
+var splitFullname = (name) => {
+  if (!name) {
+    return { firstname: "", lastname: "" };
+  }
+  const names = name.split(" ");
+  const firstname = names[0];
+  const lastname = names[names.length - 1];
+  return { firstname, lastname };
+};
+var formatFullname = (firstname, lastname) => {
+  return `${firstname} ${lastname}`;
+};
+
 // src/hooks/useBoolean.ts
 var import_react = require("react");
 var useBoolean = (defaultValue) => {
@@ -319,8 +342,27 @@ var useBoolean = (defaultValue) => {
   return memoizedValue;
 };
 
+// src/hooks/usePopover.ts
+var import_react2 = require("react");
+var usePopover = () => {
+  const [anchorEl, setAnchorEl] = (0, import_react2.useState)(null);
+  const onOpen = (0, import_react2.useCallback)((event) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const onClose = (0, import_react2.useCallback)(() => {
+    setAnchorEl(null);
+  }, []);
+  return {
+    open: !!anchorEl,
+    anchorEl,
+    onOpen,
+    onClose,
+    setAnchorEl
+  };
+};
+
 // src/hooks/useSettings.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/theme/styles/utils.ts
 var stylesMode = {
@@ -566,15 +608,15 @@ var defaultSettings = {
 };
 
 // src/contexts/settings/context.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/hooks/useLocalStorage.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var useLocalStorage = (key, initialState) => {
-  const [state, set] = (0, import_react2.useState)(initialState);
+  const [state, set] = (0, import_react3.useState)(initialState);
   const multiValue = initialState && typeof initialState === "object";
   const canReset = !isEqual(state, initialState);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const restoredValue = getStorage(key);
     if (restoredValue) {
       if (multiValue) {
@@ -584,7 +626,7 @@ var useLocalStorage = (key, initialState) => {
       }
     }
   }, [key, multiValue]);
-  const setState = (0, import_react2.useCallback)(
+  const setState = (0, import_react3.useCallback)(
     (updateState) => {
       if (multiValue) {
         set((prevValue) => {
@@ -598,7 +640,7 @@ var useLocalStorage = (key, initialState) => {
     },
     [key, multiValue]
   );
-  const setField = (0, import_react2.useCallback)(
+  const setField = (0, import_react3.useCallback)(
     (name, updateValue) => {
       if (multiValue) {
         setState({ [name]: updateValue });
@@ -606,11 +648,11 @@ var useLocalStorage = (key, initialState) => {
     },
     [multiValue, setState]
   );
-  const resetState = (0, import_react2.useCallback)(() => {
+  const resetState = (0, import_react3.useCallback)(() => {
     set(initialState);
     removeStorage(key);
   }, [initialState, key]);
-  const memoizedValue = (0, import_react2.useMemo)(
+  const memoizedValue = (0, import_react3.useMemo)(
     () => ({
       state,
       setState,
@@ -670,19 +712,19 @@ var LocalStorageGetItem = (key, defaultValue = "") => {
 
 // src/contexts/settings/context.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var SettingsContext = (0, import_react3.createContext)({});
+var SettingsContext = (0, import_react4.createContext)({});
 var SettingsConsumer = SettingsContext.Consumer;
 var SettingsProvider = ({ children, settings }) => {
   const localStorage2 = useLocalStorage(STORAGE_KEY, settings);
   const values = localStorage2;
-  const [openDrawer, setOpenDrawer] = (0, import_react3.useState)(false);
-  const onToggleDrawer = (0, import_react3.useCallback)(() => {
+  const [openDrawer, setOpenDrawer] = (0, import_react4.useState)(false);
+  const onToggleDrawer = (0, import_react4.useCallback)(() => {
     setOpenDrawer((prev) => !prev);
   }, []);
-  const onCloseDrawer = (0, import_react3.useCallback)(() => {
+  const onCloseDrawer = (0, import_react4.useCallback)(() => {
     setOpenDrawer(false);
   }, []);
-  const memoizedValue = (0, import_react3.useMemo)(
+  const memoizedValue = (0, import_react4.useMemo)(
     () => ({
       ...values.state,
       canReset: values.canReset,
@@ -709,29 +751,29 @@ var SettingsProvider = ({ children, settings }) => {
 
 // src/hooks/useSettings.ts
 var useSettings = () => {
-  const context = (0, import_react4.useContext)(SettingsContext);
+  const context = (0, import_react5.useContext)(SettingsContext);
   if (!context) throw new Error("useSettings must be use inside SettingsProvider");
   return context;
 };
 
 // src/hooks/useSetState.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var useSetState = (initialState) => {
-  const [state, set] = (0, import_react5.useState)(initialState);
+  const [state, set] = (0, import_react6.useState)(initialState);
   const canReset = !isEqual(state, initialState);
-  const setState = (0, import_react5.useCallback)((updateState) => {
+  const setState = (0, import_react6.useCallback)((updateState) => {
     set((prevValue) => ({ ...prevValue, ...updateState }));
   }, []);
-  const setField = (0, import_react5.useCallback)(
+  const setField = (0, import_react6.useCallback)(
     (name, updateValue) => {
       setState({ [name]: updateValue });
     },
     [setState]
   );
-  const onResetState = (0, import_react5.useCallback)(() => {
+  const onResetState = (0, import_react6.useCallback)(() => {
     set(initialState);
   }, [initialState]);
-  const memoizedValue = (0, import_react5.useMemo)(
+  const memoizedValue = (0, import_react6.useMemo)(
     () => ({
       state,
       setState,
@@ -745,12 +787,12 @@ var useSetState = (initialState) => {
 };
 
 // src/hooks/useResponsive.ts
-var import_react6 = require("react");
+var import_react7 = 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_react6.useMemo)(() => {
+  const getQuery = (0, import_react7.useMemo)(() => {
     switch (query) {
       case "up":
         return theme.breakpoints.up(start);
@@ -769,7 +811,7 @@ var useResponsive = (query, start, end) => {
 };
 var useWidth = () => {
   const theme = (0, import_styles.useTheme)();
-  const keys = (0, import_react6.useMemo)(() => [...theme.breakpoints.keys].reverse(), [theme]);
+  const keys = (0, import_react7.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;
@@ -778,19 +820,19 @@ var useWidth = () => {
 };
 
 // src/hooks/useEventListener.ts
-var import_react7 = require("react");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react7.useLayoutEffect : import_react7.useEffect;
+var import_react8 = require("react");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react8.useLayoutEffect : import_react8.useEffect;
 var useEventListener = ({
   eventName,
   handler,
   element,
   options
 }) => {
-  const savedHandler = (0, import_react7.useRef)(handler);
+  const savedHandler = (0, import_react8.useRef)(handler);
   useIsomorphicLayoutEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const targetElement = element?.current || window;
     if (!(targetElement && targetElement.addEventListener)) {
       return;
@@ -804,11 +846,11 @@ var useEventListener = ({
 };
 
 // src/hooks/useCopyToClipboard.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var useCopyToClipboard = () => {
-  const [copiedText, setCopiedText] = (0, import_react8.useState)("");
-  const [isCopied, setIsCopied] = (0, import_react8.useState)(false);
-  const copy = (0, import_react8.useCallback)(
+  const [copiedText, setCopiedText] = (0, import_react9.useState)("");
+  const [isCopied, setIsCopied] = (0, import_react9.useState)(false);
+  const copy = (0, import_react9.useCallback)(
     async (text2) => {
       if (!navigator?.clipboard) {
         console.warn("Clipboard not supported");
@@ -828,7 +870,7 @@ var useCopyToClipboard = () => {
     },
     [setCopiedText]
   );
-  const memoizedValue = (0, import_react8.useMemo)(
+  const memoizedValue = (0, import_react9.useMemo)(
     () => ({ copy, copiedText, isCopied }),
     [copy, copiedText, isCopied]
   );
@@ -836,11 +878,11 @@ var useCopyToClipboard = () => {
 };
 
 // src/hooks/useScrollOffsetTop.ts
-var import_react9 = require("react");
+var import_react10 = 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 elementRef = (0, import_react10.useRef)(null);
+  const [offsetTop, setOffsetTop] = (0, import_react10.useState)(false);
+  const handleScrollChange = (0, import_react10.useCallback)(() => {
     const scrollHeight = Math.round(window.scrollY);
     if (elementRef?.current) {
       const rect = elementRef.current.getBoundingClientRect();
@@ -850,14 +892,14 @@ var useScrollOffSetTop = (top = 0) => {
       setOffsetTop(scrollHeight > top);
     }
   }, [top]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     handleScrollChange();
     window.addEventListener("scroll", handleScrollChange, { passive: true });
     return () => {
       window.removeEventListener("scroll", handleScrollChange);
     };
   }, [handleScrollChange]);
-  const memoizedValue = (0, import_react9.useMemo)(() => ({ elementRef, offsetTop }), [offsetTop]);
+  const memoizedValue = (0, import_react10.useMemo)(() => ({ elementRef, offsetTop }), [offsetTop]);
   return memoizedValue;
 };
 
@@ -6285,7 +6327,7 @@ var UploadProgress = ({ progress: progress2 = 20 }) => {
 };
 
 // src/components/Upload/components/MultiFilePreview.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_Box9 = __toESM(require("@mui/material/Box"), 1);
 var import_IconButton3 = __toESM(require("@mui/material/IconButton"), 1);
 
@@ -6353,7 +6395,7 @@ var DeleteButton = ({ sx, ...rest }) => {
 // src/components/Upload/components/MultiFilePreview.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var MultiFilePreview = ({ files, onRemove }) => {
-  const scrollRef = (0, import_react10.useRef)(null);
+  const scrollRef = (0, import_react11.useRef)(null);
   const handleScroll = (direction) => {
     if (scrollRef.current) {
       const scrollAmount = 300;
@@ -7279,8 +7321,10 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   fNumber,
   fPercent,
   fShortenNumber,
+  formatFullname,
   getCurrencySymbol,
   getInitColorSchemeScript,
+  getInitials,
   getStorage,
   grey,
   hexToRgbChannel,
@@ -7313,6 +7357,7 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   setStorage,
   shadows,
   snakeCase,
+  splitFullname,
   stylesMode,
   success,
   surface,
@@ -7326,6 +7371,7 @@ var SplashScreen = ({ portal, sx, ...rest }) => {
   useCopyToClipboard,
   useEventListener,
   useLocalStorage,
+  usePopover,
   useResponsive,
   useScrollOffSetTop,
   useSetState,