@shipengine/elements 2.21.0 → 2.22.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -25,6 +25,7 @@ var spacer = require('../../../spacer/spacer.cjs');
  * @see {@link TrackingStatusFilterProps | The props for the `<TrackingStatusFilter />` component}
  */
 const TrackingStatusFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -109,6 +110,7 @@ const TrackingStatusFilter = ({
   }, [watchedValues]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs(giger.Button, Object.assign({
+      disabled: _disabled,
       onClick: toggleTrackingStatusFilter,
       ref: buttonRef,
       variant: giger.ButtonVariant.TEXT

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

@@ -22,6 +22,7 @@ var trackingStatusFilter = require('./components/tracking-status-filter/tracking
 const GridFilters = ({
   filters,
   onFiltersUpdated,
+  filtersDisabled: _filtersDisabled = false,
   onClearAllFilters
 }) => {
   var _a, _b, _c;
@@ -41,18 +42,23 @@ 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
     }), shouldShowClearAll && jsxRuntime.jsx(giger.Button, Object.assign({
+      disabled: _filtersDisabled,
       onClick: () => {
         onClearAllFilters();
       },

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

@@ -6,18 +6,19 @@ 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,
   showTrackingStatusFilter,
-  fetchShipments
+  fetchShipments,
+  sortDir
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f;
   const initialFilters = {
     labelId: {
       enabled: !!showLabelIdFilter,
@@ -50,7 +51,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 +65,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);
@@ -90,38 +91,64 @@ const useLabelsGrid = ({
     };
     setFilters(updatedFilters);
   }, [showLabelIdFilter, showShipmentIdFilter, 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,
+    pageSize,
+    shipmentId: ((_c = filters.shipmentId) === null || _c === void 0 ? void 0 : _c.value) || undefined,
+    sortDir: sortDir !== null && sortDir !== void 0 ? sortDir : "desc",
+    trackingStatusFilters: ((_d = filters.trackingStatus) === null || _d === void 0 ? void 0 : _d.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,
       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 +157,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(((_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;
   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;
     // Check if filter by label id is active and there are no errors
     if (isLabelFilterActive && !isLabelFilterError) {
       let labelPassFilters = true;
@@ -150,14 +176,14 @@ const useLabelsGrid = ({
         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 (((_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)) {
         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", (_c = filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.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, (_d = filters.trackingStatus) === null || _d === void 0 ? void 0 : _d.value)) {
         labelPassFilters = false;
       }
       return labelPassFilters ? labelById : undefined;
@@ -192,20 +218,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;