@shipengine/elements 2.22.0 → 2.23.0

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

@@ -73,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
@@ -98,29 +98,43 @@ const GridController = ({
       outerWrapperStyles: gridController_styles.styles.tableWrapper,
       tableStyles: gridController_styles.styles.table
     }, {
-      children: jsxRuntime.jsxs(giger.TableBody, {
-        children: [_isLoading && loadingRows, data.map((row, index) => {
+      children: jsxRuntime.jsx(giger.TableBody, {
+        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-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-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/tracking-status-filter/tracking-status-filter.cjs

@@ -29,7 +29,7 @@ const TrackingStatusFilter = ({
   filters,
   onFiltersUpdated
 }) => {
-  var _a;
+  var _a, _b, _c, _d;
   const {
     t
   } = reactI18next.useTranslation();
@@ -46,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]);
   }, []);
@@ -80,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), {
@@ -115,8 +122,10 @@ const TrackingStatusFilter = ({
       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, {

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

@@ -9,6 +9,7 @@ var shipmentIdFilter = require('./components/shipment-id-filter/shipment-id-filt
 var labelIdFilter = require('./components/label-id-filter/label-id-filter.cjs');
 var createdDateFilter = require('./components/created-date-filter/created-date-filter.cjs');
 var trackingStatusFilter = require('./components/tracking-status-filter/tracking-status-filter.cjs');
+var labelStatusFilter = require('./components/label-status-filter/label-status-filter.cjs');
 
 /**
  * @internal
@@ -25,7 +26,7 @@ const GridFilters = ({
   filtersDisabled: _filtersDisabled = false,
   onClearAllFilters
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     t
   } = reactI18next.useTranslation(["common"]);
@@ -57,6 +58,10 @@ const GridFilters = ({
       disabled: _filtersDisabled,
       filters: filters,
       onFiltersUpdated: onFiltersUpdated
+    }), ((_d = filters.status) === null || _d === void 0 ? void 0 : _d.enabled) && jsxRuntime.jsx(labelStatusFilter.LabelStatusFilter, {
+      disabled: _filtersDisabled,
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
     }), shouldShowClearAll && jsxRuntime.jsx(giger.Button, Object.assign({
       disabled: _filtersDisabled,
       onClick: () => {

package/cjs/elements/labels-grid/hooks/use-labels-grid.cjs

@@ -14,11 +14,12 @@ const useLabelsGrid = ({
   labelStatus,
   showShipmentIdFilter,
   showLabelIdFilter,
+  showStatusFilter,
   showTrackingStatusFilter,
   fetchShipments,
   sortDir
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const initialFilters = {
     labelId: {
       enabled: !!showLabelIdFilter,
@@ -28,6 +29,10 @@ const useLabelsGrid = ({
       enabled: !!showShipmentIdFilter,
       value: ""
     },
+    status: {
+      enabled: !!showStatusFilter,
+      value: ""
+    },
     trackingStatus: {
       enabled: !!showTrackingStatusFilter,
       value: []
@@ -84,13 +89,17 @@ const useLabelsGrid = ({
         enabled: !!showShipmentIdFilter,
         value: ""
       },
+      status: {
+        enabled: !!showStatusFilter,
+        value: ""
+      },
       trackingStatus: {
         enabled: !!showTrackingStatusFilter,
         value: []
       }
     };
     setFilters(updatedFilters);
-  }, [showLabelIdFilter, showShipmentIdFilter, showTrackingStatusFilter]);
+  }, [showLabelIdFilter, showShipmentIdFilter, showStatusFilter, showTrackingStatusFilter]);
   const isTrackingStatusFilterActive = React.useMemo(() => {
     var _a, _b;
     return !!(((_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.enabled) && hasActiveFilterValue((_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.value));
@@ -105,11 +114,11 @@ const useLabelsGrid = ({
   } = useTrackingStatusFilter.useTrackingStatusFilter({
     currentPage: page,
     isActive: isTrackingStatusFilterActive,
-    labelStatus,
+    labelStatus: ((_c = filters.status) === null || _c === void 0 ? void 0 : _c.value) || labelStatus,
     pageSize,
-    shipmentId: ((_c = filters.shipmentId) === null || _c === void 0 ? void 0 : _c.value) || undefined,
+    shipmentId: ((_d = filters.shipmentId) === null || _d === void 0 ? void 0 : _d.value) || undefined,
     sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc",
-    trackingStatusFilters: ((_d = filters.trackingStatus) === null || _d === void 0 ? void 0 : _d.value) || []
+    trackingStatusFilters: ((_e = filters.trackingStatus) === null || _e === void 0 ? void 0 : _e.value) || []
   });
   // Use regular API pagination when tracking status filter is not active
   const {
@@ -119,7 +128,7 @@ const useLabelsGrid = ({
   } = reactApi.useListLabels({
     enabled: !isTrackingStatusFilterActive,
     queryFnParams: {
-      labelStatus,
+      labelStatus: ((_f = filters.status) === null || _f === void 0 ? void 0 : _f.value) || labelStatus,
       page,
       pageSize,
       shipmentId: filters.shipmentId.value || undefined,
@@ -161,13 +170,13 @@ const useLabelsGrid = ({
     data: labelFilterData,
     isError: isLabelFilterError,
     isInitialLoading: isLabelFilterLoading
-  } = reactApi.useGetLabel(((_e = filters.labelId) === null || _e === void 0 ? void 0 : _e.value) || undefined);
-  const isLabelFilterActive = (_f = filters.labelId) === null || _f === void 0 ? void 0 : _f.value;
+  } = reactApi.useGetLabel(((_g = filters.labelId) === null || _g === void 0 ? void 0 : _g.value) || undefined);
+  const isLabelFilterActive = (_h = filters.labelId) === null || _h === void 0 ? void 0 : _h.value;
   const isStatusFilteredOut = (status, filter) => {
     return (filter === null || filter === void 0 ? void 0 : filter.length) && !filter.includes(status);
   };
   const getLabelById = labelById => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     // Check if filter by label id is active and there are no errors
     if (isLabelFilterActive && !isLabelFilterError) {
       let labelPassFilters = true;
@@ -175,15 +184,19 @@ const useLabelsGrid = ({
       if (labelStatus && labelStatus !== (labelById === null || labelById === void 0 ? void 0 : labelById.status)) {
         labelPassFilters = false;
       }
+      // Check if status filter is active and if the label has the same status
+      if (((_a = filters === null || filters === void 0 ? void 0 : filters.status) === null || _a === void 0 ? void 0 : _a.enabled) && ((_b = filters === null || filters === void 0 ? void 0 : filters.status) === null || _b === void 0 ? void 0 : _b.value) && ((_c = filters === null || filters === void 0 ? void 0 : filters.status) === null || _c === void 0 ? void 0 : _c.value) !== (labelById === null || labelById === void 0 ? void 0 : labelById.status)) {
+        labelPassFilters = false;
+      }
       // Check if shipment filter has the same value if defined
-      if (((_a = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _a === void 0 ? void 0 : _a.value) !== "" && ((_b = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _b === void 0 ? void 0 : _b.value) !== (labelById === null || labelById === void 0 ? void 0 : labelById.shipmentId)) {
+      if (((_d = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _d === void 0 ? void 0 : _d.value) !== "" && ((_e = filters === null || filters === void 0 ? void 0 : filters.shipmentId) === null || _e === void 0 ? void 0 : _e.value) !== (labelById === null || labelById === void 0 ? void 0 : labelById.shipmentId)) {
         labelPassFilters = false;
       }
       if (
       // If Label status is voided and voided status is filtered out, don't show the label
-      (labelById === null || labelById === void 0 ? void 0 : labelById.status) === "voided" && isStatusFilteredOut("voided", (_c = filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.value) ||
+      (labelById === null || labelById === void 0 ? void 0 : labelById.status) === "voided" && isStatusFilteredOut("voided", (_f = filters.trackingStatus) === null || _f === void 0 ? void 0 : _f.value) ||
       //  If Label status is not voided and tracking status is filtered out, don't show the label
-      (labelById === null || labelById === void 0 ? void 0 : labelById.status) !== "voided" && (labelById === null || labelById === void 0 ? void 0 : labelById.trackingStatus) && isStatusFilteredOut(labelById.trackingStatus, (_d = filters.trackingStatus) === null || _d === void 0 ? void 0 : _d.value)) {
+      (labelById === null || labelById === void 0 ? void 0 : labelById.status) !== "voided" && (labelById === null || labelById === void 0 ? void 0 : labelById.trackingStatus) && isStatusFilteredOut(labelById.trackingStatus, (_g = filters.trackingStatus) === null || _g === void 0 ? void 0 : _g.value)) {
         labelPassFilters = false;
       }
       return labelPassFilters ? labelById : undefined;

package/cjs/elements/labels-grid/labels-grid.cjs

@@ -35,7 +35,7 @@ const Component = ({
   onClickExternalShipmentId,
   onClickShipmentNumber
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     t
   } = reactI18next.useTranslation(["common", "list-labels"]);
@@ -69,8 +69,13 @@ const Component = ({
     var _a;
     return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "shipmentNumber");
   }, [features]);
+  const statusColumn = React.useMemo(() => {
+    var _a;
+    return (_a = features === null || features === void 0 ? void 0 : features.columns) === null || _a === void 0 ? void 0 : _a.find(c => c.name === "status");
+  }, [features]);
   const showLabelIdFilter = labelIdColumn && ((_a = labelIdColumn.allowFilter) !== null && _a !== void 0 ? _a : true);
   const showShipmentIdFilter = shipmentIdColumn && ((_b = shipmentIdColumn.allowFilter) !== null && _b !== void 0 ? _b : true);
+  const showStatusFilter = statusColumn && ((_c = statusColumn.allowFilter) !== null && _c !== void 0 ? _c : true);
   const showTrackingStatusFilter = trackingStatusColumn && !!trackingStatusColumn.allowFilter;
   const {
     labels,
@@ -90,6 +95,7 @@ const Component = ({
     labelStatus,
     showLabelIdFilter,
     showShipmentIdFilter,
+    showStatusFilter,
     showTrackingStatusFilter,
     sortDir: sortState.dir
   });
@@ -107,11 +113,14 @@ const Component = ({
       shipmentId: Object.assign(Object.assign({}, filters.shipmentId), {
         nickname: shipmentIdColumn === null || shipmentIdColumn === void 0 ? void 0 : shipmentIdColumn.nickname
       }),
+      status: Object.assign(Object.assign({}, filters.status), {
+        nickname: statusColumn === null || statusColumn === void 0 ? void 0 : statusColumn.nickname
+      }),
       trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
         nickname: trackingStatusColumn === null || trackingStatusColumn === void 0 ? void 0 : trackingStatusColumn.nickname
       })
     };
-  }, [filters, labelIdColumn, shipmentIdColumn, trackingStatusColumn]);
+  }, [filters, labelIdColumn, shipmentIdColumn, statusColumn, trackingStatusColumn]);
   const toggleCreatedDateSort = React.useCallback(() => {
     toggleSort("created_at");
   }, [toggleSort]);

package/cjs/elements/purchase-label/components/customs-forms/customs-forms.cjs

@@ -9,6 +9,7 @@ var React = require('react');
 var reactI18next = require('react-i18next');
 var giger = require('@shipengine/giger');
 var windsorFramework = require('./windsor-framework/windsor-framework.cjs');
+var shipment = require('../../../../utilities/shipengine/shipment.cjs');
 var useCustomsContentsOptions = require('../../hooks/use-customs-contents-options.cjs');
 var useCustomsNonDeliveryOptions = require('../../hooks/use-customs-non-delivery-options.cjs');
 var productsDisplay = require('./products-display/products-display.cjs');
@@ -28,7 +29,7 @@ const CustomsForms = ({
   onUpdateCustoms,
   onUpdateTaxableIds,
   isCanadaDeliveredDutyEligible,
-  shipment,
+  shipment: shipment$1,
   onDirty,
   requiresWindsorFramework: _requiresWindsorFramework = false,
   harmonizedTariffCodes
@@ -37,6 +38,12 @@ const CustomsForms = ({
   const {
     t
   } = reactI18next.useTranslation(["purchase-label", "common"]);
+  // Convert deprecated customs items to the products format
+  const formattedShipment = React.useMemo(() => {
+    var _a, _b, _c, _d;
+    const hasDeprecatedCustomsItems = !!((_b = (_a = shipment$1.customs) === null || _a === void 0 ? void 0 : _a.customsItems) === null || _b === void 0 ? void 0 : _b.length) && !((_d = (_c = shipment$1.packages) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.products);
+    return hasDeprecatedCustomsItems ? shipment.moveCustomsItemsToProducts(shipment$1) : shipment$1;
+  }, [shipment$1]);
   const {
     errors: {
       packages: packageErrors
@@ -139,11 +146,11 @@ const CustomsForms = ({
       currency: currency,
       harmonizedTariffCodes: harmonizedTariffCodes,
       onUpdate: handleUpdateProducts,
-      shipment: shipment
+      shipment: formattedShipment
     }), jsxRuntime.jsx(taxIds.TaxIds, {
       onDirty: onDirty,
       onUpdateTaxableIds: onUpdateTaxableIds,
-      shipment: shipment
+      shipment: formattedShipment
     })]
   }));
 };

package/cjs/elements/purchase-label/components/rate-form/rate-view.cjs

@@ -223,16 +223,11 @@ const RateView = ({
       }))]
     })]
   });
-  if (errors) return jsxRuntime.jsx("article", Object.assign({
-    css: rateForm_styles.styles.ratesInterstitial,
-    role: "presentation"
+  if (errors) return jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+    title: t(errors.title),
+    type: giger.NotificationType.ERROR
   }, {
-    children: jsxRuntime.jsx(giger.InlineNotification, Object.assign({
-      title: t(errors.title),
-      type: giger.NotificationType.ERROR
-    }, {
-      children: errors === null || errors === void 0 ? void 0 : errors.messages
-    }))
+    children: errors === null || errors === void 0 ? void 0 : errors.messages
   }));
   return jsxRuntime.jsxs("article", Object.assign({
     css: rateForm_styles.styles.ratesInterstitial,

package/cjs/elements/purchase-label/components/shipment-form/shipment-form.cjs

@@ -875,7 +875,13 @@ const ShipmentForm = ({
         label: t("purchase-label:fields.packageCode"),
         name: "packages.0.type",
         onCategoryChange: value => {
-          form.setValue("carrierId", value);
+          // Set carrierId to value if:
+          // 1. value exists (carrier-specific package) - set to that carrier
+          // 2. in browse_rates mode (even for custom packages) - could be set to undefined
+          // Otherwise (custom package in select_service mode) - keep existing carrierId
+          if (value || form.getValues("__mode") === "browse_rates") {
+            form.setValue("carrierId", value);
+          }
           // we have deviated from preset so we need to clear it in order to keep required dims and weight fields in sync
           setSelectedPreset(undefined);
         },
@@ -962,17 +968,17 @@ const ShipmentForm = ({
             })
           })), hasUpsOptions && jsxRuntime.jsx(_switch.Switch, {
             defaultChecked: ((_k = shipment$1 === null || shipment$1 === void 0 ? void 0 : shipment$1.advancedOptions) === null || _k === void 0 ? void 0 : _k.additionalHandling) || false,
-            label: jsxRuntime.jsx(reactI18next.Trans, {
+            label: (features === null || features === void 0 ? void 0 : features.additionalHandlingHref) ? jsxRuntime.jsx(reactI18next.Trans, {
               components: {
                 Link: jsxRuntime.jsx(giger.Link, {
-                  href: "https://help.paypal.shipstation.com/hc/en-us/articles/13823149193755-UPS-Additional-Handling",
+                  href: features === null || features === void 0 ? void 0 : features.additionalHandlingHref,
                   rel: "noopener noreferrer",
                   target: "_blank"
                 })
               },
-              i18nKey: "purchase-label:fields.requires-additional-handling",
+              i18nKey: "purchase-label:fields.requires-additional-handling-link",
               t: t
-            }),
+            }) : t("purchase-label:fields.requires-additional-handling"),
             name: "advancedOptions.additionalHandling",
             onChange: e => form.setValue("advancedOptions.additionalHandling", e.target.checked, {
               shouldDirty: true