@stella-source/stellasource-dsl 0.2.4 → 0.2.8

package/README.md

@@ -48,6 +48,6 @@ To get started with the **Stella Source Design System**, visit our [documentatio
 
 ---
 
-## Contributing
+# Contributing to the DSL
 
-Contributing guide coming soon!
+Contributing Guide: https://dev.azure.com/stellasource/Stella%20Source/_wiki/wikis/SecturaSoft.wiki/543/Contributing-To-The-DSL

package/dist/cjs/index.js

@@ -3434,7 +3434,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.
      *
@@ -3460,7 +3460,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);
     };
@@ -3471,7 +3471,7 @@ var index = (function () {
     if (typeof global$1.ResizeObserver !== 'undefined') {
         return global$1.ResizeObserver;
     }
-    return ResizeObserver$1;
+    return ResizeObserver$2;
 })();
 
 // =============================== Const ===============================
@@ -3711,7 +3711,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') {
@@ -3729,7 +3729,7 @@ function ResizeObserver(props, ref) {
     }), child);
   });
 }
-var RefResizeObserver = /*#__PURE__*/a__namespace.forwardRef(ResizeObserver);
+var RefResizeObserver = /*#__PURE__*/a__namespace.forwardRef(ResizeObserver$1);
 if (process.env.NODE_ENV !== 'production') {
   RefResizeObserver.displayName = 'ResizeObserver';
 }
@@ -20789,6 +20789,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%;
@@ -21095,7 +21096,11 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     const [coords, setCoords] = a$j.useState({ top: 0, left: 0 });
     const [tempFilters, setTempFilters] = a$j.useState([]);
     const [currentAppliedFilters, setCurrentAppliedFilters] = a$j.useState([]);
+    const [filterOptions, setFilterOptions] = a$j.useState([]);
     const [textAlign, setTextAlign] = a$j.useState("left");
+    a$j.useEffect(() => {
+        setFilterOptions(meta?.filterOptions || []);
+    }, [meta]);
     const toggleMenu = (e) => {
         e.stopPropagation();
         if (buttonRef.current) {
@@ -21120,7 +21125,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);
             }
         };
@@ -21179,7 +21184,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                     } }),
                                 a$j.createElement(FilterBoxLabel, { htmlFor: "all-checkbox" }, "Select All"))),
                             (serverSide
-                                ? meta?.filterOptions
+                                ? filterOptions
                                 : Array.from(header.column.getFacetedUniqueValues().keys()))?.map((item) => {
                                 if (meta?.singleSelect) {
                                     return (a$j.createElement(MenuItemOption, { key: item, id: `${item}-button`, onClick: () => {
@@ -21281,6 +21286,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         pageIndex: paginationDetails?.startingPage - 1,
         pageSize: paginationDetails?.rowsPerPage || 10,
     });
+    const [localData, setLocalData] = a$j.useState(data);
+    const [localColumns, setLocalColumns] = a$j.useState(columns);
     const [totalData, setTotalData] = a$j.useState(paginationDetails?.totalRows);
     const [sorting, setSorting] = a$j.useState([]);
     const [filters, setFilters] = a$j.useState({});
@@ -21303,20 +21310,47 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             pageIndex: paginationDetails?.startingPage - 1,
             pageSize: paginationDetails?.rowsPerPage || 10,
         });
-    }, [paginationDetails, data]);
-    a$j.useEffect(() => {
-        const el = scrollRef?.current;
+        setLocalColumns(columns);
+        setLocalData(data);
+    }, [paginationDetails, data, columns]);
+    a$j.useLayoutEffect(() => {
+        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,
@@ -21337,7 +21371,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                 size: 20,
             });
         }
-        cols.push(...columns);
+        cols.push(...localColumns);
         if (showRowOptions) {
             cols.push({
                 id: "options",
@@ -21349,9 +21383,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,