@stella-source/stellasource-dsl 3.1.6 → 3.2.0

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

@@ -59,7 +59,10 @@ export interface CustomColumnMeta {
     cellAlign?: "left" | "right";
     dataType?: "string" | "number";
     pin?: "left" | "right";
-    filterOptions?: string[] | number[];
+    filterOptions?: string[] | number[] | {
+        key?: string;
+        value?: string;
+    }[];
     filterMode?: "singleSelect" | "multiSelect" | "search";
 }
 export type RowStatus = "action-pending" | "completed";

package/dist/cjs/types/index.d.ts

@@ -24,4 +24,5 @@ import "./shared/tokens/tokens.css";
 import OrderStatus from "./components/OrderStatus/OrderStatus";
 /**Exports */
 export type { StellaIconDefinition } from "./components/StellaIcon/types";
+export type { CustomColumnMeta } from "./components/Table/types";
 export { Tabs, Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, Table, Pagination, Sync, TableUnitsAndTotals, StellaButtonVariant, PaymentStatus, OrderStatus, Styles, };

package/dist/esm/index.esm.js

@@ -21392,7 +21392,7 @@ const KebabAlign = styled.div `
 `;
 // EmptyTableState
 const EmptyTableCell = styled.td `
-  padding: 10rem;
+  padding: 5rem;
   background-color: white;
 `;
 const EmptyTableSection = styled.section `
@@ -21477,6 +21477,18 @@ function useDebounceCallback(callback, delay) {
     return [debounced, { flush, cancel }];
 }
 
+const normalizeOptions = (raw) => {
+    return raw
+        .map((item) => {
+        if (typeof item === "string" || typeof item === "number") {
+            return { key: item.toString(), value: item.toString() };
+        }
+        const key = item.key ?? item.value ?? "";
+        const value = item.value ?? item.key ?? "";
+        return { key, value };
+    })
+        .filter((o) => o.key && o.value);
+};
 const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition, onFilterMenuInteraction, onFilterApply, }) => {
     const column = header.column;
     const columnDef = column.columnDef;
@@ -21489,6 +21501,9 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     const [tempFilters, setTempFilters] = useState([]);
     const [currentAppliedFilters, setCurrentAppliedFilters] = useState([]);
     const [filterOptions, setFilterOptions] = useState([]);
+    const displayOptions = serverSide
+        ? filterOptions
+        : normalizeOptions(Array.from(header.column.getFacetedUniqueValues().keys()));
     const [textAlign, setTextAlign] = useState("left");
     const [handleSave, { flush }] = useDebounceCallback((value) => {
         column?.setFilterValue([value]);
@@ -21497,7 +21512,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
         onFilterApply?.();
     }, 300);
     useEffect(() => {
-        setFilterOptions(meta?.filterOptions || []);
+        setFilterOptions(normalizeOptions(meta?.filterOptions || []));
     }, [meta]);
     const toggleMenu = (e) => {
         e.stopPropagation();
@@ -21578,43 +21593,39 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                     }, onBlur: () => !serverSide && flush(), endIcon: "search", value: tempFilters?.[0] }))),
                             (meta?.filterMode === "multiSelect" ||
                                 !meta?.filterMode) && (a__default.createElement(MenuItem, { key: "select-all" },
-                                a__default.createElement(Checkbox, { id: "all-checkbox", name: "all-checkbox", checked: meta?.filterOptions?.every((item) => tempFilters?.includes(item)), onChange: () => {
+                                a__default.createElement(Checkbox, { id: "all-checkbox", name: "all-checkbox", checked: displayOptions?.every((opt) => tempFilters?.includes(opt.key)), onChange: () => {
                                         setTempFilters((prev) => {
-                                            if (prev?.length === meta?.filterOptions?.length) {
+                                            if (prev?.length === displayOptions?.length) {
                                                 return [];
                                             }
                                             else {
-                                                return [...meta?.filterOptions];
+                                                return displayOptions.map((opt) => opt.key);
                                             }
                                         });
                                     } }),
                                 a__default.createElement(FilterBoxLabel, { htmlFor: "all-checkbox" }, "Select All"))),
-                            (serverSide
-                                ? filterOptions
-                                : Array.from(header.column.getFacetedUniqueValues().keys()))?.map((item) => {
+                            displayOptions?.map(({ key, value }, index) => {
                                 if (meta?.filterMode === "singleSelect") {
-                                    return (a__default.createElement(MenuItemOption, { key: item, id: `${item}-button`, onClick: () => {
-                                            setCurrentAppliedFilters([item]);
-                                            column?.setFilterValue([item]);
+                                    return (a__default.createElement(MenuItemOption, { key: `${key}-${index}`, id: `${key}-button`, onClick: () => {
+                                            setCurrentAppliedFilters([key]);
+                                            column?.setFilterValue([key]);
                                             showFilterMenu(false);
                                             onFilterApply?.();
-                                        }, "$applied": tempFilters?.includes(item) }, item));
+                                        }, "$applied": tempFilters?.includes(key) }, value));
                                 }
                                 if (meta?.filterMode === "multiSelect" ||
                                     !meta?.filterMode) {
-                                    return (a__default.createElement(MenuItem, { key: item },
-                                        a__default.createElement(Checkbox, { id: `${item}-checkbox`, name: `${item}-checkbox`, checked: tempFilters?.includes(item), onChange: () => {
+                                    return (a__default.createElement(MenuItem, { key: key },
+                                        a__default.createElement(Checkbox, { id: `${key}-checkbox`, name: `${key}-checkbox`, checked: tempFilters?.includes(key), onChange: () => {
                                                 setTempFilters((prev) => {
-                                                    if (prev?.includes(item)) {
-                                                        return prev.filter((i) => i !== item);
-                                                    }
-                                                    else {
-                                                        return [...prev, item];
-                                                    }
+                                                    if (prev?.includes(key))
+                                                        return prev.filter((i) => i !== key);
+                                                    else
+                                                        return [...prev, key];
                                                 });
                                             } }),
-                                        a__default.createElement(FilterLabelTransparent, null, item),
-                                        a__default.createElement(FilterBoxLabel, { htmlFor: `${item}-checkbox` }, item)));
+                                        a__default.createElement(FilterLabelTransparent, null, value),
+                                        a__default.createElement(FilterBoxLabel, { htmlFor: `${key}-checkbox` }, value)));
                                 }
                             })),
                         (meta?.filterMode === "multiSelect" ||
@@ -21884,11 +21895,9 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                 });
             }
             setColumnFilters(next);
-            // Also keep your simple `filters` map in sync (optional)
             const map = {};
             next.forEach((f) => (map[f.id] = f.value));
             setFilters(map);
-            // Inform parent (useful for server-side)
             onFilterChange?.(next);
         },
         filterFns: {
@@ -22137,6 +22146,9 @@ const PaymentStatusIcon = styled(StellaIcon) `
 `;
 const PaymentStatusLabel = styled.span `
   line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `;
 
 var PaymentStatusVariant;
@@ -22273,7 +22285,7 @@ const NotificationBubble = styled.span `
 const Tab = ({ id, className, onClick, htmlProps, label, variant = "light", active = false, notifications, }) => {
     return (a__default.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps },
         label,
-        notifications && notifications > 0 && (a__default.createElement(NotificationBubble, { "$isActive": active }, notifications))));
+        !!(notifications && notifications > 0) && (a__default.createElement(NotificationBubble, { "$isActive": active }, notifications))));
 };
 
 const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant = "light", isPill, }) => {
@@ -22299,6 +22311,9 @@ const OrderStatusIcon = styled(StellaIcon) `
 `;
 const OrderStatusLabel = styled.span `
   line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `;
 
 var OrderStatusVariant;
@@ -22324,9 +22339,7 @@ const getOrderStatusLabel = (variant, isPurchaser) => {
         case OrderStatusVariant.VIEW_PRICING:
             return isPurchaser ? "View Quote" : "Quoted";
         case OrderStatusVariant.ACTION_REQUIRED:
-            return isPurchaser ? "Prices Pending" : "Action Required";
-        case OrderStatusVariant.ORDER_PLACED:
-            return "Awaiting Acknowledgement";
+            return "Action Required";
         case OrderStatusVariant.DECLINED:
             return "Declined to Purchase";
         case OrderStatusVariant.EXPIRED:
@@ -22342,7 +22355,7 @@ const OrderStatus = ({ variant, id, className, isPurchaser, }) => {
     const STATUS_ICON_MAP = {
         InfoNeeded: "warning",
         ViewPricing: "eye",
-        ActionRequired: isPurchaser ? "broadcast" : "warning",
+        ActionRequired: "warning",
         OrderPlaced: "list-checks",
         OrderAcknowledged: "check-square",
         OrderCanceled: "x-circle",