@stella-source/stellasource-dsl 0.2.3 → 0.2.7

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableProps } from "./types";
-declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, }: TableProps<T>): React.JSX.Element;
+declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, }: TableProps<T>): React.JSX.Element;
 export default Table;

package/dist/cjs/types/components/Table/TableComponents/EmptyTableState.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface EmptyTableStateProps {
+    id?: string;
+    className?: string;
+    header: string;
+    subHeader?: string;
+    showClearFilterButton?: boolean;
+    onClearFilters?: () => void;
+    colSpan: number;
+    size?: "small" | "large";
+}
+declare const EmptyTableState: ({ id, className, header, subHeader, showClearFilterButton, colSpan, size, onClearFilters, }: EmptyTableStateProps) => React.JSX.Element;
+export default EmptyTableState;

package/dist/cjs/types/components/Table/styles.d.ts

@@ -12,7 +12,7 @@ declare const HeaderCell: import("styled-components/dist/types").IStyledComponen
 declare const HeaderCellPosition: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const TableWrapperScroll: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $filterMenuOpen: boolean;
+    $stopScroll: boolean;
 }>> & string;
 declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
 declare const CustomIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, HeaderIconButtonProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../IconButton/types").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
@@ -41,4 +41,11 @@ declare const LoadingShimmer: import("styled-components/dist/types").IStyledComp
 }>> & string;
 declare const CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, never>> & string & Omit<({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: import("../Pagination/types").PaginationProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 declare const KebabAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export { HeaderCell, TableWrapper, TableWrapperScroll, StyledTable, CustomIconButton, SortButton, HeaderRow, FilterMenu, Checkbox, BodyCell, HeaderCellPosition, MenuButton, MenuItem, FilterBoxLabel, LoadingShimmer, FilterLabelTransparent, CustomPagination, CellRow, MenuItemGroup, KebabAlign, MenuItemOption, };
+declare const EmptyTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+declare const EmptyTableSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
+    $size?: "small" | "large";
+}>> & string;
+declare const EmptyTableHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+declare const EmptyTableSubHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+declare const ClearFilterButtonRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { HeaderCell, TableWrapper, TableWrapperScroll, StyledTable, CustomIconButton, SortButton, HeaderRow, FilterMenu, Checkbox, BodyCell, HeaderCellPosition, MenuButton, MenuItem, FilterBoxLabel, LoadingShimmer, FilterLabelTransparent, CustomPagination, CellRow, MenuItemGroup, KebabAlign, MenuItemOption, EmptyTableCell, EmptyTableSection, EmptyTableHeader, EmptyTableSubHeader, ClearFilterButtonRow, };

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

@@ -38,6 +38,12 @@ export interface TableProps<T> {
     paginationDetails?: PaginationDetails;
     rowStatuses?: Record<number | string, RowStatus>;
     resetTrigger?: number;
+    emptyTableState: {
+        header: string;
+        subHeader?: string;
+        showClearFilterButton?: boolean;
+        onClearFilters?: () => void;
+    };
 }
 export interface CustomColumnMeta {
     headerAlign?: "left" | "right";

package/dist/cjs/types/components/TableUnitsAndTotals/types.d.ts

@@ -13,8 +13,8 @@ export declare enum QuoteCategory {
 interface TableUnitsAndTotalsProps {
     id?: string;
     className?: string;
-    value: number;
-    subValue?: number;
+    value: number | string;
+    subValue?: number | string;
     rightCategory?: `${QuoteCategory}`;
 }
 interface TotalPriceProps {

package/dist/cjs/types/shared/tokens/whiteLabel/TransformValuesForOverridesUtil.d.ts

@@ -0,0 +1,4 @@
+import { WhiteLabelCSSOverridesProps } from "./WhiteLabelCSSOverrides";
+export declare const getValueFromColorVar: (color?: string) => string | undefined;
+export declare const getButtonHover: (all: WhiteLabelCSSOverridesProps) => string;
+export declare const getButtonHoverST: (all: WhiteLabelCSSOverridesProps) => string;

package/dist/cjs/types/shared/tokens/whiteLabel/WhiteLabelCSSOverrides.d.ts

@@ -0,0 +1,9 @@
+export interface WhiteLabelCSSOverridesProps {
+    primary?: string;
+    secondary?: string;
+    tertiary?: string;
+    quaternary?: string;
+    accent?: string;
+}
+declare const WhiteLabelCSSOverrides: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & WhiteLabelCSSOverridesProps>;
+export default WhiteLabelCSSOverrides;

package/dist/cjs/types/shared/utils/numberHelpers.d.ts

@@ -1,2 +1 @@
 export declare const formatDynamicNumbersWithCommas: (num: number | string, decimalPlaces: number) => string;
-export declare const formatNumberWithDecimals: (num: number | string, decimalPlaces?: number, isCurrency?: boolean) => string;

package/dist/esm/index.esm.js

@@ -3414,7 +3414,7 @@ var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
  * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
  * exposing only those methods and properties that are defined in the spec.
  */
-var ResizeObserver$1 = /** @class */ (function () {
+var ResizeObserver$2 = /** @class */ (function () {
     /**
      * Creates a new instance of ResizeObserver.
      *
@@ -3440,7 +3440,7 @@ var ResizeObserver$1 = /** @class */ (function () {
     'unobserve',
     'disconnect'
 ].forEach(function (method) {
-    ResizeObserver$1.prototype[method] = function () {
+    ResizeObserver$2.prototype[method] = function () {
         var _a;
         return (_a = observers.get(this))[method].apply(_a, arguments);
     };
@@ -3451,7 +3451,7 @@ var index = (function () {
     if (typeof global$1.ResizeObserver !== 'undefined') {
         return global$1.ResizeObserver;
     }
-    return ResizeObserver$1;
+    return ResizeObserver$2;
 })();
 
 // =============================== Const ===============================
@@ -3691,7 +3691,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 var INTERNAL_PREFIX_KEY = 'rc-observer-key';
-function ResizeObserver(props, ref) {
+function ResizeObserver$1(props, ref) {
   var children = props.children;
   var childNodes = typeof children === 'function' ? [children] : toArray$2(children);
   if (process.env.NODE_ENV !== 'production') {
@@ -3709,7 +3709,7 @@ function ResizeObserver(props, ref) {
     }), child);
   });
 }
-var RefResizeObserver = /*#__PURE__*/a$j.forwardRef(ResizeObserver);
+var RefResizeObserver = /*#__PURE__*/a$j.forwardRef(ResizeObserver$1);
 if (process.env.NODE_ENV !== 'production') {
   RefResizeObserver.displayName = 'ResizeObserver';
 }
@@ -16779,7 +16779,6 @@ const variantSelector = (variant) => {
         }
 
         &:disabled {
-          background-color: var(--DSL-button-st-background-disabled);
           border: 1px solid var(--DSL-button-disabled);
           color: var(--DSL-button-disabled);
           & svg {
@@ -16813,7 +16812,6 @@ const variantSelector = (variant) => {
         }
 
         &:disabled {
-          background-color: var(--DSL-button-st-background-disabled);
           color: var(--DSL-button-disabled);
           & svg {
             fill: var(--DSL-button-disabled);
@@ -16853,6 +16851,7 @@ const ButtonComponent = styled.button.attrs({
   }
 
   /* Button CSS Variables */
+  /* p = primary, st = secondary, tertiary */
   --DSL-button-branding: ${Styles.color.core.primary};
   --DSL-button-hover: ${Styles.color.blue.darkNavy};
   --DSL-button-active: ${Styles.color.blue.darkNavy};
@@ -17017,7 +17016,7 @@ const IconContainer = styled.div `
 `;
 
 const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, }) => {
-    return (a__default.createElement(Wrapper, { "data-testId": dataTestId, className: className },
+    return (a__default.createElement(Wrapper, { "data-testid": dataTestId, className: className },
         a__default.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }),
         a__default.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "data-testid": "text-input-wrapper" },
             leftCategory && a__default.createElement(Category, null, leftCategory),
@@ -17107,19 +17106,6 @@ const formatDynamicNumbersWithCommas = (num, decimalPlaces) => {
         })}${decimalEnding ? "." : ""}${decimalZero ? "0" : ""}`
         : "";
 };
-const formatNumberWithDecimals = (num, decimalPlaces = 2, isCurrency = false) => {
-    if (num === null || num === undefined || num === "")
-        return "";
-    const parsed = Number(num);
-    if (isNaN(parsed))
-        return "";
-    return parsed.toLocaleString("en-US", {
-        style: isCurrency ? "currency" : "decimal",
-        currency: isCurrency ? "USD" : undefined,
-        minimumFractionDigits: decimalPlaces,
-        maximumFractionDigits: decimalPlaces,
-    });
-};
 
 const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, }) => {
     const containerProps = {
@@ -20623,8 +20609,8 @@ const SelectCaret = styled(StellaIcon) `
   position: absolute;
   right: 0;
   pointer-events: none;
-  color: ${Styles.color.blue.primary};
-  fill: ${Styles.color.blue.primary};
+  color: ${Styles.color.core.primary};
+  fill: ${Styles.color.core.primary};
   transform: rotate(180deg);
 `;
 const RowInfo = styled.div `
@@ -20742,11 +20728,11 @@ const HeaderCell = styled.th `
     : "unset"};
   z-index: ${({ $isPinnedLeft, $isPinnedRight }) => $isPinnedLeft || $isPinnedRight ? 2 : 1};
   text-align: inherit;
-  padding: 8px 12px;
+  padding: 0px 12px;
   font-weight: 400;
   font-size: 14px;
   color: ${Styles.color.grey.charcoal};
-  border-bottom: 1px solid ${Styles.color.grey.medium};
+  border-bottom: 1px solid ${Styles.color.grey.light};
   background-color: ${Styles.color.grey.pale};
   transition: box-shadow 0.3s ease-out;
   & button {
@@ -20773,6 +20759,7 @@ const HeaderCellPosition = styled.div `
 `;
 const TableWrapper = styled.div `
   width: 100%;
+  position: relative;
   overflow-x: hidden;
   border: 1px solid ${Styles.color.grey.light};
   border-radius: 5px;
@@ -20781,7 +20768,8 @@ const TableWrapper = styled.div `
 `;
 const TableWrapperScroll = styled.div `
   width: 100%;
-  overflow-x: ${({ $filterMenuOpen }) => ($filterMenuOpen ? "hidden" : "auto")};
+  overflow-x: ${({ $stopScroll }) => ($stopScroll ? "hidden" : "auto")};
+  overflow-y: hidden;
 `;
 const StyledTable = styled.table `
   width: 100%;
@@ -20820,6 +20808,11 @@ const HeaderRow = styled.tr `
 const CellRow = styled.tr `
   min-height: 50px;
   height: 50px;
+  &:hover {
+    & > td {
+      background-color: ${Styles.color.blue.pale};
+    }
+  }
 `;
 const FilterMenu = styled.div `
   position: absolute;
@@ -20860,10 +20853,10 @@ const BodyCell = styled.td `
     : "unset"};
   z-index: ${({ $isPinnedLeft, $isPinnedRight }) => $isPinnedLeft || $isPinnedRight ? 1 : 0};
   background: white;
-  padding: 8px 12px;
+  padding: 0px 12px;
   font-size: 12px;
   color: ${Styles.color.grey.charcoal};
-  border-bottom: ${({ $isLastRow }) => $isLastRow ? "none" : `1px solid ${Styles.color.grey.medium}`};
+  border-bottom: ${({ $isLastRow }) => $isLastRow ? "none" : `1px solid ${Styles.color.grey.light}`};
   transition: box-shadow 0.3s ease-out;
 `;
 const MenuButton = styled.button `
@@ -21011,12 +21004,57 @@ const LoadingShimmer = styled.div `
   }
 `;
 const CustomPagination = styled(Pagination) `
-  border-top: 1px solid ${Styles.color.grey.medium};
+  border-top: 1px solid ${Styles.color.grey.light};
 `;
 const KebabAlign = styled.div `
   display: flex;
   justify-content: end;
 `;
+// EmptyTableState
+const EmptyTableCell = styled.td `
+  padding: 10rem;
+  background-color: white;
+`;
+const EmptyTableSection = styled.section `
+  width: ${({ $size }) => ($size === "small" ? "360px" : "450px")};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  gap: 20px;
+  top: 50px;
+  left: 0;
+  right: 0;
+  margin: 80px auto 0;
+`;
+const EmptyTableHeader = styled.p `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Styles.color.grey.smoke};
+  font-size: 22px;
+  font-weight: 400;
+  text-align: center;
+  line-height: 22px;
+  margin-bottom: 0px;
+`;
+const EmptyTableSubHeader = styled.p `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Styles.color.grey.shadow};
+  font-size: 18px;
+  text-align: center;
+  font-weight: 400;
+  margin-top: 0px;
+`;
+const ClearFilterButtonRow = styled.div `
+  display: "flex";
+  justify-content: "center";
+  align-items: "center";
+  text-align: "center";
+`;
 
 const IndeterminateCheckbox = ({ isIndeterminate, isChecked, onChange, }) => {
     const ref = useRef(null);
@@ -21038,7 +21076,11 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     const [coords, setCoords] = useState({ top: 0, left: 0 });
     const [tempFilters, setTempFilters] = useState([]);
     const [currentAppliedFilters, setCurrentAppliedFilters] = useState([]);
+    const [filterOptions, setFilterOptions] = useState([]);
     const [textAlign, setTextAlign] = useState("left");
+    useEffect(() => {
+        setFilterOptions(meta?.filterOptions || []);
+    }, [meta]);
     const toggleMenu = (e) => {
         e.stopPropagation();
         if (buttonRef.current) {
@@ -21063,7 +21105,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
             const insideButton = !!buttonRef.current?.contains(target);
             const insideMenu = !!menuRef.current?.contains(target);
             if (!insideButton && !insideMenu) {
-                setTempFilters(currentAppliedFilters);
+                setTempFilters(filters?.[header.id] || currentAppliedFilters);
                 showFilterMenu(false);
             }
         };
@@ -21095,7 +21137,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
         a__default.createElement(HeaderCellPosition, { style: {
                 justifyContent: textAlign === "left" ? "start" : "end",
             } },
-            textAlign === "left" && (a__default.createElement("span", null, flexRender(columnDef.header, header.getContext()))),
+            textAlign === "left" && (a__default.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))),
             header.column.getCanFilter() && (a__default.createElement("div", { style: {
                     display: "flex",
                     alignItems: "center",
@@ -21122,7 +21164,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                     } }),
                                 a__default.createElement(FilterBoxLabel, { htmlFor: "all-checkbox" }, "Select All"))),
                             (serverSide
-                                ? meta?.filterOptions
+                                ? filterOptions
                                 : Array.from(header.column.getFacetedUniqueValues().keys()))?.map((item) => {
                                 if (meta?.singleSelect) {
                                     return (a__default.createElement(MenuItemOption, { key: item, id: `${item}-button`, onClick: () => {
@@ -21157,7 +21199,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                 setCurrentAppliedFilters([]);
                             } }, "Clear Filter"))), document.body))),
             header.column.getCanSort() && (a__default.createElement(SortButton, { className: "icon", iconName: "sort", ariaLabel: "Sort Button", variant: "tertiary", "$active": sorting.some((s) => s.id === header.column.id), "$sort": column.getIsSorted(), onClick: (e) => header.column.getToggleSortingHandler()?.(e) })),
-            textAlign === "right" && (a__default.createElement("span", null, flexRender(columnDef.header, header.getContext()))))));
+            textAlign === "right" && (a__default.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))))));
 };
 
 const RowOptions = ({ row, selectionMenuItems }) => {
@@ -21202,12 +21244,21 @@ const RowOptions = ({ row, selectionMenuItems }) => {
             })), document.body)));
 };
 
