@jobber/components 4.31.1 → 4.32.1

package/dist/DataList/DataList.const.d.ts

@@ -3,12 +3,15 @@
  */
 type ValuesOf<T extends readonly unknown[]> = T[number];
 export type Breakpoints = ValuesOf<typeof BREAKPOINTS>;
-export declare const EMPTY_FILTER_RESULTS_MESSAGE = "No Results for Selected Filters";
-export declare const EMPTY_FILTER_RESULTS_ACTION_LABEL = "Clear Filters";
+export declare const EMPTY_RESULTS_MESSAGE = "List is looking empty";
+export declare const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
+export declare const EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = "DataListEmptyState action prop must be a Button component";
 /**
  * Breakpoints that we support
  */
 export declare const BREAKPOINTS: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const BREAKPOINT_SIZES: Record<Breakpoints, number>;
 export declare const SEARCH_DEBOUNCE_DELAY: number;
+export declare const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
+export declare const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 export {};

package/dist/DataList/DataList.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { DataListLayout } from "./components/DataListLayout";
-import { DataListObject, DataListProps } from "./DataList.types";
 import { DataListFilters } from "./components/DataListFilters";
 import { DataListSearch } from "./components/DataListSearch";
+import { DataListEmptyState } from "./components/DataListEmptyState";
+import { DataListObject, DataListProps } from "./DataList.types";
 export declare function DataList<T extends DataListObject>(props: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
     var Layout: typeof DataListLayout;
-    var EmptyState: typeof import("./components/EmptyState").EmptyState;
+    var EmptyState: typeof DataListEmptyState;
     var Filters: typeof DataListFilters;
     var Search: typeof DataListSearch;
 }

package/dist/DataList/DataList.types.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { Breakpoints } from "./DataList.const";
+import { ButtonProps } from "../Button";
 export { Breakpoints } from "./DataList.const";
 export type DataListItemType<T extends DataListObject[]> = Record<keyof T[number], ReactElement>;
 export type DataListItemTypeFromHeader<TData extends DataListObject, THeader extends DataListHeader<TData>> = Record<keyof THeader, ReactElement>;
