@gobolt/genesis 0.4.30 → 0.4.32

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/index.cjs

@@ -59323,6 +59323,7 @@ const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 },
       margin-bottom: 0 !important;
       width: ${$isFullWidth ? "100%" : "auto"};
       line-height: 1;
+       -webkit-font-smoothing: antialiased;
 
       &:disabled {
         color: ${colors2.status.disabled.default} !important;
@@ -78958,7 +78959,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 +78969,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 +79045,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 +81626,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 +84816,10 @@ const ResizableTitle = (props) => {
 const InfiniteScrollTable = ({
   columns: initialColumns,
   fetchService,
+  title = "Data",
   scrollHeight = 600,
   scrollWidth = 1300,
+  useWindowScroll = false,
   onChange,
   rowSelection,
   onRowClick,
@@ -84882,19 +84888,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 +84999,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 +85157,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
       }
     );
   }
@@ -85778,8 +85802,7 @@ const SecondaryTableControlsRow = ({
               ) : null
             ]
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 100, height: 0 } })
+        )
       ]
     }
   );
@@ -85893,9 +85916,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,
@@ -87101,6 +87125,7 @@ const useTableWithControls = (tableConfig) => {
 const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing: sizing2 }, type4 = "primary", state = "active") => `
   &.ant-tabs {
     background: #F4F4F4;
+    -webkit-font-smoothing: antialiased;
 
     .ant-tabs-nav {
       margin-bottom: 0;
@@ -87121,6 +87146,7 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
       border-radius: 0 !important;
       float: none; /* Prevent default float behavior */
       position: relative;
+      padding: 16px;
       
       
       /* Use single side borders to prevent double borders */
@@ -87140,7 +87166,7 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
         background: ${colors2.interactive.utility?.hover};
       }
 
-      border-top: 0px;
+     
       
       &:first-child {
         border-radius: 0 !important;
@@ -87177,6 +87203,7 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
         font-weight: 500;
         font-size: 14px;
         font-family: 'Inter' !important;
+        border-top: 1px solid #ededed;
         
         .ant-tabs-tab-btn {
           color: ${colors2.onsurface["copy-dark"]} !important;
@@ -87185,15 +87212,22 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
 
         &:hover {
           background: ${colors2.interactive.utility?.hover};
+          border-top: 1px solid #ededed;
         }
 
         &:focus {
           background: ${colors2.interactive.utility?.active};
+          border-top: 1px solid ${colors2.surface.border};
         }
 
         &:active {
           background: ${colors2.interactive.utility?.active};
         }
+
+        &:pressed {
+          background: ${colors2.interactive.utility?.active};
+          border-top: 1px solid ${colors2.surface.border};
+        }
       }
     }
   }

package/dist/index.js

@@ -59305,6 +59305,7 @@ const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 },
       margin-bottom: 0 !important;
       width: ${$isFullWidth ? "100%" : "auto"};
       line-height: 1;
+       -webkit-font-smoothing: antialiased;
 
       &:disabled {
         color: ${colors2.status.disabled.default} !important;
@@ -78940,7 +78941,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 +78951,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 +79027,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 +81608,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 +84798,10 @@ const ResizableTitle = (props) => {
 const InfiniteScrollTable = ({
   columns: initialColumns,
   fetchService,
+  title = "Data",
   scrollHeight = 600,
   scrollWidth = 1300,
+  useWindowScroll = false,
   onChange,
   rowSelection,
   onRowClick,
@@ -84864,19 +84870,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 +84981,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 +85139,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
       }
     );
   }
@@ -85760,8 +85784,7 @@ const SecondaryTableControlsRow = ({
               ) : null
             ]
           }
-        ),
-        /* @__PURE__ */ jsx("div", { style: { width: 100, height: 0 } })
+        )
       ]
     }
   );
@@ -85875,9 +85898,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,
@@ -87083,6 +87107,7 @@ const useTableWithControls = (tableConfig) => {
 const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing: sizing2 }, type4 = "primary", state = "active") => `
   &.ant-tabs {
     background: #F4F4F4;
+    -webkit-font-smoothing: antialiased;
 
     .ant-tabs-nav {
       margin-bottom: 0;
@@ -87103,6 +87128,7 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
       border-radius: 0 !important;
       float: none; /* Prevent default float behavior */
       position: relative;
+      padding: 16px;
       
       
       /* Use single side borders to prevent double borders */
@@ -87122,7 +87148,7 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
         background: ${colors2.interactive.utility?.hover};
       }
 
-      border-top: 0px;
+     
       
       &:first-child {
         border-radius: 0 !important;
@@ -87159,6 +87185,7 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
         font-weight: 500;
         font-size: 14px;
         font-family: 'Inter' !important;
+        border-top: 1px solid #ededed;
         
         .ant-tabs-tab-btn {
           color: ${colors2.onsurface["copy-dark"]} !important;
@@ -87167,15 +87194,22 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
 
         &:hover {
           background: ${colors2.interactive.utility?.hover};
+          border-top: 1px solid #ededed;
         }
 
         &:focus {
           background: ${colors2.interactive.utility?.active};
+          border-top: 1px solid ${colors2.surface.border};
         }
 
         &:active {
           background: ${colors2.interactive.utility?.active};
         }
+
+        &:pressed {
+          background: ${colors2.interactive.utility?.active};
+          border-top: 1px solid ${colors2.surface.border};
+        }
       }
     }
   }

package/package.json

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