+const EmptyTableState = ({ id, className, header, subHeader, showClearFilterButton, colSpan, size = "large", onClearFilters, }) => {
+    return (a__default.createElement("tr", null,
+        a__default.createElement(EmptyTableCell, { colSpan: colSpan },
+            a__default.createElement(EmptyTableSection, { "$size": size, id: id, className: className },
+                a__default.createElement(EmptyTableHeader, null, header),
+                a__default.createElement(EmptyTableSubHeader, null, subHeader),
+                a__default.createElement(ClearFilterButtonRow, null, showClearFilterButton && (a__default.createElement(StellaButton, { label: "Clear Filters", onClick: () => onClearFilters?.(), variant: "secondary" })))))));
+};
+
 // DataTable.tsx
 function Table({ columns, data, isLoading, serverSide = false, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection = false, showRowOptions = false, showPagination = true, variant, paginationDetails = {
     startingPage: 1,
     rowsPerPage: 10,
     totalRows: data.length,
-}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, }) {
+}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, }) {
     const [rowSelection, setRowSelection] = useState({});
     const [selectedRows] = useState({});
     const [pageIndex, setPageIndex] = useState(paginationDetails?.startingPage);
@@ -21215,6 +21266,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         pageIndex: paginationDetails?.startingPage - 1,
         pageSize: paginationDetails?.rowsPerPage || 10,
     });
