@stella-source/stellasource-dsl 5.1.1 → 5.3.0

package/README.md

@@ -48,6 +48,19 @@ To get started with the **Stella Source Design System**, visit our [documentatio
 
 ---
 
+# NPM Commands
+
+| Command | Description |
+|---|---|
+| `npm run start` | Start Storybook dev server on port 6006 |
+| `npm run build` | Build Storybook for production |
+| `npm run package` | Build the component library with Rollup |
+| `npm test` | Run tests in watch mode (Vitest) |
+| `npm run test:coverage` | Run tests with coverage report |
+| `npm run ngrok` | Expose local Storybook via ngrok (port 6006) |
+
+---
+
 # Contributing to the DSL
 
 Contributing Guide: https://dev.azure.com/stellasource/Stella%20Source/_wiki/wikis/SecturaSoft.wiki/543/Contributing-To-The-DSL

package/dist/cjs/index.js

@@ -18177,12 +18177,24 @@ const IconButton = a$n.forwardRef(({ iconName, onClick, disabled, variant = "pri
 
 const Wrapper = styled.div `
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ $labelPosition }) => $labelPosition === "left" ? "row" : "column"};
+  align-items: ${({ $labelPosition }) => $labelPosition === "left" ? "flex-start" : "stretch"};
+  gap: ${({ $labelPosition }) => ($labelPosition === "left" ? "10px" : "0")};
   min-width: 60px;
   max-width: 400px;
   position: relative;
   width: 100%;
 `;
+const InputColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+const LabelAligner = styled.div `
+  height: 32px;
+  display: flex;
+  align-items: center;
+`;
 const TextFieldWrapper = styled.div.attrs({
     className: "DSL-stella-textfield",
 }) `
@@ -18194,7 +18206,7 @@ const TextFieldWrapper = styled.div.attrs({
   border: 1px solid ${Styles.color.grey.medium};
   border-radius: 6px;
   overflow: hidden;
-  margin-top: 3px;
+  margin-top: ${({ $labelPosition }) => $labelPosition === "left" ? "0" : "3px"};
   background-color: ${({ $isDisabled }) => $isDisabled ? Styles.color.grey.pale : "white"};
   outline: ${({ $hasError }) => $hasError && `${Styles.color.states.error} auto 1px`};
   cursor: ${({ $isDisabled, $isLoading }) => {
@@ -18253,10 +18265,9 @@ const IconContainer = styled.div `
   margin-right: 5px;
 `;
 
-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$n.createElement(Wrapper, { "data-testid": dataTestId, className: className },
-        a$n.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }),
-        a$n.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "data-testid": "text-input-wrapper" },
+const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, labelPosition = "top", }) => {
+    const inputAndHelper = (a$n.createElement(a$n.Fragment, null,
+        a$n.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "$labelPosition": labelPosition, "data-testid": "text-input-wrapper" },
             leftCategory && a$n.createElement(Category, null, leftCategory),
             children,
             isLoading && (a$n.createElement(IconContainer, null,
@@ -18265,9 +18276,13 @@ const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, classNa
                 a$n.createElement(StellaIcon, { dataTestId: "end-icon", iconName: endIcon }))),
             rightCategory && a$n.createElement(Category, null, rightCategory)),
         helperText && (a$n.createElement(HelperText, { id: `${id}-helper-text`, text: helperText, affectLayout: helperTextAffectLayout, type: hasError ? "error" : "info" }))));
+    return (a$n.createElement(Wrapper, { "data-testid": dataTestId, className: className, "$labelPosition": labelPosition },
+        labelPosition === "left" ? (a$n.createElement(LabelAligner, null,
+            a$n.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }))) : (a$n.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` })),
+        labelPosition === "left" ? (a$n.createElement(InputColumn, null, inputAndHelper)) : (inputAndHelper)));
 };
 
-const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18283,6 +18298,7 @@ const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus,
         endIcon,
         disabled,
         isLoading,
+        labelPosition,
     };
     const [inputValue, setInputValue] = a$n.useState("");
     const valueToUse = value ?? inputValue;
@@ -18299,7 +18315,7 @@ const CustomIconButton$2 = styled(IconButton) `
   margin-right: 2px;
 `;
 
-const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18313,6 +18329,7 @@ const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter P
         leftCategory: undefined,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = a$n.useState("");
     const [show, setShow] = a$n.useState(!isHidden);
