@stella-source/stellasource-dsl 0.2.4 → 0.2.7

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

@@ -42,6 +42,7 @@ export interface TableProps<T> {
         header: string;
         subHeader?: string;
         showClearFilterButton?: boolean;
+        onClearFilters?: () => void;
     };
 }
 export interface CustomColumnMeta {

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';
 }
@@ -20769,6 +20769,7 @@ const TableWrapper = styled.div `
 const TableWrapperScroll = styled.div `
   width: 100%;
   overflow-x: ${({ $stopScroll }) => ($stopScroll ? "hidden" : "auto")};
+  overflow-y: hidden;
 `;
 const StyledTable = styled.table `
   width: 100%;
@@ -21075,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) {
@@ -21100,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);
             }
         };
@@ -21159,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: () => {
@@ -21261,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({});
@@ -21283,20 +21290,47 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             pageIndex: paginationDetails?.startingPage - 1,
             pageSize: paginationDetails?.rowsPerPage || 10,
         });
-    }, [paginationDetails, data]);
-    useEffect(() => {
-        const el = scrollRef?.current;
+        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,
@@ -21317,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",
@@ -21329,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,