@stella-source/stellasource-dsl 1.5.3 → 3.0.0

package/dist/cjs/index.js

@@ -58,8 +58,12 @@ const colorTokens = {
         50: "var(--grey50)",
         /** #d5dbe5 */
         100: "var(--grey100)",
+        /** #BCC2CE */
+        200: "var(--grey200)",
         /** #687182 */
         500: "var(--grey500)",
+        /** #464F60 */
+        700: "var(--grey700)",
     },
     blue: {
         /** #1f4168 */
@@ -21021,17 +21025,14 @@ const StyledTable = styled.table `
   border-collapse: collapse;
 `;
 const CustomIconButton$1 = styled(IconButton) `
-  opacity: ${({ $active }) => ($active ? 1 : 0)};
-  transition: opacity 0.2s ease;
   padding: 0px;
   & > svg {
-    max-width: ${({ $active }) => !$active && "0px"};
-    fill: ${({ $active }) => $active ? Styles.color.grey.charcoal : Styles.color.grey.smoke};
+    fill: ${({ $active }) => $active ? Styles.color.grey.charcoal : Styles.color.grey.medium};
   }
   &:hover:not(:disabled) {
     background-color: transparent;
     & > svg {
-      fill: ${Styles.color.grey.charcoal};
+      fill: ${Styles.color.grey.smoke};
     }
   }
 `;
@@ -21076,9 +21077,20 @@ const Checkbox = styled.input.attrs({ type: "checkbox" }) `
   cursor: pointer;
 `;
 const MenuItemGroup = styled.div `
-  max-height: 150px;
+  --menu-options-max-height: 136px;
+  max-height: var(--menu-options-max-height);
   overflow-y: auto;
   overflow-x: hidden;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(var(--menu-options-max-height) + 6px);
+    pointer-events: none;
+    background: linear-gradient(to bottom, transparent 94%, white);
+  }
 `;
 const BodyCell = styled.td `
   box-shadow: ${({ $isPinnedLeft, $columnInfo, $isPinnedRight }) => $isPinnedLeft && $columnInfo.getIsLastColumn("left")
@@ -21102,7 +21114,7 @@ const BodyCell = styled.td `
   padding: 0px 12px;
   font-size: 12px;
   color: ${Styles.color.grey.charcoal};
-  border-bottom: ${({ $isLastRow }) => $isLastRow ? "none" : `1px solid ${Styles.color.grey.light}`};
+  border-bottom: 1px solid ${Styles.color.grey.light};
   transition: box-shadow 0.3s ease-out;
 `;
 const MenuButton = styled.button `
@@ -21188,7 +21200,7 @@ const MenuItemOption = styled.button `
     background: #f5f5f5;
   }
 
-  background-color: ${({ $applied }) => $applied ? Styles.color.blue.light : "none"};
+  background-color: ${({ $applied }) => $applied ? Styles.color.blue.light : "transparent"};
 `;
 const FilterLabelTransparent = styled.div `
   font-size: 12px;
@@ -21250,7 +21262,7 @@ const LoadingShimmer = styled.div `
   }
 `;
 const CustomPagination = styled(Pagination) `
-  border-top: 1px solid ${Styles.color.grey.light};
+  border-top: ${({ $hasData }) => $hasData ? "0px" : `1px solid ${Styles.color.grey.light}`};
 `;
 const KebabAlign = styled.div `
   display: flex;
@@ -21311,6 +21323,38 @@ const IndeterminateCheckbox = ({ isIndeterminate, isChecked, onChange, }) => {
     return (a$l.createElement(Checkbox, { ref: ref, checked: isChecked, onChange: (e) => onChange?.(e) }));
 };
 
