@stella-source/stellasource-dsl 0.2.2 → 0.2.4

package/dist/cjs/index.js

@@ -16799,7 +16799,6 @@ const variantSelector = (variant) => {
         }
 
         &:disabled {
-          background-color: var(--DSL-button-st-background-disabled);
           border: 1px solid var(--DSL-button-disabled);
           color: var(--DSL-button-disabled);
           & svg {
@@ -16833,7 +16832,6 @@ const variantSelector = (variant) => {
         }
 
         &:disabled {
-          background-color: var(--DSL-button-st-background-disabled);
           color: var(--DSL-button-disabled);
           & svg {
             fill: var(--DSL-button-disabled);
@@ -16873,6 +16871,7 @@ const ButtonComponent = styled.button.attrs({
   }
 
   /* Button CSS Variables */
+  /* p = primary, st = secondary, tertiary */
   --DSL-button-branding: ${Styles.color.core.primary};
   --DSL-button-hover: ${Styles.color.blue.darkNavy};
   --DSL-button-active: ${Styles.color.blue.darkNavy};
@@ -17037,7 +17036,7 @@ const IconContainer = styled.div `
 `;
 
 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$j.createElement(Wrapper, { "data-testId": dataTestId, className: className },
+    return (a$j.createElement(Wrapper, { "data-testid": dataTestId, className: className },
         a$j.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }),
         a$j.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "data-testid": "text-input-wrapper" },
             leftCategory && a$j.createElement(Category, null, leftCategory),
@@ -17127,19 +17126,6 @@ const formatDynamicNumbersWithCommas = (num, decimalPlaces) => {
         })}${decimalEnding ? "." : ""}${decimalZero ? "0" : ""}`
         : "";
 };
-const formatNumberWithDecimals = (num, decimalPlaces = 2, isCurrency = false) => {
-    if (num === null || num === undefined || num === "")
-        return "";
-    const parsed = Number(num);
-    if (isNaN(parsed))
-        return "";
-    return parsed.toLocaleString("en-US", {
-        style: isCurrency ? "currency" : "decimal",
-        currency: isCurrency ? "USD" : undefined,
-        minimumFractionDigits: decimalPlaces,
-        maximumFractionDigits: decimalPlaces,
-    });
-};
 
 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, }) => {
     const containerProps = {
@@ -20643,8 +20629,8 @@ const SelectCaret = styled(StellaIcon) `
   position: absolute;
   right: 0;
   pointer-events: none;
-  color: ${Styles.color.blue.primary};
-  fill: ${Styles.color.blue.primary};
+  color: ${Styles.color.core.primary};
+  fill: ${Styles.color.core.primary};
   transform: rotate(180deg);
 `;
 const RowInfo = styled.div `
@@ -20762,11 +20748,11 @@ const HeaderCell = styled.th `
     : "unset"};
   z-index: ${({ $isPinnedLeft, $isPinnedRight }) => $isPinnedLeft || $isPinnedRight ? 2 : 1};
   text-align: inherit;
-  padding: 8px 12px;
+  padding: 0px 12px;
   font-weight: 400;
   font-size: 14px;
   color: ${Styles.color.grey.charcoal};
-  border-bottom: 1px solid ${Styles.color.grey.medium};
+  border-bottom: 1px solid ${Styles.color.grey.light};
   background-color: ${Styles.color.grey.pale};
   transition: box-shadow 0.3s ease-out;
   & button {
@@ -20793,6 +20779,7 @@ const HeaderCellPosition = styled.div `
 `;
 const TableWrapper = styled.div `
   width: 100%;
+  position: relative;
   overflow-x: hidden;
   border: 1px solid ${Styles.color.grey.light};
   border-radius: 5px;
@@ -20801,7 +20788,7 @@ const TableWrapper = styled.div `
 `;
 const TableWrapperScroll = styled.div `
   width: 100%;
-  overflow-x: ${({ $filterMenuOpen }) => ($filterMenuOpen ? "hidden" : "auto")};
+  overflow-x: ${({ $stopScroll }) => ($stopScroll ? "hidden" : "auto")};
 `;
 const StyledTable = styled.table `
   width: 100%;
@@ -20840,6 +20827,11 @@ const HeaderRow = styled.tr `
 const CellRow = styled.tr `
   min-height: 50px;
   height: 50px;
+  &:hover {
+    & > td {
+      background-color: ${Styles.color.blue.pale};
+    }
+  }
 `;
 const FilterMenu = styled.div `
   position: absolute;
@@ -20880,10 +20872,10 @@ const BodyCell = styled.td `
     : "unset"};
   z-index: ${({ $isPinnedLeft, $isPinnedRight }) => $isPinnedLeft || $isPinnedRight ? 1 : 0};
   background: white;
-  padding: 8px 12px;
+  padding: 0px 12px;
   font-size: 12px;
   color: ${Styles.color.grey.charcoal};
-  border-bottom: ${({ $isLastRow }) => $isLastRow ? "none" : `1px solid ${Styles.color.grey.medium}`};
+  border-bottom: ${({ $isLastRow }) => $isLastRow ? "none" : `1px solid ${Styles.color.grey.light}`};
   transition: box-shadow 0.3s ease-out;
 `;
 const MenuButton = styled.button `
@@ -21031,12 +21023,57 @@ const LoadingShimmer = styled.div `
   }
 `;
 const CustomPagination = styled(Pagination) `
-  border-top: 1px solid ${Styles.color.grey.medium};
+  border-top: 1px solid ${Styles.color.grey.light};
 `;
 const KebabAlign = styled.div `
   display: flex;
   justify-content: end;
 `;
+// EmptyTableState
+const EmptyTableCell = styled.td `
+  padding: 10rem;
+  background-color: white;
+`;
+const EmptyTableSection = styled.section `
+  width: ${({ $size }) => ($size === "small" ? "360px" : "450px")};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  gap: 20px;
+  top: 50px;
+  left: 0;
+  right: 0;
+  margin: 80px auto 0;
+`;
+const EmptyTableHeader = styled.p `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Styles.color.grey.smoke};
+  font-size: 22px;
+  font-weight: 400;
+  text-align: center;
+  line-height: 22px;
+  margin-bottom: 0px;
+`;
+const EmptyTableSubHeader = styled.p `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Styles.color.grey.shadow};
+  font-size: 18px;
+  text-align: center;
+  font-weight: 400;
+  margin-top: 0px;
+`;
+const ClearFilterButtonRow = styled.div `
+  display: "flex";
+  justify-content: "center";
+  align-items: "center";
+  text-align: "center";
+`;
 
 const IndeterminateCheckbox = ({ isIndeterminate, isChecked, onChange, }) => {
     const ref = a$j.useRef(null);
@@ -21115,7 +21152,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
         a$j.createElement(HeaderCellPosition, { style: {
                 justifyContent: textAlign === "left" ? "start" : "end",
             } },
-            textAlign === "left" && (a$j.createElement("span", null, flexRender(columnDef.header, header.getContext()))),
+            textAlign === "left" && (a$j.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))),
             header.column.getCanFilter() && (a$j.createElement("div", { style: {
                     display: "flex",
                     alignItems: "center",
@@ -21177,7 +21214,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                 setCurrentAppliedFilters([]);
                             } }, "Clear Filter"))), document.body))),
             header.column.getCanSort() && (a$j.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) })),
