@shipengine/elements 2.21.0 → 2.23.0

package/cjs/index.cjs

@@ -28,6 +28,7 @@ var useHelpers = require('./hooks/use-helpers.cjs');
 var useConfigureShipment = require('./hooks/use-configure-shipment.cjs');
 var useImportSalesOrder = require('./hooks/use-import-sales-order.cjs');
 var useBalanceServices = require('./hooks/use-balance-services.cjs');
+var useRootPortal = require('./hooks/use-root-portal.cjs');
 var canadaDdp = require('./types/canada-ddp.cjs');
 var pudo = require('./types/pudo.cjs');
 var onboarding = require('./workflows/onboarding/onboarding.cjs');
@@ -37,6 +38,7 @@ var connectExternalCarrier = require('./workflows/connect-external-carrier/conne
 var elementsContextProvider = require('./elements-provider/elements-context-provider.cjs');
 var elementsProvider = require('./elements-provider/elements-provider.cjs');
 var elementsTestProvider = require('./elements-provider/elements-test-provider.cjs');
+var createElement = require('./create-element/create-element.cjs');
 
 
 
@@ -79,6 +81,8 @@ exports.useHelpers = useHelpers.useHelpers;
 exports.useConfigureShipment = useConfigureShipment.useConfigureShipment;
 exports.useImportSalesOrder = useImportSalesOrder.useImportSalesOrder;
 exports.useBalanceServices = useBalanceServices.useBalanceServices;
+exports.RootPortalProvider = useRootPortal.RootPortalProvider;
+exports.useRootPortal = useRootPortal.useRootPortal;
 Object.defineProperty(exports, 'CanadaDeliveredDutyOptions', {
   enumerable: true,
   get: function () { return canadaDdp.CanadaDeliveredDutyOptions; }
@@ -96,6 +100,7 @@ exports.ElementsContextProvider = elementsContextProvider.ElementsContextProvide
 exports.useElements = elementsContextProvider.useElements;
 exports.ElementsProvider = elementsProvider.ElementsProvider;
 exports.ElementsTestProvider = elementsTestProvider.ElementsTestProvider;
+exports.createElement = createElement.createElement;
 Object.keys(reactApi).forEach(function (k) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/cjs/locales/en/common.cjs

@@ -216,12 +216,14 @@ var common = {
 	grid: {
 		"row-count_one": "Showing {{firstIndex}}-{{lastIndex}} of <0>{{count}} item</0>",
 		"row-count_other": "Showing {{firstIndex}}-{{lastIndex}} of <0>{{count}} items</0>",
+		"row-count-plus_other": "Showing {{firstIndex}}-{{lastIndex}} of <0>{{count}}+ items</0>",
 		rows: "Rows",
 		clearAll: "Clear all",
 		shipmentId: "Shipment ID",
 		labelId: "Label ID",
 		labelIdFilter: "{{name}}: {{labelId}}",
-		filteredTrackingStatus: "Delivery Status: {{filter}}",
+		filteredStatus: "{{name}}: {{filter}}",
+		filteredTrackingStatus: "{{name}}: {{filter}}",
 		more: ", +{{count}} more",
 		createdDate: "Created Date",
 		shipmentIdFilter: "{{name}}: {{shipmentId}}",

package/cjs/locales/en/purchase-label.cjs

@@ -35,7 +35,8 @@ var purchaseLabel = {
 		results: "No results returned"
 	},
 	fields: {
-		"requires-additional-handling": "This package requires <Link>additional handling</Link>",
+		"requires-additional-handling-link": "This package requires <Link>additional handling</Link>",
+		"requires-additional-handling": "This package requires additional handling",
 		addOns: "Add-Ons",
 		contentDescription: "Contents Description",
 		confirmation: "Delivery Confirmation",

package/cjs/package.cjs

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "2.21.0";
+var version = "2.23.0";
 
 exports.version = version;

package/cjs/utilities/feature-flags/feature-flags.cjs

@@ -12,7 +12,7 @@ const defaultLabelsGridColumns = [{
   allowFilter: true,
   name: "labelId"
 }, {
-  allowFilter: true,
+  allowFilter: false,
   name: "trackingStatus"
 }, {
   name: "recipient"

package/cjs/workflows/label-workflow/label-workflow.cjs

@@ -56,7 +56,6 @@ const Component = _a => {
     carriers
   } = useConfigureShipment.useConfigureShipment(Object.assign(Object.assign({}, _multiplexedId), {
     onLoad: onLoad,
-    onShipmentUpdated: onShipmentUpdated,
     shipFromAddresses,
     useWarehouses: (_b = propFeatures === null || propFeatures === void 0 ? void 0 : propFeatures.shipmentForm) === null || _b === void 0 ? void 0 : _b.useWarehouses,
     warehouseId

package/esm/components/grid-controller/grid-controller.js

@@ -1,6 +1,6 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
-import { Table, TableFooter, TableHeader, TableHeaderRow, TableHeaderCell, Checkbox, TableBody, TableRow, TableBodyCell } from '@shipengine/giger';
+import { TableRow, TableBodyCell, Skeleton, SkeletonAnimation, SkeletonVariant, Table, TableFooter, TableHeader, TableHeaderRow, TableHeaderCell, Checkbox, TableBody } from '@shipengine/giger';
 import { styles } from './grid-controller.styles.js';
 
 /**
@@ -17,15 +17,33 @@ const GridController = ({
   data,
   footerContent,
   onRowClick,
+  isLoading: _isLoading = false,
   useCheckboxes: _useCheckboxes = false,
   filters,
   emptyContent
 }) => {
   var _a, _b, _c;
   const [isChecked, setIsChecked] = 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 = useMemo(() => columns.map(column => column.headerContent), [columns]);
+  const loadingRows = useMemo(() => {
+    const items = [];
+    for (let index = 0; index < 5; index++) {
+      items.push(jsx(TableRow, Object.assign({
+        css: styles.skeletonTableRow,
+        withHover: false
+      }, {
+        children: columnHeaderContents.map((item, index) => jsx(TableBodyCell, {
+          children: item && jsx(Skeleton, {
+            animation: SkeletonAnimation.WAVE,
+            height: 16,
+            variant: SkeletonVariant.RECT,
+            width: 72
+          })
+        }, index))
+      }), `loading-row-${index}`));
+    }
+    return items;
+  }, [columnHeaderContents]);
   const isAllChecked = useMemo(() => isChecked.length > 0 && isChecked.every(check => check), [isChecked]);
   const isIndeterminate = useMemo(() => isChecked.some(check => check), [isChecked]);
   const toggleCheckbox = useCallback(index => {
@@ -51,7 +69,7 @@ const GridController = ({
       children: filters
     })), data.length === 0 && emptyContent ? emptyContent : jsx(Table, Object.assign({
       "data-testid": "grid",
-      footer: footerContent && jsx(TableFooter, Object.assign({
+      footer: footerContent && !_isLoading && jsx(TableFooter, Object.assign({
         css: styles.tableFooter
       }, {
         children: footerContent
@@ -66,7 +84,7 @@ const GridController = ({
               indeterminate: (_c = !isAllChecked && isIndeterminate) !== null && _c !== void 0 ? _c : false,
               onChange: event => toggleAllCheckboxes(event.target.checked)
             })
-          })), getColumnHeaderContents().map((header, index) => jsx(TableHeaderCell, Object.assign({
+          })), columnHeaderContents.map((header, index) => jsx(TableHeaderCell, Object.assign({
             css: styles.tableHeader
           }, {
             children: header
@@ -77,27 +95,41 @@ const GridController = ({
       tableStyles: styles.table
     }, {
       children: jsx(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 jsxs(TableRow, Object.assign({
+            css: row.isLoading && 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 && jsx(TableBodyCell, Object.assign({
               css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
             }, {
               children: jsx(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) => jsx(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 jsx(TableBodyCell, Object.assign({
+                  css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
+                }, {
+                  children: jsx(Skeleton, {
+                    animation: SkeletonAnimation.WAVE,
+                    height: 24,
+                    variant: SkeletonVariant.RECT
+                  })
+                }), index);
+              }
+              return jsx(TableBodyCell, Object.assign({
+                css: row === null || row === void 0 ? void 0 : row.bodyCellStyles
+              }, {
+                children: column.renderCellContent(row)
+              }), index);
+            })]
+          }), rowIndex);
         })
       })
     }))]

package/esm/components/grid-controller/grid-controller.styles.js

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

package/esm/components/grid-controller/grid-footer.js

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

package/esm/components/grid-controller/grid-footer.styles.js

@@ -0,0 +1,20 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  countWrapper: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: scopeTheme(theme).spacing(1)
+  }),
+  loader: theme => ({
+    color: scopeTheme(theme).palette.gray.main
+  }),
+  wrapper: {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%"
+  }
+});
+
+export { styles };

package/esm/components/grid-controller/index.js

@@ -1,4 +1,4 @@
 export { GridController } from './grid-controller.js';
 export { CellFormattedDate } from './cell-formatted-date.js';
 export { GridFooter } from './grid-footer.js';
-export { SortableHeader } from './sortable-header.js';
+export { SortableHeader } from './sortable-header/sortable-header.js';

package/esm/components/grid-controller/sortable-header/index.js

@@ -0,0 +1 @@
+export { SortableHeader } from './sortable-header.js';

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { Icon, IconSize } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './sortable-header.styles.js';
 
 /**
  * A reusable component for creating sortable table headers
@@ -19,17 +20,14 @@ const SortableHeader = ({
   };
   return jsxs("span", Object.assign({
     "aria-label": headerText,
-    css: {
-      alignItems: "center",
-      cursor: "pointer",
-      display: "flex"
-    },
+    css: styles.span,
     onClick: onToggleSort,
     onKeyDown: handleKeyDown,
     role: "button",
     tabIndex: 0
   }, {
     children: [headerText, jsx(Icon, {
+      css: styles.icon,
       name: sortDirection === "desc" ? IconNames.SORT_BOTTOM : IconNames.SORT_TOP,
       size: IconSize.SIZE_SMALL
     })]

package/esm/components/grid-controller/sortable-header/sortable-header.styles.js

@@ -0,0 +1,14 @@
+import { createStyles, scopeTheme } from '../../../utilities/styles.js';
+
+const styles = createStyles({
+  icon: theme => ({
+    paddingLeft: scopeTheme(theme).spacing()
+  }),
+  span: () => ({
+    alignItems: "center",
+    cursor: "pointer",
+    display: "flex"
+  })
+});
+
+export { styles };

package/esm/components/grid-filters/components/created-date-filter/created-date-filter.js

@@ -20,6 +20,7 @@ import { useElements } from '../../../../elements-provider/elements-context-prov
  * @see {@link CreatedDateFilterProps | The props for the `<CreatedDateFilter />` component}
  */
 const CreatedDateFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -101,6 +102,7 @@ const CreatedDateFilter = ({
   }, [filters.createdDate]);
   return ((_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value) ? jsxs(Button, Object.assign({
     css: styles.mainButton,
+    disabled: _disabled,
     onClick: onFilterClear,
     variant: ButtonVariant.TEXT
   }, {
@@ -119,6 +121,7 @@ const CreatedDateFilter = ({
   })) : jsxs(Fragment, {
     children: [jsxs(Button, Object.assign({
       css: styles.mainButton,
+      disabled: _disabled,
       onClick: onToggleCreatedDateFilter,
       ref: buttonRef,
       variant: ButtonVariant.TEXT

package/esm/components/grid-filters/components/index.js

@@ -1,4 +1,5 @@
 export { ShipmentIdFilter } from './shipment-id-filter/shipment-id-filter.js';
 export { CreatedDateFilter } from './created-date-filter/created-date-filter.js';
 export { LabelIdFilter } from './label-id-filter/label-id-filter.js';
+export { LabelStatusFilter } from './label-status-filter/label-status-filter.js';
 export { TrackingStatusFilter } from './tracking-status-filter/tracking-status-filter.js';

package/esm/components/grid-filters/components/label-id-filter/label-id-filter.js

@@ -23,6 +23,7 @@ import { SubmitButton } from '../../../field/submit-button/submit-button.js';
  * @see {@link LabelIdFilterProps | The props for the `<LabelIdFilter />` component}
  */
 const LabelIdFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -58,6 +59,7 @@ const LabelIdFilter = ({
     jsx(Fragment, {
       children: jsxs(Fragment, {
         children: [jsx(Button, Object.assign({
+          disabled: _disabled,
           onClick: toggleLabelIdFilter,
           ref: buttonRef,
           variant: ButtonVariant.TEXT

package/esm/components/grid-filters/components/label-status-filter/index.js

@@ -0,0 +1 @@
+export { LabelStatusFilter } from './label-status-filter.js';

package/esm/components/grid-filters/components/label-status-filter/label-status-filter-schema.js

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+const labelStatusFormSchema = z.object({
+  labelStatus: z.union([z.literal("completed"), z.literal("error"), z.literal("processing"), z.literal("voided"), z.literal("") // Empty string for no selection
+  ])
+});
+
+export { labelStatusFormSchema };

package/esm/components/grid-filters/components/label-status-filter/label-status-filter.js

@@ -0,0 +1,170 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { validationResolver } from '../../../../utilities/validation.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useToggle } from 'react-use';
+import { Button, ButtonVariant, Icon, IconSize, Popover, RadioGroup, Radio } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { labelStatusFormSchema } from './label-status-filter-schema.js';
+import { styles } from './label-status-filter.styles.js';
+
+/**
+ * @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
+  } = useTranslation();
+  const [showLabelStatusFilter, toggleLabelStatusFilter] = useToggle(false);
+  const [buttonText, setButtonText] = 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 = useRef(null);
+  const form = useForm({
+    defaultValues: {
+      labelStatus: ""
+    },
+    resolver: validationResolver(labelStatusFormSchema)
+  });
+  const determineButtonText = 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]);
+  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 = 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 jsxs(Fragment, {
+    children: [jsxs(Button, Object.assign({
+      disabled: _disabled,
+      onClick: toggleLabelStatusFilter,
+      ref: buttonRef,
+      variant: ButtonVariant.TEXT
+    }, {
+      children: [isRadioSelected ? jsx("span", {
+        children: buttonText
+      }) : 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
+      jsx(Icon, {
+        "aria-label": t("common:grid.clear"),
+        name: IconNames.CLOSE,
+        onClick: e => {
+          e.stopPropagation();
+          onClearFilters();
+        },
+        onKeyDown: e => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.stopPropagation();
+            onClearFilters();
+          }
+        },
+        role: "button",
+        size: IconSize.SIZE_SMALL,
+        tabIndex: 0
+      }) : showLabelStatusFilter ? jsx(Icon, {
+        name: IconNames.CARET_TOP,
+        size: IconSize.SIZE_SMALL
+      }) : jsx(Icon, {
+        name: IconNames.CARET_BOTTOM,
+        size: IconSize.SIZE_SMALL
+      })]
+    })), jsx(Popover, Object.assign({
+      isOpen: showLabelStatusFilter,
+      onClickAway: toggleLabelStatusFilter,
+      reference: buttonRef.current
+    }, {
+      children: jsxs("form", {
+        children: [jsxs(RadioGroup, Object.assign({
+          css: styles.radioGroup,
+          name: "status",
+          onChange: handleRadioChange,
+          value: watchedValue
+        }, {
+          children: [jsx(Radio, Object.assign({
+            value: "completed"
+          }, {
+            children: t("list-labels:status.completed")
+          })), jsx(Radio, Object.assign({
+            value: "error"
+          }, {
+            children: t("list-labels:status.error")
+          })), jsx(Radio, Object.assign({
+            value: "processing"
+          }, {
+            children: t("list-labels:status.processing")
+          })), jsx(Radio, Object.assign({
+            value: "voided"
+          }, {
+            children: t("list-labels:status.voided")
+          }))]
+        })), isRadioSelected && jsx("div", Object.assign({
+          css: styles.buttons
+        }, {
+          children: jsx(Button, Object.assign({
+            disabled: !isRadioSelected,
+            onClick: onClearFilters,
+            variant: ButtonVariant.OUTLINED
+          }, {
+            children: t("common:grid.clear")
+          }))
+        }))]
+      })
+    }))]
+  });
+};
+
+export { LabelStatusFilter };

package/esm/components/grid-filters/components/label-status-filter/label-status-filter.styles.js

@@ -0,0 +1,17 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  buttons: theme => ({
+    display: "flex",
+    gap: scopeTheme(theme).spacing(),
+    justifyContent: "end",
+    paddingTop: scopeTheme(theme).spacing(2)
+  }),
+  radioGroup: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: scopeTheme(theme).spacing(0.5)
+  })
+});
+
+export { styles };

package/esm/components/grid-filters/components/shipment-id-filter/shipment-id-filter.js

@@ -23,6 +23,7 @@ import { SubmitButton } from '../../../field/submit-button/submit-button.js';
  * @see {@link ShipmentIdFilterProps | The props for the `<ShipmentIdFilter />` component}
  */
 const ShipmentIdFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -57,6 +58,7 @@ const ShipmentIdFilter = ({
       children: jsxs(Fragment, {
         children: [jsx(Button, Object.assign({
           css: styles.mainButton,
+          disabled: _disabled,
           onClick: toggleShipmentIdFilter,
           ref: buttonRef,
           variant: ButtonVariant.TEXT