@shipengine/elements 2.21.0 → 2.23.0

package/cjs/components/grid-controller/grid-controller.cjs

@@ -21,15 +21,33 @@ const GridController = ({
   data,
   footerContent,
   onRowClick,
+  isLoading: _isLoading = false,
   useCheckboxes: _useCheckboxes = false,
   filters,
   emptyContent
 }) => {
   var _a, _b, _c;
   const [isChecked, setIsChecked] = React.useState((_a = data === null || data === void 0 ? void 0 : data.map(() => false)) !== null && _a !== void 0 ? _a : []);
-  const getColumnHeaderContents = () => {
-    return columns.map(column => column.headerContent);
-  };
+  const columnHeaderContents = React.useMemo(() => columns.map(column => column.headerContent), [columns]);
+  const loadingRows = React.useMemo(() => {
+    const items = [];
+    for (let index = 0; index < 5; index++) {
+      items.push(jsxRuntime.jsx(giger.TableRow, Object.assign({
+        css: gridController_styles.styles.skeletonTableRow,
+        withHover: false
+      }, {
+        children: columnHeaderContents.map((item, index) => jsxRuntime.jsx(giger.TableBodyCell, {
+          children: item && jsxRuntime.jsx(giger.Skeleton, {
+            animation: giger.SkeletonAnimation.WAVE,
+            height: 16,
+            variant: giger.SkeletonVariant.RECT,
+            width: 72
+          })
+        }, index))
+      }), `loading-row-${index}`));
+    }
+    return items;
+  }, [columnHeaderContents]);
   const isAllChecked = React.useMemo(() => isChecked.length > 0 && isChecked.every(check => check), [isChecked]);
   const isIndeterminate = React.useMemo(() => isChecked.some(check => check), [isChecked]);
   const toggleCheckbox = React.useCallback(index => {
@@ -55,7 +73,7 @@ const GridController = ({
       children: filters
     })), data.length === 0 && emptyContent ? emptyContent : jsxRuntime.jsx(giger.Table, Object.assign({
       "data-testid": "grid",
-      footer: footerContent && jsxRuntime.jsx(giger.TableFooter, Object.assign({
+      footer: footerContent && !_isLoading && jsxRuntime.jsx(giger.TableFooter, Object.assign({
         css: gridController_styles.styles.tableFooter
       }, {
         children: footerContent
@@ -70,7 +88,7 @@ const GridController = ({
               indeterminate: (_c = !isAllChecked && isIndeterminate) !== null && _c !== void 0 ? _c : false,
               onChange: event => toggleAllCheckboxes(event.target.checked)
             })
-          })), getColumnHeaderContents().map((header, index) => jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+          })), columnHeaderContents.map((header, index) => jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
             css: gridController_styles.styles.tableHeader
           }, {
             children: header
@@ -81,27 +99,41 @@ const GridController = ({
       tableStyles: gridController_styles.styles.table
     }, {
       children: jsxRuntime.jsx(giger.TableBody, {
-        children: data.map((row, index) => {
+        children: _isLoading ? loadingRows : data.map((row, rowIndex) => {
           var _a;
-          const allowOnClick = !!onRowClick && !(row === null || row === void 0 ? void 0 : row.disableOnRowClick);
+          const allowOnClick = !!onRowClick && !(row === null || row === void 0 ? void 0 : row.disableOnRowClick) || !row.isLoading;
           return jsxRuntime.jsxs(giger.TableRow, Object.assign({
+            css: row.isLoading && gridController_styles.styles.skeletonTableRow,
             "data-testid": "grid-row",
-            onClick: allowOnClick ? () => onRowClick(row) : undefined,
-            withHover: !(row === null || row === void 0 ? void 0 : row.disableOnRowClick)
+            onClick: allowOnClick ? () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row) : undefined,
+            withHover: allowOnClick
           }, {
             children: [_useCheckboxes && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
               css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
             }, {
               children: jsxRuntime.jsx(giger.Checkbox, {
-                checked: (_a = isChecked[index]) !== null && _a !== void 0 ? _a : false,
-                onChange: () => toggleCheckbox(index)
+                checked: (_a = isChecked[rowIndex]) !== null && _a !== void 0 ? _a : false,
+                onChange: () => toggleCheckbox(rowIndex)
               })
-            })), columns.filter(column => column.renderCellContent).map((column, index) => jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
-              css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
-            }, {
-              children: column.renderCellContent(row)
-            }), index))]
-          }), index);
+            })), columns.filter(column => column.renderCellContent).map((column, index) => {
+              if (row.isLoading) {
+                return jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+                  css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
+                }, {
+                  children: jsxRuntime.jsx(giger.Skeleton, {
+                    animation: giger.SkeletonAnimation.WAVE,
+                    height: 24,
+                    variant: giger.SkeletonVariant.RECT
+                  })
+                }), index);
+              }
+              return jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+                css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
+              }, {
+                children: column.renderCellContent(row)
+              }), index);
+            })]
+          }), rowIndex);
         })
       })
     }))]