@@ -18351,7 +18368,7 @@ const formatDynamicNumbersWithCommas = (num, decimalPlaces, isDegrees) => {
         : "";
 };
 
-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, enableAutocomplete = false, isDegrees = false, }) => {
+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, enableAutocomplete = false, isDegrees = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18367,6 +18384,7 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
         leftCategory,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = a$n.useState("");
     const [placeholderText, setPlaceholderText] = a$n.useState(placeholder);
@@ -21843,14 +21861,15 @@ function usePersistTableState(tableId, state, sizingDebounceMs = 300) {
     a$n.useEffect(() => {
         latestSizing.current = state.columnSizing;
     }, [state.columnSizing]);
-    // Persist visibility and sorting immediately
+    // Persist visibility, sorting, and filters immediately
     a$n.useEffect(() => {
         saveTableState(tableId, {
             columnVisibility: state.columnVisibility,
             columnSizing: latestSizing.current,
             sorting: state.sorting,
+            columnFilters: state.columnFilters,
         });
-    }, [tableId, state.columnVisibility, state.sorting]);
+    }, [tableId, state.columnVisibility, state.sorting, state.columnFilters]);
     // Persist sizing debounced
     a$n.useEffect(() => {
         if (debounceTimer.current)
@@ -21860,6 +21879,7 @@ function usePersistTableState(tableId, state, sizingDebounceMs = 300) {
                 columnVisibility: state.columnVisibility,
                 columnSizing: latestSizing.current,
                 sorting: state.sorting,
+                columnFilters: state.columnFilters,
             });
         }, sizingDebounceMs);
         return () => {
@@ -22523,7 +22543,9 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     }, 300);
     const displayOptions = serverSide
         ? filterOptions
-        : normalizeOptions(Array.from(header.column.getFacetedUniqueValues().keys()));
+        : header.column.getCanFilter()
+            ? normalizeOptions(Array.from(header.column.getFacetedUniqueValues().keys()))
+            : [];
     a$n.useEffect(() => {
         setFilterOptions(normalizeOptions(meta?.filterOptions || []));
     }, [meta]);
@@ -22659,7 +22681,6 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     const [localColumns, setLocalColumns] = a$n.useState(columns);
     const [totalData, setTotalData] = a$n.useState(paginationDetails?.totalRows);
     const [sorting, setSorting] = a$n.useState(() => loadTableState(id).sorting ?? []);
-    const [filters, setFilters] = a$n.useState({});
     const [rowState, setRowState] = a$n.useState({});
     const [columnVisibility, setColumnVisibility] = a$n.useState(() => {
         const persisted = loadTableState(id);
@@ -22673,7 +22694,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         ]));
     });
     const [columnFilters, setColumnFilters] = a$n.useState(() => {
-        const base = defaultFilters ?? [];
+        const persisted = loadTableState(id);
+        const base = persisted.columnFilters ?? defaultFilters ?? [];
         if (!staticFilters?.length)
             return base;
         const merged = [...base];
@@ -22692,6 +22714,11 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
         return merged;
     });
+    const filters = a$n.useMemo(() => {
+        const map = {};
+        columnFilters.forEach((f) => (map[f.id] = f.value));
+        return map;
+    }, [columnFilters]);
     const [columnPinning, setColumnPinning] = a$n.useState({ left: ["select"], right: ["options"] });
     const scrollRef = a$n.useRef(null);
     const visibilityButtonRef = a$n.useRef(null);
@@ -22728,7 +22755,13 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         setLocalData(data);
         if (paginationDetails && paginationDetails.startingPage !== pageIndex)
             setPageIndex(paginationDetails?.startingPage);
-    }, [paginationDetails, data, columns]);
+    }, [
+        paginationDetails?.totalRows,
+        paginationDetails?.startingPage,
+        paginationDetails?.rowsPerPage,
+        data,
+        columns,
+    ]);
     a$n.useEffect(() => {
         if (!showVisibilityMenu)
             return;
@@ -22808,7 +22841,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         !table.getIsAllPageRowsSelected();
                     return (a$n.createElement(IndeterminateCheckbox, { isIndeterminate: isIndeterminate, isChecked: table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler() }));
                 },
-                cell: ({ row }) => (a$n.createElement(Checkbox, { checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler() })),
+                cell: ({ row }) => (a$n.createElement(Checkbox, { checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation() })),
                 size: 20,
             });
         }
@@ -22894,9 +22927,6 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                 });
             }
             setColumnFilters(next);
