@gobolt/genesis 0.4.23 → 0.4.25

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

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

package/dist/components/Progress/Progress.d.ts

@@ -1,5 +1,6 @@
 export type BarData = {
     text: string;
+    overrideTextColor?: string;
     status: string;
     value: number;
 };
@@ -8,13 +9,14 @@ export type Percent = {
     strokeColor: string;
 };
 export interface ProgressProps {
-    firstBarData: BarData | null;
+    firstBarData?: BarData | null;
     secondBarData?: BarData | null;
     width?: number;
     height?: number;
     isTextBeforeBar?: boolean;
     isProgressCombined?: boolean;
     isSingleBarOverallSuccess?: boolean;
+    overrideTextColor?: string;
 }
-declare const Progress: ({ firstBarData, secondBarData, width, height, isTextBeforeBar, isProgressCombined, isSingleBarOverallSuccess, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+declare const Progress: ({ firstBarData, secondBarData, width, height, isTextBeforeBar, isProgressCombined, isSingleBarOverallSuccess, overrideTextColor, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
 export default Progress;

package/dist/components/Table/__mocks__/table-mocks.d.ts

@@ -4,6 +4,7 @@ export interface AppointmentWithSimpleAddress {
     number: string;
     timerange: string;
     status: AppointmentStatus;
+    isSelected?: boolean;
     address: {
         nickname: string;
         address: string;

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

@@ -17,6 +17,9 @@ export type UseTableConfig = {
     dataSource?: any[];
 };
 export declare const useTable: <T extends Record<string, any>>(useTableConfig: any) => {
+    dataSource: (T & {
+        isSelected: boolean;
+    })[];
     isLoading: boolean;
     hasErrored: boolean;
     rowSelection: {
@@ -34,7 +37,6 @@ export declare const useTable: <T extends Record<string, any>>(useTableConfig: a
     hasFilter: boolean;
     updateDataSource: (newDataSource: T[]) => void;
     retry: () => void;
-    dataSource: T[];
     columns: ColumnsType<T>;
     error: Error | null;
 };

package/dist/index.cjs

@@ -81263,6 +81263,11 @@ const OverflowMenuItem = ({ children: children2, onClick }) => {
 const DefaultTrigger = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(HiDotsHorizontal, {}) });
 };
+const DefaultTriggerWithOverrideTextColor = ({
+  overrideTextColor
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(HiDotsHorizontal, { style: { color: overrideTextColor } }) });
+};
 const OverflowMenu = React.forwardRef(
   ({
     items,
@@ -81275,7 +81280,8 @@ const OverflowMenu = React.forwardRef(
     offset: offset2 = 8,
     className,
     style: style2,
-    onItemClick
+    onItemClick,
+    overrideTextColor
   }, ref) => {
     const [internalIsOpen, setInternalIsOpen] = React.useState(false);
     const [isAnimating, setIsAnimating] = React.useState(false);
@@ -81370,7 +81376,12 @@ const OverflowMenu = React.forwardRef(
     );
     if (items && items.length > 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { ref, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: overrideTextColor ? /* @__PURE__ */ jsxRuntime.jsx(
+          DefaultTriggerWithOverrideTextColor,
+          {
+            overrideTextColor
+          }
+        ) : trigger }),
         isOpen && /* @__PURE__ */ jsxRuntime.jsx(
           OverflowMenuContainer,
           {
@@ -81557,7 +81568,8 @@ const Progress = ({
   height = 24,
   isTextBeforeBar = false,
   isProgressCombined = false,
-  isSingleBarOverallSuccess = false
+  isSingleBarOverallSuccess = false,
+  overrideTextColor
 }) => {
   const theme = styled.useTheme();
   const percent = firstBarData?.value || 0;
@@ -81591,7 +81603,7 @@ const Progress = ({
             alignItems: "center",
             width: percentDisplayWidth
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: overrideTextColor ?? textColor, variant: "digits3", children: [
             overallPercent,
             "%"
           ] })
@@ -81650,7 +81662,7 @@ const Progress = ({
             alignItems: "center",
             width: percentDisplayWidth
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: overrideTextColor ?? textColor, variant: "digits3", children: [
             combinedPercent,
             "%"
           ] })
@@ -84867,7 +84879,11 @@ const InfiniteScrollTable = ({
     [isFetchingNextPage, hasNextPage, fetchNextPage, scrollableNode]
   );
   const rawDataSource = data?.pages.flatMap((page) => page.docs) ?? [];
-  const dataSource = filterFn ? filterFn(rawDataSource) : rawDataSource;
+  const filteredDataSource = filterFn ? filterFn(rawDataSource) : rawDataSource;
+  const dataSource = filteredDataSource.map((record) => ({
+    ...record,
+    isSelected: selectedRowKeys.includes(record.id)
+  }));
   const totalDocs = data?.pages?.[0]?.totalDocs ?? 0;
   React.useEffect(() => {
     if (onRowSelectionChange) {
@@ -84932,7 +84948,7 @@ const InfiniteScrollTable = ({
             }
           ` }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "infinite-scroll-table", children: /* @__PURE__ */ jsxRuntime.jsx(
-        ForwardTable,
+        Table$1,
         {
           dataSource,
           columns: resizableColumns,
@@ -85099,7 +85115,7 @@ function Table({
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
         scrollWidth: infiniteScrollConfig.scrollWidth,
-        onChange,
+        onChange: isInfiniteScroll ? onChange : onChange,
         onRowSelectionChange,
         onDataChange,
         filterFn: infiniteScrollConfig.filterFn
@@ -85409,7 +85425,6 @@ const useTable = (useTableConfig) => {
   ]);
   const handleRowSelection = React.useCallback(
     (newSelectedRowKeys, newSelectedRows) => {
-      console.log("Row Selected:", newSelectedRowKeys, newSelectedRows);
       setSelectedRowKeys(newSelectedRowKeys);
       setSelectedRows(newSelectedRows);
     },
@@ -85434,8 +85449,19 @@ const useTable = (useTableConfig) => {
     onChange: handleRowSelection,
     getCheckboxProps: disableRowSelection
   };
+  const enhancedDataSource = React.useMemo(() => {
+    return data.dataSource.map((record) => {
+      const isSelected = selectedRowKeys.includes(record.id);
+      return {
+        ...record,
+        isSelected
+      };
+    });
+  }, [data.dataSource, selectedRowKeys]);
   return {
     ...data,
+    dataSource: enhancedDataSource,
+    // Use enhanced data source instead of original
     isLoading,
     hasErrored,
     rowSelection,
@@ -86722,11 +86748,14 @@ const mockColumns = [
   {
     key: "address",
     title: "Address",
-    render: (appointment) => {
-      const {
-        address: { nickname, address }
-      } = appointment;
-      return nickname ? `${nickname} (${address})` : address;
+    render: (appointment, record) => {
+      const { address } = appointment;
+      const textColor = record.isSelected ? "white" : "#6c6c6c";
+      return React.createElement(Typography, {
+        variant: "body2",
+        children: address,
+        color: `${textColor}`
+      });
     }
   },
   {
@@ -86746,8 +86775,9 @@ const mockColumns = [
   {
     title: "Progress",
     dataIndex: "progress",
-    render: (progress) => {
+    render: (progress, record) => {
       if (!progress) return null;
+      const textColor = record.isSelected ? "white" : void 0;
       let firstBarData, secondBarData;
       if ("firstBarData" in progress) {
         firstBarData = progress.firstBarData;
@@ -86769,37 +86799,42 @@ const mockColumns = [
         secondBarData,
         width: 150,
         height: 20,
-        isProgressCombined: true
+        isProgressCombined: true,
+        overrideTextColor: textColor
       });
     }
   },
   {
     title: "Actions",
     key: "actions",
-    render: (record) => {
+    render: (value2, record, index2) => {
       const menuItems = [
         {
           id: "edit",
-          children: "Edit",
+          children: record.isSelected ? "Edit Selected" : "Edit",
           onClick: () => {
             console.log("Edit clicked for record:", record.id);
+            console.log("Is selected:", record.isSelected);
           }
         },
         {
           id: "delete",
-          children: "Delete",
+          children: record.isSelected ? "Delete Selected" : "Delete",
           onClick: () => {
             console.log("Delete clicked for record:", record.id);
+            console.log("Is selected:", record.isSelected);
           }
         }
       ];
+      const textColor = record.isSelected ? "white" : void 0;
       return React.createElement(OverflowMenu, {
         items: menuItems,
         onItemClick: (item) => {
           if (item.onClick) {
             item.onClick();
           }
-        }
+        },
+        overrideTextColor: textColor
       });
     }
   }

package/dist/index.js

@@ -81245,6 +81245,11 @@ const OverflowMenuItem = ({ children: children2, onClick }) => {
 const DefaultTrigger = () => {
   return /* @__PURE__ */ jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsx(HiDotsHorizontal, {}) });
 };
+const DefaultTriggerWithOverrideTextColor = ({
+  overrideTextColor
+}) => {
+  return /* @__PURE__ */ jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsx(HiDotsHorizontal, { style: { color: overrideTextColor } }) });
+};
 const OverflowMenu = forwardRef(
   ({
     items,
@@ -81257,7 +81262,8 @@ const OverflowMenu = forwardRef(
     offset: offset2 = 8,
     className,
     style: style2,
-    onItemClick
+    onItemClick,
+    overrideTextColor
   }, ref) => {
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     const [isAnimating, setIsAnimating] = useState(false);
@@ -81352,7 +81358,12 @@ const OverflowMenu = forwardRef(
     );
     if (items && items.length > 0) {
       return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { ref, children: [
-        /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
+        /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: overrideTextColor ? /* @__PURE__ */ jsx(
+          DefaultTriggerWithOverrideTextColor,
+          {
+            overrideTextColor
+          }
+        ) : trigger }),
         isOpen && /* @__PURE__ */ jsx(
           OverflowMenuContainer,
           {
@@ -81539,7 +81550,8 @@ const Progress = ({
   height = 24,
   isTextBeforeBar = false,
   isProgressCombined = false,
-  isSingleBarOverallSuccess = false
+  isSingleBarOverallSuccess = false,
+  overrideTextColor
 }) => {
   const theme = useTheme$1();
   const percent = firstBarData?.value || 0;
@@ -81573,7 +81585,7 @@ const Progress = ({
             alignItems: "center",
             width: percentDisplayWidth
           },
-          children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
+          children: /* @__PURE__ */ jsxs(Typography, { color: overrideTextColor ?? textColor, variant: "digits3", children: [
             overallPercent,
             "%"
           ] })
@@ -81632,7 +81644,7 @@ const Progress = ({
             alignItems: "center",
             width: percentDisplayWidth
           },
-          children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
+          children: /* @__PURE__ */ jsxs(Typography, { color: overrideTextColor ?? textColor, variant: "digits3", children: [
             combinedPercent,
             "%"
           ] })
@@ -84849,7 +84861,11 @@ const InfiniteScrollTable = ({
     [isFetchingNextPage, hasNextPage, fetchNextPage, scrollableNode]
   );
   const rawDataSource = data?.pages.flatMap((page) => page.docs) ?? [];
-  const dataSource = filterFn ? filterFn(rawDataSource) : rawDataSource;
+  const filteredDataSource = filterFn ? filterFn(rawDataSource) : rawDataSource;
+  const dataSource = filteredDataSource.map((record) => ({
+    ...record,
+    isSelected: selectedRowKeys.includes(record.id)
+  }));
   const totalDocs = data?.pages?.[0]?.totalDocs ?? 0;
   useEffect(() => {
     if (onRowSelectionChange) {
@@ -84914,7 +84930,7 @@ const InfiniteScrollTable = ({
             }
           ` }),
       /* @__PURE__ */ jsx("div", { className: "infinite-scroll-table", children: /* @__PURE__ */ jsx(
-        ForwardTable,
+        Table$1,
         {
           dataSource,
           columns: resizableColumns,
@@ -85081,7 +85097,7 @@ function Table({
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
         scrollWidth: infiniteScrollConfig.scrollWidth,
-        onChange,
+        onChange: isInfiniteScroll ? onChange : onChange,
         onRowSelectionChange,
         onDataChange,
         filterFn: infiniteScrollConfig.filterFn
@@ -85391,7 +85407,6 @@ const useTable = (useTableConfig) => {
   ]);
   const handleRowSelection = useCallback(
     (newSelectedRowKeys, newSelectedRows) => {
-      console.log("Row Selected:", newSelectedRowKeys, newSelectedRows);
       setSelectedRowKeys(newSelectedRowKeys);
       setSelectedRows(newSelectedRows);
     },
@@ -85416,8 +85431,19 @@ const useTable = (useTableConfig) => {
     onChange: handleRowSelection,
     getCheckboxProps: disableRowSelection
   };
+  const enhancedDataSource = useMemo$1(() => {
+    return data.dataSource.map((record) => {
+      const isSelected = selectedRowKeys.includes(record.id);
+      return {
+        ...record,
+        isSelected
+      };
+    });
+  }, [data.dataSource, selectedRowKeys]);
   return {
     ...data,
+    dataSource: enhancedDataSource,
+    // Use enhanced data source instead of original
     isLoading,
     hasErrored,
     rowSelection,
@@ -86704,11 +86730,14 @@ const mockColumns = [
   {
     key: "address",
     title: "Address",
-    render: (appointment) => {
-      const {
-        address: { nickname, address }
-      } = appointment;
-      return nickname ? `${nickname} (${address})` : address;
+    render: (appointment, record) => {
+      const { address } = appointment;
+      const textColor = record.isSelected ? "white" : "#6c6c6c";
+      return React__default.createElement(Typography, {
+        variant: "body2",
+        children: address,
+        color: `${textColor}`
+      });
     }
   },
   {
@@ -86728,8 +86757,9 @@ const mockColumns = [
   {
     title: "Progress",
     dataIndex: "progress",
-    render: (progress) => {
+    render: (progress, record) => {
       if (!progress) return null;
+      const textColor = record.isSelected ? "white" : void 0;
       let firstBarData, secondBarData;
       if ("firstBarData" in progress) {
         firstBarData = progress.firstBarData;
@@ -86751,37 +86781,42 @@ const mockColumns = [
         secondBarData,
         width: 150,
         height: 20,
-        isProgressCombined: true
+        isProgressCombined: true,
+        overrideTextColor: textColor
       });
     }
   },
   {
     title: "Actions",
     key: "actions",
-    render: (record) => {
+    render: (value2, record, index2) => {
       const menuItems = [
         {
           id: "edit",
-          children: "Edit",
+          children: record.isSelected ? "Edit Selected" : "Edit",
           onClick: () => {
             console.log("Edit clicked for record:", record.id);
+            console.log("Is selected:", record.isSelected);
           }
         },
         {
           id: "delete",
-          children: "Delete",
+          children: record.isSelected ? "Delete Selected" : "Delete",
           onClick: () => {
             console.log("Delete clicked for record:", record.id);
+            console.log("Is selected:", record.isSelected);
           }
         }
       ];
+      const textColor = record.isSelected ? "white" : void 0;
       return React__default.createElement(OverflowMenu, {
         items: menuItems,
         onItemClick: (item) => {
           if (item.onClick) {
             item.onClick();
           }
-        }
+        },
+        overrideTextColor: textColor
       });
     }
   }

package/package.json

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