package/cjs/components/grid-controller/grid-controller.styles.cjs

@@ -9,8 +9,12 @@ const styles = styles$1.createStyles({
     width: styles$1.scopeTheme(theme).spacing(6)
   }),
   filters: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.white,
     borderBottom: `1px solid ${styles$1.scopeTheme(theme).palette.gray[200]}`,
-    padding: `${styles$1.scopeTheme(theme).spacing()}px ${styles$1.scopeTheme(theme).spacing(2)}px`
+    padding: styles$1.scopeTheme(theme).spacing()
+  }),
+  skeletonTableRow: () => ({
+    height: "68px"
   }),
   table: {
     tableLayout: "initial"
@@ -26,7 +30,8 @@ const styles = styles$1.createStyles({
     border: "none"
   },
   wrapper: theme => Object.assign({
-    height: "auto"
+    height: "auto",
+    overflow: "hidden"
   }, styles$1.scopeTheme(theme).getComponentOverride("Table"))
 });
 

package/cjs/components/grid-controller/grid-footer.cjs

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var reactI18next = require('react-i18next');
 var giger = require('@shipengine/giger');
+var gridFooter_styles = require('./grid-footer.styles.cjs');
+var loader = require('../loader/loader.cjs');
 
 /**
  * @internal
@@ -21,30 +23,43 @@ const GridFooter = ({
   pageSize,
   total,
   showPagination,
-  onPageChange
+  onPageChange,
+  isLoadingMore,
+  hasMoreUnfetchedResults
 }) => {
   const firstElementInPage = (page - 1) * pageSize + 1;
   const lastElementInPage = Math.min(page * pageSize, total);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(giger.Typography, Object.assign({
-      component: "span",
-      variant: "body2"
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: gridFooter_styles.styles.wrapper
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: gridFooter_styles.styles.countWrapper
     }, {
-      children: jsxRuntime.jsx(reactI18next.Trans, {
-        components: [jsxRuntime.jsx("b", {})],
-        count: total,
-        i18nKey: "common:grid.row-count",
-        values: {
-          firstIndex: firstElementInPage,
-          lastIndex: lastElementInPage
-        }
-      })
+      children: [firstElementInPage > 0 && jsxRuntime.jsx(giger.Typography, Object.assign({
+        component: "span",
+        variant: "body2"
+      }, {
+        children: jsxRuntime.jsx(reactI18next.Trans, {
+          components: [jsxRuntime.jsx("b", {})],
+          count: total,
+          i18nKey: hasMoreUnfetchedResults && total > 1 ? "common:grid.row-count-plus_other" : "common:grid.row-count",
+          values: {
+            firstIndex: firstElementInPage,
+            lastIndex: lastElementInPage
+          }
+        })
+      })), isLoadingMore && jsxRuntime.jsx("div", {
+        children: jsxRuntime.jsx(loader.Loader, {
+          css: gridFooter_styles.styles.loader,
+          size: giger.SpinnerSize.SIZE_SMALL
+        })
+      })]
     })), showPagination && jsxRuntime.jsx(giger.Pagination, {
       currentPage: page,
       onPageChange: onPageChange,
       totalPages: pages
     })]
-  });
+  }));
 };
 
 exports.GridFooter = GridFooter;

package/cjs/components/grid-controller/grid-footer.styles.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  countWrapper: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1)
+  }),
+  loader: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray.main
+  }),
+  wrapper: {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%"
+  }
+});
+
+exports.styles = styles;

package/cjs/components/grid-controller/index.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var gridController = require('./grid-controller.cjs');
 var cellFormattedDate = require('./cell-formatted-date.cjs');
 var gridFooter = require('./grid-footer.cjs');
-var sortableHeader = require('./sortable-header.cjs');
+var sortableHeader = require('./sortable-header/sortable-header.cjs');
 
 
 

package/cjs/components/grid-controller/sortable-header/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sortableHeader = require('./sortable-header.cjs');
+
+
+
+exports.SortableHeader = sortableHeader.SortableHeader;

package/cjs/components/grid-controller/{sortable-header.cjs → sortable-header/sortable-header.cjs}

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var giger = require('@shipengine/giger');
 var gigerTheme = require('@shipengine/giger-theme');
+var sortableHeader_styles = require('./sortable-header.styles.cjs');
 
 /**
  * A reusable component for creating sortable table headers
@@ -23,17 +24,14 @@ const SortableHeader = ({
   };
   return jsxRuntime.jsxs("span", Object.assign({
     "aria-label": headerText,
-    css: {
-      alignItems: "center",
-      cursor: "pointer",
-      display: "flex"
-    },
+    css: sortableHeader_styles.styles.span,
     onClick: onToggleSort,
     onKeyDown: handleKeyDown,
     role: "button",
     tabIndex: 0
   }, {
     children: [headerText, jsxRuntime.jsx(giger.Icon, {
+      css: sortableHeader_styles.styles.icon,
       name: sortDirection === "desc" ? gigerTheme.IconNames.SORT_BOTTOM : gigerTheme.IconNames.SORT_TOP,
       size: giger.IconSize.SIZE_SMALL
     })]

package/cjs/components/grid-controller/sortable-header/sortable-header.styles.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  icon: theme => ({
+    paddingLeft: styles$1.scopeTheme(theme).spacing()
+  }),
+  span: () => ({
+    alignItems: "center",
+    cursor: "pointer",
+    display: "flex"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/grid-filters/components/created-date-filter/created-date-filter.cjs

@@ -24,6 +24,7 @@ var elementsContextProvider = require('../../../../elements-provider/elements-co
  * @see {@link CreatedDateFilterProps | The props for the `<CreatedDateFilter />` component}
  */
 const CreatedDateFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -105,6 +106,7 @@ const CreatedDateFilter = ({
   }, [filters.createdDate]);
   return ((_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value) ? jsxRuntime.jsxs(giger.Button, Object.assign({
     css: createdDateFilter_styles.styles.mainButton,
+    disabled: _disabled,
     onClick: onFilterClear,
     variant: giger.ButtonVariant.TEXT
   }, {
@@ -123,6 +125,7 @@ const CreatedDateFilter = ({
   })) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(giger.Button, Object.assign({
       css: createdDateFilter_styles.styles.mainButton,
+      disabled: _disabled,
       onClick: onToggleCreatedDateFilter,
       ref: buttonRef,
       variant: giger.ButtonVariant.TEXT

package/cjs/components/grid-filters/components/index.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var shipmentIdFilter = require('./shipment-id-filter/shipment-id-filter.cjs');
 var createdDateFilter = require('./created-date-filter/created-date-filter.cjs');
 var labelIdFilter = require('./label-id-filter/label-id-filter.cjs');
+var labelStatusFilter = require('./label-status-filter/label-status-filter.cjs');
 var trackingStatusFilter = require('./tracking-status-filter/tracking-status-filter.cjs');
 
 
@@ -12,4 +13,5 @@ var trackingStatusFilter = require('./tracking-status-filter/tracking-status-fil
 exports.ShipmentIdFilter = shipmentIdFilter.ShipmentIdFilter;
 exports.CreatedDateFilter = createdDateFilter.CreatedDateFilter;
 exports.LabelIdFilter = labelIdFilter.LabelIdFilter;
+exports.LabelStatusFilter = labelStatusFilter.LabelStatusFilter;
 exports.TrackingStatusFilter = trackingStatusFilter.TrackingStatusFilter;

package/cjs/components/grid-filters/components/label-id-filter/label-id-filter.cjs

@@ -27,6 +27,7 @@ var submitButton = require('../../../field/submit-button/submit-button.cjs');
  * @see {@link LabelIdFilterProps | The props for the `<LabelIdFilter />` component}
  */
 const LabelIdFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -62,6 +63,7 @@ const LabelIdFilter = ({
     jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(giger.Button, Object.assign({
+          disabled: _disabled,
           onClick: toggleLabelIdFilter,
           ref: buttonRef,
           variant: giger.ButtonVariant.TEXT

package/cjs/components/grid-filters/components/label-status-filter/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var labelStatusFilter = require('./label-status-filter.cjs');
+
+
+
+exports.LabelStatusFilter = labelStatusFilter.LabelStatusFilter;

package/cjs/components/grid-filters/components/label-status-filter/label-status-filter-schema.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zod = require('zod');
+
+const labelStatusFormSchema = zod.z.object({
+  labelStatus: zod.z.union([zod.z.literal("completed"), zod.z.literal("error"), zod.z.literal("processing"), zod.z.literal("voided"), zod.z.literal("") // Empty string for no selection
+  ])
+});
+
+exports.labelStatusFormSchema = labelStatusFormSchema;

package/cjs/components/grid-filters/components/label-status-filter/label-status-filter.cjs

@@ -0,0 +1,174 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var validation = require('../../../../utilities/validation.cjs');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var reactUse = require('react-use');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var labelStatusFilterSchema = require('./label-status-filter-schema.cjs');
+var labelStatusFilter_styles = require('./label-status-filter.styles.cjs');
+
+/**
+ * @internal
+ *
+ * # StatusFilter
+ *
+ * - The `<StatusFilter />` component handles the label status filter used in Labels Grid.
+ *
+ * @see {@link StatusFilterProps | The props for the `<StatusFilter />` component}
+ */
+const LabelStatusFilter = ({
+  disabled: _disabled = false,
+  filters,
+  onFiltersUpdated
+}) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [showLabelStatusFilter, toggleLabelStatusFilter] = reactUse.useToggle(false);
+  const [buttonText, setButtonText] = React.useState(((_a = filters === null || filters === void 0 ? void 0 : filters.status) === null || _a === void 0 ? void 0 : _a.nickname) || t("list-labels:headers.status"));
+  const buttonRef = React.useRef(null);
+  const form = reactHookForm.useForm({
+    defaultValues: {
+      labelStatus: ""
+    },
+    resolver: validation.validationResolver(labelStatusFilterSchema.labelStatusFormSchema)
+  });
+  const determineButtonText = React.useCallback(status => {
+    var _a, _b;
+    if (!status) {
+      return ((_a = filters === null || filters === void 0 ? void 0 : filters.status) === null || _a === void 0 ? void 0 : _a.nickname) || t("list-labels:headers.status");
+    }
+    return t("common:grid.filteredStatus", {
+      filter: t(`list-labels:status.${status}`),
+      name: ((_b = filters === null || filters === void 0 ? void 0 : filters.status) === null || _b === void 0 ? void 0 : _b.nickname) || t("list-labels:headers.status")
+    });
+  }, [t, (_b = filters === null || filters === void 0 ? void 0 : filters.status) === null || _b === void 0 ? void 0 : _b.nickname]);
+  React.useEffect(() => {
+    var _a;
+    // keep form in sync with filters
+    if ((_a = filters.status) === null || _a === void 0 ? void 0 : _a.value) {
+      form.reset({
+        labelStatus: filters.status.value
+      });
+      setButtonText(determineButtonText(filters.status.value));
+    } else {
+      // Reset to default when filter value is empty
+      form.reset({
+        labelStatus: ""
+      });
+    }
+  }, [determineButtonText, (_c = filters.status) === null || _c === void 0 ? void 0 : _c.value, form]);
+  const onClearFilters = React.useCallback(() => {
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      status: Object.assign(Object.assign({}, filters.status), {
+        enabled: true,
+        value: ""
+      })
+    }));
+    // Reset the form
+    form.reset({
+      labelStatus: ""
+    });
+    showLabelStatusFilter && toggleLabelStatusFilter();
+  }, [filters, onFiltersUpdated, showLabelStatusFilter, toggleLabelStatusFilter, form]);
+  const handleRadioChange = e => {
+    const value = e.target.value;
+    form.setValue("labelStatus", value);
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      status: Object.assign(Object.assign({}, filters.status), {
+        enabled: true,
+        value
+      })
+    }));
+  };
+  const watchedValue = form.watch("labelStatus");
+  const isRadioSelected = watchedValue !== undefined && watchedValue !== "";
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(giger.Button, Object.assign({
+      disabled: _disabled,
+      onClick: toggleLabelStatusFilter,
+      ref: buttonRef,
+      variant: giger.ButtonVariant.TEXT
+    }, {
+      children: [isRadioSelected ? jsxRuntime.jsx("span", {
+        children: buttonText
+      }) : jsxRuntime.jsx("span", {
+        children: (_e = (_d = filters === null || filters === void 0 ? void 0 : filters.status) === null || _d === void 0 ? void 0 : _d.nickname) !== null && _e !== void 0 ? _e : t("list-labels:headers.status")
+      }), isRadioSelected ?
+      // Show Close Icon
+      jsxRuntime.jsx(giger.Icon, {
+        "aria-label": t("common:grid.clear"),
+        name: gigerTheme.IconNames.CLOSE,
+        onClick: e => {
+          e.stopPropagation();
+          onClearFilters();
+        },
+        onKeyDown: e => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.stopPropagation();
+            onClearFilters();
+          }
+        },
+        role: "button",
+        size: giger.IconSize.SIZE_SMALL,
+        tabIndex: 0
+      }) : showLabelStatusFilter ? jsxRuntime.jsx(giger.Icon, {
+        name: gigerTheme.IconNames.CARET_TOP,
+        size: giger.IconSize.SIZE_SMALL
+      }) : jsxRuntime.jsx(giger.Icon, {
+        name: gigerTheme.IconNames.CARET_BOTTOM,
+        size: giger.IconSize.SIZE_SMALL
+      })]
+    })), jsxRuntime.jsx(giger.Popover, Object.assign({
+      isOpen: showLabelStatusFilter,
+      onClickAway: toggleLabelStatusFilter,
+      reference: buttonRef.current
+    }, {
+      children: jsxRuntime.jsxs("form", {
+        children: [jsxRuntime.jsxs(giger.RadioGroup, Object.assign({
+          css: labelStatusFilter_styles.styles.radioGroup,
+          name: "status",
+          onChange: handleRadioChange,
+          value: watchedValue
+        }, {
+          children: [jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: "completed"
+          }, {
+            children: t("list-labels:status.completed")
+          })), jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: "error"
+          }, {
+            children: t("list-labels:status.error")
+          })), jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: "processing"
+          }, {
+            children: t("list-labels:status.processing")
+          })), jsxRuntime.jsx(giger.Radio, Object.assign({
+            value: "voided"
+          }, {
+            children: t("list-labels:status.voided")
+          }))]
+        })), isRadioSelected && jsxRuntime.jsx("div", Object.assign({
+          css: labelStatusFilter_styles.styles.buttons
+        }, {
+          children: jsxRuntime.jsx(giger.Button, Object.assign({
+            disabled: !isRadioSelected,
+            onClick: onClearFilters,
+            variant: giger.ButtonVariant.OUTLINED
+          }, {
+            children: t("common:grid.clear")
+          }))
+        }))]
+      })
+    }))]
+  });
+};
+
+exports.LabelStatusFilter = LabelStatusFilter;