+    const [localData, setLocalData] = useState(data);
+    const [localColumns, setLocalColumns] = useState(columns);
     const [totalData, setTotalData] = useState(paginationDetails?.totalRows);
     const [sorting, setSorting] = useState([]);
     const [filters, setFilters] = useState({});
@@ -21233,20 +21286,51 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     }, [rowStatuses]);
     useEffect(() => {
         setTotalData(paginationDetails?.totalRows);
-    }, [paginationDetails.totalRows, data]);
-    useEffect(() => {
-        const el = scrollRef?.current;
+        setPagination({
+            pageIndex: paginationDetails?.startingPage - 1,
+            pageSize: paginationDetails?.rowsPerPage || 10,
+        });
+        setLocalColumns(columns);
+        setLocalData(data);
+    }, [paginationDetails, data, columns]);
+    useLayoutEffect$1(() => {
+        const el = scrollRef.current;
         if (!el)
             return;
-        const handleScroll = () => {
-            const atLeft = el.scrollLeft <= 0;
-            const atRight = el.scrollWidth - el.scrollLeft <= el.clientWidth + 1;
+        let raf = 0;
+        const update = () => {
+            const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);
+            const hasOverflow = maxScrollLeft > 1; // tolerance for rounding
+            let atLeft = el.scrollLeft <= 0;
+            let atRight = el.scrollLeft >= maxScrollLeft - 1;
+            if (!hasOverflow) {
+                atLeft = true;
+                atRight = true;
+            }
             setScrollState({ atLeft, atRight });
         };
-        el.addEventListener("scroll", handleScroll);
-        handleScroll(); // initial check
-        return () => el.removeEventListener("scroll", handleScroll);
-    }, [scrollRef]);
+        const schedule = () => {
+            cancelAnimationFrame(raf);
+            raf = requestAnimationFrame(update);
+        };
+        // Listen to scroll
+        el.addEventListener("scroll", schedule);
+        // Recalculate when sizes change
+        const ro = new ResizeObserver(schedule);
+        ro.observe(el);
+        const tableEl = el.querySelector("table");
+        if (tableEl)
+            ro.observe(tableEl);
+        window.addEventListener("resize", schedule);
+        // Initial measurement after layout
+        schedule();
+        return () => {
+            el.removeEventListener("scroll", schedule);
+            window.removeEventListener("resize", schedule);
+            ro.disconnect();
+            cancelAnimationFrame(raf);
+        };
+    }, []);
     const handleInputChange = (rowId, field, value) => {
         setRowState((prev) => ({
             ...prev,
@@ -21267,7 +21351,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                 size: 20,
             });
         }
-        cols.push(...columns);
+        cols.push(...localColumns);
         if (showRowOptions) {
             cols.push({
                 id: "options",
@@ -21279,9 +21363,16 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             });
         }
         return cols;
-    }, [columns, selectedRows, data, onRowSelect, showSelection, showRowOptions]);
+    }, [
+        localColumns,
+        selectedRows,
+        localData,
+        onRowSelect,
+        showSelection,
+        showRowOptions,
+    ]);
     const table = useReactTable({
-        data,
+        data: localData,
         columns: enhancedColumns,
         state: {
             pagination,
@@ -21354,7 +21445,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
     };
     return (a__default.createElement(TableWrapper, { className: className, id: id, "data-testid": dataTestId, "data-auto": dataAuto },
-        a__default.createElement(TableWrapperScroll, { "$filterMenuOpen": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a__default.createElement("div", null,
+        a__default.createElement(TableWrapperScroll, { "$stopScroll": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a__default.createElement("div", null,
             a__default.createElement("div", { style: {
                     width: "100%",
                     maxWidth: "100%",
@@ -21389,39 +21480,45 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         }));
                     } }));
             }))))),
