@shipengine/elements 2.22.0 → 2.23.0

package/cjs/elements/purchase-label/configure-shipment.cjs

@@ -146,7 +146,9 @@ const ConfigureShipment = _a => {
     }
   });
   // Capture ship from address schema validation error to toggle form and display error message
-  const hasShipFromAddressErrors = React.useMemo(() => !!(shipmentFormErrors === null || shipmentFormErrors === void 0 ? void 0 : shipmentFormErrors.filter(error => error.errorCode === "invalid_address")), [shipmentFormErrors]);
+  const hasShipFromAddressErrors = React.useMemo(() => {
+    return (shipmentFormErrors === null || shipmentFormErrors === void 0 ? void 0 : shipmentFormErrors.some(error => error.errorCode === "invalid_address")) || false;
+  }, [shipmentFormErrors]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx(shipmentForm.ShipmentForm, Object.assign({}, shipmentFormProps, props, ((_c = features === null || features === void 0 ? void 0 : features.shipmentForm) === null || _c === void 0 ? void 0 : _c.useWarehouses) && {
       warehouses

package/cjs/elements/purchase-label/hooks/use-rates-form.cjs

@@ -61,7 +61,7 @@ const useRatesForm = ({
     mutateAsync: updateShipment
   } = reactApi.useUpdateSalesOrderShipment();
   const {
-    error: labelErrors,
+    error: createLabelErrors,
     reset: resetLabel,
     mutateAsync: createLabel
   } = reactApi.useCreateLabel();
@@ -184,7 +184,7 @@ const useRatesForm = ({
     }
   }), [onBeforeRateSaved, onUpdatedShipment, resetRates, shipment, updateShipment]);
   const handleSubmit = React.useCallback((rateId, servicePoint) => tslib.__awaiter(void 0, void 0, void 0, function* () {
-    var _g, _h, _j;
+    var _g, _h, _j, _k;
     setBeforeCreateError(undefined);
     if (!shipment) return;
     const preferredRates = preferredRatesResponse === null || preferredRatesResponse === void 0 ? void 0 : preferredRatesResponse.map(r => r.rate);
@@ -192,17 +192,35 @@ const useRatesForm = ({
     if (rate) {
       try {
         const beforePurchaseResponse = yield onBeforeLabelCreate === null || onBeforeLabelCreate === void 0 ? void 0 : onBeforeLabelCreate(rate, shipment);
-        if (!beforePurchaseResponse || Object.keys(beforePurchaseResponse).length === 0) {
-          yield purchaseLabel(rateId, shipment, rate, servicePoint);
-          return;
-        }
-        // The user has selected a house rate that requires some type of set up to happen before purchase.
-        // For white label this would be a user has selected a house account UPS ground saver rate and needs to register and
-        // re-rate their shipment to get a real rate. If its successful, we'll purchase a label with the new rate.
-        if (beforePurchaseResponse.error) {
+        // If the callback has returned an error, abort label purchase
+        if (beforePurchaseResponse === null || beforePurchaseResponse === void 0 ? void 0 : beforePurchaseResponse.error) {
           resetRates();
           throw new Error(beforePurchaseResponse.error.message);
-        } else if (beforePurchaseResponse.rate && !beforePurchaseResponse.error) {
+        }
+        let updatedShipment;
+        if (beforePurchaseResponse === null || beforePurchaseResponse === void 0 ? void 0 : beforePurchaseResponse.labelMessages) {
+          // The callback has returned custom label messages to be added to the shipment.
+          // Merge those messages in with the shipment
+          updatedShipment = Object.assign(Object.assign({}, shipment), {
+            packages: (_h = shipment.packages) === null || _h === void 0 ? void 0 : _h.map(pkg => Object.assign(Object.assign({}, pkg), {
+              labelMessages: beforePurchaseResponse.labelMessages
+            }))
+          });
+        }
+        if (updatedShipment) {
+          // The shipment needs to be updated before purchase
+          try {
+            yield updateShipment(Object.assign(Object.assign({}, updatedShipment), {
+              shipDate: date.isNowOrInTheFuture(updatedShipment.shipDate) ? updatedShipment.shipDate : undefined
+            }));
+          } catch (_l) {
+            throw new Error("Unable to update shipment before creating label.");
+          }
+        }
+        if (beforePurchaseResponse === null || beforePurchaseResponse === void 0 ? void 0 : beforePurchaseResponse.rate) {
+          // The user has selected a house rate that requires some type of set up to happen before purchase.
+          // For white label this would be a user has selected a house account UPS ground saver rate and needs to register and
+          // re-rate their shipment to get a real rate. If its successful, we'll purchase a label with the new rate.
           const _rate = beforePurchaseResponse.rate;
           const totalRateAmount = rates.getTotalRateAmount(_rate);
           if (!fundingOrigin) throw new Error("Unable to find balance");
@@ -213,24 +231,27 @@ const useRatesForm = ({
             });
             throw new Error("Insufficient funds. Please add funds before purchasing and try again.");
           } else {
-            yield purchaseLabel(_rate.rateId, shipment, _rate, servicePoint);
+            yield purchaseLabel(_rate.rateId, updatedShipment !== null && updatedShipment !== void 0 ? updatedShipment : shipment, _rate, servicePoint);
             return;
           }
         }
+        // The user has selected a standard rate and no further action is required before purchase
+        yield purchaseLabel(rateId, shipment, rate, servicePoint);
+        return;
       } catch (e) {
         if (Array.isArray(e)) {
           if (e[0] instanceof reactApi.SE.CodedError) setBeforeCreateError(e[0]);else setBeforeCreateError({
             errorCode: "unknown",
             errorSource: "client",
             errorType: "unknown",
-            message: (_h = e[0].message) !== null && _h !== void 0 ? _h : "An unknown error occurred"
+            message: (_j = e[0].message) !== null && _j !== void 0 ? _j : "An unknown error occurred"
           });
         } else {
           if (e instanceof reactApi.SE.CodedError) setBeforeCreateError(e);else setBeforeCreateError({
             errorCode: "unknown",
             errorSource: "client",
             errorType: "unknown",
-            message: (_j = e.message) !== null && _j !== void 0 ? _j : "An unknown error occurred"
+            message: (_k = e.message) !== null && _k !== void 0 ? _k : "An unknown error occurred"
           });
         }
         return;
@@ -238,7 +259,8 @@ const useRatesForm = ({
     }
   }), [fundingOrigin, handleSave, onBeforeLabelCreate, preferredRatesResponse, purchaseLabel, ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.rates, resetRates, shipment]);
   let errors = [...(ratesErrors !== null && ratesErrors !== void 0 ? ratesErrors : []), ...((_b = ratesResponse === null || ratesResponse === void 0 ? void 0 : ratesResponse.errors) !== null && _b !== void 0 ? _b : [])];
-  if (beforeCreateError) errors = [...errors, beforeCreateError];
+  let labelErrors = createLabelErrors !== null && createLabelErrors !== void 0 ? createLabelErrors : [];
+  if (beforeCreateError) labelErrors = [...labelErrors, beforeCreateError];
   if (beforeSaveError) errors = [...errors, beforeSaveError];
   // Sometimes no rates are returned and no top-level errors are returned
   // but there are invalid rates with errors. This will filter out duplicate error messages and expose those to the user
@@ -259,7 +281,7 @@ const useRatesForm = ({
     scrubber: React.useCallback(() => "common:errorMessages.noRatesAvailable", [])
   });
   const displayableLabelErrors = useScrubErrors.useScrubErrors({
-    errors: labelErrors !== null && labelErrors !== void 0 ? labelErrors : undefined,
+    errors: labelErrors,
     scrubber: React.useCallback(e => {
       if (e.message.includes("The ship from email is required") || e.message.includes("The ship to email is required")) return "common:errorMessages.emailIsRequired";
       return e.message.replace(/Exception with code \w+; module \d+, category \d+, item \d+/g, "");

package/cjs/elements/purchase-label/purchase-label.cjs

@@ -74,7 +74,6 @@ const Component = _a => {
     externalOrderNumber,
     externalShipmentId,
     onLoad,
-    onShipmentUpdated,
     orderSourceCode,
     salesOrderId,
     shipFromAddresses,

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

@@ -36,6 +36,7 @@ const useShipmentsGrid = ({
     pageSize,
     pagerProps
   } = usePager.usePager(PAGE_SIZE);
+  const [activeShipmentId, setActiveShipmentId] = React.useState();
   const [filters, setFilters] = React.useState(initialFilters);
   const clearAllFilters = () => {
     setFilters(initialFilters);
@@ -69,8 +70,9 @@ const useShipmentsGrid = ({
   }, createdDateValue.getCreatedDateFilterValue((_b = (_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.start, (_d = (_c = filters.createdDate) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.end)));
   const shipments = React.useMemo(() => data === null || data === void 0 ? void 0 : data.shipments.map(shipment => Object.assign(Object.assign({}, shipment), {
     disableOnRowClick: shipment.shipmentStatus === "cancelled",
+    isLoading: activeShipmentId === shipment.shipmentId,
     serviceName: getServiceName(shipment)
-  })), [data === null || data === void 0 ? void 0 : data.shipments, getServiceName]);
+  })), [activeShipmentId, data === null || data === void 0 ? void 0 : data.shipments, getServiceName]);
   const {
     data: shipmentById,
     error: shipmentErrors,
@@ -111,6 +113,7 @@ const useShipmentsGrid = ({
     if (shipmentFilteredById) {
       return [Object.assign(Object.assign({}, shipmentFilteredById), {
         disableOnRowClick: shipmentFilteredById.shipmentStatus === "cancelled",
+        isLoading: activeShipmentId === shipmentFilteredById.shipmentId,
         serviceName: getServiceName(shipmentFilteredById)
       })];
     } else if (shipmentFilteredByIdHasErrors) {
@@ -135,6 +138,7 @@ const useShipmentsGrid = ({
       showPagination: shipmentFilteredById ? false : ((data === null || data === void 0 ? void 0 : data.total) || 0) > pageSize,
       totalElements: shipmentFilteredById ? 1 : (data === null || data === void 0 ? void 0 : data.total) || 0
     },
+    setActiveShipmentId,
     setFilters: onSetFilters,
     shipments,
     shouldShowFilters: isAnyFilterEnabled

package/cjs/elements/shipments-grid/shipments-grid.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var useSortableQuery = require('../../hooks/use-sortable-query.cjs');
 var React = require('react');
@@ -45,18 +46,18 @@ var errorFallback = require('../../components/error-fallback/error-fallback.cjs'
  * @see {@link ShipmentsGrid.Element | The **Element** created to render `<ShipmentsGrid />`}
  */
 const Component = ({
-  onRowClick,
+  onRowClick: onRowClickProp,
   onClickCancelShipment,
   shipmentStatus,
   showShipmentIdFilter: _showShipmentIdFilter = true,
   showCreatedDateFilter: _showCreatedDateFilter = true
 }) => {
-  const {
-    t
-  } = reactI18next.useTranslation(["common", "list-shipments"]);
   const {
     globalFeatures
   } = elementsContextProvider.useElements();
+  const {
+    t
+  } = reactI18next.useTranslation(["common", "list-shipments"]);
   const {
     toggleSort,
     sortState
@@ -73,7 +74,8 @@ const Component = ({
     getGridData,
     isAnyFilterActive,
     shouldShowFilters,
-    clearAllFilters
+    clearAllFilters,
+    setActiveShipmentId
   } = useShipmentsGrid.useShipmentsGrid({
     shipmentStatus,
     showCreatedDateFilter: _showCreatedDateFilter,
@@ -81,6 +83,11 @@ const Component = ({
     sortBy: sortState.by,
     sortDir: sortState.dir
   });
+  const onRowClick = shipment => tslib.__awaiter(void 0, void 0, void 0, function* () {
+    setActiveShipmentId(shipment.shipmentId);
+    yield onRowClickProp === null || onRowClickProp === void 0 ? void 0 : onRowClickProp(shipment);
+    setActiveShipmentId(undefined);
+  });
   const handleCreatedDateSort = () => {
     toggleSort("created_at");
   };

package/cjs/hooks/index.cjs

@@ -7,6 +7,7 @@ var useHelpers = require('./use-helpers.cjs');
 var useConfigureShipment = require('./use-configure-shipment.cjs');
 var useImportSalesOrder = require('./use-import-sales-order.cjs');
 var useBalanceServices = require('./use-balance-services.cjs');
+var useRootPortal = require('./use-root-portal.cjs');
 
 
 
@@ -15,3 +16,5 @@ exports.useHelpers = useHelpers.useHelpers;
 exports.useConfigureShipment = useConfigureShipment.useConfigureShipment;
 exports.useImportSalesOrder = useImportSalesOrder.useImportSalesOrder;
 exports.useBalanceServices = useBalanceServices.useBalanceServices;
+exports.RootPortalProvider = useRootPortal.RootPortalProvider;
+exports.useRootPortal = useRootPortal.useRootPortal;

package/cjs/hooks/use-configure-shipment.cjs

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var reactQuery = require('@tanstack/react-query');
 var address = require('../utilities/shipengine/address.cjs');
 var salesOrder = require('../utilities/shipengine/sales-order.cjs');
 var shipment = require('../utilities/shipengine/shipment.cjs');
@@ -13,7 +12,6 @@ var reactApi = require('@shipengine/react-api');
 var useImportSalesOrder = require('./use-import-sales-order.cjs');
 
 const useConfigureShipment = ({
-  onShipmentUpdated,
   onLoad,
   errorWhenShipmentCancelled: _errorWhenShipmentCancelled = false,
   externalOrderId,
@@ -26,7 +24,6 @@ const useConfigureShipment = ({
   warehouseId,
   useWarehouses: _useWarehouses = true
 }) => {
-  const queryClient = reactQuery.useQueryClient();
   // Queue of incomplete requirement keys (i.e., Ship From addresses, Warehouses, Carriers)
   const incompleteRequirementsKeys = React.useMemo(() => [], []);
   const {
@@ -54,10 +51,6 @@ const useConfigureShipment = ({
     orderSourceCode,
     salesOrderId
   });
-  const {
-    error: updateShipmentErrors,
-    mutate: updateShipment
-  } = reactApi.useUpdateSalesOrderShipment();
   const {
     data: newV1Shipment,
     mutateAsync: createV1Shipment,
@@ -161,25 +154,6 @@ const useConfigureShipment = ({
       }
     }
   }), [createSalesOrderShipment, createV1Shipment, creatingSalesOrderShipment, creatingV1Shipment, defaultShipFromAddress, defaultWarehouse, externalOrderId, externalOrderNumber, externalShipmentId, incompleteRequirementsKeys, isExternalShipmentFetching, isExternalShipmentInitialLoading, isFetchingWarehouses, isInitialLoadingWarehouses, labelPurchasedSalesOrderShipment, listSalesOrderShipmentsInitiallyLoading, listSalesOrderShipmentsIsFetching, orderSourceCode, pendingSalesOrderShipment, refetchSalesOrderShipments, salesOrder$1, salesOrderId, salesOrderShipmentCreated, shipFromAddresses === null || shipFromAddresses === void 0 ? void 0 : shipFromAddresses.length, shipmentId, _useWarehouses, v1shipmentCreated, warehouseId, warehouses$1]);
-  /**
-   * Update a shipment with deprecated customs items. Move items to the products array on the Shipment's packages array
-   *
-   * Invalidate useGetShipment's cache
-   */
-  const formatCustoms = React.useCallback(shipment$1 => {
-    const formattedShipment = shipment.moveCustomsItemsToProducts(shipment$1);
-    updateShipment(formattedShipment, {
-      onSuccess(data) {
-        void (onShipmentUpdated === null || onShipmentUpdated === void 0 ? void 0 : onShipmentUpdated(data));
-        void queryClient.invalidateQueries(["useListSalesOrderShipments", {
-          shipmentId: data.shipmentId
-        }], {
-          exact: false
-        } // Invalidate queries with similar keys
-        );
-      }
-    });
-  }, [onShipmentUpdated, queryClient, updateShipment]);
   const refetchPendingSalesOrderShipments = React.useCallback(() => tslib.__awaiter(void 0, void 0, void 0, function* () {
     const {
       data: shipments
@@ -192,13 +166,6 @@ const useConfigureShipment = ({
       yield handleShipmentCreation();
     }))();
   }, [shipmentId, externalShipmentId, salesOrderId, salesOrder$1, warehouses$1, warehouseId, handleShipmentCreation]);
-  // useEffect to handle formating customs
-  React.useEffect(() => {
-    var _a, _b;
-    if ((_b = (_a = pendingSalesOrderShipment === null || pendingSalesOrderShipment === void 0 ? void 0 : pendingSalesOrderShipment.customs) === null || _a === void 0 ? void 0 : _a.customsItems) === null || _b === void 0 ? void 0 : _b.length) {
-      formatCustoms(pendingSalesOrderShipment);
-    }
-  }, [formatCustoms, pendingSalesOrderShipment]);
   // useEffect to check and run the onLoad prop
   React.useEffect(() => {
     if ((salesOrderShipments === null || salesOrderShipments === void 0 ? void 0 : salesOrderShipments.length) && salesOrderShipments.every(s => s.shipmentStatus === "label_purchased")) {
@@ -210,7 +177,7 @@ const useConfigureShipment = ({
     if (isInitialLoadingCarriers || isFetchingCarriers) return;
     if ((carriers === null || carriers === void 0 ? void 0 : carriers.length) === 0) incompleteRequirementsKeys.push("no_carriers");
   }, [carriers, incompleteRequirementsKeys, isFetchingCarriers, isInitialLoadingCarriers]);
-  const errors = [...(listWarehouseErrors !== null && listWarehouseErrors !== void 0 ? listWarehouseErrors : []), ...(createSalesOrderShipmentErrors !== null && createSalesOrderShipmentErrors !== void 0 ? createSalesOrderShipmentErrors : []), ...(createV1ShipmentErrors !== null && createV1ShipmentErrors !== void 0 ? createV1ShipmentErrors : []), ...(listSalesOrderShipmentsErrors !== null && listSalesOrderShipmentsErrors !== void 0 ? listSalesOrderShipmentsErrors : []), ...(getExternalShipmentErrors !== null && getExternalShipmentErrors !== void 0 ? getExternalShipmentErrors : []), ...(importSalesOrderErrors !== null && importSalesOrderErrors !== void 0 ? importSalesOrderErrors : []), ...(updateShipmentErrors !== null && updateShipmentErrors !== void 0 ? updateShipmentErrors : []), ...(_errorWhenShipmentCancelled && cancelledShipment ? [new reactApi.CodedError("shipment_cancelled", {
+  const errors = [...(listWarehouseErrors !== null && listWarehouseErrors !== void 0 ? listWarehouseErrors : []), ...(createSalesOrderShipmentErrors !== null && createSalesOrderShipmentErrors !== void 0 ? createSalesOrderShipmentErrors : []), ...(createV1ShipmentErrors !== null && createV1ShipmentErrors !== void 0 ? createV1ShipmentErrors : []), ...(listSalesOrderShipmentsErrors !== null && listSalesOrderShipmentsErrors !== void 0 ? listSalesOrderShipmentsErrors : []), ...(getExternalShipmentErrors !== null && getExternalShipmentErrors !== void 0 ? getExternalShipmentErrors : []), ...(importSalesOrderErrors !== null && importSalesOrderErrors !== void 0 ? importSalesOrderErrors : []), ...(_errorWhenShipmentCancelled && cancelledShipment ? [new reactApi.CodedError("shipment_cancelled", {
     errorCode: "invalid_status",
     errorSource: "elements",
     errorType: "business_rules"

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

@@ -222,7 +222,8 @@ var common = {
 		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.22.0";
+var version = "2.23.0";
 
 exports.version = version;

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

@@ -69,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
@@ -94,29 +94,43 @@ const GridController = ({
       outerWrapperStyles: styles.tableWrapper,
       tableStyles: styles.table
     }, {
-      children: jsxs(TableBody, {
-        children: [_isLoading && loadingRows, data.map((row, index) => {
+      children: jsx(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 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-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-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 };