@@ -29,21 +30,27 @@ export type DataListHeader<T extends DataListObject> = {
     readonly [K in keyof T]?: string;
 };
 export interface DataListProps<T extends DataListObject> {
+    /**
+     * The data to render in the DataList.
+     */
     readonly data: T[];
+    /**
+     * The header of the DataList. The object keys are determined by the
+     * keys in the data.
+     */
     readonly headers: DataListHeader<T>;
     /**
-     * Shows the loading state of the DataList.
+     * Set the loading state of the DataList. There are a few guidelines on when to use what.
      *
-     * @default false
+     * - `"initial"` - loading the first set of data
+     * - `"filtering"` - loading after a filter is applied
+     * - `"loadingMore"` - loading more data after the user scrolls to the bottom
      */
-    readonly loading?: boolean;
+    readonly loadingState?: "initial" | "filtering" | "loadingMore" | "none";
     /**
-     * Temporary prop for setting default state for if filters are applied
-     *
-     * @default false
+     * Adjusts the DataList to show the UX when it is filtered.
      */
-    readonly filterApplied?: boolean;
-    readonly children: ReactElement | ReactElement[];
+    readonly filtered?: boolean;
     /**
      * The title of the DataList.
      */
@@ -64,15 +71,51 @@ export interface DataListProps<T extends DataListObject> {
     readonly headerVisibility?: {
         [Breakpoint in Breakpoints]?: boolean;
     };
+    readonly children: ReactElement | ReactElement[];
+}
+export interface DataListLayoutProps<T extends DataListObject> {
+    readonly children: (item: DataListItemType<T[]>) => JSX.Element;
+    /**
+     * The breakpoint at which the layout should be displayed. It will be rendered until a layout with a larger breakpoint is found.
+     * @default "xs"
+     */
+    readonly size?: Breakpoints;
 }
 export interface DataListSearchProps {
+    /**
+     * The placeholder text for the search input. This either uses the title prop
+     * prepended by "Search" or just falls back to "Search".
+     */
     readonly placeholder?: string;
     readonly onSearch: (search: string) => void;
 }
 export interface DataListFiltersProps {
     readonly children: ReactElement | ReactElement[];
 }
+export interface DataListEmptyStateProps {
+    /**
+     * The message that shows when the DataList is empty.
+     */
+    readonly message: string;
+    /**
+     * The action that shows when the DataList is empty.
+     *
+     * This only accepts a Button component. Adding a non-Button component will
+     * throw an error.
+     */
+    readonly action?: ReactElement<ButtonProps>;
+    /**
+     * Determine the type of empty state to show.
+     *
+     * By default, it will show the "empty" state when there is no data. If you
+     * want to show the "filtered" type, you need to set the `filtered` prop
+     * to the DataList component.
+     */
+    readonly type?: "filtered" | "empty";
+}
 export interface DataListContextProps<T extends DataListObject> extends DataListProps<T> {
     readonly filterComponent?: ReactElement<DataListFiltersProps>;
     readonly searchComponent?: ReactElement<DataListSearchProps>;
+    readonly emptyStateComponents?: ReactElement<DataListEmptyStateProps>[];
+    readonly layoutComponents?: ReactElement<DataListLayoutProps<T>>[];
 }

package/dist/DataList/DataList.utils.d.ts

@@ -1,6 +1,5 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import { DataListHeader, DataListItemType, DataListItemTypeFromHeader, DataListObject } from "./DataList.types";
-import { EmptyStateProps } from "./components/EmptyState";
 import { Breakpoints } from "./DataList.const";
 /**
  * Return the child component that matches the `type` provided
@@ -18,14 +17,4 @@ export declare function generateListItemElements<T extends DataListObject>(data:
  * Generate the header elements with the default styling
  */
 export declare function generateHeaderElements<T extends DataListObject>(headers: DataListHeader<T>): DataListItemTypeFromHeader<T, DataListHeader<T>> | undefined;
-interface UseDataListEmptyStateProps {
-    readonly children?: ReactElement | ReactElement[];
-    readonly isFilterApplied: boolean;
-    readonly setIsFilterApplied: (isFilterApplied: boolean) => void;
-}
-/**
- * Modify EmptyState to include an empty filter results when filtering happens
- */
-export declare function generateDataListEmptyState({ children, isFilterApplied, setIsFilterApplied, }: UseDataListEmptyStateProps): React.ReactElement<EmptyStateProps> | undefined;
 export declare function sortSizeProp(sizeProp: Breakpoints[]): ("xs" | "sm" | "md" | "lg" | "xl")[];
-export {};

package/dist/DataList/components/DataListEmptyState/DataListEmptyState.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DataListEmptyStateProps } from "../../DataList.types";
+export declare function DataListEmptyState(_: DataListEmptyStateProps): null;
+export declare function InternalDataListEmptyState(): JSX.Element;

package/dist/DataList/components/DataListEmptyState/index.d.ts

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

package/dist/DataList/components/DataListLayout/DataListLayout.d.ts

@@ -1,11 +1,3 @@
 /// <reference types="react" />
-import { Breakpoints, DataListItemType, DataListObject } from "../../DataList.types";
-export interface DataListLayoutProps<T extends DataListObject> {
-    readonly children: (item: DataListItemType<T[]>) => JSX.Element;
-    /**
-     * The breakpoint at which the layout should be displayed. It will be rendered until a layout with a larger breakpoint is found.
-     * @default "xs"
-     */
-    readonly size?: Breakpoints;
-}
+import { DataListLayoutProps, DataListObject } from "../../DataList.types";
 export declare function DataListLayout<T extends DataListObject>(_: DataListLayoutProps<T>): JSX.Element;

