@shipengine/elements 2.21.0 → 2.22.0

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';
@@ -31,7 +31,7 @@ const Component = ({
   onClickExternalShipmentId,
   onClickShipmentNumber
 }) => {
-  var _a, _b, _c;
+  var _a, _b;
   const {
     t
   } = useTranslation(["common", "list-labels"]);
@@ -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;
@@ -61,12 +67,14 @@ const Component = ({
   }, [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 showTrackingStatusFilter = trackingStatusColumn && !!trackingStatusColumn.allowFilter;
   const {
     labels,
     getGridData,
     isError,
     isLoading,
+    isFetchingNextPage,
+    hasMoreUnfetchedResults,
     filters,
     setFilters,
     pageConfig,
@@ -74,12 +82,12 @@ const Component = ({
     shouldShowFilters,
     clearAllFilters
   } = useLabelsGrid({
-    createdDateSortBy,
     fetchShipments: !!shipmentNumberColumn,
     labelStatus,
     showLabelIdFilter,
     showShipmentIdFilter,
-    showTrackingStatusFilter
+    showTrackingStatusFilter,
+    sortDir: sortState.dir
   });
   useEffect(() => {
     if (prevStatus.current !== labelStatus) {
@@ -101,8 +109,8 @@ const Component = ({
     };
   }, [filters, labelIdColumn, shipmentIdColumn, trackingStatusColumn]);
   const toggleCreatedDateSort = useCallback(() => {
-    setCreatedDateSortBy(createdDateSortBy === "desc" ? "asc" : "desc");
-  }, [createdDateSortBy]);
+    toggleSort("created_at");
+  }, [toggleSort]);
   const columns = useMemo(() => {
     var _a;
     const labelTags = {
@@ -146,7 +154,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 +382,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 +398,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 +435,7 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      isLoading: isLoading,
       onRowClick: onRowClick
     }), globalFeatures.poweredByShipEngine && jsxs(Fragment, {
       children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]

package/esm/elements/purchase-label/components/fund-and-purchase/fund-and-purchase.js

@@ -34,12 +34,12 @@ const FundAndPurchase = ({
   currency,
   disabled,
   isFundingEnabled,
-  showVatSettings,
-  onSave,
+  isInvalidatedByError,
   onPurchase,
+  onSave,
   onVatRegistrationComplete,
-  isInvalidatedByError,
-  rateData
+  rateData,
+  showVatSettings
 }) => {
   var _a, _b, _c;
   const {
@@ -71,10 +71,18 @@ const FundAndPurchase = ({
   const purchaseAmount = getTotalRateAmount(rate);
   const [isSavingRate, setIsSavingRate] = useState(false);
   const [isSavingError, setIsSavingError] = useState(false);
-  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = useState(() => {
-    var _a;
-    return (_a = isFundingEnabled && isFundingRequired && (fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== undefined && fundingOrigin.balance < purchaseAmount && !isInvalidatedByError) !== null && _a !== void 0 ? _a : false;
-  });
+  const purchaseRequiresAddingFunds = isFundingEnabled && isFundingRequired && (fundingOrigin === null || fundingOrigin === void 0 ? void 0 : fundingOrigin.balance) !== undefined && fundingOrigin.balance < purchaseAmount && !isInvalidatedByError;
+  const [isFormManuallyToggled, setIsFormManuallyToggled] = useState(false);
+  const isAddFundsFormOpen = purchaseRequiresAddingFunds || isFormManuallyToggled;
+  const toggleAddFundsForm = () => {
+    if (!purchaseRequiresAddingFunds) {
+      // If the label can be purchased without adding funds, allow manual toggling of the form
+      setIsFormManuallyToggled(!isFormManuallyToggled);
+    } else if (isFormManuallyToggled) {
+      // If the form is already open, close it
+      setIsFormManuallyToggled(false);
+    }
+  };
   useEffect(() => {
     resetAddFundsMutationState();
   }, [isAddFundsFormOpen, resetAddFundsMutationState]);
@@ -82,7 +90,7 @@ const FundAndPurchase = ({
     setIsSavingRate(true);
     setIsSavingError(false);
     try {
-      yield onSave();
+      yield onSave === null || onSave === void 0 ? void 0 : onSave();
     } catch (e) {
       setIsSavingError(true);
     } finally {
@@ -108,7 +116,7 @@ const FundAndPurchase = ({
         breakpoint: "mobileLarge",
         justify: "end"
       }, {
-        children: [jsx(Button, Object.assign({
+        children: [onSave && jsx(Button, Object.assign({
           bold: false,
           css: styles.saveRateButton,
           disabled: disableSaveButton,
@@ -139,7 +147,7 @@ const FundAndPurchase = ({
         }), isFundingEnabled ? jsx(LinkAction, {
           icon: "add",
           isDisabled: !isFundingRequired || isAddFundsFormOpen || isRateFormSubmitting,
-          onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+          onClick: toggleAddFundsForm,
           title: t("manage-funding:actions.addFunds")
         }) : null]
       }), jsx(Spacer, {
@@ -185,7 +193,7 @@ const FundAndPurchase = ({
           }), isFundingEnabled && jsx(LinkAction, {
             icon: "add",
             isDisabled: isAddFundsFormOpen || isRateFormSubmitting,
-            onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+            onClick: toggleAddFundsForm,
             title: t("manage-funding:actions.addFunds")
           })]
         }), jsx(Spacer, {
@@ -206,7 +214,7 @@ const FundAndPurchase = ({
           currency: currency,
           minimumAmount: purchaseAmount - balance,
           onSuccess: () => {
-            setIsAddFundsFormOpen(false);
+            setIsFormManuallyToggled(false);
             onPurchase();
           }
         }, {
@@ -243,7 +251,7 @@ const FundAndPurchase = ({
                 }, {
                   children: jsx(Button, Object.assign({
                     disabled: addFundsForm.isSubmitting || isRateFormSubmitting,
-                    onClick: () => setIsAddFundsFormOpen(false),
+                    onClick: () => setIsFormManuallyToggled(false),
                     variant: ButtonVariant.TEXT
                   }, {
                     children: t("actions.cancel")

package/esm/elements/purchase-label/components/rate-form/rate-form.js

@@ -215,7 +215,7 @@ const RateForm = ({
         isFundingEnabled: !!(features === null || features === void 0 ? void 0 : features.enableFunding),
         isInvalidatedByError: !!(labelErrors === null || labelErrors === void 0 ? void 0 : labelErrors.length),
         onPurchase: handleSubmit,
-        onSave: handleSaveRate,
+        onSave: (features === null || features === void 0 ? void 0 : features.saveRate) ? handleSaveRate : undefined,
         onVatRegistrationComplete: onVatRegistrationComplete,
         rateData: {
           isPreferredRate,

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

@@ -18,7 +18,9 @@ const getInitialFilters = (showShipmentIdFilter, showCreatedDateFilter) => ({
 const useShipmentsGrid = ({
   shipmentStatus,
   showShipmentIdFilter: _showShipmentIdFilter = true,
-  showCreatedDateFilter: _showCreatedDateFilter = true
+  showCreatedDateFilter: _showCreatedDateFilter = true,
+  sortBy,
+  sortDir
 }) => {
   var _a, _b, _c, _d;
   const initialFilters = getInitialFilters(_showShipmentIdFilter, _showCreatedDateFilter);
@@ -58,14 +60,13 @@ const useShipmentsGrid = ({
     page,
     pageSize,
     shipmentStatus,
-    sortBy: "modified_at",
-    sortDir: "desc"
+    sortBy: sortBy,
+    sortDir: sortDir
   }, getCreatedDateFilterValue((_b = (_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.start, (_d = (_c = filters.createdDate) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.end)));
   const shipments = useMemo(() => data === null || data === void 0 ? void 0 : data.shipments.map(shipment => Object.assign(Object.assign({}, shipment), {
     disableOnRowClick: shipment.shipmentStatus === "cancelled",
     serviceName: getServiceName(shipment)
   })), [data === null || data === void 0 ? void 0 : data.shipments, getServiceName]);
-  const shouldShowFilters = isAnyFilterEnabled && (isAnyFilterActive || Boolean(shipments === null || shipments === void 0 ? void 0 : shipments.length));
   const {
     data: shipmentById,
     error: shipmentErrors,
@@ -132,7 +133,7 @@ const useShipmentsGrid = ({
     },
     setFilters: onSetFilters,
     shipments,
-    shouldShowFilters
+    shouldShowFilters: isAnyFilterEnabled
   };
 };
 

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

@@ -1,14 +1,16 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useSortableQuery } from '../../hooks/use-sortable-query.js';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { TagColor, Typography, Tag, TagVariant, EmptyState, Button } from '@shipengine/giger';
+import { EmptyState, Button, TagColor, Typography, Tag, TagVariant } from '@shipengine/giger';
 import { useShipmentsGrid } from './hooks/use-shipments-grid.js';
 import { styles } from './shipments-grid.styles.js';
 import { ActionsMenu, Actions } from '../../components/actions-menu/actions-menu.js';
 import { GridFilters } from '../../components/grid-filters/grid-filters.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 { ErrorState } from '../../components/error-state/error-state.js';
+import { SortableHeader } from '../../components/grid-controller/sortable-header/sortable-header.js';
 import { CellFormattedDate } from '../../components/grid-controller/cell-formatted-date.js';
 import { GridController } from '../../components/grid-controller/grid-controller.js';
 import { GridFooter } from '../../components/grid-controller/grid-footer.js';
@@ -51,6 +53,13 @@ const Component = ({
   const {
     globalFeatures
   } = useElements();
+  const {
+    toggleSort,
+    sortState
+  } = useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
   const {
     isLoading,
     isError,
@@ -64,13 +73,40 @@ const Component = ({
   } = useShipmentsGrid({
     shipmentStatus,
     showCreatedDateFilter: _showCreatedDateFilter,
-    showShipmentIdFilter: _showShipmentIdFilter
+    showShipmentIdFilter: _showShipmentIdFilter,
+    sortBy: sortState.by,
+    sortDir: sortState.dir
   });
-  if (isLoading) {
-    return jsx(Loader, {
-      message: t("loading.shipments")
-    });
-  }
+  const handleCreatedDateSort = () => {
+    toggleSort("created_at");
+  };
+  const handleUpdatedDateSort = () => {
+    toggleSort("modified_at");
+  };
+  const emptyContentComponent = useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsx(EmptyState, Object.assign({
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
+        title: t("list-shipments:emptyState.filtersTitle")
+      }, {
+        children: jsx(Button, Object.assign({
+          onClick: clearAllFilters
+        }, {
+          children: t("list-shipments:emptyState.viewAll")
+        }))
+      }));
+    } else {
+      return jsx(EmptyState, {
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.subtitle"),
+        title: t("list-shipments:emptyState.title")
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
   if (isError) {
     return jsx(ErrorState, {
       css: styles.errorState,
@@ -156,7 +192,11 @@ const Component = ({
       }));
     }
   }, {
-    headerContent: t("list-shipments:headers.created"),
+    headerContent: jsx(SortableHeader, {
+      headerText: t("list-shipments:headers.created"),
+      onToggleSort: handleCreatedDateSort,
+      sortDirection: sortState.createdAtDir
+    }),
     renderCellContent: shipment => {
       return jsx(CellFormattedDate, {
         date: shipment.createdAt,
@@ -164,7 +204,11 @@ const Component = ({
       });
     }
   }, {
-    headerContent: t("list-shipments:headers.modified"),
+    headerContent: jsx(SortableHeader, {
+      headerText: t("list-shipments:headers.modified"),
+      onToggleSort: handleUpdatedDateSort,
+      sortDirection: sortState.modifiedAtDir
+    }),
     renderCellContent: shipment => {
       return jsx(CellFormattedDate, {
         date: shipment.modifiedAt,
@@ -196,23 +240,10 @@ const Component = ({
     children: [jsx(GridController, {
       columns: columns,
       data: getGridData(),
-      emptyContent: isAnyFilterActive ? jsx(EmptyState, Object.assign({
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
-        title: t("list-shipments:emptyState.filtersTitle")
-      }, {
-        children: jsx(Button, Object.assign({
-          onClick: clearAllFilters
-        }, {
-          children: t("list-shipments:emptyState.viewAll")
-        }))
-      })) : jsx(EmptyState, {
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.subtitle"),
-        title: t("list-shipments:emptyState.title")
-      }),
+      emptyContent: emptyContentComponent,
       filters: shouldShowFilters && jsx(GridFilters, {
         filters: filters,
+        filtersDisabled: isLoading,
         onClearAllFilters: clearAllFilters,
         onFiltersUpdated: setFilters
       }),
@@ -224,6 +255,7 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      isLoading: isLoading,
       onRowClick: onRowClick
     }), globalFeatures.poweredByShipEngine && jsxs(Fragment, {
       children: [jsx(Spacer, {}), jsx(PoweredByShipEngine, {})]

package/esm/hooks/use-sortable-query.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+const useSortableQuery = ({
+  defaultSortBy: _defaultSortBy = "modified_at",
+  defaultSortDir: _defaultSortDir = "desc"
+}) => {
+  const [sortState, setSortState] = useState({
+    by: _defaultSortBy,
+    createdAtDir: _defaultSortDir,
+    dir: _defaultSortDir,
+    modifiedAtDir: _defaultSortDir
+  });
+  const toggleSort = sortQuery => {
+    const newSortState = Object.assign({}, sortState);
+    if (sortQuery === "created_at") {
+      newSortState.createdAtDir = sortState.createdAtDir === "asc" ? "desc" : "asc";
+      newSortState.dir = newSortState.createdAtDir;
+      newSortState.by = "created_at";
+    } else if (sortQuery === "modified_at") {
+      newSortState.modifiedAtDir = sortState.modifiedAtDir === "asc" ? "desc" : "asc";
+      newSortState.dir = newSortState.modifiedAtDir;
+      newSortState.by = "modified_at";
+    }
+    setSortState(newSortState);
+  };
+  return {
+    sortState,
+    toggleSort
+  };
+};
+
+export { useSortableQuery };

package/esm/locales/en/common.js

@@ -212,6 +212,7 @@ var common = {
 	grid: {
 		"row-count_one": "Showing {{firstIndex}}-{{lastIndex}} of <0>{{count}} item</0>",
 		"row-count_other": "Showing {{firstIndex}}-{{lastIndex}} of <0>{{count}} items</0>",
+		"row-count-plus_other": "Showing {{firstIndex}}-{{lastIndex}} of <0>{{count}}+ items</0>",
 		rows: "Rows",
 		clearAll: "Clear all",
 		shipmentId: "Shipment ID",

package/esm/package.js

@@ -1,3 +1,3 @@
-var version = "2.21.0";
+var version = "2.22.0";
 
 export { version };

package/esm/utilities/feature-flags/feature-flags.js

@@ -4,7 +4,7 @@ const defaultLabelsGridColumns = [{
   allowFilter: true,
   name: "labelId"
 }, {
-  allowFilter: true,
+  allowFilter: false,
   name: "trackingStatus"
 }, {
   name: "recipient"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipengine/elements",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "module": "./index.js",
   "main": "./index.js",
   "types": "./src/index.d.ts",
@@ -269,8 +269,8 @@
     "@rollup/plugin-node-resolve": "13.3.0",
     "@shipengine/giger": "1.20.18",
     "@shipengine/giger-theme": "1.8.1",
-    "@shipengine/js-api": "3.6.0",
-    "@shipengine/react-api": "3.10.3",
+    "@shipengine/js-api": "3.8.0",
+    "@shipengine/react-api": "3.11.0",
     "@tanstack/react-query": "4.36.1",
     "@testing-library/dom": "8.19.0",
     "axios": "1.8.4",

package/types/src/components/grid-controller/grid-controller.d.ts

@@ -22,6 +22,7 @@ type GridProps<T extends GridDataType> = {
     emptyContent?: ReactNode;
     filters?: ReactNode;
     footerContent?: ReactNode;
+    isLoading?: boolean;
     onRowClick?: (data: T) => void;
     useCheckboxes?: boolean;
 };
@@ -34,5 +35,5 @@ type GridProps<T extends GridDataType> = {
  *
  * @see {@link GridProps | The props for the `<GridController />` component}
  */
-export declare const GridController: <T extends GridDataType>({ columns, data, footerContent, onRowClick, useCheckboxes, filters, emptyContent, }: GridProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const GridController: <T extends GridDataType>({ columns, data, footerContent, onRowClick, isLoading, useCheckboxes, filters, emptyContent, }: GridProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/types/src/components/grid-controller/grid-controller.styles.d.ts

@@ -3,8 +3,12 @@ export declare const styles: {
         width: number;
     };
     filters: (theme: import("../../utilities/styles").ScopedGigerTheme) => {
+        backgroundColor: string;
         borderBottom: string;
-        padding: string;
+        padding: number;
+    };
+    skeletonTableRow: () => {
+        height: string;
     };
     table: {
         tableLayout: "initial";
@@ -24,5 +28,6 @@ export declare const styles: {
         borderRadius?: string | undefined;
         boxShadow?: string | undefined;
         height: string;
+        overflow: "hidden";
     };
 };

package/types/src/components/grid-controller/grid-footer.d.ts

@@ -7,6 +7,14 @@
  * @see {@link GridFooter | The `<GridFooter />` component}
  */
 interface GridFooterProps {
+    /**
+     * If true, indicates there might be more results beyond what's been fetched
+     */
+    hasMoreUnfetchedResults?: boolean;
+    /**
+     * If true, displays a loading indicator in the pagination area
+     */
+    isLoadingMore?: boolean;
     onPageChange: (nextPage: number) => void;
     page: number;
     pages: number;
@@ -23,5 +31,5 @@ interface GridFooterProps {
  *
  * @see {@link GridFooterProps | The props for the `<GridFooter />` component}
  */
-export declare const GridFooter: ({ page, pages, pageSize, total, showPagination, onPageChange, }: GridFooterProps) => JSX.Element;
+export declare const GridFooter: ({ page, pages, pageSize, total, showPagination, onPageChange, isLoadingMore, hasMoreUnfetchedResults, }: GridFooterProps) => JSX.Element;
 export {};

package/types/src/components/grid-controller/grid-footer.styles.d.ts

@@ -0,0 +1,16 @@
+export declare const styles: {
+    countWrapper: (theme: import("../../utilities/styles").ScopedGigerTheme) => {
+        alignItems: "center";
+        display: "flex";
+        gap: number;
+    };
+    loader: (theme: import("../../utilities/styles").ScopedGigerTheme) => {
+        color: string;
+    };
+    wrapper: {
+        alignItems: "center";
+        display: "flex";
+        justifyContent: "space-between";
+        width: string;
+    };
+};

package/types/src/components/grid-controller/sortable-header/index.d.ts

@@ -0,0 +1 @@
+export * from "./sortable-header";

package/types/src/components/grid-controller/{sortable-header.d.ts → sortable-header/sortable-header.d.ts}

@@ -1,4 +1,4 @@
-export type SortDirection = "asc" | "desc";
+import { SE } from "@shipengine/js-api";
 export interface SortableHeaderProps {
     /**
      * The text to display in the header
@@ -11,7 +11,7 @@ export interface SortableHeaderProps {
     /**
      * The current sort direction
      */
-    sortDirection: SortDirection;
+    sortDirection: SE.SortableQuery["sortDir"];
 }
 /**
  * A reusable component for creating sortable table headers

package/types/src/components/grid-controller/sortable-header/sortable-header.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const styles: {
+    icon: (theme: import("../../../utilities/styles").ScopedGigerTheme) => {
+        paddingLeft: number;
+    };
+    span: () => {
+        alignItems: "center";
+        cursor: "pointer";
+        display: "flex";
+    };
+};

package/types/src/components/grid-filters/components/created-date-filter/created-date-filter.d.ts

@@ -7,6 +7,7 @@ import { IGridFilters } from "../../grid-filters";
  * @see {@link CreatedDateFilter | The `<CreatedDateFilter />` component}
  */
 type CreatedDateFilterProps = {
+    disabled?: boolean;
     filters: IGridFilters;
     onFiltersUpdated: (params: IGridFilters) => void;
 };
@@ -19,5 +20,5 @@ type CreatedDateFilterProps = {
  *
  * @see {@link CreatedDateFilterProps | The props for the `<CreatedDateFilter />` component}
  */
-export declare const CreatedDateFilter: ({ filters, onFiltersUpdated }: CreatedDateFilterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CreatedDateFilter: ({ disabled, filters, onFiltersUpdated, }: CreatedDateFilterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};