-            const map = {};
-            next.forEach((f) => (map[f.id] = f.value));
-            setFilters(map);
             onFilterChange?.(next);
         },
         filterFns: {
@@ -22907,7 +22937,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             },
         },
     });
-    usePersistTableState(id, { columnVisibility, sorting });
+    usePersistTableState(id, { columnVisibility, sorting, columnFilters });
     a$n.useEffect(() => {
         if (onRowSelect) {
             const selectedData = table
@@ -22916,6 +22946,12 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             onRowSelect?.(selectedData);
         }
     }, [rowSelection]);
+    const initialColumnFilters = a$n.useRef(columnFilters);
+    a$n.useEffect(() => {
+        if (initialColumnFilters.current.length > 0) {
+            onFilterChange?.(initialColumnFilters.current);
+        }
+    }, []);
     const isMounted = a$n.useRef(false);
     a$n.useEffect(() => {
         if (!isMounted.current) {
@@ -22925,8 +22961,9 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         resetTable();
     }, [resetTrigger]);
     const resetTable = () => {
-        setColumnFilters(staticFilters ?? []);
-        setFilters({});
+        const resetFilters = staticFilters ?? [];
+        setColumnFilters(resetFilters);
+        onFilterChange?.(resetFilters);
         setSorting([]);
         setPageIndex(1);
         setPagination({
@@ -22935,6 +22972,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
         table.toggleAllRowsSelected(false);
     };
+    const hasActiveFilters = Object.keys(filters).length > (staticFilters?.length ?? 0) &&
+        Object.values(filters).some((v) => v?.length);
     return (a$n.createElement(a$n.Fragment, null,
         !isLoading && (a$n.createElement(ActionBar, null,
             a$n.createElement(GlobalActionWrapper, null, globalActions?.(table)),
@@ -22999,7 +23038,8 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                     }, key: index + "loading-row" }, Array.from({
                     length: 10,
                 }).map((_, i) => (a$n.createElement(LoadingShimmer, { key: `${i}-loading`, "$width": "110px", "$height": "25px" }))))))))) : (a$n.createElement(StyledTable, { id: `${id}-table`, ...htmlProps },
-                a$n.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a$n.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getRowModel().rows.length === 0 }, headerGroup.headers.map((header, i) => {
+                a$n.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a$n.createElement(HeaderRow, { key: headerGroup.id, "$isEmpty": table.getCoreRowModel().rows.length === 0 &&
+                        !hasActiveFilters }, headerGroup.headers.map((header, i) => {
                     return (a$n.createElement(TableHeaderCell, { key: header.id, serverSide: serverSide, header: header, filters: filters, sorting: sorting, scrollPosition: scrollState, onFilterMenuInteraction: (id, active) => {
                             setFilterMenuOpen((prev) => ({
                                 ...prev,
@@ -23014,14 +23054,21 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         } }));
                 }))))),
                 a$n.createElement("tbody", null,
-                    table.getRowModel().rows.length === 0 && (a$n.createElement(EmptyTableState, { header: emptyTableState?.header || "No data available.", subHeader: emptyTableState?.subHeader, showClearFilterButton: emptyTableState?.showClearFilterButton, onClearFilters: resetTable, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
+                    table.getRowModel().rows.length === 0 && (a$n.createElement(EmptyTableState, { header: hasActiveFilters
+                            ? "No results found."
+                            : emptyTableState?.header || "No data available.", subHeader: !hasActiveFilters ? emptyTableState?.subHeader : undefined, showClearFilterButton: hasActiveFilters, onClearFilters: () => {
+                            resetTable();
+                            emptyTableState?.onClearFilters?.();
+                        }, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
                     table.getRowModel().rows.map((row) => (a$n.createElement(a$n.Fragment, { key: row.id },
                         a$n.createElement(CellRow, { onClick: () => {
+                                if (showSelection)
+                                    row.toggleSelected();
                                 if (!showExpandedRowToggle &&
                                     !!renderExpandedRow?.(row))
                                     toggleRowExpanded(row.id);
                                 onRowClick?.(row.original);
-                            }, "$isClickable": !!onRowClick }, row.getVisibleCells().map((cell) => {
+                            }, "$isClickable": !!onRowClick || showSelection }, row.getVisibleCells().map((cell) => {
                             const value = flexRender(cell.column.columnDef.cell, {
                                 ...cell.getContext(),
                                 localValue: rowState[row.id]?.[cell.column.id],