package/dist/DataList/components/DataListLayoutInternal/DataListHeader.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { Breakpoints } from "../../DataList.const";
-import { DataListHeader as DataListHeaderType, DataListItemTypeFromHeader, DataListObject, DataListProps } from "../../DataList.types";
-import { DataListLayoutProps } from "../DataListLayout/DataListLayout";
+import { DataListHeader as DataListHeaderType, DataListItemTypeFromHeader, DataListLayoutProps, DataListObject, DataListProps } from "../../DataList.types";
 interface DataListHeaderProps<T extends DataListObject> {
     readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
     readonly mediaMatches?: Record<Breakpoints, boolean>;

package/dist/DataList/components/DataListLayoutInternal/DataListItems.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { Breakpoints } from "../../DataList.const";
-import { DataListObject } from "../../DataList.types";
-import { DataListLayoutProps } from "../DataListLayout/DataListLayout";
+import { DataListLayoutProps, DataListObject } from "../../DataList.types";
 interface DataListItemsProps<T extends DataListObject> {
     readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
     readonly mediaMatches?: Record<Breakpoints, boolean>;

package/dist/DataList/components/DataListLayoutInternal/DataListLayoutInternal.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { Breakpoints } from "../../DataList.const";
-import { DataListObject } from "../../DataList.types";
-import { DataListLayoutProps } from "../DataListLayout/DataListLayout";
+import { DataListLayoutProps, DataListObject } from "../../DataList.types";
 interface DataListLayoutInternalProps<T extends DataListObject> {
     readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
     readonly renderLayout: (layout: React.ReactElement<DataListLayoutProps<T>>) => JSX.Element;

package/dist/DataList/components/DataListLoadingState/DataListLoadingState.d.ts

@@ -1,13 +1,11 @@
 import React from "react";
-import { Breakpoints, DataListHeader, DataListObject } from "../../DataList.types";
-import { DataListLayoutProps } from "../DataListLayout";
+import { Breakpoints, DataListHeader, DataListLayoutProps, DataListObject } from "../../DataList.types";
 interface DataListLoadingStateProps<T extends DataListObject> {
-    readonly loading: boolean;
     readonly headers: DataListHeader<T>;
     readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
     readonly mediaMatches?: Record<Breakpoints, boolean>;
 }
 export declare const LOADING_STATE_LIMIT_ITEMS = 10;
 export declare const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
-export declare function DataListLoadingState<T extends DataListObject>({ loading, headers, layouts, mediaMatches, }: DataListLoadingStateProps<T>): JSX.Element | null;
+export declare function DataListLoadingState<T extends DataListObject>({ headers, layouts, mediaMatches, }: DataListLoadingStateProps<T>): JSX.Element;
 export {};

package/dist/DataList/components/DataListStickyHeader/index.d.ts

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

package/dist/DataList/index.js

@@ -4,30 +4,30 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Button = require('../Button-7698424c.js');
 var Text = require('../Text-e7ed0974.js');
-var isEmpty = require('lodash/isEmpty');
+var Glimmer = require('../Glimmer-cfa92a88.js');
 var design = require('@jobber/design');
+var isEmpty = require('lodash/isEmpty');
 var InlineLabel = require('../InlineLabel-afd5fc6f.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
 var Heading = require('../Heading-a1191b15.js');
-var Glimmer = require('../Glimmer-cfa92a88.js');
 var classnames = require('classnames');
-require('react-router-dom');
 require('../Typography-fd6f932a.js');
 var useInView = require('@jobber/hooks/useInView');
 var debounce = require('lodash/debounce');
 var InputText = require('../InputText-bb03f6d1.js');
+var Button = require('../Button-7698424c.js');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-require('../Icon-405a216c.js');
+var Spinner = require('../Spinner-9d8fc7ff.js');
 require('../tslib.es6-5b8768b7.js');
 require('../Content-2ca1ffe1.js');
 require('../FormField-0f880b07.js');
 require('uuid');
 require('react-hook-form');
+require('../Icon-405a216c.js');
 require('../InputValidation-b5a3d92c.js');
 require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
+require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -36,28 +36,38 @@ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$7 = ".TkdrExYnvcY- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n.Z8C7qJtq5Xc- {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.Z8C7qJtq5Xc-:empty {\n  display: none;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.Gj9kAGnfKco- > * {\n  font-weight: 500;\n}\n\n.ise8kHCfhCY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n";
-var styles$7 = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","header":"Z8C7qJtq5Xc-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerLabel":"Gj9kAGnfKco-","listItem":"ise8kHCfhCY-"};
+var css_248z$7 = ".TkdrExYnvcY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.Gj9kAGnfKco- > * {\n  font-weight: 500;\n}\n\n.ise8kHCfhCY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n.xeUxuTlqQtk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n";
+var styles$7 = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerLabel":"Gj9kAGnfKco-","listItem":"ise8kHCfhCY-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","loadingMore":"xeUxuTlqQtk-"};
 styleInject_es.styleInject(css_248z$7);
 
-var css_248z$6 = "._--dXJma0jX0- {\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: calc(16px * 1);\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles$6 = {"emptyStateWrapper":"_--dXJma0jX0-"};
+var css_248z$6 = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles$6 = {"results":"F56prQsXm3A-"};
 styleInject_es.styleInject(css_248z$6);
 
-function DataListEmptyState({ message, action }) {
-    return (React__default["default"].createElement("div", { className: styles$6.emptyStateWrapper },
-        React__default["default"].createElement(Text.Text, { align: "center" }, message),
-        action && (React__default["default"].createElement(Button.Button, Object.assign({}, Object.assign(Object.assign({}, action), { variation: "subtle" }))))));
+const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
+function DataListTotalCount({ totalCount, loading, }) {
+    if (totalCount === undefined)
+        return null;
+    let output = null;
+    if (totalCount === null && loading) {
+        output = React__default["default"].createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" });
+    }
+    if (typeof totalCount === "number") {
+        output = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
+            "(",
+            totalCount.toLocaleString(),
+            " results)"));
+    }
+    return (React__default["default"].createElement("div", { className: styles$6.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
 }
 
-function DataListLayout(
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_) {
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
-}
+var css_248z$5 = ".Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  height: calc(16px * 3);\n  height: var(--space-largest);\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n";
+var styles$5 = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
+styleInject_es.styleInject(css_248z$5);
 
-const EMPTY_FILTER_RESULTS_MESSAGE = "No Results for Selected Filters";
-const EMPTY_FILTER_RESULTS_ACTION_LABEL = "Clear Filters";
+const EMPTY_RESULTS_MESSAGE = "List is looking empty";
+const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
+const EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = "DataListEmptyState action prop must be a Button component";
 /**
  * Breakpoints that we support
  */
@@ -70,10 +80,12 @@ const BREAKPOINT_SIZES = {
     xl: 1440,
 };
 const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
+const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
+const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 
-var css_248z$5 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--color-white);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles$5 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
-styleInject_es.styleInject(css_248z$5);
+var css_248z$4 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--color-white);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$4 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
+styleInject_es.styleInject(css_248z$4);
 
 function DataListTags({ items }) {
     const ref = React.useRef(null);
@@ -95,10 +107,10 @@ function DataListTags({ items }) {
             elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
         };
     }, [items]);
-    return (React__default["default"].createElement("div", { className: styles$5.tags, ref: ref },
+    return (React__default["default"].createElement("div", { className: styles$4.tags, ref: ref },
         items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
             React__default["default"].createElement(InlineLabel.InlineLabel, null, tag)))),
-        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$5.tagCount },
+        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$4.tagCount },
             React__default["default"].createElement(Text.Text, null,
                 "+",
                 visibleItems)))));
