@stella-source/stellasource-dsl 3.1.5 → 3.2.0

package/dist/cjs/index.js

@@ -17064,6 +17064,9 @@ const RequiredIcon = styled(StellaIcon) `
 `;
 const ToolTipIcon = styled(Tooltip) `
   margin-left: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 const LabelComponent = styled.label `
   font-family: "Inter", sans-serif;
@@ -21409,7 +21412,7 @@ const KebabAlign = styled.div `
 `;
 // EmptyTableState
 const EmptyTableCell = styled.td `
-  padding: 10rem;
+  padding: 5rem;
   background-color: white;
 `;
 const EmptyTableSection = styled.section `
@@ -21494,6 +21497,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;
@@ -21506,6 +21521,9 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     const [tempFilters, setTempFilters] = a$m.useState([]);
     const [currentAppliedFilters, setCurrentAppliedFilters] = a$m.useState([]);
     const [filterOptions, setFilterOptions] = a$m.useState([]);
+    const displayOptions = serverSide
+        ? filterOptions
+        : normalizeOptions(Array.from(header.column.getFacetedUniqueValues().keys()));
     const [textAlign, setTextAlign] = a$m.useState("left");
     const [handleSave, { flush }] = useDebounceCallback((value) => {
         column?.setFilterValue([value]);
@@ -21514,7 +21532,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
         onFilterApply?.();
     }, 300);
     a$m.useEffect(() => {
-        setFilterOptions(meta?.filterOptions || []);
+        setFilterOptions(normalizeOptions(meta?.filterOptions || []));
     }, [meta]);
     const toggleMenu = (e) => {
         e.stopPropagation();
@@ -21595,43 +21613,39 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                     }, onBlur: () => !serverSide && flush(), endIcon: "search", value: tempFilters?.[0] }))),
                             (meta?.filterMode === "multiSelect" ||
                                 !meta?.filterMode) && (a$m.createElement(MenuItem, { key: "select-all" },
-                                a$m.createElement(Checkbox, { id: "all-checkbox", name: "all-checkbox", checked: meta?.filterOptions?.every((item) => tempFilters?.includes(item)), onChange: () => {
+                                a$m.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$m.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$m.createElement(MenuItemOption, { key: item, id: `${item}-button`, onClick: () => {
-                                            setCurrentAppliedFilters([item]);
-                                            column?.setFilterValue([item]);
+                                    return (a$m.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$m.createElement(MenuItem, { key: item },
-                                        a$m.createElement(Checkbox, { id: `${item}-checkbox`, name: `${item}-checkbox`, checked: tempFilters?.includes(item), onChange: () => {
+                                    return (a$m.createElement(MenuItem, { key: key },
+                                        a$m.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$m.createElement(FilterLabelTransparent, null, item),
-                                        a$m.createElement(FilterBoxLabel, { htmlFor: `${item}-checkbox` }, item)));
+                                        a$m.createElement(FilterLabelTransparent, null, value),
+                                        a$m.createElement(FilterBoxLabel, { htmlFor: `${key}-checkbox` }, value)));
                                 }
                             })),
                         (meta?.filterMode === "multiSelect" ||
@@ -21901,11 +21915,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: {
@@ -22154,6 +22166,9 @@ const PaymentStatusIcon = styled(StellaIcon) `
 `;
 const PaymentStatusLabel = styled.span `
   line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `;
 
 var PaymentStatusVariant;
@@ -22290,7 +22305,7 @@ const NotificationBubble = styled.span `
 const Tab = ({ id, className, onClick, htmlProps, label, variant = "light", active = false, notifications, }) => {
     return (a$m.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps },
         label,
-        notifications && notifications > 0 && (a$m.createElement(NotificationBubble, { "$isActive": active }, notifications))));
+        !!(notifications && notifications > 0) && (a$m.createElement(NotificationBubble, { "$isActive": active }, notifications))));
 };
 
 const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant = "light", isPill, }) => {
@@ -22316,6 +22331,9 @@ const OrderStatusIcon = styled(StellaIcon) `
 `;
 const OrderStatusLabel = styled.span `
   line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `;
 
 var OrderStatusVariant;
@@ -22341,9 +22359,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:
@@ -22359,7 +22375,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",