+/**
+ * Returns a debounced version of a callback, along with flush and cancel methods.
+ */
+function useDebounceCallback(callback, delay) {
+    const timeoutRef = a$l.useRef(null);
+    const lastArgsRef = a$l.useRef(null);
+    const debounced = a$l.useCallback((...args) => {
+        lastArgsRef.current = args;
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            if (lastArgsRef.current)
+                callback(...lastArgsRef.current);
+            timeoutRef.current = null;
+        }, delay);
+    }, [callback, delay]);
+    const flush = a$l.useCallback(() => {
+        if (timeoutRef.current && lastArgsRef.current) {
+            clearTimeout(timeoutRef.current);
+            callback(...lastArgsRef.current);
+            timeoutRef.current = null;
+        }
+    }, [callback]);
+    const cancel = a$l.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    return [debounced, { flush, cancel }];
+}
+
 const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition, onFilterMenuInteraction, onFilterApply, }) => {
     const column = header.column;
     const columnDef = column.columnDef;
@@ -21320,10 +21364,17 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     const buttonRef = a$l.useRef(null);
     const [showFilter, setShowFilter] = a$l.useState(false);
     const [coords, setCoords] = a$l.useState({ top: 0, left: 0 });
+    const [searchValue, setSearchValue] = a$l.useState();
     const [tempFilters, setTempFilters] = a$l.useState([]);
     const [currentAppliedFilters, setCurrentAppliedFilters] = a$l.useState([]);
     const [filterOptions, setFilterOptions] = a$l.useState([]);
     const [textAlign, setTextAlign] = a$l.useState("left");
+    const [handleSave, { flush }] = useDebounceCallback((value) => {
+        column?.setFilterValue([value]);
+        if (value === "")
+            column?.setFilterValue([]);
+        onFilterApply?.();
+    }, 300);
     a$l.useEffect(() => {
         setFilterOptions(meta?.filterOptions || []);
     }, [meta]);
@@ -21397,7 +21448,13 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                             position: "absolute",
                         }, ref: menuRef },
                         a$l.createElement(MenuItemGroup, null,
-                            !meta?.singleSelect && (a$l.createElement(MenuItem, { key: "select-all" },
+                            meta?.filterMode === "search" && (a$l.createElement("div", { style: { padding: "4px 10px" } },
+                                a$l.createElement(TextInput, { id: `${columnDef.header}-search`, label: `${columnDef.header} search`, placeholder: "Search", hideLabel: true, onChange: (value) => {
+                                        setSearchValue(value);
+                                        handleSave(value);
+                                    }, onBlur: () => flush(), endIcon: "search", value: searchValue }))),
+                            (meta?.filterMode === "multiSelect" ||
+                                !meta?.filterMode) && (a$l.createElement(MenuItem, { key: "select-all" },
                                 a$l.createElement(Checkbox, { id: "all-checkbox", name: "all-checkbox", checked: meta?.filterOptions?.every((item) => tempFilters?.includes(item)), onChange: () => {
                                         setTempFilters((prev) => {
                                             if (prev?.length === meta?.filterOptions?.length) {
@@ -21412,7 +21469,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                             (serverSide
                                 ? filterOptions
                                 : Array.from(header.column.getFacetedUniqueValues().keys()))?.map((item) => {
-                                if (meta?.singleSelect) {
+                                if (meta?.filterMode === "singleSelect") {
                                     return (a$l.createElement(MenuItemOption, { key: item, id: `${item}-button`, onClick: () => {
                                             setCurrentAppliedFilters([item]);
                                             column?.setFilterValue([item]);
@@ -21420,21 +21477,25 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                             onFilterApply?.();
                                         }, "$applied": tempFilters?.includes(item) }, item));
                                 }
-                                return (a$l.createElement(MenuItem, { key: item },
-                                    a$l.createElement(Checkbox, { id: `${item}-checkbox`, name: `${item}-checkbox`, checked: tempFilters?.includes(item), onChange: () => {
-                                            setTempFilters((prev) => {
-                                                if (prev?.includes(item)) {
-                                                    return prev.filter((i) => i !== item);
-                                                }
-                                                else {
-                                                    return [...prev, item];
-                                                }
-                                            });
-                                        } }),
-                                    a$l.createElement(FilterLabelTransparent, null, item),
-                                    a$l.createElement(FilterBoxLabel, { htmlFor: `${item}-checkbox` }, item)));
+                                if (meta?.filterMode === "multiSelect" ||
+                                    !meta?.filterMode) {
+                                    return (a$l.createElement(MenuItem, { key: item },
+                                        a$l.createElement(Checkbox, { id: `${item}-checkbox`, name: `${item}-checkbox`, checked: tempFilters?.includes(item), onChange: () => {
+                                                setTempFilters((prev) => {
+                                                    if (prev?.includes(item)) {
+                                                        return prev.filter((i) => i !== item);
+                                                    }
+                                                    else {
+                                                        return [...prev, item];
+                                                    }
+                                                });
+                                            } }),
+                                        a$l.createElement(FilterLabelTransparent, null, item),
+                                        a$l.createElement(FilterBoxLabel, { htmlFor: `${item}-checkbox` }, item)));
+                                }
                             })),
-                        !meta?.singleSelect && (a$l.createElement(MenuButton, { key: "apply", onClick: () => {
+                        (meta?.filterMode === "multiSelect" ||
+                            !meta?.filterMode) && (a$l.createElement(MenuButton, { key: "apply", onClick: () => {
                                 setCurrentAppliedFilters(tempFilters);
                                 column?.setFilterValue(tempFilters?.length > 0 ? tempFilters : []);
                                 showFilterMenu(false);
@@ -21445,6 +21506,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                 showFilterMenu(false);
                                 setTempFilters([]);
                                 setCurrentAppliedFilters([]);
+                                setSearchValue("");
                                 onFilterApply?.();
                             } }, "Clear Filter"))), document.body))),
             header.column.getCanSort() && (a$l.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) })),
@@ -21506,7 +21568,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     startingPage: 1,
     rowsPerPage: 10,
     totalRows: data.length,
-}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, }) {
+}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, }) {
     const [rowSelection, setRowSelection] = a$l.useState({});
     const [selectedRows] = a$l.useState({});
     const [pageIndex, setPageIndex] = a$l.useState(paginationDetails?.startingPage);
@@ -21520,7 +21582,26 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     const [sorting, setSorting] = a$l.useState([]);
     const [filters, setFilters] = a$l.useState({});
     const [rowState, setRowState] = a$l.useState({});
-    const [columnFilters, setColumnFilters] = a$l.useState([]);
+    const [columnFilters, setColumnFilters] = a$l.useState(() => {
+        const base = defaultFilters ?? [];
+        if (!staticFilters?.length)
+            return base;
+        const merged = [...base];
+        staticFilters.forEach((sf) => {
+            const existing = merged.find((f) => f.id === sf.id);
+            if (existing) {
+                const staticValues = new Set(sf.value);
+                existing.value = [
+                    ...sf.value,
+                    ...existing.value.filter((v) => !staticValues.has(v)),
+                ];
+            }
+            else {
+                merged.push(sf);
+            }
+        });
+        return merged;
+    });
     const [columnPinning, setColumnPinning] = a$l.useState({ left: ["select"], right: ["options"] });
     const scrollRef = a$l.useRef(null);
     const [scrollState, setScrollState] = a$l.useState({
@@ -21654,9 +21735,31 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         },
         onColumnFiltersChange: (updaterOrValue) => {
             // TanStack passes either updater function or new filters array
-            const next = typeof updaterOrValue === "function"
+            let next = typeof updaterOrValue === "function"
                 ? updaterOrValue(columnFilters)
                 : updaterOrValue;
+            // Re-apply static filters so they can never be removed
+            if (staticFilters?.length) {
+                next = next.map((f) => {
+                    const staticFilter = staticFilters.find((sf) => sf.id === f.id);
+                    if (!staticFilter)
+                        return f;
+                    const staticValues = new Set(staticFilter.value);
+                    const userValues = f.value;
+                    // Keep all static values locked in, plus whatever the user freely toggled
+                    const merged = [
+                        ...staticFilter.value,
+                        ...userValues.filter((v) => !staticValues.has(v)),
+                    ];
+                    return { ...f, value: merged };
+                });
+                // Ensure static filters are always present even if column wasn't touched
+                const nextIds = new Set(next.map((f) => f.id));
+                staticFilters.forEach((sf) => {
+                    if (!nextIds.has(sf.id))
+                        next = [...next, sf];
+                });
+            }
             setColumnFilters(next);
             // Also keep your simple `filters` map in sync (optional)
             const map = {};
@@ -21669,7 +21772,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             number: (row, columnId, filterValue) => {
                 if (!filterValue?.length)
                     return true;
-                return filterValue.includes(Number(row.getValue(columnId)));
+                return filterValue.some((val) => Number(row.getValue(columnId)).toString().includes(val.toString()));
             },
         },
     });
@@ -21681,11 +21784,16 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             onRowSelect?.(selectedData);
         }
     }, [rowSelection]);
