@shipengine/elements 2.20.0 → 2.22.0

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/components/link-action/link-action.js

@@ -1,14 +1,19 @@
 import { __rest } from 'tslib';
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { scopeTheme } from '../../utilities/styles.js';
-import { Link, ButtonSize, Spinner, Icon, IconSize } from '@shipengine/giger';
+import React__default from 'react';
+import { Link, ButtonSize, Spinner, Icon, IconSize, Typography } from '@shipengine/giger';
 import { IconNames } from '@shipengine/giger-theme';
 
 const icons = {
   add: IconNames.ADD,
   checkFilled: IconNames.CHECK_FILLED,
+  chevronBottom: IconNames.CHEVRON_BOTTOM,
+  chevronTop: IconNames.CHEVRON_TOP,
   copy: IconNames.COPY,
+  dots: IconNames.DOTS,
   download: IconNames.DOWNLOAD,
+  edit: IconNames.EDIT,
   retry: IconNames.CIRCULAR_ARROW
 };
 /**
@@ -16,16 +21,17 @@ const icons = {
  *
  * # Link Action Component
  */
-const LinkAction = _a => {
+const LinkAction = /*#__PURE__*/React__default.forwardRef((_a, ref) => {
   var {
       css,
       icon,
       isDisabled,
       isLoading,
       title,
+      iconPlacement = "left",
       isBold = true
     } = _a,
-    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title", "isBold"]);
+    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title", "iconPlacement", "isBold"]);
   return jsx(Link, Object.assign({}, props, {
     bold: isBold,
     css: theme => [Object.assign(Object.assign({
@@ -53,18 +59,30 @@ const LinkAction = _a => {
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
       }
     },
+    ref: ref,
     role: "button",
     size: ButtonSize.MEDIUM,
     tabIndex: 0
   }, {
-    children: isLoading ? jsx(Spinner, {}) : jsxs(Fragment, {
-      children: [title, icon && jsx(Icon, {
+    children: isLoading ? jsx(Spinner, {}) : jsxs("div", Object.assign({
+      css: theme => ({
+        alignItems: "center",
+        display: "flex",
+        flexDirection: iconPlacement === "left" ? "row" : "row-reverse",
+        gap: scopeTheme(theme).spacing(0.5)
+      })
+    }, {
+      children: [icon && jsx(Icon, {
         name: icons[icon],
-        size: IconSize.SIZE_MEDIUM,
+        size: IconSize.SIZE_SMALL,
         title: title
-      })]
-    })
+      }), title && jsx(Typography, Object.assign({
+        bold: isBold
+      }, {
+        children: title
+      }))]
+    }))
   }));
-};
+});
 
 export { LinkAction };

package/esm/components/segmented-control/index.js

@@ -0,0 +1 @@
+export { SegmentedControl } from './segemented-control.js';

package/esm/components/segmented-control/segemented-control.js

@@ -0,0 +1,30 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { styles } from './segmented-control.styles.js';
+
+const SegmentedControl = ({
+  fullWidth,
+  onSelect,
+  selectedSegment,
+  segments
+}) => {
+  return jsx("div", Object.assign({
+    css: styles.getContainerStyles(fullWidth),
+    role: "tablist"
+  }, {
+    children: segments.map(s => jsx("button", Object.assign({
+      "aria-label": s.value,
+      "aria-selected": selectedSegment === s.value ? "true" : "false",
+      css: styles.getSegmentStyles(selectedSegment === s.value, fullWidth),
+      onClick: e => {
+        e.preventDefault();
+        onSelect(s.value);
+      },
+      role: "tab",
+      tabIndex: 0
+    }, {
+      children: s.label
+    }), s.value))
+  }));
+};
+
+export { SegmentedControl };

package/esm/components/{tabs/tabs.styles.js → segmented-control/segmented-control.styles.js}

@@ -2,20 +2,20 @@ import { createStyles, scopeTheme } from '../../utilities/styles.js';
 
 const styles = createStyles({
   getContainerStyles: fullWidth => theme => ({
-    border: `1px solid ${scopeTheme(theme).palette.gray.light}`,
-    borderRadius: "4px",
+    backgroundColor: scopeTheme(theme).palette.white,
+    border: `1px solid ${scopeTheme(theme).palette.gray.ultraLight}`,
+    borderRadius: scopeTheme(theme).borderRadius.S,
     display: "flex",
     gap: scopeTheme(theme).spacing(1),
-    padding: scopeTheme(theme).spacing(0.5),
     width: fullWidth ? "auto" : "max-content"
   }),
-  getTabStyles: (selected, fullWidth) => theme => ({
-    backgroundColor: selected ? scopeTheme(theme).palette.gray.light : "transparent",
-    border: "none",
-    borderRadius: "4px",
+  getSegmentStyles: (selected, fullWidth) => theme => ({
+    backgroundColor: selected ? scopeTheme(theme).palette.gray.ultraLight : "transparent",
+    borderRadius: scopeTheme(theme).borderRadius.S,
     color: selected ? scopeTheme(theme).palette.black : scopeTheme(theme).palette.gray.main,
     cursor: "pointer",
-    fontWeight: selected ? "bold" : "normal",
+    fontWeight: selected ? scopeTheme(theme).typography.fontWeight.bold : scopeTheme(theme).typography.fontWeight.normal,
+    margin: `${scopeTheme(theme).spacing(0.5)}px`,
     padding: `${scopeTheme(theme).spacing(1)}px ${scopeTheme(theme).spacing(1.5)}px`,
     textWrap: "nowrap",
     width: fullWidth ? "100%" : "auto"

package/esm/components/wallet-card/wallet-card.js

@@ -1,13 +1,9 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
-import { Icon, IconSize, Typography } from '@shipengine/giger';
-import { IconNames } from '@shipengine/giger-theme';
-import AmericanExpress from '../../assets/cc-logos/amex.js';
-import Discover from '../../assets/cc-logos/discover.js';
-import MasterCard from '../../assets/cc-logos/mastercard.js';
-import Visa from '../../assets/cc-logos/visa.js';
+import { Typography } from '@shipengine/giger';
 import { styles } from './wallet-card.styles.js';
 import { SettingsCard } from '../settings-card/settings-card.js';
+import { CcProviderLogo } from '../cc-provider-logo/cc-provider-logo.js';
 
 const WalletCard = ({
   fundingSource,
@@ -19,13 +15,6 @@ const WalletCard = ({
   } = useTranslation("common");
   const provider = (_a = fundingSource === null || fundingSource === void 0 ? void 0 : fundingSource.paymentMethod.creditCardInfo) === null || _a === void 0 ? void 0 : _a.provider;
   const last4 = (_b = fundingSource === null || fundingSource === void 0 ? void 0 : fundingSource.paymentMethod.creditCardInfo) === null || _b === void 0 ? void 0 : _b.cardNumberLastFour;
-  const logos = {
-    americanExpress: AmericanExpress,
-    discover: Discover,
-    mastercard: MasterCard,
-    visa: Visa
-  };
-  const Logo = provider ? logos[provider] : undefined;
   return jsx("div", Object.assign({
     css: styles.container
   }, {
@@ -35,14 +24,8 @@ const WalletCard = ({
         name: t("actions.edit")
       },
       title: jsxs(Fragment, {
-        children: [Logo ? jsx("img", {
-          alt: "credit card logo",
-          src: Logo,
-          width: 56
-        }) : jsx(Icon, {
-          css: styles.icon,
-          name: IconNames.CREDIT_CARD,
-          size: IconSize.SIZE_LARGE
+        children: [jsx(CcProviderLogo, {
+          provider: provider
         }), jsx(Typography, Object.assign({
           variant: "body1"
         }, {

package/esm/components/wallet-card/wallet-card.styles.js

@@ -1,4 +1,4 @@
-import { createStyles, scopeTheme } from '../../utilities/styles.js';
+import { createStyles } from '../../utilities/styles.js';
 
 const styles = createStyles({
   container: {
@@ -6,10 +6,7 @@ const styles = createStyles({
     height: "72px",
     justifyContent: "center",
     width: "100%"
-  },
-  icon: theme => ({
-    color: scopeTheme(theme).palette.gray.main
-  })
+  }
 });
 
 export { styles };

package/esm/constants/shipengine/address.js

@@ -182,7 +182,7 @@ const postalCodeRegex = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
  *
  * # Address Utils - Address Name Regex
  */
-const addressNameRegex = /^[a-zA-Z']{2,} [a-zA-Z']{2,}/;
+const addressNameRegex = /^[a-zA-Z.']{2,}(?: [a-zA-Z.]?\.?)? [a-zA-Z.']{2,}/;
 /**
  * @internal
  *

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

@@ -1,18 +1,20 @@
 import { useTheme } from '@emotion/react';
 import { useGetServiceName } from '../../../hooks/use-get-service-name.js';
-import { useState, useEffect, useMemo } from 'react';
-import { useListLabels, useGetLabel } from '@shipengine/react-api';
+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
+  showTrackingStatusFilter,
+  fetchShipments,
+  sortDir
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f;
   const initialFilters = {
     labelId: {
       enabled: !!showLabelIdFilter,
@@ -45,9 +47,24 @@ const useLabelsGrid = ({
     pagerProps.onPageSelect(1);
     setFilters(newFilters);
   };
+  const hasActiveFilterValue = useCallback(value => {
+    if (value === null || value === undefined) {
+      return false;
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+    if (value !== null && typeof value === "object") {
+      return Object.keys(value).length > 0;
+    }
+    if (typeof value === "string") {
+      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) && filter.value;
+    return (filter === null || filter === void 0 ? void 0 : filter.enabled) && hasActiveFilterValue(filter === null || filter === void 0 ? void 0 : filter.value);
   });
   const isAnyFilterEnabled = Object.keys(filters).some(key => {
     const filter = filters[key];
@@ -70,50 +87,83 @@ 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]);
-  const shouldShowFilters = isAnyFilterEnabled && (isAnyFilterActive || Boolean(labels === null || labels === void 0 ? void 0 : labels.length));
+  }, [isTrackingStatusFilterActive, trackingFilteredLabels, listLabelsData === null || listLabelsData === void 0 ? void 0 : listLabelsData.labels, theme.palette.gray, getServiceName]);
+  const {
+    data: listShipmentsData,
+    isFetching: isListShipmentsLoading,
+    isError: isListShipmentsError
+  } = useListSalesOrderShipments({
+    // An empty array here should disable the query
+    shipmentIds: fetchShipments ? labels === null || labels === void 0 ? void 0 : labels.map(label => label.shipmentId) : []
+  });
   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;
@@ -122,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;
@@ -148,6 +198,13 @@ const useLabelsGrid = ({
       })];
     } else if (labelFilteredByIdHasErrors) {
       return [];
+    } else if (labels && fetchShipments && listShipmentsData) {
+      return labels.map(label => {
+        const shipment = listShipmentsData === null || listShipmentsData === void 0 ? void 0 : listShipmentsData.find(shipment => shipment.shipmentId === label.shipmentId);
+        return Object.assign(Object.assign({}, label), {
+          shipmentNumber: shipment === null || shipment === void 0 ? void 0 : shipment.shipmentNumber
+        });
+      });
     } else if (labels) {
       return labels;
     }
@@ -157,20 +214,28 @@ const useLabelsGrid = ({
     clearAllFilters,
     filters,
     getGridData,
+    hasMoreUnfetchedResults: isTrackingStatusFilterActive ? hasMoreUnfetchedResults : false,
     isAnyFilterActive,
-    isError: isListLabelsError,
-    isLoading: isListLabelsLoading || isLabelFilterLoading,
+    isError: isListLabelsError || isListShipmentsError && 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 };