@shipengine/elements 2.21.0 → 2.23.0

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

@@ -21,10 +21,11 @@ import { Spacer } from '../../../spacer/spacer.js';
  * @see {@link TrackingStatusFilterProps | The props for the `<TrackingStatusFilter />` component}
  */
 const TrackingStatusFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
-  var _a;
+  var _a, _b, _c, _d;
   const {
     t
   } = useTranslation();
@@ -41,21 +42,24 @@ const TrackingStatusFilter = ({
     },
     resolver: validationResolver(trackingStatusFormSchema)
   });
-  const determineButtonText = useCallback(filters => {
-    if (filters.length === 0) {
-      return t("list-labels:headers.trackingStatus");
-    } else if (filters.length === 1) {
+  const determineButtonText = useCallback(statuses => {
+    var _a, _b, _c;
+    if (statuses.length === 0) {
+      return ((_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.nickname) || t("list-labels:headers.trackingStatus");
+    } else if (statuses.length === 1) {
       return t("common:grid.filteredTrackingStatus", {
-        filter: t(`list-labels:trackingStatus.${filters[0]}`)
+        filter: t(`list-labels:trackingStatus.${statuses[0]}`),
+        name: ((_b = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.nickname) || t("list-labels:headers.trackingStatus")
       });
     } else {
       return t("common:grid.filteredTrackingStatus", {
-        filter: t(`list-labels:trackingStatus.${filters[0]}`)
+        filter: t(`list-labels:trackingStatus.${statuses[0]}`),
+        name: ((_c = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.nickname) || t("list-labels:headers.trackingStatus")
       }) + t("common:grid.more", {
-        count: filters.length - 1
+        count: statuses.length - 1
       });
     }
-  }, [t]);
+  }, [t, (_a = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.nickname]);
   const getUpdatedKeys = useCallback(updatedFields => {
     return Object.keys(updatedFields).filter(key => updatedFields[key]);
   }, []);
@@ -75,9 +79,13 @@ const TrackingStatusFilter = ({
         unknown: filters.trackingStatus.value.includes("unknown")
       };
       form.reset(updatedFields);
-      setButtonText(determineButtonText(getUpdatedKeys(updatedFields)));
+      // Only set buttonText when filters are applied
+      const updatedKeys = getUpdatedKeys(updatedFields);
+      if (updatedKeys.length > 0) {
+        setButtonText(determineButtonText(updatedKeys));
+      }
     }
-  }, [determineButtonText, (_a = filters.trackingStatus) === null || _a === void 0 ? void 0 : _a.value, form, getUpdatedKeys, t]);
+  }, [determineButtonText, (_b = filters.trackingStatus) === null || _b === void 0 ? void 0 : _b.value, form, getUpdatedKeys]);
   const onClearFilters = useCallback(() => {
     onFiltersUpdated(Object.assign(Object.assign({}, filters), {
       trackingStatus: Object.assign(Object.assign({}, filters.trackingStatus), {
@@ -105,12 +113,15 @@ const TrackingStatusFilter = ({
   }, [watchedValues]);
   return jsxs(Fragment, {
     children: [jsxs(Button, Object.assign({
+      disabled: _disabled,
       onClick: toggleTrackingStatusFilter,
       ref: buttonRef,
       variant: ButtonVariant.TEXT
     }, {
-      children: [jsx("span", {
+      children: [isAnyCheckboxChecked ? jsx("span", {
         children: buttonText
+      }) : jsx("span", {
+        children: (_d = (_c = filters === null || filters === void 0 ? void 0 : filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.nickname) !== null && _d !== void 0 ? _d : t("list-labels:headers.trackingStatus")
       }), isAnyCheckboxChecked ?
       // Show Close Icon
       jsx(Icon, {

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

@@ -5,6 +5,7 @@ import { ShipmentIdFilter } from './components/shipment-id-filter/shipment-id-fi
 import { LabelIdFilter } from './components/label-id-filter/label-id-filter.js';
 import { CreatedDateFilter } from './components/created-date-filter/created-date-filter.js';
 import { TrackingStatusFilter } from './components/tracking-status-filter/tracking-status-filter.js';
+import { LabelStatusFilter } from './components/label-status-filter/label-status-filter.js';
 
 /**
  * @internal
@@ -18,9 +19,10 @@ import { TrackingStatusFilter } from './components/tracking-status-filter/tracki
 const GridFilters = ({
   filters,
   onFiltersUpdated,
+  filtersDisabled: _filtersDisabled = false,
   onClearAllFilters
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const {
     t
   } = useTranslation(["common"]);
@@ -37,18 +39,27 @@ const GridFilters = ({
   });
   return jsxs("section", {
     children: [filters.shipmentId.enabled && jsx(ShipmentIdFilter, {
+      disabled: _filtersDisabled,
       filters: filters,
       onFiltersUpdated: onFiltersUpdated
     }), ((_a = filters.labelId) === null || _a === void 0 ? void 0 : _a.enabled) && jsx(LabelIdFilter, {
+      disabled: _filtersDisabled,
       filters: filters,
       onFiltersUpdated: onFiltersUpdated
     }), ((_b = filters.createdDate) === null || _b === void 0 ? void 0 : _b.enabled) && jsx(CreatedDateFilter, {
+      disabled: _filtersDisabled,
       filters: filters,
       onFiltersUpdated: onFiltersUpdated
     }), ((_c = filters.trackingStatus) === null || _c === void 0 ? void 0 : _c.enabled) && jsx(TrackingStatusFilter, {
+      disabled: _filtersDisabled,
+      filters: filters,
+      onFiltersUpdated: onFiltersUpdated
+    }), ((_d = filters.status) === null || _d === void 0 ? void 0 : _d.enabled) && jsx(LabelStatusFilter, {
+      disabled: _filtersDisabled,
       filters: filters,
       onFiltersUpdated: onFiltersUpdated
     }), shouldShowClearAll && jsx(Button, Object.assign({
+      disabled: _filtersDisabled,
       onClick: () => {
         onClearAllFilters();
       },

package/esm/elements/labels-grid/hooks/use-labels-grid.js

@@ -1,19 +1,21 @@
 import { useTheme } from '@emotion/react';
 import { useGetServiceName } from '../../../hooks/use-get-service-name.js';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useCallback, useEffect, useMemo } from 'react';
 import { useListLabels, useListSalesOrderShipments, useGetLabel } from '@shipengine/react-api';
+import { useTrackingStatusFilter } from './use-tracking-status-filter.js';
 import { usePager } from '../../../components/pager/usePager.js';
 
 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,
@@ -23,6 +25,10 @@ const useLabelsGrid = ({
       enabled: !!showShipmentIdFilter,
       value: ""
     },
+    status: {
+      enabled: !!showStatusFilter,
+      value: ""
+    },
     trackingStatus: {
       enabled: !!showTrackingStatusFilter,
       value: []
@@ -46,7 +52,7 @@ const useLabelsGrid = ({
     pagerProps.onPageSelect(1);
     setFilters(newFilters);
   };
-  const hasActiveFilterValue = value => {
+  const hasActiveFilterValue = useCallback(value => {
     if (value === null || value === undefined) {
       return false;
     }
@@ -60,7 +66,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);
@@ -79,45 +85,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 = 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({
+    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
   } = 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 = 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,
@@ -126,18 +162,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
-  } = 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;
+  } = 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;
@@ -145,15 +180,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;
@@ -188,20 +227,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/esm/elements/labels-grid/hooks/use-tracking-status-filter.js

@@ -0,0 +1,105 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useListLabelsInfinite } from '@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] = useState([]);
+  const {
+    data: infiniteData,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage
+  } = useListLabelsInfinite({
+    enabled: isActive,
+    queryFnParams: {
+      labelStatus,
+      pageSize: 100,
+      shipmentId,
+      sortDir
+    }
+  });
+  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 = 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 = 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 = useMemo(() => {
+    const nextPageStart = currentPage * pageSize;
+    return nextPageStart < filteredLabels.length;
+  }, [currentPage, pageSize, filteredLabels.length]);
+  // Check if we have more unfetched results
+  const hasMoreUnfetchedResults = 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
+  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
+    }
+  };
+};
+
+export { useTrackingStatusFilter };

package/esm/elements/labels-grid/labels-grid.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { useSortableQuery } from '../../hooks/use-sortable-query.js';
+import { useRef, useMemo, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TagColor, Next, Typography, Tag, TagVariant, EmptyState, Button } from '@shipengine/giger';
 import { useLabelsGrid } from './hooks/use-labels-grid.js';
 import { styles } from './labels-grid.styles.js';
-import { SortableHeader } from '../../components/grid-controller/sortable-header.js';
+import { SortableHeader } from '../../components/grid-controller/sortable-header/sortable-header.js';
 import { CellFormattedDate } from '../../components/grid-controller/cell-formatted-date.js';
 import { ActionsMenu, Actions } from '../../components/actions-menu/actions-menu.js';
 import { ErrorState } from '../../components/error-state/error-state.js';
@@ -13,7 +14,6 @@ import { GridFilters } from '../../components/grid-filters/grid-filters.js';
 import { GridFooter } from '../../components/grid-controller/grid-footer.js';
 import en from '../../locales/en/index.js';
 import { useElements } from '../../elements-provider/elements-context-provider.js';
-import { Loader } from '../../components/loader/loader.js';
 import { Spacer } from '../../components/spacer/spacer.js';
 import { PoweredByShipEngine } from '../../components/powered-by-shipengine/powered-by-shipengine.js';
 import { createElement } from '../../create-element/create-element.js';
@@ -41,7 +41,13 @@ const Component = ({
   } = useElements();
   const defaultFeatures = getFeatures("labelsGridFeatures");
   const prevStatus = useRef(labelStatus);
-  const [createdDateSortBy, setCreatedDateSortBy] = useState("desc");
+  const {
+    toggleSort,
+    sortState
+  } = useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
   features = Object.assign(Object.assign({}, defaultFeatures), features !== null && features !== void 0 ? features : {});
   const labelIdColumn = useMemo(() => {
     var _a;
@@ -59,14 +65,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 = 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,
@@ -74,12 +87,13 @@ const Component = ({
     shouldShowFilters,
     clearAllFilters
   } = useLabelsGrid({
-    createdDateSortBy,
     fetchShipments: !!shipmentNumberColumn,
     labelStatus,
     showLabelIdFilter,
     showShipmentIdFilter,
-    showTrackingStatusFilter
+    showStatusFilter,
+    showTrackingStatusFilter,
+    sortDir: sortState.dir
   });
   useEffect(() => {
     if (prevStatus.current !== labelStatus) {
@@ -95,14 +109,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 = useCallback(() => {
-    setCreatedDateSortBy(createdDateSortBy === "desc" ? "asc" : "desc");
-  }, [createdDateSortBy]);
+    toggleSort("created_at");
+  }, [toggleSort]);
   const columns = useMemo(() => {
     var _a;
     const labelTags = {
@@ -146,7 +163,7 @@ const Component = ({
         headerContent: jsx(SortableHeader, {
           headerText: t("list-labels:headers.created"),
           onToggleSort: toggleCreatedDateSort,
-          sortDirection: createdDateSortBy
+          sortDirection: sortState.createdAtDir
         }),
         renderCellContent: label => {
           return jsx(CellFormattedDate, {
@@ -374,24 +391,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 jsx(Loader, {
-      message: t("loading.labels")
-    });
-  }
-  if (isError) {
-    return jsx(ErrorState, {
-      css: styles.errorState,
-      subtitle: [t("list-labels:errorMessages.subtitle"), t("errorMessages.refreshAndTryAgain")],
-      title: t("list-labels:errorMessages.title")
-    });
-  }
-  return jsxs(Fragment, {
-    children: [jsx(GridController, {
-      columns: columns,
-      data: getGridData(),
-      emptyContent: isAnyFilterActive ? jsx(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 = useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsx(EmptyState, Object.assign({
         isElevated: false,
         subtitle: t("list-labels:emptyWithFilters.subtitle"),
         title: t("list-labels:emptyWithFilters.title")
@@ -401,17 +407,36 @@ const Component = ({
         }, {
           children: t("list-labels:emptyWithFilters.button")
         }))
-      })) : jsx(EmptyState, {
+      }));
+    } else {
+      return jsx(EmptyState, {
         isElevated: false,
         subtitle: t("list-labels:empty.subtitle"),
         title: t("list-labels:empty.title")
-      }),
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
+  if (isError) {
+    return jsx(ErrorState, {
+      css: styles.errorState,
+      subtitle: [t("list-labels:errorMessages.subtitle"), t("errorMessages.refreshAndTryAgain")],
+      title: t("list-labels:errorMessages.title")
+    });
+  }
+  return jsxs(Fragment, {
+    children: [jsx(GridController, {
+      columns: columns,
+      data: getGridData(),
+      emptyContent: emptyContentComponent,
       filters: shouldShowFilters && jsx(GridFilters, {
         filters: gridFilters,
+        filtersDisabled: isLoading,
         onClearAllFilters: clearAllFilters,
         onFiltersUpdated: setFilters
       }),
       footerContent: jsx(GridFooter, {
+        hasMoreUnfetchedResults: hasMoreUnfetchedResults,
+        isLoadingMore: isFetchingNextPage,
         onPageChange: pageConfig.pagerProps.onPageSelect,
         page: pageConfig.currentPage,
         pages: pageConfig.pagesAmount,
@@ -419,6 +444,7 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      isLoading: isLoading,
       onRowClick: onRowClick
     }), globalFeatures.poweredByShipEngine && jsxs(Fragment, {
       children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]