+    const isMounted = a$l.useRef(false);
     a$l.useEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+            return;
+        }
         resetTable();
     }, [resetTrigger]);
     const resetTable = () => {
-        setColumnFilters([]);
+        setColumnFilters(staticFilters ?? []);
         setFilters({});
         setSorting([]);
         setPageIndex(1);
@@ -21775,7 +21883,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                                 pagination.pageSize * pagination.pageIndex ===
                                 table.getRowModel().rows.length - 1 }, value));
                 })))))))),
-        showPagination && paginationDetails?.totalRows > 0 && (a$l.createElement(CustomPagination, { totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
+        showPagination && paginationDetails?.totalRows > 0 && (a$l.createElement(CustomPagination, { "$hasData": table.getRowModel().rows.length > 0, totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                 table.toggleAllRowsSelected(false);
                 setPageIndex(page);
                 setPagination((prev) => ({
@@ -21945,17 +22053,113 @@ const PaymentStatus = ({ variant, id, className }) => {
         a$l.createElement(PaymentStatusLabel, null, label)));
 };
 
-const Tab = ({ id, className, onClick, htmlProps, label }) => {
-    return (a$l.createElement("button", { id: id, className: className, onClick: () => onClick?.(label), ...htmlProps }, label));
+const tabButtonVariantSelector = (variant) => {
+    switch (variant) {
+        case "light":
+            return styled.css `
+        border-image: linear-gradient(
+            to bottom,
+            transparent 20%,
+            ${Styles.color.grey[200]} 20% 80%,
+            transparent 80% 100%
+          )
+          1;
+        border-right: 2px solid;
+        &:has(+ .active) {
+          border-image: none;
+          border-right: 2px solid ${Styles.color.grey.light};
+        }
+        &.active {
+          border: none;
+          margin-right: 2px;
+          box-shadow:
+            0 0 0 0.5px rgba(0, 0, 0, 0.08),
+            0 2px 6px 0 rgba(0, 0, 0, 0.25);
+          border-radius: 4px;
+          color: ${Styles.color.core.primary};
+          background-color: ${Styles.color.white};
+        }
+        &:hover:not(.active) {
+          color: ${Styles.color.core.primary};
+        }
+      `;
+        case "dark":
+            return styled.css `
+        &.active {
+          border: none;
+          box-shadow:
+            0 0 0 0.5px rgba(0, 0, 0, 0.08),
+            0 2px 6px 0 rgba(0, 0, 0, 0.25);
+          border-radius: 10px;
+          color: ${Styles.color.white};
+          background-color: ${Styles.color.grey[700]};
+        }
+        &:hover:not(.active) {
+          color: ${Styles.color.grey[700]};
+        }
+      `;
+        default:
+            return styled.css ``;
+    }
+};
+const tabsVariantSelector = (variant) => {
+    switch (variant) {
+        case "light":
+            return `${Styles.color.grey.light}`;
+        case "dark":
+            return "transparent";
+        default:
+            return `${Styles.color.grey.light}`;
+    }
 };
-
 const TabsBar = styled.nav `
   display: flex;
-  gap: 2px;
+  width: fit-content;
+  padding: 2px;
+  background-color: ${({ $variant }) => tabsVariantSelector($variant)};
+  border-radius: ${({ $isPill }) => ($isPill ? "6px" : "6px 6px 0px 0px")};
+  :last-child {
+    border: none;
+    &.active {
+      margin: 0;
+    }
+  }
+`;
+const TabButton = styled.button `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  color: ${Styles.color.grey.charcoal};
+  padding: 4px 10px;
+  line-height: 20px;
+  font-size: 14px;
+  ${({ $variant }) => tabButtonVariantSelector($variant)};
+`;
+const NotificationBubble = styled.span `
+  margin-left: 5px;
+  background-color: ${({ $isActive }) => $isActive ? Styles.color.transparent : Styles.color.core.accent};
+  border-radius: 100%;
+  padding: ${({ $isActive }) => ($isActive ? "1px 4px 1px 3px" : "1px 4px")};
+  font-size: ${({ $isActive }) => ($isActive ? "12px" : "10px")};
+  line-height: 12px;
+  color: ${({ $isActive }) => $isActive ? Styles.color.core.primary : Styles.color.white};
 `;
 
-const Tabs = ({ id, className, tabs, activeTab, htmlProps, onTabClick, }) => {
-    return (a$l.createElement(TabsBar, { id: id, className: className, ...htmlProps }, tabs.map((tab) => (a$l.createElement(Tab, { key: `${id}-${tab}`, id: `${id}-${tab}`, label: tab, onClick: () => onTabClick(tab) })))));
+const Tab = ({ id, className, onClick, htmlProps, label, variant = "light", active = false, notifications, }) => {
+    return (a$l.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps },
+        label,
+        notifications && notifications > 0 && (a$l.createElement(NotificationBubble, { "$isActive": active }, notifications))));
+};
+
+const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant = "light", isPill, }) => {
+    const [activeTab, setActiveTab] = a$l.useState(defaultActiveTab ?? tabs[0]);
+    const handleClick = (label) => {
+        setActiveTab(label);
+        onTabClick(label);
+    };
+    return (a$l.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a$l.createElement(Tab, { key: `${id}-${tab.label}`, id: `${id}-${tab.label}`, label: tab.label, active: tab.label === activeTab, variant: variant, onClick: () => handleClick(tab.label), notifications: tab.notifications })))));
 };
 
 exports.HelperText = HelperText;