-            textAlign === "right" && (a$j.createElement("span", null, flexRender(columnDef.header, header.getContext()))))));
+            textAlign === "right" && (a$j.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))))));
 };
 
 const RowOptions = ({ row, selectionMenuItems }) => {
@@ -21222,12 +21259,21 @@ const RowOptions = ({ row, selectionMenuItems }) => {
             })), document.body)));
 };
 
+const EmptyTableState = ({ id, className, header, subHeader, showClearFilterButton, colSpan, size = "large", onClearFilters, }) => {
+    return (a$j.createElement("tr", null,
+        a$j.createElement(EmptyTableCell, { colSpan: colSpan },
+            a$j.createElement(EmptyTableSection, { "$size": size, id: id, className: className },
+                a$j.createElement(EmptyTableHeader, null, header),
+                a$j.createElement(EmptyTableSubHeader, null, subHeader),
+                a$j.createElement(ClearFilterButtonRow, null, showClearFilterButton && (a$j.createElement(StellaButton, { label: "Clear Filters", onClick: () => onClearFilters?.(), variant: "secondary" })))))));
+};
+
 // DataTable.tsx
 function Table({ columns, data, isLoading, serverSide = false, onPageChange, onSortChange, onFilterChange, onRowSelect, rowStatuses, showSelection = false, showRowOptions = false, showPagination = true, variant, paginationDetails = {
     startingPage: 1,
     rowsPerPage: 10,
     totalRows: data.length,
-}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, }) {
+}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, }) {
     const [rowSelection, setRowSelection] = a$j.useState({});
     const [selectedRows] = a$j.useState({});
     const [pageIndex, setPageIndex] = a$j.useState(paginationDetails?.startingPage);
@@ -21253,7 +21299,11 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     }, [rowStatuses]);
     a$j.useEffect(() => {
         setTotalData(paginationDetails?.totalRows);
-    }, [paginationDetails.totalRows, data]);
+        setPagination({
+            pageIndex: paginationDetails?.startingPage - 1,
+            pageSize: paginationDetails?.rowsPerPage || 10,
+        });
+    }, [paginationDetails, data]);
     a$j.useEffect(() => {
         const el = scrollRef?.current;
         if (!el)
@@ -21374,7 +21424,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
     };
     return (a$j.createElement(TableWrapper, { className: className, id: id, "data-testid": dataTestId, "data-auto": dataAuto },
-        a$j.createElement(TableWrapperScroll, { "$filterMenuOpen": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a$j.createElement("div", null,
+        a$j.createElement(TableWrapperScroll, { "$stopScroll": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a$j.createElement("div", null,
             a$j.createElement("div", { style: {
                     width: "100%",
                     maxWidth: "100%",
@@ -21409,39 +21459,45 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                         }));
                     } }));
             }))))),