@@ -180,60 +192,10 @@ function generateHeaderElements(headers) {
             React__default["default"].createElement(Text.Text, { variation: "subdued", maxLines: "single", size: "small" }, headers[key]))) })), {});
     return isEmpty__default["default"](headerElements) ? undefined : headerElements;
 }
-/**
- * Modify EmptyState to include an empty filter results when filtering happens
- */
-function generateDataListEmptyState({ children, isFilterApplied, setIsFilterApplied, }) {
-    if (!children)
-        return;
-    const EmptyStateComponent = getCompoundComponent(children, DataListEmptyState);
-    if (isFilterApplied && React.isValidElement(EmptyStateComponent)) {
-        let overrideEmptyStateProps;
-        if (isFilterApplied) {
-            overrideEmptyStateProps = {
-                message: EMPTY_FILTER_RESULTS_MESSAGE,
-                action: {
-                    label: EMPTY_FILTER_RESULTS_ACTION_LABEL,
-                    onClick: () => {
-                        setIsFilterApplied(false);
-                        alert("Filters Cleared");
-                    },
-                },
-            };
-        }
-        return React__default["default"].cloneElement(EmptyStateComponent, overrideEmptyStateProps);
-    }
-    return EmptyStateComponent;
-}
 function sortSizeProp(sizeProp) {
     return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - BREAKPOINTS.indexOf(b));
 }
 
