@gobolt/genesis 0.4.35 → 0.4.38

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

@@ -1,5 +1,6 @@
 import { Change } from '../Table';
 import { InfiniteScrollChangeEvent } from '../InfiniteScrollTable/types';
+import * as React from "react";
 export type Groups = {
     [key: string]: string[];
 };
@@ -10,6 +11,7 @@ export interface SecondaryTableControlsRowProps {
     infiniteScrollData?: InfiniteScrollChangeEvent;
     intialRowTotal?: number;
     hasExternalFilters?: boolean;
+    getCustomIcon?: (title: string) => React.ReactNode | null;
 }
-declare const SecondaryTableControlsRow: ({ groups, totalRecords, onChange, infiniteScrollData, intialRowTotal, hasExternalFilters, }: SecondaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const SecondaryTableControlsRow: ({ groups, totalRecords, onChange, infiniteScrollData, intialRowTotal, hasExternalFilters, getCustomIcon, }: SecondaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
 export default SecondaryTableControlsRow;

package/dist/index.cjs

@@ -81253,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;
@@ -81338,16 +81336,13 @@ const OverflowMenu = React.forwardRef(
     );
     React.useEffect(() => {
       if (isOpen) {
-        if (getPopupContainer && triggerRef.current) {
+        if (getPopupContainer !== void 0 && triggerRef.current) {
           const rect = triggerRef.current.getBoundingClientRect();
           setTriggerRect(rect);
         }
-        const timer2 = setTimeout(() => {
-          setIsAnimating(true);
-        }, 10);
+        setIsAnimating(true);
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
-          clearTimeout(timer2);
           document.removeEventListener("mousedown", handleClickOutside);
         };
       } else {
@@ -81358,11 +81353,11 @@ const OverflowMenu = React.forwardRef(
     }, [isOpen, handleClickOutside, getPopupContainer]);
     const getMenuStyle = React.useMemo(() => {
       const baseStyle = {
-        position: getPopupContainer ? "fixed" : "absolute",
+        position: getPopupContainer !== void 0 ? "fixed" : "absolute",
         zIndex: 1e3,
         ...style2
       };
-      if (getPopupContainer && triggerRect) {
+      if (getPopupContainer !== void 0 && triggerRect) {
         const { top, left, right, bottom, width, height } = triggerRect;
         switch (placement) {
           case "bottom": {
@@ -81456,7 +81451,7 @@ const OverflowMenu = React.forwardRef(
       }
     );
     const renderMenu = (content2) => {
-      if (getPopupContainer && triggerRef.current) {
+      if (getPopupContainer !== void 0 && triggerRef.current) {
         const container = getPopupContainer(triggerRef.current);
         return ReactDOM.createPortal(renderMenuContent(content2), container);
       }
@@ -81681,7 +81676,7 @@ const Progress = ({
   }
   if (isProgressCombined) {
     const combinedPercent = getCombinedPercent(
-      firstBarData,
+      firstBarData || null,
       secondBarData || null
     );
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
@@ -85739,7 +85734,12 @@ const PrimaryTableControlsRow = ({
     }
   );
 };
-const GroupItem = ({ title, items, onGroupItemClick }) => {
+const GroupItem = ({
+  title,
+  items,
+  onGroupItemClick,
+  getCustomIcon
+}) => {
   if (items.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Tooltip2, { tip: title, isAbsolutePositioned: false, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -85752,7 +85752,7 @@ const GroupItem = ({ title, items, onGroupItemClick }) => {
           width: 24,
           height: 24
         },
-        children: getIcon$1(title)
+        children: getCustomIcon ? getCustomIcon(title) : getIcon$1(title)
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -85769,7 +85769,11 @@ const GroupItem = ({ title, items, onGroupItemClick }) => {
     )) })
   ] });
 };
-const GroupsRow = ({ groups, onGroupItemClick }) => {
+const GroupsRow = ({
+  groups,
+  onGroupItemClick,
+  getCustomIcon
+}) => {
   if (!groups) return null;
   const groupArray = Object.entries(groups).map(([title, items]) => ({
     title,
@@ -85780,7 +85784,8 @@ const GroupsRow = ({ groups, onGroupItemClick }) => {
     {
       title: group.title,
       items: group.items,
-      onGroupItemClick
+      onGroupItemClick,
+      getCustomIcon
     },
     group.title
   )) : null });
@@ -85791,7 +85796,8 @@ const SecondaryTableControlsRow = ({
   onChange,
   infiniteScrollData,
   intialRowTotal = 40,
-  hasExternalFilters = false
+  hasExternalFilters = false,
+  getCustomIcon
 }) => {
   const [hasChanged, setHasChanged] = React__namespace.useState(false);
   const onGroupItemClick = (title, item) => {
@@ -85834,7 +85840,14 @@ const SecondaryTableControlsRow = ({
         marginTop: 8
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minWidth: 100 }, children: /* @__PURE__ */ jsxRuntime.jsx(GroupsRow, { groups, onGroupItemClick }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minWidth: 100 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          GroupsRow,
+          {
+            groups,
+            onGroupItemClick,
+            getCustomIcon
+          }
+        ) }),
         (totalRecords ?? 0) > 0 && !infiniteScrollData ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",

package/dist/index.js

@@ -81235,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;
@@ -81320,16 +81318,13 @@ const OverflowMenu = forwardRef(
     );
     useEffect(() => {
       if (isOpen) {
-        if (getPopupContainer && triggerRef.current) {
+        if (getPopupContainer !== void 0 && triggerRef.current) {
           const rect = triggerRef.current.getBoundingClientRect();
           setTriggerRect(rect);
         }
-        const timer2 = setTimeout(() => {
-          setIsAnimating(true);
-        }, 10);
+        setIsAnimating(true);
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
-          clearTimeout(timer2);
           document.removeEventListener("mousedown", handleClickOutside);
         };
       } else {
@@ -81340,11 +81335,11 @@ const OverflowMenu = forwardRef(
     }, [isOpen, handleClickOutside, getPopupContainer]);
     const getMenuStyle = useMemo$1(() => {
       const baseStyle = {
-        position: getPopupContainer ? "fixed" : "absolute",
+        position: getPopupContainer !== void 0 ? "fixed" : "absolute",
         zIndex: 1e3,
         ...style2
       };
-      if (getPopupContainer && triggerRect) {
+      if (getPopupContainer !== void 0 && triggerRect) {
         const { top, left, right, bottom, width, height } = triggerRect;
         switch (placement) {
           case "bottom": {
@@ -81438,7 +81433,7 @@ const OverflowMenu = forwardRef(
       }
     );
     const renderMenu = (content2) => {
-      if (getPopupContainer && triggerRef.current) {
+      if (getPopupContainer !== void 0 && triggerRef.current) {
         const container = getPopupContainer(triggerRef.current);
         return createPortal(renderMenuContent(content2), container);
       }
@@ -81663,7 +81658,7 @@ const Progress = ({
   }
   if (isProgressCombined) {
     const combinedPercent = getCombinedPercent(
-      firstBarData,
+      firstBarData || null,
       secondBarData || null
     );
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
@@ -85721,7 +85716,12 @@ const PrimaryTableControlsRow = ({
     }
   );
 };
-const GroupItem = ({ title, items, onGroupItemClick }) => {
+const GroupItem = ({
+  title,
+  items,
+  onGroupItemClick,
+  getCustomIcon
+}) => {
   if (items.length === 0) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Tooltip2, { tip: title, isAbsolutePositioned: false, children: /* @__PURE__ */ jsx(
@@ -85734,7 +85734,7 @@ const GroupItem = ({ title, items, onGroupItemClick }) => {
           width: 24,
           height: 24
         },
-        children: getIcon$1(title)
+        children: getCustomIcon ? getCustomIcon(title) : getIcon$1(title)
       }
     ) }),
     /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => /* @__PURE__ */ jsx(
@@ -85751,7 +85751,11 @@ const GroupItem = ({ title, items, onGroupItemClick }) => {
     )) })
   ] });
 };
-const GroupsRow = ({ groups, onGroupItemClick }) => {
+const GroupsRow = ({
+  groups,
+  onGroupItemClick,
+  getCustomIcon
+}) => {
   if (!groups) return null;
   const groupArray = Object.entries(groups).map(([title, items]) => ({
     title,
@@ -85762,7 +85766,8 @@ const GroupsRow = ({ groups, onGroupItemClick }) => {
     {
       title: group.title,
       items: group.items,
-      onGroupItemClick
+      onGroupItemClick,
+      getCustomIcon
     },
     group.title
   )) : null });
@@ -85773,7 +85778,8 @@ const SecondaryTableControlsRow = ({
   onChange,
   infiniteScrollData,
   intialRowTotal = 40,
-  hasExternalFilters = false
+  hasExternalFilters = false,
+  getCustomIcon
 }) => {
   const [hasChanged, setHasChanged] = React.useState(false);
   const onGroupItemClick = (title, item) => {
@@ -85816,7 +85822,14 @@ const SecondaryTableControlsRow = ({
         marginTop: 8
       },
       children: [
-        /* @__PURE__ */ jsx("div", { style: { minWidth: 100 }, children: /* @__PURE__ */ jsx(GroupsRow, { groups, onGroupItemClick }) }),
+        /* @__PURE__ */ jsx("div", { style: { minWidth: 100 }, children: /* @__PURE__ */ jsx(
+          GroupsRow,
+          {
+            groups,
+            onGroupItemClick,
+            getCustomIcon
+          }
+        ) }),
         (totalRecords ?? 0) > 0 && !infiniteScrollData ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null,
         /* @__PURE__ */ jsxs(
           "div",

package/dist/utils/icon-util.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 export declare const getIcon: (name: string) => import("react/jsx-runtime").JSX.Element | null;
 export declare const getIconColor: (state: any, theme: any) => any;
-export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean, hasIcon?: boolean, customIcon?: React.ReactNode | null | undefined) => string | number | true | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean, hasIcon?: boolean, customIcon?: React.ReactNode | null | undefined) => string | number | true | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null;

package/package.json

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