@gobolt/genesis 0.4.24 → 0.4.26

package/dist/components/Message/Message.d.ts

@@ -9,6 +9,7 @@ export interface MessageProps {
     message: string;
     action?: MessageAction;
     size?: Extract<keyof typeof SIZE, "small" | "standard">;
+    isFullWidth?: boolean;
 }
-declare const Message: ({ state, message, action, size, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const Message: ({ state, message, action, size, isFullWidth, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
 export default Message;

package/dist/components/Message/styles.d.ts

@@ -1,9 +1,11 @@
 export declare const MessageRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     state: string;
     size: string;
+    isFullWidth: boolean;
 }>> & string;
 export declare const MessageContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     size?: string;
     action?: unknown;
+    isFullWidth?: boolean;
 }>> & string;
 export declare const ActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

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

@@ -78958,7 +78958,7 @@ const MessageRow = styled.div`
   gap: ${({ theme }) => theme.sizing.Size4}px;
   padding: ${({ theme }) => theme.sizing.Size3}px;
   background-color: ${({ theme, state }) => theme.colors.status[state].surface};
-  width: ${({ theme, state, size }) => size === "standard" ? "320px" : "240px"};
+  width: ${({ theme, state, size, isFullWidth }) => isFullWidth ? "100%" : size === "standard" ? "320px" : "240px"};
   pointer-events: none;
   cursor: default;
   border-radius: ${({ theme }) => theme.borderRadius.BorderRadiusSm}px;
@@ -78968,7 +78968,7 @@ const MessageContent = styled.div`
   align-items: center;
   gap: ${({ theme }) => theme.sizing.Size2}px;
   flex: 1;
-  max-width: ${({ size, action }) => size === "standard" || !action ? "320px" : "240px"};
+  max-width: ${({ size, action, isFullWidth }) => isFullWidth ? "100%" : size === "standard" || !action ? "320px" : "240px"};
 
   .ant-typography {
     display: -webkit-box;
@@ -79035,7 +79035,8 @@ const Message = ({
   state = STATE.info,
   message: message2,
   action,
-  size = SIZE.standard
+  size = SIZE.standard,
+  isFullWidth = false
 }) => {
   const theme = styled.useTheme();
   const color2 = getIconColor$1(state, theme);
@@ -79043,8 +79044,8 @@ const Message = ({
   const [linkColor, setLinkColor] = React.useState(
     theme.colors.interactive.link.active
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(MessageRow, { state, size, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { action, size, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(MessageRow, { state, size, isFullWidth, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { action, size, isFullWidth, children: [
       getIcon(state, color2),
       /* @__PURE__ */ jsxRuntime.jsx(
         Typography,
@@ -81263,6 +81264,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 +81281,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 +81377,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 +81569,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 +81604,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,
             "%"
           ] })
@@ -81600,7 +81613,7 @@ const Progress = ({
     ] });
   }
   if (isProgressCombined) {
-    const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
+    const combinedPercent = getCombinedPercent(firstBarData, secondBarData || null);
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
     const adjustedFirstBar = secondBarData?.value === 100 ? 100 : firstBarData?.value || 0;
     const firstBarStrokeColor = theme?.colors?.inputs?.progress?.[firstBarData?.status || "info"];
@@ -81650,7 +81663,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 +84880,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) {
@@ -85099,7 +85116,7 @@ function Table({
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
         scrollWidth: infiniteScrollConfig.scrollWidth,
-        onChange,
+        onChange: isInfiniteScroll ? onChange : onChange,
         onRowSelectionChange,
         onDataChange,
         filterFn: infiniteScrollConfig.filterFn
@@ -85409,7 +85426,6 @@ const useTable = (useTableConfig) => {
   ]);
   const handleRowSelection = React.useCallback(
     (newSelectedRowKeys, newSelectedRows) => {
-      console.log("Row Selected:", newSelectedRowKeys, newSelectedRows);
       setSelectedRowKeys(newSelectedRowKeys);
       setSelectedRows(newSelectedRows);
     },
@@ -85434,8 +85450,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 +86749,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: typeof address === "string" ? address : JSON.stringify(address),
+        color: `${textColor}`
+      });
     }
   },
   {
@@ -86746,8 +86776,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 +86800,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

@@ -78940,7 +78940,7 @@ const MessageRow = styled.div`
   gap: ${({ theme }) => theme.sizing.Size4}px;
   padding: ${({ theme }) => theme.sizing.Size3}px;
   background-color: ${({ theme, state }) => theme.colors.status[state].surface};
-  width: ${({ theme, state, size }) => size === "standard" ? "320px" : "240px"};
+  width: ${({ theme, state, size, isFullWidth }) => isFullWidth ? "100%" : size === "standard" ? "320px" : "240px"};
   pointer-events: none;
   cursor: default;
   border-radius: ${({ theme }) => theme.borderRadius.BorderRadiusSm}px;
@@ -78950,7 +78950,7 @@ const MessageContent = styled.div`
   align-items: center;
   gap: ${({ theme }) => theme.sizing.Size2}px;
   flex: 1;
-  max-width: ${({ size, action }) => size === "standard" || !action ? "320px" : "240px"};
+  max-width: ${({ size, action, isFullWidth }) => isFullWidth ? "100%" : size === "standard" || !action ? "320px" : "240px"};
 
   .ant-typography {
     display: -webkit-box;
@@ -79017,7 +79017,8 @@ const Message = ({
   state = STATE.info,
   message: message2,
   action,
-  size = SIZE.standard
+  size = SIZE.standard,
+  isFullWidth = false
 }) => {
   const theme = useTheme$1();
   const color2 = getIconColor$1(state, theme);
@@ -79025,8 +79026,8 @@ const Message = ({
   const [linkColor, setLinkColor] = useState(
     theme.colors.interactive.link.active
   );
-  return /* @__PURE__ */ jsxs(MessageRow, { state, size, children: [
-    /* @__PURE__ */ jsxs(MessageContent, { action, size, children: [
+  return /* @__PURE__ */ jsxs(MessageRow, { state, size, isFullWidth, children: [
+    /* @__PURE__ */ jsxs(MessageContent, { action, size, isFullWidth, children: [
       getIcon(state, color2),
       /* @__PURE__ */ jsx(
         Typography,
@@ -81245,6 +81246,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 +81263,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 +81359,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 +81551,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 +81586,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,
             "%"
           ] })
@@ -81582,7 +81595,7 @@ const Progress = ({
     ] });
   }
   if (isProgressCombined) {
-    const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
+    const combinedPercent = getCombinedPercent(firstBarData, secondBarData || null);
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
     const adjustedFirstBar = secondBarData?.value === 100 ? 100 : firstBarData?.value || 0;
     const firstBarStrokeColor = theme?.colors?.inputs?.progress?.[firstBarData?.status || "info"];
@@ -81632,7 +81645,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 +84862,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) {
@@ -85081,7 +85098,7 @@ function Table({
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
         scrollWidth: infiniteScrollConfig.scrollWidth,
-        onChange,
+        onChange: isInfiniteScroll ? onChange : onChange,
         onRowSelectionChange,
         onDataChange,
         filterFn: infiniteScrollConfig.filterFn
@@ -85391,7 +85408,6 @@ const useTable = (useTableConfig) => {
   ]);
   const handleRowSelection = useCallback(
     (newSelectedRowKeys, newSelectedRows) => {
-      console.log("Row Selected:", newSelectedRowKeys, newSelectedRows);
       setSelectedRowKeys(newSelectedRowKeys);
       setSelectedRows(newSelectedRows);
     },
@@ -85416,8 +85432,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 +86731,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: typeof address === "string" ? address : JSON.stringify(address),
+        color: `${textColor}`
+      });
     }
   },
   {
@@ -86728,8 +86758,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 +86782,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.24",
+  "version": "0.4.26",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",