-var css_248z$4 = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
-var styles$4 = {"results":"F56prQsXm3A-"};
-styleInject_es.styleInject(css_248z$4);
-
-const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
-function DataListTotalCount({ totalCount, loading, }) {
-    if (totalCount === undefined)
-        return null;
-    let output = null;
-    if (totalCount === null && loading) {
-        output = React__default["default"].createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" });
-    }
-    if (typeof totalCount === "number") {
-        output = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
-            "(",
-            totalCount.toLocaleString(),
-            " results)"));
-    }
-    return (React__default["default"].createElement("div", { className: styles$4.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
-}
-
-var css_248z$3 = ".Rh--6fVpkm4- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n.zbS7UvpVoWI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  height: calc(16px * 3);\n  height: var(--space-largest);\n  padding: calc(16px * 1) 0;\n  padding: var(--space-base) 0;\n}\n";
-var styles$3 = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
-styleInject_es.styleInject(css_248z$3);
-
 function DataListLayoutInternal({ layouts, renderLayout, mediaMatches, }) {
     const sizePropsOfLayouts = layouts === null || layouts === void 0 ? void 0 : layouts.map(layout => layout.props.size || "xs");
     const layoutToRender = layouts === null || layouts === void 0 ? void 0 : layouts.find(layout => {
@@ -292,9 +254,7 @@ function DataListHeader({ layouts, mediaMatches, headerData, headerVisibility, }
 
 const LOADING_STATE_LIMIT_ITEMS = 10;
 const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
-function DataListLoadingState({ loading, headers, layouts, mediaMatches, }) {
-    if (!loading)
-        return null;
+function DataListLoadingState({ headers, layouts, mediaMatches, }) {
     const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(headers);
     const loadingElements = loadingData.map(item => Object.keys(item).reduce((acc, key) => {
         acc[key] = React__default["default"].createElement(Glimmer.Glimmer, null);
@@ -304,42 +264,29 @@ function DataListLoadingState({ loading, headers, layouts, mediaMatches, }) {
             if (layout.props.size === "xs") {
                 return React__default["default"].createElement(LoadingStateXSBreakpoint, null);
             }
-            return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$3.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
+            return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingElements.map((child, i) => (React__default["default"].createElement("div", { className: styles$5.loadingItem, key: i, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout.props.children(child))))));
         } }));
 }
 function LoadingStateXSBreakpoint() {
     const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(0);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, loadingData.map((_, i) => {
-        return (React__default["default"].createElement("div", { className: styles$3.mobileLoadingState, key: i },
+        return (React__default["default"].createElement("div", { className: styles$5.mobileLoadingState, key: i },
             React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
     })));
 }
 
-function useLayoutMediaQueries() {
-    const mediaQueries = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: window.matchMedia(breakpointToMediaQuery(breakpoint)) })), {});
-    const initialMatches = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: mediaQueries[breakpoint].matches })), {});
-    const [matches, setMatches] = React.useState(initialMatches);
-    const handlers = BREAKPOINTS.reduce((previous, breakpoint) => {
-        const handler = (e) => setMatches(previousMatches => (Object.assign(Object.assign({}, previousMatches), { [breakpoint]: e.matches })));
-        return Object.assign(Object.assign({}, previous), { [breakpoint]: handler });
-    }, {});
-    // Set up mediaQuery event handlers
-    React.useEffect(() => {
-        BREAKPOINTS.forEach(breakpoint => {
-            mediaQueries[breakpoint].addEventListener("change", handlers[breakpoint]);
-        });
-        return () => {
-            BREAKPOINTS.forEach(breakpoint => {
-                mediaQueries[breakpoint].removeEventListener("change", handlers[breakpoint]);
-            });
-        };
-    }, [mediaQueries]);
-    return matches;
-}
-function breakpointToMediaQuery(breakpoint) {
-    return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
+function DataListLayout(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
 }
 
+var css_248z$3 = ".E-mG3prPSN8- {\n  -ms-flex-item-align: center;\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n._0LGNoZxtqSE- {\n  display: grid;\n  overflow-x: auto;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._0LGNoZxtqSE- > :nth-child(n + 3):not(:last-child) {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n\n.LA3-gtgehrE- {\n  visibility: hidden;\n}\n\n.fSPvawYWzZ8-::before,\n.ChfEJMPPVTk-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: 100%;\n  background-image: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    var(--data-list-filters-overflow-shadow-angle, to right),\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n  pointer-events: none;\n}\n\n.fSPvawYWzZ8-::before {\n  left: 0;\n}\n\n.ChfEJMPPVTk-::after {\n  --data-list-filters-overflow-shadow-angle: to left;\n  right: 0;\n}\n";
+var styles$3 = {"filters":"E-mG3prPSN8-","filterActions":"_0LGNoZxtqSE-","overflowTrigger":"LA3-gtgehrE-","overflowLeft":"fSPvawYWzZ8-","overflowRight":"ChfEJMPPVTk-"};
+styleInject_es.styleInject(css_248z$3);
+
+const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
+
 const defaultValues = {
     title: "",
     data: [],
@@ -351,12 +298,6 @@ function useDataListContext() {
     return React.useContext(DataListContext);
 }
 
-var css_248z$2 = ".E-mG3prPSN8- {\n  -ms-flex-item-align: center;\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n._0LGNoZxtqSE- {\n  display: grid;\n  overflow-x: auto;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._0LGNoZxtqSE- > :nth-child(n + 3):not(:last-child) {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n\n.LA3-gtgehrE- {\n  visibility: hidden;\n}\n\n.fSPvawYWzZ8-::before,\n.ChfEJMPPVTk-::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: 100%;\n  background-image: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    var(--data-list-filters-overflow-shadow-angle, to right),\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n  pointer-events: none;\n}\n\n.fSPvawYWzZ8-::before {\n  left: 0;\n}\n\n.ChfEJMPPVTk-::after {\n  --data-list-filters-overflow-shadow-angle: to left;\n  right: 0;\n}\n";
-var styles$2 = {"filters":"E-mG3prPSN8-","filterActions":"_0LGNoZxtqSE-","overflowTrigger":"LA3-gtgehrE-","overflowLeft":"fSPvawYWzZ8-","overflowRight":"ChfEJMPPVTk-"};
-styleInject_es.styleInject(css_248z$2);
-
-const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
-
 // This component is meant to capture the props of the DataList.Filters
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListFilters(_) {
@@ -373,14 +314,34 @@ function InternalDataListFilters() {
     if (!component)
         return null;
     const { children } = component.props;
-    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$2.filters, {
-            [styles$2.overflowLeft]: !isLeftVisible,
-            [styles$2.overflowRight]: !isRightVisible,
+    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$3.filters, {
+            [styles$3.overflowLeft]: !isLeftVisible,
+            [styles$3.overflowRight]: !isRightVisible,
         }) },
-        React__default["default"].createElement("div", { className: styles$2.filterActions },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$2.overflowTrigger }),
+        React__default["default"].createElement("div", { className: styles$3.filterActions },
+            React__default["default"].createElement("span", { ref: leftRef, className: styles$3.overflowTrigger }),
             children,
-            React__default["default"].createElement("span", { ref: rightRef, className: styles$2.overflowTrigger }))));
+            React__default["default"].createElement("span", { ref: rightRef, className: styles$3.overflowTrigger }))));
+}
+
+var css_248z$2 = ".PGOHzrMh374- {\n  --offset: 1px;\n  --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n  position: sticky;\n  top: calc(1px * -1);\n  top: calc(var(--offset) * -1);\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding-top: 1px;\n  padding-top: var(--offset);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  width: 0;\n  height: 0;\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-border);\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n  transition: height var(--sticky-header-transition-properties)\n      100ms,\n    width var(--sticky-header-transition-properties);\n  transition: height var(--sticky-header-transition-properties)\n      var(--timing-quick),\n    width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n  width: 100%;\n  height: calc(16px / 8);\n  height: var(--border-thick);\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) 100ms;\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
+var styles$2 = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
+styleInject_es.styleInject(css_248z$2);
+
+function DataListStickyHeader({ children }) {
+    const [isStuck, setIsStuck] = React.useState(false);
+    const ref = React.useRef(null);
+    const handleObserver = React.useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
+    React.useEffect(() => {
+        if (!window.IntersectionObserver)
+            return;
+        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
+        ref.current && observer.observe(ref.current);
+        return () => {
+            ref.current && observer.unobserve(ref.current);
+        };
+    }, [handleObserver, ref.current]);
+    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$2.header, { [styles$2.stuck]: isStuck }) }, children));
 }
 
 var css_248z$1 = ".SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n  position: absolute;\n  /* Inputs are off by 1 when put beside a button */\n  top: calc((16px / 2) - 1px);\n  top: calc(calc(16px / 2) - 1px);\n  top: calc(var(--space-small) - 1px);\n  right: calc((16px * 3) - (16px / 8));\n  right: calc(calc(16px * 3) - calc(16px / 8));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out,\n    width 200ms ease-in-out, visibility 200ms ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
