@gobolt/genesis 0.4.28 → 0.4.31

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

@@ -1,11 +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;
+    $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;
+    $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/Table/InfiniteScrollTable/InfiniteScrollTable.d.ts

@@ -1,3 +1,3 @@
 import { InfiniteScrollTableProps } from './types';
-declare const InfiniteScrollTable: <T>({ columns: initialColumns, fetchService, scrollHeight, scrollWidth, onChange, rowSelection, onRowClick, onRowSelectionChange, onDataChange, filterFn, }: InfiniteScrollTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const InfiniteScrollTable: <T>({ columns: initialColumns, fetchService, title, scrollHeight, scrollWidth, useWindowScroll, onChange, rowSelection, onRowClick, onRowSelectionChange, onDataChange, filterFn, }: InfiniteScrollTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default InfiniteScrollTable;

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

@@ -1,32 +1,17 @@
 import { ColumnType, TablePaginationConfig } from 'antd/es/table';
 import { PaginationStyle } from './TableControls/CustomPagination';
 import { ActionEvent } from '../../types/events';
+import { FetchService } from './InfiniteScrollTable/types';
 import * as React from "react";
 export type Change = (actionEvent: ActionEvent) => void;
 export type SelectionType = "checkbox" | "radio";
 export interface InfiniteScrollConfig<T = any> {
     instanceId: string;
-    fetchService: {
-        fetchData: (params: {
-            pageParam: number;
-        }) => Promise<{
-            docs: T[];
-            totalDocs: number;
-            limit: number;
-            page: number;
-            totalPages: number;
-            pagingCounter: number;
-            hasPrevPage: boolean;
-            hasNextPage: boolean;
-            prevPage?: number;
-            nextPage?: number;
-        }>;
-        queryKey: string[];
-    };
-    title: string;
+    fetchService: FetchService<T>;
+    title?: string;
     scrollHeight?: number;
     scrollWidth?: number;
-    filterFn?: (data: T[]) => T[];
+    useWindowScroll?: boolean;
 }
 export interface TableProps<T extends Record<string, any>> {
     dataSource: T[];

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

@@ -9,6 +9,7 @@ export interface SecondaryTableControlsRowProps {
     onChange?: Change;
     infiniteScrollData?: InfiniteScrollChangeEvent;
     intialRowTotal?: number;
+    hasExternalFilters?: boolean;
 }
-declare const SecondaryTableControlsRow: ({ groups, totalRecords, onChange, infiniteScrollData, intialRowTotal, }: SecondaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const SecondaryTableControlsRow: ({ groups, totalRecords, onChange, infiniteScrollData, intialRowTotal, hasExternalFilters, }: SecondaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
 export default SecondaryTableControlsRow;

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, isFullWidth }) => isFullWidth ? "100%" : 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, isFullWidth }) => isFullWidth ? "100%" : size === "standard" || !action ? "320px" : "240px"};
+  max-width: ${({ size, action, $isFullWidth }) => $isFullWidth ? "700px" : size === "standard" || !action ? "320px" : "240px"};
 
   .ant-typography {
     display: -webkit-box;
@@ -79044,8 +79044,8 @@ const Message = ({
   const [linkColor, setLinkColor] = React.useState(
     theme.colors.interactive.link.active
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(MessageRow, { state, size, isFullWidth, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { action, size, isFullWidth, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(MessageRow, { state, size, $isFullWidth: isFullWidth, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { action, size, $isFullWidth: isFullWidth, children: [
       getIcon(state, color2),
       /* @__PURE__ */ jsxRuntime.jsx(
         Typography,
@@ -81625,7 +81625,10 @@ const Progress = ({
     ] });
   }
   if (isProgressCombined) {
-    const combinedPercent = getCombinedPercent(firstBarData, secondBarData || null);
+    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"];
@@ -84812,8 +84815,10 @@ const ResizableTitle = (props) => {
 const InfiniteScrollTable = ({
   columns: initialColumns,
   fetchService,
+  title = "Data",
   scrollHeight = 600,
   scrollWidth = 1300,
+  useWindowScroll = false,
   onChange,
   rowSelection,
   onRowClick,
@@ -84882,19 +84887,37 @@ const InfiniteScrollTable = ({
   }));
   const lastRowRef = React.useCallback(
     (node2) => {
-      if (isFetchingNextPage || !scrollableNode) return;
+      if (isFetchingNextPage) return;
       if (observer.current) observer.current.disconnect();
-      observer.current = new IntersectionObserver(
-        (entries) => {
-          if (entries[0].isIntersecting && hasNextPage) {
-            fetchNextPage();
-          }
-        },
-        { root: scrollableNode, threshold: 0.5 }
-      );
+      if (useWindowScroll) {
+        observer.current = new IntersectionObserver(
+          (entries) => {
+            if (entries[0].isIntersecting && hasNextPage) {
+              fetchNextPage();
+            }
+          },
+          { root: null, threshold: 0.1, rootMargin: "100px" }
+        );
+      } else {
+        if (!scrollableNode) return;
+        observer.current = new IntersectionObserver(
+          (entries) => {
+            if (entries[0].isIntersecting && hasNextPage) {
+              fetchNextPage();
+            }
+          },
+          { root: scrollableNode, threshold: 0.5 }
+        );
+      }
       if (node2) observer.current.observe(node2);
     },
-    [isFetchingNextPage, hasNextPage, fetchNextPage, scrollableNode]
+    [
+      isFetchingNextPage,
+      hasNextPage,
+      fetchNextPage,
+      scrollableNode,
+      useWindowScroll
+    ]
   );
   const rawDataSource = data?.pages.flatMap((page) => page.docs) ?? [];
   const filteredDataSource = filterFn ? filterFn(rawDataSource) : rawDataSource;
@@ -84975,7 +84998,7 @@ const InfiniteScrollTable = ({
           pagination: false,
           showSorterTooltip: false,
           size: "small",
-          scroll: { y: scrollHeight, x: scrollWidth },
+          scroll: useWindowScroll ? { x: scrollWidth } : { y: scrollHeight, x: scrollWidth },
           onChange: () => {
           },
           rowSelection: finalRowSelection,
@@ -85133,10 +85156,10 @@ function Table({
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
         scrollWidth: infiniteScrollConfig.scrollWidth,
+        useWindowScroll: infiniteScrollConfig.useWindowScroll,
         onChange: isInfiniteScroll ? onChange : onChange,
         onRowSelectionChange,
-        onDataChange,
-        filterFn: infiniteScrollConfig.filterFn
+        onDataChange
       }
     );
   }
@@ -85701,7 +85724,8 @@ const SecondaryTableControlsRow = ({
   totalRecords,
   onChange,
   infiniteScrollData,
-  intialRowTotal = 40
+  intialRowTotal = 40,
+  hasExternalFilters = false
 }) => {
   const [hasChanged, setHasChanged] = React__namespace.useState(false);
   const onGroupItemClick = (title, item) => {
@@ -85725,10 +85749,13 @@ const SecondaryTableControlsRow = ({
     if (groups) {
       setHasChanged(true);
     }
+    if (hasExternalFilters) {
+      setHasChanged(true);
+    }
     return () => {
       setHasChanged(false);
     };
-  }, [infiniteScrollData, groups]);
+  }, [infiniteScrollData, groups, hasExternalFilters]);
   const isGroupsEmpty = groups ? Object.values(groups).every((items) => items.length === 0) : true;
   const isMoreThanInitial = infiniteScrollData && Number(infiniteScrollData?.resultsShown) > intialRowTotal || !isGroupsEmpty;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -85755,7 +85782,7 @@ const SecondaryTableControlsRow = ({
             },
             children: [
               isMoreThanInitial && hasChanged ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body3", color: "#6C6C6C", children: `${infiniteScrollData?.resultsShown ?? intialRowTotal} results` }) : null,
-              !isGroupsEmpty ? /* @__PURE__ */ jsxRuntime.jsx(
+              !isGroupsEmpty || hasExternalFilters ? /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   onClick: handleClearFilters,
@@ -85774,8 +85801,7 @@ const SecondaryTableControlsRow = ({
               ) : null
             ]
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 100, height: 0 } })
+        )
       ]
     }
   );
@@ -85816,7 +85842,9 @@ const TableControls = ({
             groups: secondaryTableRowData.groups,
             totalRecords: secondaryTableRowData.totalRecords,
             onChange: onSecondaryChange,
-            infiniteScrollData: secondaryTableRowData.infiniteScrollData
+            infiniteScrollData: secondaryTableRowData.infiniteScrollData,
+            hasExternalFilters: secondaryTableRowData.hasExternalFilters,
+            intialRowTotal: secondaryTableRowData.intialRowTotal
           }
         ) : null
       ]
@@ -85887,9 +85915,10 @@ const TableWithControls = ({
             instanceId: infiniteScrollConfig.instanceId,
             columns: resizableColumns,
             fetchService: infiniteScrollConfig.fetchService,
-            title: infiniteScrollConfig.title,
+            title: infiniteScrollConfig.title || "",
             scrollHeight: infiniteScrollConfig.scrollHeight,
             scrollWidth: infiniteScrollConfig.scrollWidth,
+            useWindowScroll: infiniteScrollConfig.useWindowScroll,
             onChange: onInfiniteScrollTableChange,
             rowSelection,
             onRowClick: tableOnRowClick || onRowClick,

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, isFullWidth }) => isFullWidth ? "100%" : 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, isFullWidth }) => isFullWidth ? "100%" : size === "standard" || !action ? "320px" : "240px"};
+  max-width: ${({ size, action, $isFullWidth }) => $isFullWidth ? "700px" : size === "standard" || !action ? "320px" : "240px"};
 
   .ant-typography {
     display: -webkit-box;
@@ -79026,8 +79026,8 @@ const Message = ({
   const [linkColor, setLinkColor] = useState(
     theme.colors.interactive.link.active
   );
-  return /* @__PURE__ */ jsxs(MessageRow, { state, size, isFullWidth, children: [
-    /* @__PURE__ */ jsxs(MessageContent, { action, size, isFullWidth, children: [
+  return /* @__PURE__ */ jsxs(MessageRow, { state, size, $isFullWidth: isFullWidth, children: [
+    /* @__PURE__ */ jsxs(MessageContent, { action, size, $isFullWidth: isFullWidth, children: [
       getIcon(state, color2),
       /* @__PURE__ */ jsx(
         Typography,
@@ -81607,7 +81607,10 @@ const Progress = ({
     ] });
   }
   if (isProgressCombined) {
-    const combinedPercent = getCombinedPercent(firstBarData, secondBarData || null);
+    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"];
@@ -84794,8 +84797,10 @@ const ResizableTitle = (props) => {
 const InfiniteScrollTable = ({
   columns: initialColumns,
   fetchService,
+  title = "Data",
   scrollHeight = 600,
   scrollWidth = 1300,
+  useWindowScroll = false,
   onChange,
   rowSelection,
   onRowClick,
@@ -84864,19 +84869,37 @@ const InfiniteScrollTable = ({
   }));
   const lastRowRef = useCallback(
     (node2) => {
-      if (isFetchingNextPage || !scrollableNode) return;
+      if (isFetchingNextPage) return;
       if (observer.current) observer.current.disconnect();
-      observer.current = new IntersectionObserver(
-        (entries) => {
-          if (entries[0].isIntersecting && hasNextPage) {
-            fetchNextPage();
-          }
-        },
-        { root: scrollableNode, threshold: 0.5 }
-      );
+      if (useWindowScroll) {
+        observer.current = new IntersectionObserver(
+          (entries) => {
+            if (entries[0].isIntersecting && hasNextPage) {
+              fetchNextPage();
+            }
+          },
+          { root: null, threshold: 0.1, rootMargin: "100px" }
+        );
+      } else {
+        if (!scrollableNode) return;
+        observer.current = new IntersectionObserver(
+          (entries) => {
+            if (entries[0].isIntersecting && hasNextPage) {
+              fetchNextPage();
+            }
+          },
+          { root: scrollableNode, threshold: 0.5 }
+        );
+      }
       if (node2) observer.current.observe(node2);
     },
-    [isFetchingNextPage, hasNextPage, fetchNextPage, scrollableNode]
+    [
+      isFetchingNextPage,
+      hasNextPage,
+      fetchNextPage,
+      scrollableNode,
+      useWindowScroll
+    ]
   );
   const rawDataSource = data?.pages.flatMap((page) => page.docs) ?? [];
   const filteredDataSource = filterFn ? filterFn(rawDataSource) : rawDataSource;
@@ -84957,7 +84980,7 @@ const InfiniteScrollTable = ({
           pagination: false,
           showSorterTooltip: false,
           size: "small",
-          scroll: { y: scrollHeight, x: scrollWidth },
+          scroll: useWindowScroll ? { x: scrollWidth } : { y: scrollHeight, x: scrollWidth },
           onChange: () => {
           },
           rowSelection: finalRowSelection,
@@ -85115,10 +85138,10 @@ function Table({
         title: infiniteScrollConfig.title,
         scrollHeight: infiniteScrollConfig.scrollHeight,
         scrollWidth: infiniteScrollConfig.scrollWidth,
+        useWindowScroll: infiniteScrollConfig.useWindowScroll,
         onChange: isInfiniteScroll ? onChange : onChange,
         onRowSelectionChange,
-        onDataChange,
-        filterFn: infiniteScrollConfig.filterFn
+        onDataChange
       }
     );
   }
@@ -85683,7 +85706,8 @@ const SecondaryTableControlsRow = ({
   totalRecords,
   onChange,
   infiniteScrollData,
-  intialRowTotal = 40
+  intialRowTotal = 40,
+  hasExternalFilters = false
 }) => {
   const [hasChanged, setHasChanged] = React.useState(false);
   const onGroupItemClick = (title, item) => {
@@ -85707,10 +85731,13 @@ const SecondaryTableControlsRow = ({
     if (groups) {
       setHasChanged(true);
     }
+    if (hasExternalFilters) {
+      setHasChanged(true);
+    }
     return () => {
       setHasChanged(false);
     };
-  }, [infiniteScrollData, groups]);
+  }, [infiniteScrollData, groups, hasExternalFilters]);
   const isGroupsEmpty = groups ? Object.values(groups).every((items) => items.length === 0) : true;
   const isMoreThanInitial = infiniteScrollData && Number(infiniteScrollData?.resultsShown) > intialRowTotal || !isGroupsEmpty;
   return /* @__PURE__ */ jsxs(
@@ -85737,7 +85764,7 @@ const SecondaryTableControlsRow = ({
             },
             children: [
               isMoreThanInitial && hasChanged ? /* @__PURE__ */ jsx(Typography, { variant: "body3", color: "#6C6C6C", children: `${infiniteScrollData?.resultsShown ?? intialRowTotal} results` }) : null,
-              !isGroupsEmpty ? /* @__PURE__ */ jsx(
+              !isGroupsEmpty || hasExternalFilters ? /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: handleClearFilters,
@@ -85756,8 +85783,7 @@ const SecondaryTableControlsRow = ({
               ) : null
             ]
           }
-        ),
-        /* @__PURE__ */ jsx("div", { style: { width: 100, height: 0 } })
+        )
       ]
     }
   );
@@ -85798,7 +85824,9 @@ const TableControls = ({
             groups: secondaryTableRowData.groups,
             totalRecords: secondaryTableRowData.totalRecords,
             onChange: onSecondaryChange,
-            infiniteScrollData: secondaryTableRowData.infiniteScrollData
+            infiniteScrollData: secondaryTableRowData.infiniteScrollData,
+            hasExternalFilters: secondaryTableRowData.hasExternalFilters,
+            intialRowTotal: secondaryTableRowData.intialRowTotal
           }
         ) : null
       ]
@@ -85869,9 +85897,10 @@ const TableWithControls = ({
             instanceId: infiniteScrollConfig.instanceId,
             columns: resizableColumns,
             fetchService: infiniteScrollConfig.fetchService,
-            title: infiniteScrollConfig.title,
+            title: infiniteScrollConfig.title || "",
             scrollHeight: infiniteScrollConfig.scrollHeight,
             scrollWidth: infiniteScrollConfig.scrollWidth,
+            useWindowScroll: infiniteScrollConfig.useWindowScroll,
             onChange: onInfiniteScrollTableChange,
             rowSelection,
             onRowClick: tableOnRowClick || onRowClick,

package/package.json

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