-            a$j.createElement("tbody", null, table.getRowModel().rows.map((row) => (a$j.createElement(CellRow, { key: row.id }, row.getVisibleCells().map((cell) => {
-                const value = flexRender(cell.column.columnDef.cell, {
-                    ...cell.getContext(),
-                    localValue: rowState[row.id]?.[cell.column.id],
-                    onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
-                });
-                const meta = cell.column.columnDef.meta;
-                return (a$j.createElement(BodyCell, { key: cell.id, style: {
-                        width: cell.column.getSize(),
-                        textAlign: meta?.cellAlign ||
-                            (typeof cell.getValue() === "number" ||
-                                meta?.dataType === "number"
-                                ? "right"
-                                : "left"),
-                        boxShadow: scrollState.atLeft &&
-                            cell.column.getIsPinned() === "left"
-                            ? "none"
-                            : scrollState.atRight &&
-                                cell.column.getIsPinned() === "right"
+            a$j.createElement("tbody", null,
+                table.getRowModel().rows.length === 0 && (a$j.createElement(EmptyTableState, { header: emptyTableState.header, subHeader: emptyTableState.subHeader, showClearFilterButton: emptyTableState.showClearFilterButton, onClearFilters: resetTable, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
+                table.getRowModel().rows.map((row) => (a$j.createElement(CellRow, { key: row.id }, row.getVisibleCells().map((cell) => {
+                    const value = flexRender(cell.column.columnDef.cell, {
+                        ...cell.getContext(),
+                        localValue: rowState[row.id]?.[cell.column.id],
+                        onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
+                    });
+                    const meta = cell.column.columnDef.meta;
+                    return (a$j.createElement(BodyCell, { key: cell.id, style: {
+                            width: cell.column.getSize(),
+                            textAlign: meta?.cellAlign ||
+                                (typeof cell.getValue() === "number" ||
+                                    meta?.dataType === "number"
+                                    ? "right"
+                                    : "left"),
+                            boxShadow: scrollState.atLeft &&
+                                cell.column.getIsPinned() === "left"
                                 ? "none"
-                                : undefined,
-                        backgroundColor: table
-                            .getSelectedRowModel()
-                            .rows.find((r) => r.id === row.id)
-                            ? "#EBF0FA"
-                            : rowStatusesState?.[row.id] === "action-pending"
-                                ? "#FFFDEB"
-                                : rowStatusesState?.[row.id] === "completed"
-                                    ? "#F5F5F5"
-                                    : "white",
-                    }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": row.index === table.getRowModel().rows.length - 1 }, value));
-            })))))))),
-        showPagination && paginationDetails?.totalRows && (a$j.createElement(CustomPagination, { totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
+                                : scrollState.atRight &&
+                                    cell.column.getIsPinned() === "right"
+                                    ? "none"
+                                    : undefined,
+                            backgroundColor: table
+                                .getSelectedRowModel()
+                                .rows.find((r) => r.id === row.id)
+                                ? "#EBF0FA"
+                                : rowStatusesState?.[row.id] === "action-pending"
+                                    ? "#FFFDEB"
+                                    : rowStatusesState?.[row.id] === "completed"
+                                        ? "#F5F5F5"
+                                        : "",
+                        }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": serverSide
+                            ? row.index === table.getRowModel().rows.length - 1
+                            : row.index -
+                                pagination.pageSize * pagination.pageIndex ===
+                                table.getRowModel().rows.length - 1 }, value));
+                })))))))),
+        showPagination && paginationDetails?.totalRows > 0 && (a$j.createElement(CustomPagination, { totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                 setPageIndex(page);
                 setPagination((prev) => ({
                     ...prev,
@@ -21512,12 +21568,12 @@ const Sync = ({ dataTestId, onClick, className, id, showTime = false, labelPosit
         a$j.createElement(CustomLabel, { htmlFor: id, id: `${id}-label`, labelValue: showTime ? `Last Updated at ${time}` : "" })));
 };
 
-var QuoteVariants;
+exports.QuoteVariants = void 0;
 (function (QuoteVariants) {
     QuoteVariants["TOTAL_PRICE"] = "total-price";
     QuoteVariants["TOTAL_WEIGHT"] = "total-weight";
-})(QuoteVariants || (QuoteVariants = {}));
-var QuoteCategory;
+})(exports.QuoteVariants || (exports.QuoteVariants = {}));
+exports.QuoteCategory = void 0;
 (function (QuoteCategory) {
     QuoteCategory["ITEM"] = "/item";
     QuoteCategory["HOUR"] = "/hr";
@@ -21525,11 +21581,11 @@ var QuoteCategory;
     QuoteCategory["LBS"] = "lbs";
     QuoteCategory["KG"] = "kg";
     QuoteCategory["TON"] = "ton";
-})(QuoteCategory || (QuoteCategory = {}));
-var TableUnitsAndTotalsLeftCategory;
+})(exports.QuoteCategory || (exports.QuoteCategory = {}));
+exports.TableUnitsAndTotalsLeftCategory = void 0;
 (function (TableUnitsAndTotalsLeftCategory) {
     TableUnitsAndTotalsLeftCategory["US_CURRENCY"] = "$";
-})(TableUnitsAndTotalsLeftCategory || (TableUnitsAndTotalsLeftCategory = {}));
+})(exports.TableUnitsAndTotalsLeftCategory || (exports.TableUnitsAndTotalsLeftCategory = {}));
 
 const Container = styled.div `
   display: flex;
@@ -21563,16 +21619,12 @@ const SubHeaderText = styled.span `
   line-height: normal;
 `;
 
-const TableUnitsAndTotals = ({ id, className, value, subValue, variant, leftCategory = TableUnitsAndTotalsLeftCategory.US_CURRENCY, rightCategory, }) => {
-    const isWeight = variant === QuoteVariants.TOTAL_WEIGHT;
+const TableUnitsAndTotals = ({ id, className, value, subValue, variant, leftCategory = exports.TableUnitsAndTotalsLeftCategory.US_CURRENCY, rightCategory, }) => {
+    const isWeight = variant === exports.QuoteVariants.TOTAL_WEIGHT;
     const leftCategoryValue = isWeight ? "" : leftCategory;
-    const header = (leftCategoryValue ?? "") +
-        formatNumberWithDecimals(value, 2, false) +
-        (rightCategory && isWeight ? ` ${rightCategory}` : "");
-    const subHeader = subValue !== undefined
-        ? (leftCategoryValue ?? "") +
-            formatNumberWithDecimals(subValue, 3, false) +
-            (rightCategory ? ` ${rightCategory}` : "")
+    const header = `${leftCategoryValue ?? ""}${value} ${rightCategory && isWeight ? ` ${rightCategory}` : ""}`;
+    const subHeader = subValue
+        ? `${leftCategoryValue ?? ""}${subValue} ${rightCategory ? ` ${rightCategory}` : ""}`
         : undefined;
     return (a$j.createElement(Container, { id: id, className: className },
         a$j.createElement(Column, { "$align": "right" },