@@ -427,56 +388,110 @@ function InternalDataListSearch() {
     }
 }
 
-var css_248z = ".PGOHzrMh374- {\n  --offset: 1px;\n  --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n  position: sticky;\n  top: calc(1px * -1);\n  top: calc(var(--offset) * -1);\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding-top: 1px;\n  padding-top: var(--offset);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  width: 0;\n  height: 0;\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-border);\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n  transition: height var(--sticky-header-transition-properties)\n      100ms,\n    width var(--sticky-header-transition-properties);\n  transition: height var(--sticky-header-transition-properties)\n      var(--timing-quick),\n    width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n  width: 100%;\n  height: calc(16px / 8);\n  height: var(--border-thick);\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) 100ms;\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
-var styles = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
+var css_248z = ".zg3w9nQga-M- {\n  display: -ms-flexbox;\n  display: flex;\n  box-sizing: border-box;\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: calc(16px * 1);\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex: 1;\n      flex: 1;\n}\n";
+var styles = {"emptyStateWrapper":"zg3w9nQga-M-"};
 styleInject_es.styleInject(css_248z);
 
-function DataListStickyHeader({ children }) {
-    const [isStuck, setIsStuck] = React.useState(false);
-    const ref = React.useRef(null);
-    const handleObserver = React.useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListEmptyState(_) {
+    return null;
+}
+function InternalDataListEmptyState() {
+    const { emptyStateComponents: components, filtered } = React.useContext(DataListContext);
+    const { message, action } = getMessages();
+    return (React__default["default"].createElement("div", { className: styles.emptyStateWrapper },
+        React__default["default"].createElement(Text.Text, { align: "center" }, message),
+        renderButton(action)));
+    function getMessages() {
+        const { defaultEmptyState, filteredEmptyState } = getEmptyStates(components);
+        if (filtered) {
+            return {
+                message: (filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.message) || EMPTY_FILTER_RESULTS_MESSAGE,
+                action: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.action,
+            };
+        }
+        return {
+            message: (defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.message) || EMPTY_RESULTS_MESSAGE,
+            action: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.action,
+        };
+    }
+}
+function renderButton(action) {
+    if (action) {
+        if (action.type === Button.Button) {
+            return React.cloneElement(action, {
+                variation: action.props.variation || "subtle",
+            });
+        }
+        throw new Error(EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR);
+    }
+    return;
+}
+function getEmptyStates(components) {
+    const defaultEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "empty" || es.props.type === undefined);
+    const filteredEmptyState = components === null || components === void 0 ? void 0 : components.find(es => es.props.type === "filtered");
+    return { defaultEmptyState, filteredEmptyState };
+}
+
+function useLayoutMediaQueries() {
+    const mediaQueries = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: window.matchMedia(breakpointToMediaQuery(breakpoint)) })), {});
+    const initialMatches = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: mediaQueries[breakpoint].matches })), {});
+    const [matches, setMatches] = React.useState(initialMatches);
+    const handlers = BREAKPOINTS.reduce((previous, breakpoint) => {
+        const handler = (e) => setMatches(previousMatches => (Object.assign(Object.assign({}, previousMatches), { [breakpoint]: e.matches })));
+        return Object.assign(Object.assign({}, previous), { [breakpoint]: handler });
+    }, {});
+    // Set up mediaQuery event handlers
     React.useEffect(() => {
-        if (!window.IntersectionObserver)
-            return;
-        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
-        ref.current && observer.observe(ref.current);
+        BREAKPOINTS.forEach(breakpoint => {
+            mediaQueries[breakpoint].addEventListener("change", handlers[breakpoint]);
+        });
         return () => {
-            ref.current && observer.unobserve(ref.current);
+            BREAKPOINTS.forEach(breakpoint => {
+                mediaQueries[breakpoint].removeEventListener("change", handlers[breakpoint]);
+            });
         };
-    }, [handleObserver, ref.current]);
-    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles.header, { [styles.stuck]: isStuck }) }, children));
+    }, [mediaQueries]);
+    return matches;
+}
+function breakpointToMediaQuery(breakpoint) {
+    return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
 }
 
 function DataList(props) {
     const searchComponent = getCompoundComponent(props.children, DataListSearch);
     const filterComponent = getCompoundComponent(props.children, DataListFilters);
-    return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign({ searchComponent, filterComponent }, props) },
+    const layoutComponents = getCompoundComponents(props.children, DataListLayout);
+    const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
+    return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign({ searchComponent,
+            filterComponent,
+            layoutComponents,
+            emptyStateComponents }, props) },
         React__default["default"].createElement(InternalDataList, null)));
 }
 function InternalDataList() {
-    const { data, headers, loading = false, filterApplied = false, children, title, totalCount, headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, } = useDataListContext();
-    const allLayouts = getCompoundComponents(children, DataListLayout);
+    const { data, headers, title, totalCount, headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, loadingState = "none", layoutComponents, } = useDataListContext();
     const headerData = generateHeaderElements(headers);
     const mediaMatches = useLayoutMediaQueries();
-    const showEmptyState = !loading && data.length === 0;
-    const [isFilterApplied, setIsFilterApplied] = React.useState(filterApplied);
-    const EmptyStateComponent = generateDataListEmptyState({
-        children,
-        isFilterApplied,
-        setIsFilterApplied,
-    });
+    const initialLoading = loadingState === "initial";
+    const showEmptyState = !initialLoading && data.length === 0;
     return (React__default["default"].createElement("div", { className: styles$7.wrapper },
         React__default["default"].createElement("div", { className: styles$7.titleContainer },
             title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
-            React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: loading })),
+            React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
         React__default["default"].createElement(DataListStickyHeader, null,
             React__default["default"].createElement("div", { className: styles$7.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
-            headerData && (React__default["default"].createElement(DataListHeader, { layouts: allLayouts, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches }))),
-        React__default["default"].createElement(DataListLoadingState, { loading: loading, headers: headers, layouts: allLayouts, mediaMatches: mediaMatches }),
-        !loading && (React__default["default"].createElement(DataListItems, { data: data, layouts: allLayouts, mediaMatches: mediaMatches })),
-        showEmptyState && EmptyStateComponent));
+            headerData && (React__default["default"].createElement(DataListHeader, { layouts: layoutComponents, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches }))),
+        initialLoading && (React__default["default"].createElement(DataListLoadingState, { headers: headers, layouts: layoutComponents, mediaMatches: mediaMatches })),
+        showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
+        !initialLoading && (React__default["default"].createElement(DataListItems, { data: data, layouts: layoutComponents, mediaMatches: mediaMatches })),
+        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$7.filtering },
+            React__default["default"].createElement("div", { className: styles$7.filteringSpinner },
+                React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
+        loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles$7.loadingMore },
+            React__default["default"].createElement(Spinner.Spinner, { size: "small" })))));
 }
 DataList.Layout = DataListLayout;
 DataList.EmptyState = DataListEmptyState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.31.1",
+  "version": "4.32.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "665be9b90350bbc3c2ef3ff6dcba2578fae8369f"
+  "gitHead": "71e830b2c91ff606f62100920e4ece78daa79b4b"
 }

package/dist/DataList/components/EmptyState/EmptyState.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { XOR } from "ts-xor";
-import { ButtonProps } from "../../../Button";
-interface ActionBase {
-    label: string;
-}
-interface AnchorAction extends ActionBase {
-    url: ButtonProps["url"];
-}
-interface LinkAction extends ActionBase {
-    to: ButtonProps["to"];
-}
-interface ClickAction extends ActionBase {
-    onClick: ButtonProps["onClick"];
-}
-export interface EmptyStateProps {
-    message: string;
-    action?: XOR<ClickAction, XOR<AnchorAction, LinkAction>>;
-}
-export declare function DataListEmptyState({ message, action }: EmptyStateProps): JSX.Element;
-export {};

package/dist/DataList/components/EmptyState/index.d.ts

@@ -1 +0,0 @@
-export { DataListEmptyState as EmptyState, EmptyStateProps, } from "./EmptyState";