@shipengine/elements 2.21.0 → 2.22.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -21,6 +21,7 @@ import { Spacer } from '../../../spacer/spacer.js';
  * @see {@link TrackingStatusFilterProps | The props for the `<TrackingStatusFilter />` component}
  */
 const TrackingStatusFilter = ({
+  disabled: _disabled = false,
   filters,
   onFiltersUpdated
 }) => {
@@ -105,6 +106,7 @@ const TrackingStatusFilter = ({
   }, [watchedValues]);
   return jsxs(Fragment, {
     children: [jsxs(Button, Object.assign({
+      disabled: _disabled,
       onClick: toggleTrackingStatusFilter,
       ref: buttonRef,
       variant: ButtonVariant.TEXT

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

@@ -18,6 +18,7 @@ import { TrackingStatusFilter } from './components/tracking-status-filter/tracki
 const GridFilters = ({
   filters,
   onFiltersUpdated,
+  filtersDisabled: _filtersDisabled = false,
   onClearAllFilters
 }) => {
   var _a, _b, _c;
@@ -37,18 +38,23 @@ 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
     }), shouldShowClearAll && jsx(Button, Object.assign({
+      disabled: _filtersDisabled,
       onClick: () => {
         onClearAllFilters();
       },

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

@@ -1,19 +1,20 @@
 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,
   showTrackingStatusFilter,
-  fetchShipments
+  fetchShipments,
+  sortDir
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f;
   const initialFilters = {
     labelId: {
       enabled: !!showLabelIdFilter,
@@ -46,7 +47,7 @@ const useLabelsGrid = ({
     pagerProps.onPageSelect(1);
     setFilters(newFilters);
   };
-  const hasActiveFilterValue = value => {
+  const hasActiveFilterValue = useCallback(value => {
     if (value === null || value === undefined) {
       return false;
     }
@@ -60,7 +61,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);
@@ -86,38 +87,64 @@ const useLabelsGrid = ({
     };
     setFilters(updatedFilters);
   }, [showLabelIdFilter, showShipmentIdFilter, 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,
+    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
   } = 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 = 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 +153,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(((_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;
@@ -146,14 +172,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;
@@ -188,20 +214,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 };