@shipengine/elements 2.21.0 → 2.22.0

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

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useSortableQuery = require('../../hooks/use-sortable-query.cjs');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var giger = require('@shipengine/giger');
 var useLabelsGrid = require('./hooks/use-labels-grid.cjs');
 var labelsGrid_styles = require('./labels-grid.styles.cjs');
-var sortableHeader = require('../../components/grid-controller/sortable-header.cjs');
+var sortableHeader = require('../../components/grid-controller/sortable-header/sortable-header.cjs');
 var cellFormattedDate = require('../../components/grid-controller/cell-formatted-date.cjs');
 var actionsMenu = require('../../components/actions-menu/actions-menu.cjs');
 var errorState = require('../../components/error-state/error-state.cjs');
@@ -17,7 +18,6 @@ var gridFilters = require('../../components/grid-filters/grid-filters.cjs');
 var gridFooter = require('../../components/grid-controller/grid-footer.cjs');
 var index = require('../../locales/en/index.cjs');
 var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
-var loader = require('../../components/loader/loader.cjs');
 var spacer = require('../../components/spacer/spacer.cjs');
 var poweredByShipengine = require('../../components/powered-by-shipengine/powered-by-shipengine.cjs');
 var createElement = require('../../create-element/create-element.cjs');
@@ -35,7 +35,7 @@ const Component = ({
   onClickExternalShipmentId,
   onClickShipmentNumber
 }) => {
-  var _a, _b, _c;
+  var _a, _b;
   const {
     t
   } = reactI18next.useTranslation(["common", "list-labels"]);
@@ -45,7 +45,13 @@ const Component = ({
   } = elementsContextProvider.useElements();
   const defaultFeatures = getFeatures("labelsGridFeatures");
   const prevStatus = React.useRef(labelStatus);
-  const [createdDateSortBy, setCreatedDateSortBy] = React.useState("desc");
+  const {
+    toggleSort,
+    sortState
+  } = useSortableQuery.useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
   features = Object.assign(Object.assign({}, defaultFeatures), features !== null && features !== void 0 ? features : {});
   const labelIdColumn = React.useMemo(() => {
     var _a;
@@ -65,12 +71,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,
@@ -78,12 +86,12 @@ const Component = ({
     shouldShowFilters,
     clearAllFilters
   } = useLabelsGrid.useLabelsGrid({
-    createdDateSortBy,
     fetchShipments: !!shipmentNumberColumn,
     labelStatus,
     showLabelIdFilter,
     showShipmentIdFilter,
-    showTrackingStatusFilter
+    showTrackingStatusFilter,
+    sortDir: sortState.dir
   });
   React.useEffect(() => {
     if (prevStatus.current !== labelStatus) {
@@ -105,8 +113,8 @@ const Component = ({
     };
   }, [filters, labelIdColumn, shipmentIdColumn, trackingStatusColumn]);
   const toggleCreatedDateSort = React.useCallback(() => {
-    setCreatedDateSortBy(createdDateSortBy === "desc" ? "asc" : "desc");
-  }, [createdDateSortBy]);
+    toggleSort("created_at");
+  }, [toggleSort]);
   const columns = React.useMemo(() => {
     var _a;
     const labelTags = {
@@ -150,7 +158,7 @@ const Component = ({
         headerContent: jsxRuntime.jsx(sortableHeader.SortableHeader, {
           headerText: t("list-labels:headers.created"),
           onToggleSort: toggleCreatedDateSort,
-          sortDirection: createdDateSortBy
+          sortDirection: sortState.createdAtDir
         }),
         renderCellContent: label => {
           return jsxRuntime.jsx(cellFormattedDate.CellFormattedDate, {
@@ -378,24 +386,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 jsxRuntime.jsx(loader.Loader, {
-      message: t("loading.labels")
-    });
-  }
-  if (isError) {
-    return jsxRuntime.jsx(errorState.ErrorState, {
-      css: labelsGrid_styles.styles.errorState,
-      subtitle: [t("list-labels:errorMessages.subtitle"), t("errorMessages.refreshAndTryAgain")],
-      title: t("list-labels:errorMessages.title")
-    });
-  }
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(gridController.GridController, {
-      columns: columns,
-      data: getGridData(),
-      emptyContent: isAnyFilterActive ? jsxRuntime.jsx(giger.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 = React.useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsxRuntime.jsx(giger.EmptyState, Object.assign({
         isElevated: false,
         subtitle: t("list-labels:emptyWithFilters.subtitle"),
         title: t("list-labels:emptyWithFilters.title")
@@ -405,17 +402,36 @@ const Component = ({
         }, {
           children: t("list-labels:emptyWithFilters.button")
         }))
-      })) : jsxRuntime.jsx(giger.EmptyState, {
+      }));
+    } else {
+      return jsxRuntime.jsx(giger.EmptyState, {
         isElevated: false,
         subtitle: t("list-labels:empty.subtitle"),
         title: t("list-labels:empty.title")
-      }),
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
+  if (isError) {
+    return jsxRuntime.jsx(errorState.ErrorState, {
+      css: labelsGrid_styles.styles.errorState,
+      subtitle: [t("list-labels:errorMessages.subtitle"), t("errorMessages.refreshAndTryAgain")],
+      title: t("list-labels:errorMessages.title")
+    });
+  }
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(gridController.GridController, {
+      columns: columns,
+      data: getGridData(),
+      emptyContent: emptyContentComponent,
       filters: shouldShowFilters && jsxRuntime.jsx(gridFilters.GridFilters, {
         filters: gridFilters$1,
+        filtersDisabled: isLoading,
         onClearAllFilters: clearAllFilters,
         onFiltersUpdated: setFilters
       }),
       footerContent: jsxRuntime.jsx(gridFooter.GridFooter, {
+        hasMoreUnfetchedResults: hasMoreUnfetchedResults,
+        isLoadingMore: isFetchingNextPage,
         onPageChange: pageConfig.pagerProps.onPageSelect,
         page: pageConfig.currentPage,
         pages: pageConfig.pagesAmount,
@@ -423,6 +439,7 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      isLoading: isLoading,
       onRowClick: onRowClick
     }), globalFeatures.poweredByShipEngine && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.PoweredByShipEngine, {})]

package/cjs/elements/purchase-label/components/fund-and-purchase/fund-and-purchase.cjs

@@ -38,12 +38,12 @@ const FundAndPurchase = ({
   currency,
   disabled,
   isFundingEnabled,
-  showVatSettings,
-  onSave,
+  isInvalidatedByError,
   onPurchase,
+  onSave,
   onVatRegistrationComplete,
-  isInvalidatedByError,
-  rateData
+  rateData,
+  showVatSettings
 }) => {
   var _a, _b, _c;
   const {
@@ -75,10 +75,18 @@ const FundAndPurchase = ({
   const purchaseAmount = rates.getTotalRateAmount(rate);
   const [isSavingRate, setIsSavingRate] = React.useState(false);
   const [isSavingError, setIsSavingError] = React.useState(false);
-  const [isAddFundsFormOpen, setIsAddFundsFormOpen] = React.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] = React.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);
+    }
+  };
   React.useEffect(() => {
     resetAddFundsMutationState();
   }, [isAddFundsFormOpen, resetAddFundsMutationState]);
@@ -86,7 +94,7 @@ const FundAndPurchase = ({
     setIsSavingRate(true);
     setIsSavingError(false);
     try {
-      yield onSave();
+      yield onSave === null || onSave === void 0 ? void 0 : onSave();
     } catch (e) {
       setIsSavingError(true);
     } finally {
@@ -112,7 +120,7 @@ const FundAndPurchase = ({
         breakpoint: "mobileLarge",
         justify: "end"
       }, {
-        children: [jsxRuntime.jsx(giger.Button, Object.assign({
+        children: [onSave && jsxRuntime.jsx(giger.Button, Object.assign({
           bold: false,
           css: fundAndPurchase_styles.styles.saveRateButton,
           disabled: disableSaveButton,
@@ -143,7 +151,7 @@ const FundAndPurchase = ({
         }), isFundingEnabled ? jsxRuntime.jsx(linkAction.LinkAction, {
           icon: "add",
           isDisabled: !isFundingRequired || isAddFundsFormOpen || isRateFormSubmitting,
-          onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+          onClick: toggleAddFundsForm,
           title: t("manage-funding:actions.addFunds")
         }) : null]
       }), jsxRuntime.jsx(spacer.Spacer, {
@@ -189,7 +197,7 @@ const FundAndPurchase = ({
           }), isFundingEnabled && jsxRuntime.jsx(linkAction.LinkAction, {
             icon: "add",
             isDisabled: isAddFundsFormOpen || isRateFormSubmitting,
-            onClick: () => setIsAddFundsFormOpen(!isAddFundsFormOpen),
+            onClick: toggleAddFundsForm,
             title: t("manage-funding:actions.addFunds")
           })]
         }), jsxRuntime.jsx(spacer.Spacer, {
@@ -210,7 +218,7 @@ const FundAndPurchase = ({
           currency: currency,
           minimumAmount: purchaseAmount - balance,
           onSuccess: () => {
-            setIsAddFundsFormOpen(false);
+            setIsFormManuallyToggled(false);
             onPurchase();
           }
         }, {
@@ -247,7 +255,7 @@ const FundAndPurchase = ({
                 }, {
                   children: jsxRuntime.jsx(giger.Button, Object.assign({
                     disabled: addFundsForm.isSubmitting || isRateFormSubmitting,
-                    onClick: () => setIsAddFundsFormOpen(false),
+                    onClick: () => setIsFormManuallyToggled(false),
                     variant: giger.ButtonVariant.TEXT
                   }, {
                     children: t("actions.cancel")

package/cjs/elements/purchase-label/components/rate-form/rate-form.cjs

@@ -219,7 +219,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/cjs/elements/shipments-grid/hooks/use-shipments-grid.cjs

@@ -22,7 +22,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);
@@ -62,14 +64,13 @@ const useShipmentsGrid = ({
     page,
     pageSize,
     shipmentStatus,
-    sortBy: "modified_at",
-    sortDir: "desc"
+    sortBy: sortBy,
+    sortDir: sortDir
   }, createdDateValue.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 = React.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,
@@ -136,7 +137,7 @@ const useShipmentsGrid = ({
     },
     setFilters: onSetFilters,
     shipments,
-    shouldShowFilters
+    shouldShowFilters: isAnyFilterEnabled
   };
 };
 

package/cjs/elements/shipments-grid/shipments-grid.cjs

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useSortableQuery = require('../../hooks/use-sortable-query.cjs');
+var React = require('react');
 var reactI18next = require('react-i18next');
 var giger = require('@shipengine/giger');
 var useShipmentsGrid = require('./hooks/use-shipments-grid.cjs');
@@ -11,8 +13,8 @@ var actionsMenu = require('../../components/actions-menu/actions-menu.cjs');
 var gridFilters = require('../../components/grid-filters/grid-filters.cjs');
 var index = require('../../locales/en/index.cjs');
 var elementsContextProvider = require('../../elements-provider/elements-context-provider.cjs');
-var loader = require('../../components/loader/loader.cjs');
 var errorState = require('../../components/error-state/error-state.cjs');
+var sortableHeader = require('../../components/grid-controller/sortable-header/sortable-header.cjs');
 var cellFormattedDate = require('../../components/grid-controller/cell-formatted-date.cjs');
 var gridController = require('../../components/grid-controller/grid-controller.cjs');
 var gridFooter = require('../../components/grid-controller/grid-footer.cjs');
@@ -55,6 +57,13 @@ const Component = ({
   const {
     globalFeatures
   } = elementsContextProvider.useElements();
+  const {
+    toggleSort,
+    sortState
+  } = useSortableQuery.useSortableQuery({
+    defaultSortBy: "modified_at",
+    defaultSortDir: "desc"
+  });
   const {
     isLoading,
     isError,
@@ -68,13 +77,40 @@ const Component = ({
   } = useShipmentsGrid.useShipmentsGrid({
     shipmentStatus,
     showCreatedDateFilter: _showCreatedDateFilter,
-    showShipmentIdFilter: _showShipmentIdFilter
+    showShipmentIdFilter: _showShipmentIdFilter,
+    sortBy: sortState.by,
+    sortDir: sortState.dir
   });
-  if (isLoading) {
-    return jsxRuntime.jsx(loader.Loader, {
-      message: t("loading.shipments")
-    });
-  }
+  const handleCreatedDateSort = () => {
+    toggleSort("created_at");
+  };
+  const handleUpdatedDateSort = () => {
+    toggleSort("modified_at");
+  };
+  const emptyContentComponent = React.useMemo(() => {
+    if (isLoading) {
+      return undefined;
+    }
+    if (isAnyFilterActive) {
+      return jsxRuntime.jsx(giger.EmptyState, Object.assign({
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
+        title: t("list-shipments:emptyState.filtersTitle")
+      }, {
+        children: jsxRuntime.jsx(giger.Button, Object.assign({
+          onClick: clearAllFilters
+        }, {
+          children: t("list-shipments:emptyState.viewAll")
+        }))
+      }));
+    } else {
+      return jsxRuntime.jsx(giger.EmptyState, {
+        isElevated: false,
+        subtitle: t("list-shipments:emptyState.subtitle"),
+        title: t("list-shipments:emptyState.title")
+      });
+    }
+  }, [clearAllFilters, isAnyFilterActive, isLoading, t]);
   if (isError) {
     return jsxRuntime.jsx(errorState.ErrorState, {
       css: shipmentsGrid_styles.styles.errorState,
@@ -160,7 +196,11 @@ const Component = ({
       }));
     }
   }, {
-    headerContent: t("list-shipments:headers.created"),
+    headerContent: jsxRuntime.jsx(sortableHeader.SortableHeader, {
+      headerText: t("list-shipments:headers.created"),
+      onToggleSort: handleCreatedDateSort,
+      sortDirection: sortState.createdAtDir
+    }),
     renderCellContent: shipment => {
       return jsxRuntime.jsx(cellFormattedDate.CellFormattedDate, {
         date: shipment.createdAt,
@@ -168,7 +208,11 @@ const Component = ({
       });
     }
   }, {
-    headerContent: t("list-shipments:headers.modified"),
+    headerContent: jsxRuntime.jsx(sortableHeader.SortableHeader, {
+      headerText: t("list-shipments:headers.modified"),
+      onToggleSort: handleUpdatedDateSort,
+      sortDirection: sortState.modifiedAtDir
+    }),
     renderCellContent: shipment => {
       return jsxRuntime.jsx(cellFormattedDate.CellFormattedDate, {
         date: shipment.modifiedAt,
@@ -200,23 +244,10 @@ const Component = ({
     children: [jsxRuntime.jsx(gridController.GridController, {
       columns: columns,
       data: getGridData(),
-      emptyContent: isAnyFilterActive ? jsxRuntime.jsx(giger.EmptyState, Object.assign({
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.filtersSubtitle"),
-        title: t("list-shipments:emptyState.filtersTitle")
-      }, {
-        children: jsxRuntime.jsx(giger.Button, Object.assign({
-          onClick: clearAllFilters
-        }, {
-          children: t("list-shipments:emptyState.viewAll")
-        }))
-      })) : jsxRuntime.jsx(giger.EmptyState, {
-        isElevated: false,
-        subtitle: t("list-shipments:emptyState.subtitle"),
-        title: t("list-shipments:emptyState.title")
-      }),
+      emptyContent: emptyContentComponent,
       filters: shouldShowFilters && jsxRuntime.jsx(gridFilters.GridFilters, {
         filters: filters,
+        filtersDisabled: isLoading,
         onClearAllFilters: clearAllFilters,
         onFiltersUpdated: setFilters
       }),
@@ -228,6 +259,7 @@ const Component = ({
         showPagination: pageConfig.showPagination,
         total: pageConfig.totalElements
       }),
+      isLoading: isLoading,
       onRowClick: onRowClick
     }), globalFeatures.poweredByShipEngine && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(spacer.Spacer, {}), jsxRuntime.jsx(poweredByShipengine.PoweredByShipEngine, {})]

package/cjs/hooks/use-sortable-query.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useSortableQuery = ({
+  defaultSortBy: _defaultSortBy = "modified_at",
+  defaultSortDir: _defaultSortDir = "desc"
+}) => {
+  const [sortState, setSortState] = React.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
+  };
+};
+
+exports.useSortableQuery = useSortableQuery;

package/cjs/locales/en/common.cjs

@@ -216,6 +216,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/cjs/package.cjs

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "2.21.0";
+var version = "2.22.0";
 
 exports.version = version;

package/cjs/utilities/feature-flags/feature-flags.cjs

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

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

@@ -1,6 +1,6 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
-import { Table, TableFooter, TableHeader, TableHeaderRow, TableHeaderCell, Checkbox, TableBody, TableRow, TableBodyCell } from '@shipengine/giger';
+import { TableRow, TableBodyCell, Skeleton, SkeletonAnimation, SkeletonVariant, Table, TableFooter, TableHeader, TableHeaderRow, TableHeaderCell, Checkbox, TableBody } from '@shipengine/giger';
 import { styles } from './grid-controller.styles.js';
 
 /**
@@ -17,15 +17,33 @@ const GridController = ({
   data,
   footerContent,
   onRowClick,
+  isLoading: _isLoading = false,
   useCheckboxes: _useCheckboxes = false,
   filters,
   emptyContent
 }) => {
   var _a, _b, _c;
   const [isChecked, setIsChecked] = useState((_a = data === null || data === void 0 ? void 0 : data.map(() => false)) !== null && _a !== void 0 ? _a : []);
-  const getColumnHeaderContents = () => {
-    return columns.map(column => column.headerContent);
-  };
+  const columnHeaderContents = useMemo(() => columns.map(column => column.headerContent), [columns]);
+  const loadingRows = useMemo(() => {
+    const items = [];
+    for (let index = 0; index < 5; index++) {
+      items.push(jsx(TableRow, Object.assign({
+        css: styles.skeletonTableRow,
+        withHover: false
+      }, {
+        children: columnHeaderContents.map((item, index) => jsx(TableBodyCell, {
+          children: item && jsx(Skeleton, {
+            animation: SkeletonAnimation.WAVE,
+            height: 16,
+            variant: SkeletonVariant.RECT,
+            width: 72
+          })
+        }, index))
+      }), `loading-row-${index}`));
+    }
+    return items;
+  }, [columnHeaderContents]);
   const isAllChecked = useMemo(() => isChecked.length > 0 && isChecked.every(check => check), [isChecked]);
   const isIndeterminate = useMemo(() => isChecked.some(check => check), [isChecked]);
   const toggleCheckbox = useCallback(index => {
@@ -66,7 +84,7 @@ const GridController = ({
               indeterminate: (_c = !isAllChecked && isIndeterminate) !== null && _c !== void 0 ? _c : false,
               onChange: event => toggleAllCheckboxes(event.target.checked)
             })
-          })), getColumnHeaderContents().map((header, index) => jsx(TableHeaderCell, Object.assign({
+          })), columnHeaderContents.map((header, index) => jsx(TableHeaderCell, Object.assign({
             css: styles.tableHeader
           }, {
             children: header
@@ -76,8 +94,8 @@ const GridController = ({
       outerWrapperStyles: styles.tableWrapper,
       tableStyles: styles.table
     }, {
-      children: jsx(TableBody, {
-        children: data.map((row, index) => {
+      children: jsxs(TableBody, {
+        children: [_isLoading && loadingRows, data.map((row, index) => {
           var _a;
           const allowOnClick = !!onRowClick && !(row === null || row === void 0 ? void 0 : row.disableOnRowClick);
           return jsxs(TableRow, Object.assign({
@@ -98,7 +116,7 @@ const GridController = ({
               children: column.renderCellContent(row)
             }), index))]
           }), index);
-        })
+        })]
       })
     }))]
   }));

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

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