@shipengine/elements 2.21.0 → 2.23.0

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
@@ -22,9 +23,10 @@ var trackingStatusFilter = require('./components/tracking-status-filter/tracking
 const GridFilters = ({
   filters,
   onFiltersUpdated,
+  filtersDisabled: _filtersDisabled = false,
   onClearAllFilters
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     t
   } = reactI18next.useTranslation(["common"]);
@@ -41,18 +43,27 @@ const GridFilters = ({
   });
   return jsxRuntime.jsxs("section", {
     children: [filters.shipmentId.enabled && jsxRuntime.jsx(shipmentIdFilter.ShipmentIdFilter, {
+      disabled: _filtersDisabled,
       filters: filters,
       onFiltersUpdated: onFiltersUpdated
     }), ((_a = filters.labelId) === null || _a === void 0 ? void 0 : _a.enabled) && jsxRuntime.jsx(labelIdFilter.LabelIdFilter, {
+      disabled: _filtersDisabled,
       filters: filters,
       onFiltersUpdated: onFiltersUpdated
     }), ((_b = filters.createdDate) === null || _b === void 0 ? void 0 : _b.enabled) && jsxRuntime.jsx(createdDateFilter.CreatedDateFilter, {
+      disabled: _filtersDisabled,
       filters: filters,
       onFiltersUpdated: onFiltersUpdated
     }), ((_c = filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.enabled) && jsxRuntime.jsx(trackingStatusFilter.TrackingStatusFilter, {
+      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: () => {
         onClearAllFilters();
       },

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

@@ -6,18 +6,20 @@ var react = require('@emotion/react');
 var useGetServiceName = require('../../../hooks/use-get-service-name.cjs');
 var React = require('react');
 var reactApi = require('@shipengine/react-api');
+var useTrackingStatusFilter = require('./use-tracking-status-filter.cjs');
 var usePager = require('../../../components/pager/usePager.cjs');
 
 const PAGE_SIZE = 20;
 const useLabelsGrid = ({
-  createdDateSortBy,
   labelStatus,
   showShipmentIdFilter,
   showLabelIdFilter,
+  showStatusFilter,
   showTrackingStatusFilter,
-  fetchShipments
+  fetchShipments,
+  sortDir
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const initialFilters = {
     labelId: {
       enabled: !!showLabelIdFilter,
@@ -27,6 +29,10 @@ const useLabelsGrid = ({
       enabled: !!showShipmentIdFilter,
       value: ""
     },
+    status: {
+      enabled: !!showStatusFilter,
+      value: ""
+    },
     trackingStatus: {
       enabled: !!showTrackingStatusFilter,
       value: []
@@ -50,7 +56,7 @@ const useLabelsGrid = ({
     pagerProps.onPageSelect(1);
     setFilters(newFilters);
   };
-  const hasActiveFilterValue = value => {
+  const hasActiveFilterValue = React.useCallback(value => {
     if (value === null || value === undefined) {
       return false;
     }
@@ -64,7 +70,7 @@ const useLabelsGrid = ({
       return value.trim() !== "";
     }
     return Boolean(value);
-  };
+  }, []);
   const isAnyFilterActive = Object.keys(filters).some(key => {
     const filter = filters[key];
     return (filter === null || filter === void 0 ? void 0 : filter.enabled) && hasActiveFilterValue(filter === null || filter === void 0 ? void 0 : filter.value);
@@ -83,45 +89,75 @@ 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));
+  }, [(_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.enabled, (_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.value, hasActiveFilterValue]);
+  // Use tracking status filter hook when the filter is active
+  const {
+    labels: trackingFilteredLabels,
+    isLoading: isTrackingFilterLoading,
+    isFetchingNextPage,
+    hasMoreUnfetchedResults,
+    paginationInfo: statusFilteredPaginationInfo
+  } = useTrackingStatusFilter.useTrackingStatusFilter({
+    currentPage: page,
+    isActive: isTrackingStatusFilterActive,
+    labelStatus: ((_c = filters.status) === null || _c === void 0 ? void 0 : _c.value) || labelStatus,
+    pageSize,
+    shipmentId: ((_d = filters.shipmentId) === null || _d === void 0 ? void 0 : _d.value) || undefined,
+    sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc",
+    trackingStatusFilters: ((_e = filters.trackingStatus) === null || _e === void 0 ? void 0 : _e.value) || []
+  });
+  // Use regular API pagination when tracking status filter is not active
   const {
     data: listLabelsData,
     isLoading: isListLabelsLoading,
     isError: isListLabelsError
   } = 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,
-      sortDir: createdDateSortBy !== null && createdDateSortBy !== void 0 ? createdDateSortBy : "desc"
+      sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc"
     }
   });
   const labels = React.useMemo(() => {
+    // If tracking status filter is active, use the filtered labels from the hook
+    if (isTrackingStatusFilterActive) {
+      return trackingFilteredLabels.map(label => Object.assign(Object.assign({}, label), {
+        bodyCellStyles: {
+          color: label.status === "voided" ? theme.palette.gray[400] : undefined
+        },
+        serviceName: getServiceName(label)
+      }));
+    }
+    // Otherwise, use the regular API pagination
     if (!(listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.labels)) {
       return [];
     }
-    return listLabelsData.labels.filter(label => {
-      var _a, _b, _c, _d;
-      // Filter by tracking status
-      return !((_b = (_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) ||
-      // Voided labels still have an in_transit tracking status, exclude them if the in_transit filter is selected
-      label.status !== "voided" && ((_c = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.value.includes(label.trackingStatus)) ||
-      // We show voided labels under tracking status also, include them if the voided filter is selected
-      label.status === "voided" && ((_d = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _d === void 0 ? void 0 : _d.value.includes(label.status));
-    }).map(label => Object.assign(Object.assign({}, label), {
+    // No need to filter by tracking status here since that's handled by useTrackingStatusFilter
+    // when the tracking status filter is active
+    return listLabelsData.labels.map(label => Object.assign(Object.assign({}, label), {
       bodyCellStyles: {
         color: label.status === "voided" ? theme.palette.gray[400] : undefined
       },
       serviceName: getServiceName(label)
     }));
-  }, [listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.labels, (_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.value, theme.palette.gray, getServiceName]);
+  }, [isTrackingStatusFilterActive, trackingFilteredLabels, listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.labels, theme.palette.gray, getServiceName]);
   const {
     data: listShipmentsData,
     isFetching: isListShipmentsLoading,
@@ -130,18 +166,17 @@ const useLabelsGrid = ({
     // An empty array here should disable the query
     shipmentIds: fetchShipments ? labels === null || labels === void 0 ? void 0 : labels.map(label => label.shipmentId) : []
   });
-  const shouldShowFilters = isAnyFilterEnabled && (isAnyFilterActive || Boolean(labels === null || labels === void 0 ? void 0 : labels.length));
   const {
     data: labelFilterData,
     isError: isLabelFilterError,
     isInitialLoading: isLabelFilterLoading
-  } = reactApi.useGetLabel(((_b = filters.labelId) === null || _b === void 0 ? void 0 : _b.value) || undefined);
-  const isLabelFilterActive = (_c = filters.labelId) === null || _c === void 0 ? void 0 : _c.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;
+    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;
@@ -149,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 ((filters === null || filters === void 0 ? void 0 : filters.shipmentId.value) !== "" && (filters === null || filters === void 0 ? void 0 : filters.shipmentId.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", (_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.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, (_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.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;
@@ -192,20 +231,28 @@ const useLabelsGrid = ({
     clearAllFilters,
     filters,
     getGridData,
+    hasMoreUnfetchedResults: isTrackingStatusFilterActive ? hasMoreUnfetchedResults : false,
     isAnyFilterActive,
     isError: isListLabelsError || isListShipmentsError && fetchShipments,
-    isLoading: isListLabelsLoading || isLabelFilterLoading || isListShipmentsLoading && fetchShipments,
+    isFetchingNextPage: isTrackingStatusFilterActive ? isFetchingNextPage : false,
+    // Calculate isLoading based on which query should be active
+    isLoading:
+    // Always include label filter loading when label ID filter is active
+    isLabelFilterActive && isLabelFilterLoading || (
+    // For tracking status filter
+    isTrackingStatusFilterActive ? isTrackingFilterLoading // Use tracking filter loading when active
+    : isListLabelsLoading || isListShipmentsLoading && fetchShipments),
     labels,
     pageConfig: {
-      currentPage: labelFilteredById ? 1 : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.page) || 0,
+      currentPage: labelFilteredById ? 1 : isTrackingStatusFilterActive ? statusFilteredPaginationInfo.currentPage : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.page) || 0,
       pagerProps,
-      pagesAmount: (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.pages) || 0,
+      pagesAmount: labelFilteredById ? 1 : isTrackingStatusFilterActive ? (statusFilteredPaginationInfo === null || statusFilteredPaginationInfo === void 0 ? void 0 : statusFilteredPaginationInfo.totalPages) || 1 : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.pages) || 0,
       pageSize,
-      showPagination: labelFilteredById ? false : ((listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.total) || 0) > pageSize,
-      totalElements: labelFilteredById ? 1 : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.total) || 0
+      showPagination: labelFilteredById ? false : isTrackingStatusFilterActive ? ((statusFilteredPaginationInfo === null || statusFilteredPaginationInfo === void 0 ? void 0 : statusFilteredPaginationInfo.totalCount) || 0) > pageSize : ((listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.total) || 0) > pageSize,
+      totalElements: labelFilteredById ? 1 : isTrackingStatusFilterActive ? (statusFilteredPaginationInfo === null || statusFilteredPaginationInfo === void 0 ? void 0 : statusFilteredPaginationInfo.totalCount) || 0 : (listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.total) || 0
     },
     setFilters: onSetFilters,
-    shouldShowFilters
+    shouldShowFilters: isAnyFilterEnabled
   };
 };
 

package/cjs/elements/labels-grid/hooks/use-tracking-status-filter.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactApi = require('@shipengine/react-api');
+
+const MIN_RESULTS = 20; // Minimum number of filtered results needed to stop fetching
+const MAX_PAGES = 5; // Maximum number of pages to fetch if we have enough results
+const useTrackingStatusFilter = ({
+  isActive,
+  labelStatus,
+  shipmentId,
+  trackingStatusFilters,
+  sortDir,
+  currentPage,
+  pageSize
+}) => {
+  const [allLabels, setAllLabels] = React.useState([]);
+  const {
+    data: infiniteData,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage
+  } = reactApi.useListLabelsInfinite({
+    enabled: isActive,
+    queryFnParams: {
+      labelStatus,
+      pageSize: 100,
+      shipmentId,
+      sortDir
+    }
+  });
+  React.useEffect(() => {
+    if (isActive && (infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages)) {
+      const allLabelsFromPages = infiniteData.pages.flatMap(page => page.labels || []);
+      setAllLabels(allLabelsFromPages);
+    }
+  }, [isActive, infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages]);
+  const filteredLabels = React.useMemo(() => {
+    if (!isActive || !trackingStatusFilters.length) {
+      return allLabels;
+    }
+    return allLabels.filter(label => {
+      if (label.status === "voided") {
+        return trackingStatusFilters.includes("voided");
+      }
+      return trackingStatusFilters.includes(label.trackingStatus);
+    });
+  }, [isActive, allLabels, trackingStatusFilters]);
+  const totalCount = filteredLabels.length;
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+  const paginatedLabels = React.useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, filteredLabels.length);
+    return filteredLabels.slice(startIndex, endIndex);
+  }, [filteredLabels, currentPage, pageSize]);
+  // Check if we have enough data for the next page
+  const hasDataForNextPage = React.useMemo(() => {
+    const nextPageStart = currentPage * pageSize;
+    return nextPageStart < filteredLabels.length;
+  }, [currentPage, pageSize, filteredLabels.length]);
+  // Check if we have more unfetched results
+  const hasMoreUnfetchedResults = React.useMemo(() => {
+    return hasNextPage && (infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages) && infiniteData.pages.length >= MAX_PAGES && filteredLabels.length >= MIN_RESULTS;
+  }, [hasNextPage, infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages, filteredLabels.length]);
+  // Trigger fetchNextPage
+  React.useEffect(() => {
+    // Don't fetch if not active or already fetching
+    if (!isActive || isFetchingNextPage) return;
+    // Continue fetching if we don't have minimum results yet
+    if (filteredLabels.length < MIN_RESULTS && hasNextPage) {
+      fetchNextPage();
+      return;
+    }
+    // Continue fetching if we don't have data for the next page
+    if (!hasDataForNextPage && hasNextPage) {
+      fetchNextPage();
+      return;
+    }
+    // Stop fetching if we've reached max pages and have enough results
+    if ((infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages) && infiniteData.pages.length >= MAX_PAGES && filteredLabels.length >= MIN_RESULTS && hasDataForNextPage) {
+      return;
+    }
+    // Otherwise, fetch next page if available
+    if (hasNextPage) {
+      fetchNextPage();
+    }
+  }, [isActive, currentPage, pageSize, filteredLabels.length, hasNextPage, isFetchingNextPage, fetchNextPage, hasDataForNextPage, infiniteData === null || infiniteData === void 0 ? void 0 : infiniteData.pages]);
+  return {
+    allLabelsCount: totalCount,
+    fetchNextPage,
+    filteredLabelsCount: totalCount,
+    hasMorePages: hasNextPage,
+    hasMoreUnfetchedResults,
+    isFetchingNextPage,
+    isLoading: isLoading || filteredLabels.length === 0 && isFetchingNextPage,
+    labels: paginatedLabels,
+    paginationInfo: {
+      currentPage,
+      pageSize,
+      totalCount,
+      totalPages
+    }
+  };
+};
+
+exports.useTrackingStatusFilter = useTrackingStatusFilter;

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

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useSortableQuery = require('../../hooks/use-sortable-query.cjs');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var giger = require('@shipengine/giger');
 var useLabelsGrid = require('./hooks/use-labels-grid.cjs');
 var labelsGrid_styles = require('./labels-grid.styles.cjs');
-var sortableHeader = require('../../components/grid-controller/sortable-header.cjs');
+var sortableHeader = require('../../components/grid-controller/sortable-header/sortable-header.cjs');
 var cellFormattedDate = require('../../components/grid-controller/cell-formatted-date.cjs');
 var actionsMenu = require('../../components/actions-menu/actions-menu.cjs');
 var errorState = require('../../components/error-state/error-state.cjs');
@@ -17,7 +18,6 @@ var gridFilters = require('../../components/grid-filters/grid-filters.cjs');
 var gridFooter = require('../../components/grid-controller/grid-footer.cjs');
 var index = require('../../locales/en/index.cjs');
 var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
-var loader = require('../../components/loader/loader.cjs');
 var spacer = require('../../components/spacer/spacer.cjs');
 var poweredByShipengine = require('../../components/powered-by-shipengine/powered-by-shipengine.cjs');
 var createElement = require('../../create-element/create-element.cjs');
@@ -45,7 +45,13 @@ const Component = ({
   } = elementsContextProvider.useElements();
   const defaultFeatures = getFeatures("labelsGridFeatures");
   const prevStatus = React.useRef(labelStatus);
-  const [createdDateSortBy, setCreatedDateSortBy] = React.useState("desc");
+  const {
+    toggleSort,
+    sortState
+  } = useSortableQuery.useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
   features = Object.assign(Object.assign({}, defaultFeatures), features !== null && features !== void 0 ? features : {});
   const labelIdColumn = React.useMemo(() => {
     var _a;
@@ -63,14 +69,21 @@ 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 showTrackingStatusFilter = trackingStatusColumn && ((_c = trackingStatusColumn.allowFilter) !== null && _c !== void 0 ? _c : true);
+  const showStatusFilter = statusColumn && ((_c = statusColumn.allowFilter) !== null && _c !== void 0 ? _c : true);
+  const showTrackingStatusFilter = trackingStatusColumn && !!trackingStatusColumn.allowFilter;
   const {
     labels,
     getGridData,
     isError,
     isLoading,
+    isFetchingNextPage,
+    hasMoreUnfetchedResults,
     filters,
     setFilters,
     pageConfig,
@@ -78,12 +91,13 @@ const Component = ({
     shouldShowFilters,
     clearAllFilters
   } = useLabelsGrid.useLabelsGrid({
-    createdDateSortBy,
     fetchShipments: !!shipmentNumberColumn,
     labelStatus,
     showLabelIdFilter,
     showShipmentIdFilter,
-    showTrackingStatusFilter
+    showStatusFilter,
+    showTrackingStatusFilter,
+    sortDir: sortState.dir
   });
   React.useEffect(() => {
     if (prevStatus.current !== labelStatus) {
@@ -99,14 +113,17 @@ 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(() => {
-    setCreatedDateSortBy(createdDateSortBy === "desc" ? "asc" : "desc");
-  }, [createdDateSortBy]);
+    toggleSort("created_at");
+  }, [toggleSort]);
   const columns = React.useMemo(() => {
     var _a;
     const labelTags = {
@@ -150,7 +167,7 @@ const Component = ({
         headerContent: jsxRuntime.jsx(sortableHeader.SortableHeader, {
           headerText: t("list-labels:headers.created"),
           onToggleSort: toggleCreatedDateSort,
-          sortDirection: createdDateSortBy
+          sortDirection: sortState.createdAtDir
         }),
         renderCellContent: label => {
           return jsxRuntime.jsx(cellFormattedDate.CellFormattedDate, {
@@ -378,24 +395,13 @@ const Component = ({
       });
     }
     return cols;
-  }, [t, toggleCreatedDateSort, createdDateSortBy, features === null || features === void 0 ? void 0 : features.columns, features === null || features === void 0 ? void 0 : features.showActions, labels, onClickExternalOrderId, onClickExternalShipmentId, onClickViewDetails, onClickVoidLabel, onClickPrintLabel, onClickPrintForms, onClickShipmentNumber]);
-  if (isLoading) {
-    return jsxRuntime.jsx(loader.Loader, {
-      message: t("loading.labels")
-    });
-  }
-  if (isError) {
-    return jsxRuntime.jsx(errorState.ErrorState, {
-      css: labelsGrid_styles.styles.errorState,
-      subtitle: [t("list-labels:errorMessages.subtitle"), t("errorMessages.refreshAndTryAgain")],
-      title: t("list-labels:errorMessages.title")
-    });
-  }
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(gridController.GridController, {
-      columns: columns,
-      data: getGridData(),
-      emptyContent: isAnyFilterActive ? jsxRuntime.jsx(giger.EmptyState, Object.assign({
+  }, [t, toggleCreatedDateSort, sortState.createdAtDir, features === null || features === void 0 ? void 0 : features.columns, features === null || features === void 0 ? void 0 : features.showActions, labels, onClickExternalOrderId, onClickExternalShipmentId, onClickShipmentNumber, onClickVoidLabel, onClickViewDetails, onClickPrintLabel, onClickPrintForms]);
+  const emptyContentComponent = React.useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsxRuntime.jsx(giger.EmptyState, Object.assign({
         isElevated: false,
         subtitle: t("list-labels:emptyWithFilters.subtitle"),
         title: t("list-labels:emptyWithFilters.title")
@@ -405,17 +411,36 @@ const Component = ({
         }, {
           children: t("list-labels:emptyWithFilters.button")
         }))
-      })) : jsxRuntime.jsx(giger.EmptyState, {
+      }));
+    } else {
+      return jsxRuntime.jsx(giger.EmptyState, {
         isElevated: false,
         subtitle: t("list-labels:empty.subtitle"),
         title: t("list-labels:empty.title")
-      }),
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
+  if (isError) {
+    return jsxRuntime.jsx(errorState.ErrorState, {
+      css: labelsGrid_styles.styles.errorState,
+      subtitle: [t("list-labels:errorMessages.subtitle"), t("errorMessages.refreshAndTryAgain")],
+      title: t("list-labels:errorMessages.title")
+    });
+  }
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(gridController.GridController, {
+      columns: columns,
+      data: getGridData(),
+      emptyContent: emptyContentComponent,
       filters: shouldShowFilters && jsxRuntime.jsx(gridFilters.GridFilters, {
         filters: gridFilters$1,
+        filtersDisabled: isLoading,
         onClearAllFilters: clearAllFilters,
         onFiltersUpdated: setFilters
       }),
       footerContent: jsxRuntime.jsx(gridFooter.GridFooter, {
+        hasMoreUnfetchedResults: hasMoreUnfetchedResults,
+        isLoadingMore: isFetchingNextPage,
         onPageChange: pageConfig.pagerProps.onPageSelect,
         page: pageConfig.currentPage,
         pages: pageConfig.pagesAmount,
@@ -423,6 +448,7 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      isLoading: isLoading,
       onRowClick: onRowClick
     }), globalFeatures.poweredByShipEngine && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.PoweredByShipEngine, {})]

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
     })]
   }));
 };