@gobolt/genesis 0.4.33 → 0.4.37

package/dist/components/Avatar/Avatar.d.ts

@@ -3,6 +3,7 @@ export type GoBoltUser = {
     first_name: string;
     last_name: string;
     image_url?: string;
+    url?: string;
 };
 export interface AvatarProps {
     size?: number;
@@ -11,6 +12,8 @@ export interface AvatarProps {
     children?: string;
     backgroundColor?: string;
     user?: GoBoltUser | null;
+    url?: string;
+    alt?: string;
 }
-declare const Avatar: ({ size, shape, children, backgroundColor, user, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Avatar: ({ size, shape, children, backgroundColor, user, url, alt, ...rest }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/dist/components/OverflowMenu/OverflowMenu.d.ts

@@ -13,6 +13,7 @@ export interface OverflowMenuProps {
     style?: React.CSSProperties;
     onItemClick?: (item: OverflowMenuItemProps) => void;
     overrideTextColor?: string;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }
 declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
 export default OverflowMenu;

package/dist/components/Table/Table.d.ts

@@ -12,6 +12,7 @@ export interface InfiniteScrollConfig<T = any> {
     scrollHeight?: number;
     scrollWidth?: number;
     useWindowScroll?: boolean;
+    filterFn: (data: T[]) => T[];
 }
 export interface TableProps<T extends Record<string, any>> {
     dataSource: T[];

package/dist/index.cjs

@@ -60441,7 +60441,10 @@ const Avatar = ({
   shape = "circle",
   children: children2,
   backgroundColor = "#00282B",
-  user = null
+  user = null,
+  url: url3,
+  alt,
+  ...rest
 }) => {
   if (!user) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -60451,7 +60454,9 @@ const Avatar = ({
         shape,
         size,
         alt: "Default Avatar",
-        style: { backgroundColor }
+        style: { backgroundColor },
+        src: url3,
+        ...rest
       }
     );
   }
@@ -60459,7 +60464,9 @@ const Avatar = ({
   if (user && !user?.image_url) {
     const simpleUser = {
       first_name: parseFirstName(user.first_name),
-      last_name: user.last_name
+      last_name: user.last_name,
+      image_url: user.image_url,
+      url: user.url
     };
     const initials = createInitials(simpleUser);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -60470,6 +60477,7 @@ const Avatar = ({
         size,
         alt: fullName,
         style: { backgroundColor },
+        ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "white", style: { fontWeight: 600 }, children: initials })
       }
     );
@@ -60481,9 +60489,10 @@ const Avatar = ({
         "data-testid": "avatar",
         shape,
         size,
-        src: user?.image_url,
+        src: url3 || user?.image_url,
         alt: fullName,
         style: { backgroundColor },
+        ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "white", style: { fontWeight: 600 }, children: children2 })
       }
     );
@@ -60491,10 +60500,11 @@ const Avatar = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Avatar$1,
     {
+      ...rest,
       "data-testid": "avatar",
       shape,
       size,
-      src: user?.image_url,
+      src: url3 || user?.image_url,
       alt: fullName
     }
   );
@@ -81243,12 +81253,10 @@ const OverflowMenuContainer = styled.div`
   transform: translateZ(0);
   transform-style: preserve-3d;
 
-  /* Initial hidden state to prevent flash */
-  ${({ $isAnimating }) => !$isAnimating && `
-    opacity: 0;
-    transform: scale(0.96) translateY(-6px);
-    pointer-events: none;
-  `}
+  /* Initial visible state - let animation handle the entrance */
+  opacity: 1;
+
+  /* Animation will override initial state when $isAnimating is true */
 
   /* Prevent layout shifts and ensure smooth rendering */
   contain: layout style paint;
@@ -81295,10 +81303,12 @@ const OverflowMenu = React.forwardRef(
     className,
     style: style2,
     onItemClick,
-    overrideTextColor
+    overrideTextColor,
+    getPopupContainer = () => document.body
   }, ref) => {
     const [internalIsOpen, setInternalIsOpen] = React.useState(false);
     const [isAnimating, setIsAnimating] = React.useState(false);
+    const [triggerRect, setTriggerRect] = React.useState(null);
     const triggerRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const { theme } = useGenesis();
@@ -81326,25 +81336,65 @@ const OverflowMenu = React.forwardRef(
     );
     React.useEffect(() => {
       if (isOpen) {
-        const timer2 = setTimeout(() => {
-          setIsAnimating(true);
-        }, 10);
+        if (getPopupContainer !== void 0 && triggerRef.current) {
+          const rect = triggerRef.current.getBoundingClientRect();
+          setTriggerRect(rect);
+        }
+        setIsAnimating(true);
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
-          clearTimeout(timer2);
           document.removeEventListener("mousedown", handleClickOutside);
         };
       } else {
         setIsAnimating(false);
+        setTriggerRect(null);
         document.removeEventListener("mousedown", handleClickOutside);
       }
-    }, [isOpen, handleClickOutside]);
+    }, [isOpen, handleClickOutside, getPopupContainer]);
     const getMenuStyle = React.useMemo(() => {
       const baseStyle = {
-        position: "absolute",
+        position: getPopupContainer !== void 0 ? "fixed" : "absolute",
         zIndex: 1e3,
         ...style2
       };
+      if (getPopupContainer !== void 0 && triggerRect) {
+        const { top, left, right, bottom, width, height } = triggerRect;
+        switch (placement) {
+          case "bottom": {
+            return {
+              ...baseStyle,
+              top: bottom + offset2,
+              ...alignment === "right" ? { right: window.innerWidth - right } : { left }
+            };
+          }
+          case "top": {
+            return {
+              ...baseStyle,
+              bottom: window.innerHeight - top + offset2,
+              ...alignment === "right" ? { right: window.innerWidth - right } : { left }
+            };
+          }
+          case "left": {
+            return {
+              ...baseStyle,
+              top,
+              right: window.innerWidth - left + offset2,
+              ...alignment === "right" ? { bottom: window.innerHeight - bottom } : {}
+            };
+          }
+          case "right": {
+            return {
+              ...baseStyle,
+              top,
+              left: right + offset2,
+              ...alignment === "right" ? { bottom: window.innerHeight - bottom } : {}
+            };
+          }
+          default: {
+            return baseStyle;
+          }
+        }
+      }
       switch (placement) {
         case "bottom": {
           return {
@@ -81380,7 +81430,7 @@ const OverflowMenu = React.forwardRef(
           return baseStyle;
         }
       }
-    }, [placement, alignment, offset2, style2]);
+    }, [placement, alignment, offset2, style2, getPopupContainer, triggerRect]);
     const handleItemClick = React.useCallback(
       (item) => {
         onItemClick?.(item);
@@ -81388,6 +81438,25 @@ const OverflowMenu = React.forwardRef(
       },
       [onItemClick, handleOpenChange]
     );
+    const renderMenuContent = (content2) => /* @__PURE__ */ jsxRuntime.jsx(
+      OverflowMenuContainer,
+      {
+        ref: menuRef,
+        theme,
+        className,
+        style: getMenuStyle,
+        $isAnimating: isAnimating,
+        $placement: placement,
+        children: content2
+      }
+    );
+    const renderMenu = (content2) => {
+      if (getPopupContainer !== void 0 && triggerRef.current) {
+        const container = getPopupContainer(triggerRef.current);
+        return ReactDOM.createPortal(renderMenuContent(content2), container);
+      }
+      return renderMenuContent(content2);
+    };
     if (items && items.length > 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { ref, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: overrideTextColor ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -81396,41 +81465,21 @@ const OverflowMenu = React.forwardRef(
             overrideTextColor
           }
         ) : trigger }),
-        isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          OverflowMenuContainer,
-          {
-            ref: menuRef,
-            theme,
-            className,
-            style: getMenuStyle,
-            $isAnimating: isAnimating,
-            $placement: placement,
-            children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              OverflowMenuItem,
-              {
-                ...item,
-                onClick: () => handleItemClick(item)
-              },
-              item.id
-            ))
-          }
+        isOpen && renderMenu(
+          items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            OverflowMenuItem,
+            {
+              ...item,
+              onClick: () => handleItemClick(item)
+            },
+            item.id
+          ))
         )
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { ref, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
-      isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-        OverflowMenuContainer,
-        {
-          ref: menuRef,
-          theme,
-          className,
-          style: getMenuStyle,
-          $isAnimating: isAnimating,
-          $placement: placement,
-          children: children2
-        }
-      )
+      isOpen && renderMenu(children2)
     ] });
   }
 );
@@ -81627,7 +81676,7 @@ const Progress = ({
   }
   if (isProgressCombined) {
     const combinedPercent = getCombinedPercent(
-      firstBarData,
+      firstBarData || null,
       secondBarData || null
     );
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
@@ -85163,7 +85212,8 @@ function Table({
         onChange: isInfiniteScroll ? onChange : onChange,
         onRowSelectionChange,
         onDataChange,
-        hasBulkSelection
+        hasBulkSelection,
+        filterFn: infiniteScrollConfig.filterFn
       }
     );
   }

package/dist/index.js

@@ -60423,7 +60423,10 @@ const Avatar = ({
   shape = "circle",
   children: children2,
   backgroundColor = "#00282B",
-  user = null
+  user = null,
+  url: url3,
+  alt,
+  ...rest
 }) => {
   if (!user) {
     return /* @__PURE__ */ jsx(
@@ -60433,7 +60436,9 @@ const Avatar = ({
         shape,
         size,
         alt: "Default Avatar",
-        style: { backgroundColor }
+        style: { backgroundColor },
+        src: url3,
+        ...rest
       }
     );
   }
@@ -60441,7 +60446,9 @@ const Avatar = ({
   if (user && !user?.image_url) {
     const simpleUser = {
       first_name: parseFirstName(user.first_name),
-      last_name: user.last_name
+      last_name: user.last_name,
+      image_url: user.image_url,
+      url: user.url
     };
     const initials = createInitials(simpleUser);
     return /* @__PURE__ */ jsx(
@@ -60452,6 +60459,7 @@ const Avatar = ({
         size,
         alt: fullName,
         style: { backgroundColor },
+        ...rest,
         children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "white", style: { fontWeight: 600 }, children: initials })
       }
     );
@@ -60463,9 +60471,10 @@ const Avatar = ({
         "data-testid": "avatar",
         shape,
         size,
-        src: user?.image_url,
+        src: url3 || user?.image_url,
         alt: fullName,
         style: { backgroundColor },
+        ...rest,
         children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "white", style: { fontWeight: 600 }, children: children2 })
       }
     );
@@ -60473,10 +60482,11 @@ const Avatar = ({
   return /* @__PURE__ */ jsx(
     Avatar$1,
     {
+      ...rest,
       "data-testid": "avatar",
       shape,
       size,
-      src: user?.image_url,
+      src: url3 || user?.image_url,
       alt: fullName
     }
   );
@@ -81225,12 +81235,10 @@ const OverflowMenuContainer = styled.div`
   transform: translateZ(0);
   transform-style: preserve-3d;
 
-  /* Initial hidden state to prevent flash */
-  ${({ $isAnimating }) => !$isAnimating && `
-    opacity: 0;
-    transform: scale(0.96) translateY(-6px);
-    pointer-events: none;
-  `}
+  /* Initial visible state - let animation handle the entrance */
+  opacity: 1;
+
+  /* Animation will override initial state when $isAnimating is true */
 
   /* Prevent layout shifts and ensure smooth rendering */
   contain: layout style paint;
@@ -81277,10 +81285,12 @@ const OverflowMenu = forwardRef(
     className,
     style: style2,
     onItemClick,
-    overrideTextColor
+    overrideTextColor,
+    getPopupContainer = () => document.body
   }, ref) => {
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     const [isAnimating, setIsAnimating] = useState(false);
+    const [triggerRect, setTriggerRect] = useState(null);
     const triggerRef = useRef(null);
     const menuRef = useRef(null);
     const { theme } = useGenesis();
@@ -81308,25 +81318,65 @@ const OverflowMenu = forwardRef(
     );
     useEffect(() => {
       if (isOpen) {
-        const timer2 = setTimeout(() => {
-          setIsAnimating(true);
-        }, 10);
+        if (getPopupContainer !== void 0 && triggerRef.current) {
+          const rect = triggerRef.current.getBoundingClientRect();
+          setTriggerRect(rect);
+        }
+        setIsAnimating(true);
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
-          clearTimeout(timer2);
           document.removeEventListener("mousedown", handleClickOutside);
         };
       } else {
         setIsAnimating(false);
+        setTriggerRect(null);
         document.removeEventListener("mousedown", handleClickOutside);
       }
-    }, [isOpen, handleClickOutside]);
+    }, [isOpen, handleClickOutside, getPopupContainer]);
     const getMenuStyle = useMemo$1(() => {
       const baseStyle = {
-        position: "absolute",
+        position: getPopupContainer !== void 0 ? "fixed" : "absolute",
         zIndex: 1e3,
         ...style2
       };
+      if (getPopupContainer !== void 0 && triggerRect) {
+        const { top, left, right, bottom, width, height } = triggerRect;
+        switch (placement) {
+          case "bottom": {
+            return {
+              ...baseStyle,
+              top: bottom + offset2,
+              ...alignment === "right" ? { right: window.innerWidth - right } : { left }
+            };
+          }
+          case "top": {
+            return {
+              ...baseStyle,
+              bottom: window.innerHeight - top + offset2,
+              ...alignment === "right" ? { right: window.innerWidth - right } : { left }
+            };
+          }
+          case "left": {
+            return {
+              ...baseStyle,
+              top,
+              right: window.innerWidth - left + offset2,
+              ...alignment === "right" ? { bottom: window.innerHeight - bottom } : {}
+            };
+          }
+          case "right": {
+            return {
+              ...baseStyle,
+              top,
+              left: right + offset2,
+              ...alignment === "right" ? { bottom: window.innerHeight - bottom } : {}
+            };
+          }
+          default: {
+            return baseStyle;
+          }
+        }
+      }
       switch (placement) {
         case "bottom": {
           return {
@@ -81362,7 +81412,7 @@ const OverflowMenu = forwardRef(
           return baseStyle;
         }
       }
-    }, [placement, alignment, offset2, style2]);
+    }, [placement, alignment, offset2, style2, getPopupContainer, triggerRect]);
     const handleItemClick = useCallback(
       (item) => {
         onItemClick?.(item);
@@ -81370,6 +81420,25 @@ const OverflowMenu = forwardRef(
       },
       [onItemClick, handleOpenChange]
     );
+    const renderMenuContent = (content2) => /* @__PURE__ */ jsx(
+      OverflowMenuContainer,
+      {
+        ref: menuRef,
+        theme,
+        className,
+        style: getMenuStyle,
+        $isAnimating: isAnimating,
+        $placement: placement,
+        children: content2
+      }
+    );
+    const renderMenu = (content2) => {
+      if (getPopupContainer !== void 0 && triggerRef.current) {
+        const container = getPopupContainer(triggerRef.current);
+        return createPortal(renderMenuContent(content2), container);
+      }
+      return renderMenuContent(content2);
+    };
     if (items && items.length > 0) {
       return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { ref, children: [
         /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: overrideTextColor ? /* @__PURE__ */ jsx(
@@ -81378,41 +81447,21 @@ const OverflowMenu = forwardRef(
             overrideTextColor
           }
         ) : trigger }),
-        isOpen && /* @__PURE__ */ jsx(
-          OverflowMenuContainer,
-          {
-            ref: menuRef,
-            theme,
-            className,
-            style: getMenuStyle,
-            $isAnimating: isAnimating,
-            $placement: placement,
-            children: items.map((item) => /* @__PURE__ */ jsx(
-              OverflowMenuItem,
-              {
-                ...item,
-                onClick: () => handleItemClick(item)
-              },
-              item.id
-            ))
-          }
+        isOpen && renderMenu(
+          items.map((item) => /* @__PURE__ */ jsx(
+            OverflowMenuItem,
+            {
+              ...item,
+              onClick: () => handleItemClick(item)
+            },
+            item.id
+          ))
         )
       ] });
     }
     return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { ref, children: [
       /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
-      isOpen && /* @__PURE__ */ jsx(
-        OverflowMenuContainer,
-        {
-          ref: menuRef,
-          theme,
-          className,
-          style: getMenuStyle,
-          $isAnimating: isAnimating,
-          $placement: placement,
-          children: children2
-        }
-      )
+      isOpen && renderMenu(children2)
     ] });
   }
 );
@@ -81609,7 +81658,7 @@ const Progress = ({
   }
   if (isProgressCombined) {
     const combinedPercent = getCombinedPercent(
-      firstBarData,
+      firstBarData || null,
       secondBarData || null
     );
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
@@ -85145,7 +85194,8 @@ function Table({
         onChange: isInfiniteScroll ? onChange : onChange,
         onRowSelectionChange,
         onDataChange,
-        hasBulkSelection
+        hasBulkSelection,
+        filterFn: infiniteScrollConfig.filterFn
       }
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.4.33",
+  "version": "0.4.37",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",