-            a__default.createElement("tbody", null, table.getRowModel().rows.map((row) => (a__default.createElement(CellRow, { key: row.id }, row.getVisibleCells().map((cell) => {
-                const value = flexRender(cell.column.columnDef.cell, {
-                    ...cell.getContext(),
-                    localValue: rowState[row.id]?.[cell.column.id],
-                    onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
-                });
-                const meta = cell.column.columnDef.meta;
-                return (a__default.createElement(BodyCell, { key: cell.id, style: {
-                        width: cell.column.getSize(),
-                        textAlign: meta?.cellAlign ||
-                            (typeof cell.getValue() === "number" ||
-                                meta?.dataType === "number"
-                                ? "right"
-                                : "left"),
-                        boxShadow: scrollState.atLeft &&
-                            cell.column.getIsPinned() === "left"
-                            ? "none"
-                            : scrollState.atRight &&
-                                cell.column.getIsPinned() === "right"
+            a__default.createElement("tbody", null,
+                table.getRowModel().rows.length === 0 && (a__default.createElement(EmptyTableState, { header: emptyTableState.header, subHeader: emptyTableState.subHeader, showClearFilterButton: emptyTableState.showClearFilterButton, onClearFilters: resetTable, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
+                table.getRowModel().rows.map((row) => (a__default.createElement(CellRow, { key: row.id }, row.getVisibleCells().map((cell) => {
+                    const value = flexRender(cell.column.columnDef.cell, {
+                        ...cell.getContext(),
+                        localValue: rowState[row.id]?.[cell.column.id],
+                        onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
+                    });
+                    const meta = cell.column.columnDef.meta;
+                    return (a__default.createElement(BodyCell, { key: cell.id, style: {
+                            width: cell.column.getSize(),
+                            textAlign: meta?.cellAlign ||
+                                (typeof cell.getValue() === "number" ||
+                                    meta?.dataType === "number"
+                                    ? "right"
+                                    : "left"),
+                            boxShadow: scrollState.atLeft &&
+                                cell.column.getIsPinned() === "left"
                                 ? "none"
-                                : undefined,
-                        backgroundColor: table
-                            .getSelectedRowModel()
-                            .rows.find((r) => r.id === row.id)
-                            ? "#EBF0FA"
-                            : rowStatusesState?.[row.id] === "action-pending"
-                                ? "#FFFDEB"
-                                : rowStatusesState?.[row.id] === "completed"
-                                    ? "#F5F5F5"
-                                    : "white",
-                    }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": row.index === table.getRowModel().rows.length - 1 }, value));
-            })))))))),
-        showPagination && paginationDetails?.totalRows && (a__default.createElement(CustomPagination, { totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
+                                : scrollState.atRight &&
+                                    cell.column.getIsPinned() === "right"
+                                    ? "none"
+                                    : undefined,
+                            backgroundColor: table
+                                .getSelectedRowModel()
+                                .rows.find((r) => r.id === row.id)
+                                ? "#EBF0FA"
+                                : rowStatusesState?.[row.id] === "action-pending"
+                                    ? "#FFFDEB"
+                                    : rowStatusesState?.[row.id] === "completed"
+                                        ? "#F5F5F5"
+                                        : "",
+                        }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": serverSide
+                            ? row.index === table.getRowModel().rows.length - 1
+                            : row.index -
+                                pagination.pageSize * pagination.pageIndex ===
+                                table.getRowModel().rows.length - 1 }, value));
+                })))))))),
+        showPagination && paginationDetails?.totalRows > 0 && (a__default.createElement(CustomPagination, { totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                 setPageIndex(page);
                 setPagination((prev) => ({
                     ...prev,
@@ -21546,13 +21643,9 @@ const SubHeaderText = styled.span `
 const TableUnitsAndTotals = ({ id, className, value, subValue, variant, leftCategory = TableUnitsAndTotalsLeftCategory.US_CURRENCY, rightCategory, }) => {
     const isWeight = variant === QuoteVariants.TOTAL_WEIGHT;
     const leftCategoryValue = isWeight ? "" : leftCategory;
-    const header = (leftCategoryValue ?? "") +
-        formatNumberWithDecimals(value, 2, false) +
-        (rightCategory && isWeight ? ` ${rightCategory}` : "");
-    const subHeader = subValue !== undefined
-        ? (leftCategoryValue ?? "") +
-            formatNumberWithDecimals(subValue, 3, false) +
-            (rightCategory ? ` ${rightCategory}` : "")
+    const header = `${leftCategoryValue ?? ""}${value} ${rightCategory && isWeight ? ` ${rightCategory}` : ""}`;
+    const subHeader = subValue
+        ? `${leftCategoryValue ?? ""}${subValue} ${rightCategory ? ` ${rightCategory}` : ""}`
         : undefined;
     return (a__default.createElement(Container, { id: id, className: className },
         a__default.createElement(Column, { "$align": "right" },