package/cjs/components/grid-filters/components/label-status-filter/label-status-filter.styles.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  buttons: theme => ({
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(),
+    justifyContent: "end",
+    paddingTop: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  radioGroup: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(0.5)
+  })
+});
+
+exports.styles = styles;

package/cjs/components/grid-filters/components/shipment-id-filter/shipment-id-filter.cjs

@@ -27,6 +27,7 @@ var submitButton = require('../../../field/submit-button/submit-button.cjs');
  * @see {@link ShipmentIdFilterProps | The props for the `<ShipmentIdFilter />` component}
  */
 const ShipmentIdFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -61,6 +62,7 @@ const ShipmentIdFilter = ({
       children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(giger.Button, Object.assign({
           css: shipmentIdFilter_styles.styles.mainButton,
+          disabled: _disabled,
           onClick: toggleShipmentIdFilter,
           ref: buttonRef,
           variant: giger.ButtonVariant.TEXT

package/cjs/components/grid-filters/components/tracking-status-filter/tracking-status-filter.cjs

@@ -25,10 +25,11 @@ var spacer = require('../../../spacer/spacer.cjs');
  * @see {@link TrackingStatusFilterProps | The props for the `<TrackingStatusFilter />` component}
  */
 const TrackingStatusFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
-  var _a;
+  var _a, _b, _c, _d;
   const {
     t
   } = reactI18next.useTranslation();
@@ -45,21 +46,24 @@ const TrackingStatusFilter = ({
     },
     resolver: validation.validationResolver(trackingStatusFilterSchema.trackingStatusFormSchema)
   });
-  const determineButtonText = React.useCallback(filters => {
-    if (filters.length === 0) {
-      return t("list-labels:headers.trackingStatus");
-    } else if (filters.length === 1) {
+  const determineButtonText = React.useCallback(statuses => {
+    var _a, _b, _c;
+    if (statuses.length === 0) {
+      return ((_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.nickname) || t("list-labels:headers.trackingStatus");
+    } else if (statuses.length === 1) {
       return t("common:grid.filteredTrackingStatus", {
-        filter: t(`list-labels:trackingStatus.${filters[0]}`)
+        filter: t(`list-labels:trackingStatus.${statuses[0]}`),
+        name: ((_b = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.nickname) || t("list-labels:headers.trackingStatus")
       });
     } else {
       return t("common:grid.filteredTrackingStatus", {
-        filter: t(`list-labels:trackingStatus.${filters[0]}`)
+        filter: t(`list-labels:trackingStatus.${statuses[0]}`),
+        name: ((_c = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.nickname) || t("list-labels:headers.trackingStatus")
       }) + t("common:grid.more", {
-        count: filters.length - 1
+        count: statuses.length - 1
       });
     }
-  }, [t]);
+  }, [t, (_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.nickname]);
   const getUpdatedKeys = React.useCallback(updatedFields => {
     return Object.keys(updatedFields).filter(key => updatedFields[key]);
   }, []);
@@ -79,9 +83,13 @@ const TrackingStatusFilter = ({
         unknown: filters.trackingStatus.value.includes("unknown")
       };
       form.reset(updatedFields);
-      setButtonText(determineButtonText(getUpdatedKeys(updatedFields)));
+      // Only set buttonText when filters are applied
+      const updatedKeys = getUpdatedKeys(updatedFields);
+      if (updatedKeys.length > 0) {
+        setButtonText(determineButtonText(updatedKeys));
+      }
     }
-  }, [determineButtonText, (_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.value, form, getUpdatedKeys, t]);
+  }, [determineButtonText, (_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.value, form, getUpdatedKeys]);
   const onClearFilters = React.useCallback(() => {
     onFiltersUpdated(Object.assign(Object.assign({}, filters), {
       trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
@@ -109,12 +117,15 @@ const TrackingStatusFilter = ({
   }, [watchedValues]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(giger.Button, Object.assign({
+      disabled: _disabled,
       onClick: toggleTrackingStatusFilter,
       ref: buttonRef,
       variant: giger.ButtonVariant.TEXT
     }, {
-      children: [jsxRuntime.jsx("span", {
+      children: [isAnyCheckboxChecked ? jsxRuntime.jsx("span", {
         children: buttonText
+      }) : jsxRuntime.jsx("span", {
+        children: (_d = (_c = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.nickname) !== null && _d !== void 0 ? _d : t("list-labels:headers.trackingStatus")
       }), isAnyCheckboxChecked ?
       // Show Close Icon
       jsxRuntime.jsx(giger.Icon, {