@jobber/components 4.41.0 → 4.42.1-update-hov.11

package/dist/DataList/index.js

@@ -5,59 +5,58 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Text = require('../Text-e7ed0974.js');
+var Text = require('../Text-4a2bc89f.js');
 var Glimmer = require('../Glimmer-cfa92a88.js');
+var noop = require('lodash/noop');
+var design = require('@jobber/design');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
-var design = require('@jobber/design');
+var Tooltip = require('../Tooltip-6b12f1c2.js');
+var Button = require('../Button-163a0641.js');
+var useInView = require('@jobber/hooks/useInView');
 var isEmpty = require('lodash/isEmpty');
-var InlineLabel = require('../InlineLabel-afd5fc6f.js');
+var InlineLabel = require('../InlineLabel-9a517c19.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
-var Heading = require('../Heading-a1191b15.js');
-require('uuid');
-require('react-hook-form');
-var Checkbox = require('../Checkbox-3bccf65c.js');
-var Typography = require('../Typography-fd6f932a.js');
-require('react-router-dom');
-var Button = require('../Button-fd8413b2.js');
-require('react-dom');
-var Tooltip = require('../Tooltip-bf67fe6e.js');
-require('react-popper');
+var Heading = require('../Heading-0f4ecb0c.js');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+var ReactDOM = require('react-dom');
+var Checkbox = require('../Checkbox-ad7ec2e7.js');
+var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
+var Combobox = require('../Combobox-0044641d.js');
+var Chip = require('../Chip-55e6da05.js');
 var Icon = require('../Icon-405a216c.js');
-var useInView = require('@jobber/hooks/useInView');
-var Popover = require('../Popover-bbfc6aa1.js');
-var Content = require('../Content-2ca1ffe1.js');
-var Chip = require('../Chip-4916a642.js');
-require('@jobber/hooks/useAssert');
-require('../Avatar-1aa30ee1.js');
-require('color');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-d1a52550.js');
+var InputText = require('../InputText-dcf6c428.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
-require('../ButtonDismiss-82680c7d.js');
-require('lodash/sortBy');
-require('@jobber/hooks/useLiveAnnounce');
-require('../FormField-d6138b7f.js');
-require('../InputValidation-b5a3d92c.js');
+var Typography = require('../Typography-973b122e.js');
+require('../Content-2ca1ffe1.js');
+require('react-popper');
+require('uuid');
+require('react-hook-form');
+require('@jobber/hooks/useAssert');
+require('../Avatar-76a799fa.js');
+require('color');
+require('../FormField-0b529c0b.js');
+require('../InputValidation-179f0926.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$d = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.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  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\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.jMSVGIAr5tk- > p {\n  font-weight: 500;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n}\n\n.ise8kHCfhCY- {\n  position: relative;\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  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4- {\n  --data-list-item-active-color: var(--color-surface--background);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--data-list-item-active-color);\n}\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :first-child {\n  opacity: 1;\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: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n";
-var styles$d = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
-styleInject_es.styleInject(css_248z$d);
+var css_248z$f = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n  --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n  display: -ms-flexbox;\n\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/*\n * Header\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  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@media (max-width: 489.98px) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n    -ms-flex-pack: justify;\n        justify-content: space-between;\n    width: 100%;\n}\n  }\n\n.jMSVGIAr5tk- > p {\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n  display: grid;\n  grid-template-columns: minmax(0px, auto);\n  min-height: var(--data-list--minimum-item-height);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--hover);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n  outline: none;\n  background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n\n  /* To compensate the Checkbox's label margin that we are using for screen-readers */\n  margin-right: calc((16px * 1) * -1);\n  margin-right: calc(calc(16px * 1) * -1);\n  margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\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: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n  position: absolute;\n  top: auto;\n  left: -10000px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  text-indent: -10000px;\n}\n";
+var styles$f = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
+styleInject_es.styleInject(css_248z$f);
 
-var css_248z$c = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
-var styles$c = {"results":"F56prQsXm3A-"};
-styleInject_es.styleInject(css_248z$c);
+var css_248z$e = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles$e = {"results":"F56prQsXm3A-"};
+styleInject_es.styleInject(css_248z$e);
 
 const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
 function DataListTotalCount({ totalCount, loading, }) {
@@ -73,12 +72,57 @@ function DataListTotalCount({ totalCount, loading, }) {
             totalCount.toLocaleString(),
             " results)"));
     }
-    return (React__default["default"].createElement("div", { className: styles$c.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+    return (React__default["default"].createElement("div", { className: styles$e.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
 }
 
-var css_248z$b = ".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$b = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
-styleInject_es.styleInject(css_248z$b);
+const defaultValues$1 = {
+    title: "",
+    data: [],
+    headers: {},
+    children: [],
+    selected: [],
+    layoutBreakpoints: [],
+    registerLayoutBreakpoints: noop__default["default"],
+    layouts: {
+        xs: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+        sm: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+        md: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+        lg: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+        xl: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
+    },
+    registerLayout: noop__default["default"],
+};
+const DataListContext = React.createContext(defaultValues$1);
+function useDataListContext() {
+    return React.useContext(DataListContext);
+}
+
+function useMediaQuery(CSSMediaQuery) {
+    /**
+     * matchMedia have had full support for browsers since 2012 but jest, being a
+     * lite version of a DOM, doesn't support it.
+     *
+     * Instead of the consumers mocking matchMedia on every usage of DataList,
+     * we can just return true to mimic the largest screen we support.
+     *
+     * In the event that the consumer wants to test the DataList on different
+     * screen sizes, they can use the `mockViewportWidth` function from
+     * `@jobber/components/useBreakpoints`.
+     */
+    if (window.matchMedia === undefined)
+        return true;
+    const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
+    React.useEffect(() => {
+        const media = window.matchMedia(CSSMediaQuery);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        media.addEventListener("change", listener);
+        return () => media.removeEventListener("change", listener);
+    }, [CSSMediaQuery]);
+    return matches;
+}
 
 const EMPTY_RESULTS_MESSAGE = "List is looking empty";
 const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
@@ -101,14 +145,88 @@ const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
 const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
 const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
 
-var css_248z$a = ".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(--data-list-item-active-color, var(--color-surface));\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  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n";
-var styles$a = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
+function useResponsiveSizing() {
+    // This was originally written to look for "min-width: 0" which would always
+    // return true no matter what.
+    // So, instead of running media query on it, just set it to true.
+    const xs = true;
+    const sm = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.sm}px)`);
+    const md = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.md}px)`);
+    const lg = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.lg}px)`);
+    const xl = useMediaQuery(`(min-width: ${BREAKPOINT_SIZES.xl}px)`);
+    return { xs, sm, md, lg, xl };
+}
+
+function useActiveLayout() {
+    const { layoutBreakpoints, layouts } = useDataListContext();
+    const breakpoints = useResponsiveSizing();
+    const reversedLayoutBreakpoints = [...layoutBreakpoints].reverse();
+    const activeBreakpoint = reversedLayoutBreakpoints.find(key => breakpoints[key]) ||
+        layoutBreakpoints[0];
+    const layout = layouts[activeBreakpoint];
+    return { layout, activeBreakpoint };
+}
+
+var css_248z$d = "._8cMzUF8XEwY- {\n  position: relative;\n}\n\n._8cMzUF8XEwY-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 100px;\n  background-image: linear-gradient(\n    to top,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  background-image: linear-gradient(\n    to top,\n    var(--color-surface) 0%,\n    rgba(var(--color-white--rgb), 0) 100%\n  );\n}\n\n.Rh--6fVpkm4- {\n  padding: calc(16px * 1) calc(16px / 2);\n  padding: var(--space-base) var(--space-small);\n}\n\n.NFaWWvmxtkw- {\n  width: 100%;\n  min-width: calc(16px * 3);\n  min-width: var(--space-largest);\n}\n";
+var styles$d = {"wrapper":"_8cMzUF8XEwY-","loadingItem":"Rh--6fVpkm4-","glimmer":"NFaWWvmxtkw-"};
+styleInject_es.styleInject(css_248z$d);
+
+const LOADING_STATE_LIMIT_ITEMS = 10;
+const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
+function DataListLoadingState() {
+    const { headers } = useDataListContext();
+    const { layout, activeBreakpoint } = useActiveLayout();
+    if (!layout)
+        return null;
+    const glimmerSize = activeBreakpoint === "xs" ? "small" : "large";
+    const glimmersFromHeader = Object.keys(headers).reduce((data, key) => (Object.assign(Object.assign({}, data), { [key]: (React__default["default"].createElement("div", { className: styles$d.glimmer },
+            React__default["default"].createElement(Glimmer.Glimmer, { size: glimmerSize }))) })), {});
+    const loadingData = new Array(LOADING_STATE_LIMIT_ITEMS).fill(glimmersFromHeader);
+    return (React__default["default"].createElement("div", { className: styles$d.wrapper }, loadingData.map((child, i) => (React__default["default"].createElement("div", { key: i, className: styles$d.loadingItem, "data-testid": DATALIST_LOADINGSTATE_ROW_TEST_ID }, layout(child))))));
+}
+
+const defaultValues = {
+    isInLayoutProvider: false,
+    hasInLayoutActions: false,
+    setHasInLayoutActions: noop__default["default"],
+};
+const DataListLayoutContext = React.createContext(defaultValues);
+function useDataListLayoutContext() {
+    return React.useContext(DataListLayoutContext);
+}
+
+var css_248z$c = ".jHcHGQ-HDbk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: calc((16px / 2) * -1);\n  top: calc(calc(16px / 2) * -1);\n  top: calc(var(--space-small) * -1);\n  right: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
+var styles$c = {"menu":"jHcHGQ-HDbk-"};
+styleInject_es.styleInject(css_248z$c);
+
+const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
+
+var css_248z$b = ".jbBRoxlZlNI- {\n  --overflow-fade--offset: var(--space-smaller);\n  --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n  -ms-flex-item-align: center;\n\n      align-self: center;\n  position: relative;\n  min-width: 0;\n}\n\n.MnN8qbS4hw4- {\n  display: grid;\n  margin: var(--overflow-fade--negative-offset);\n  padding: var(--overflow-fade--offset);\n  overflow-x: auto;\n  overflow-y: visible;\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.MnN8qbS4hw4- > :not(:nth-last-child(2)):not(.b-5P7Z8eGO8-) {\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.b-5P7Z8eGO8- {\n  visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::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-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.xzaCS4slLpI-::before {\n  left: var(--overflow-fade--negative-offset);\n}\n\n.Jf227kC8Nu0-::after {\n  --data-list-overflow-shadow-angle: to left;\n  right: var(--overflow-fade--negative-offset);\n}\n";
+var styles$b = {"fadeContainer":"jbBRoxlZlNI-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
+styleInject_es.styleInject(css_248z$b);
+
+function DataListOverflowFade({ children }) {
+    const [leftRef, isLeftVisible] = useInView.useInView();
+    const [rightRef, isRightVisible] = useInView.useInView();
+    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$b.fadeContainer, {
+            [styles$b.overflowLeft]: !isLeftVisible,
+            [styles$b.overflowRight]: !isRightVisible,
+        }) },
+        React__default["default"].createElement("div", { className: styles$b.overflowGrid },
+            React__default["default"].createElement("span", { ref: leftRef, className: styles$b.overflowTrigger }),
+            children,
+            React__default["default"].createElement("span", { ref: rightRef, className: styles$b.overflowTrigger }))));
+}
+
+var css_248z$a = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  white-space: nowrap;\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$a = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
 styleInject_es.styleInject(css_248z$a);
 
 function DataListTags({ items }) {
     const ref = React.useRef(null);
     const [visibleIndex, setVisibleIndex] = React.useState([]);
     const visibleItems = visibleIndex.filter(Boolean).length;
+    const shouldShowTagCount = Boolean(visibleItems);
     React.useEffect(() => {
         var _a;
         if (!window.IntersectionObserver)
@@ -123,10 +241,12 @@ 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$a.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$a.tagCount },
+    return (React__default["default"].createElement("div", { className: styles$a.tagWrapper, ref: ref },
+        React__default["default"].createElement("div", { className: classnames__default["default"](styles$a.tags, {
+                [styles$a.tagsMask]: shouldShowTagCount,
+            }) }, 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))))),
+        shouldShowTagCount && (React__default["default"].createElement("div", { className: styles$a.tagCount },
             React__default["default"].createElement(Text.Text, null,
                 "+",
                 visibleItems)))));
@@ -159,7 +279,7 @@ var css_248z$9 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n
 var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
 styleInject_es.styleInject(css_248z$9);
 
-var css_248z$8 = ".AN5egORYy-0- {\n  padding-right: calc(16px / 2);\n  padding-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-blue);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(193, 201, 206);\n  fill: var(--color-greyBlue--lighter);\n}\n";
+var css_248z$8 = ".AN5egORYy-0- {\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n  height: calc(16px * 1.5);\n  height: var(--space-large);\n  margin-right: calc(16px / 2);\n  margin-right: var(--space-small);\n}\n\n.AN5egORYy-0- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\n  transition: all 200ms ease;\n  transition: all var(--timing-base) ease;\n}\n\n.AN5egORYy-0- path.F1uTDCK0Sb0- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-blue);\n}\n\n.AN5egORYy-0- path._6KYeQXWXLQ8- {\n  fill: rgb(193, 201, 206);\n  fill: var(--color-greyBlue--lighter);\n}\n";
 var styles$8 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
 styleInject_es.styleInject(css_248z$8);
 
@@ -174,18 +294,6 @@ function DataListSortingArrows({ order }) {
     }
 }
 
-const defaultValues = {
-    title: "",
-    data: [],
-    headers: {},
-    children: [],
-    selected: [],
-};
-const DataListContext = React.createContext(defaultValues);
-function useDataListContext() {
-    return React.useContext(DataListContext);
-}
-
 function DataListHeaderTile({ headers, headerKey, }) {
     const { sorting } = useDataListContext();
     const isSortable = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.includes(headerKey);
@@ -197,12 +305,13 @@ function DataListHeaderTile({ headers, headerKey, }) {
         React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
         (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey && (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order }))));
     function toggleSorting(sortingKey) {
-        if ((sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc") {
+        const isSameKey = sortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
+        if (isSameKey && (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc") {
             sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
             return;
         }
         sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
-            order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "asc" ? "desc" : "asc",
+            order: isSameKey && (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "asc" ? "desc" : "asc",
             key: sortingKey,
         });
     }
@@ -231,10 +340,10 @@ function getCompoundComponents(children, type) {
     return elements;
 }
 /**
- * Generate the default elements the DataList would use on the data provided.
+ * Generate the default element the DataList would use on the data provided.
  */
-function generateListItemElements(data) {
-    return data.map(item => Object.keys(item).reduce((acc, key) => {
+function generateListItemElement(item) {
+    return Object.keys(item).reduce((acc, key) => {
         const currentItem = item[key];
         if (!currentItem) {
             return acc;
@@ -256,7 +365,7 @@ function generateListItemElements(data) {
             acc[key] = React__default["default"].createElement(Text.Text, { variation: "subdued" }, currentItem);
         }
         return acc;
-    }, {}));
+    }, {});
 }
 /**
  * Generate the header elements with the default styling
@@ -265,86 +374,32 @@ function generateHeaderElements(headers) {
     const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: React__default["default"].createElement(DataListHeaderTile, { headers: headers, headerKey: key }) })), {});
     return isEmpty__default["default"](headerElements) ? undefined : headerElements;
 }
-function sortSizeProp(sizeProp) {
+function sortBreakpoints(sizeProp) {
     return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - BREAKPOINTS.indexOf(b));
 }
-
-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 => {
-        const layoutSize = layout.props.size || "xs";
-        const isVisible = isLayoutVisible({
-            layoutSize,
-            mediaMatches,
-            sizePropsOfLayouts,
-        });
-        return isVisible;
-    });
-    return (layoutToRender && renderLayout(layoutToRender)) || React__default["default"].createElement(React__default["default"].Fragment, null);
-}
-/**
- * Determine is layout is visible by checking a media query matches for the
- * visible sizes of the layout and there isn't a larger layout that should be rendered
- */
-function isLayoutVisible({ layoutSize, mediaMatches, sizePropsOfLayouts, }) {
-    const largerBreakpointsToHide = sizePropsOfLayouts === null || sizePropsOfLayouts === void 0 ? void 0 : sizePropsOfLayouts.filter(size => BREAKPOINTS.indexOf(size) > BREAKPOINTS.indexOf(layoutSize));
-    const sortedLargerBreakpoints = sortSizeProp(largerBreakpointsToHide || []);
-    const visibleBreakpoints = BREAKPOINTS.slice(BREAKPOINTS.indexOf(layoutSize), sortedLargerBreakpoints[0]
-        ? BREAKPOINTS.indexOf(sortedLargerBreakpoints[0])
-        : undefined);
-    const isVisibleBreakpoint = visibleBreakpoints.some(breakpoint => {
-        return Boolean(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[breakpoint]);
-    });
-    const largerLayoutIsNotVisible = largerBreakpointsToHide === null || largerBreakpointsToHide === void 0 ? void 0 : largerBreakpointsToHide.reduce((acc, breakpoint) => {
-        return acc && !(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[breakpoint]);
-    }, true);
-    return isVisibleBreakpoint && largerLayoutIsNotVisible;
-}
-
-function DataListItemInternal({ children, item, }) {
-    const { selected, onSelect } = useDataListContext();
-    if (selected !== undefined && onSelect) {
-        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectable, {
-                [styles$d.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
-            }) },
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange }),
-            children));
-    }
-    return children;
-    function handleChange() {
-        if (selected === null || selected === void 0 ? void 0 : selected.includes(item.id)) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected === null || selected === void 0 ? void 0 : selected.filter(id => id !== item.id));
-        }
-        else if (selected) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selected, item.id]);
+function getExposedActions(childrenArray, childCount = 2) {
+    const firstNChildren = childrenArray.slice(0, childCount);
+    return firstNChildren.reduce((result, child, i) => {
+        const hasIcon = Boolean(child.props.icon);
+        if (!hasIcon)
+            return result; // If the child does not have an icon, continue.
+        const isLastChildAdded = result.length === i;
+        // If it's the first child or if the previous child was added, then add this child.
+        if (i === 0 || (i < childCount && isLastChildAdded)) {
+            return [...result, child];
         }
-    }
+        return result;
+    }, []);
 }
 
-var css_248z$7 = ".jHcHGQ-HDbk- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: calc((16px / 2) * -1);\n  top: calc(calc(16px / 2) * -1);\n  top: calc(var(--space-small) * -1);\n  right: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
-var styles$7 = {"menu":"jHcHGQ-HDbk-"};
-styleInject_es.styleInject(css_248z$7);
-
-var css_248z$6 = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 44px;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: 0;\n  text-align: left;\n  background: none;\n  cursor: pointer;\n  transition: background 200ms ease;\n  transition: background var(--timing-base) ease;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-surface--hover);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
-var styles$6 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
-styleInject_es.styleInject(css_248z$6);
-
-function DataListAction(
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_) {
-    return null;
-}
-function InternalDataListAction({ label, icon, destructive, onClick, item, }) {
-    const color = destructive ? "critical" : "blue";
-    return (React__default["default"].createElement("button", { className: styles$6.action, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(item) },
-        icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color }),
-        React__default["default"].createElement(Typography.Typography, { textColor: color },
-            React__default["default"].createElement("span", { className: styles$6.label }, label))));
+const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return React.useContext(DataListLayoutActionsContext);
 }
 
-var css_248z$5 = ".aokwZU8jbWU- {\n  position: fixed;\n  top: 0;\n  top: var(--actions-menu-y, 0);\n  left: 0;\n  left: var(--actions-menu-x, 0);\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  min-width: 150px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.XtVRP97TVSE- {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  height: 100%;\n}\n";
-var styles$5 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
-styleInject_es.styleInject(css_248z$5);
+var css_248z$7 = ".aokwZU8jbWU- {\n  position: fixed;\n  top: 0;\n  top: var(--actions-menu-y, 0);\n  left: 0;\n  left: var(--actions-menu-x, 0);\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  min-width: 150px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.XtVRP97TVSE- {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: calc(6 - 1);\n  z-index: calc(var(--elevation-menu) - 1);\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n";
+var styles$7 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
+styleInject_es.styleInject(css_248z$7);
 
 const variants$1 = {
     hidden: { opacity: 0, y: -10 },
@@ -355,10 +410,14 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     useRefocusOnActivator.useRefocusOnActivator(visible);
     const focusTrapRef = useFocusTrap.useFocusTrap(visible);
     useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
-    return (React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$5.overlay, onClick: onRequestClose }),
-        React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$5.menu, style: getPositionCssVars() },
-            React__default["default"].createElement("div", { tabIndex: 0, ref: focusTrapRef }, children))))));
+    return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef, onClick: handleClick },
+        React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$7.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
+        React__default["default"].createElement("button", { type: "button", className: styles$7.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
+    function handleClick(event) {
+        // Prevent menu from firing the parent's onClick event when it is nested
+        // within a clickable list item
+        event.stopPropagation();
+    }
     function getPositionCssVars() {
         const { posX, posY } = getPosition();
         return {
@@ -369,27 +428,33 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     function getPosition() {
         const rect = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
         const { width = 0, height = 0 } = rect || {};
-        const { x = 0, y = 0 } = position;
+        const { x, y } = position;
         const xIsOffScreen = x + width > window.innerWidth;
         const yIsOffScreen = y + height > window.innerHeight;
+        const xOffSet = x + width - window.innerWidth + design.tokens["space-base"];
         const yOffSet = y + height - window.innerHeight;
-        const newPosX = Math.floor(xIsOffScreen ? x - width : x);
+        const newPosX = Math.floor(xIsOffScreen ? x - xOffSet : x);
         const newPosY = Math.floor(yIsOffScreen ? y - yOffSet : y);
         return { posX: newPosX, posY: newPosY };
     }
 }
 
-function DataListItemActionsOverflow({ item, actions, }) {
+function DataListItemActionsOverflow({ actions, }) {
     const [menuPosition, setMenuPosition] = React.useState({ x: 0, y: 0 });
     const [showMenu, setShowMenu] = React.useState(false);
+    if (actions.length === 0)
+        return null;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Tooltip.Tooltip, { message: "More actions" },
             React__default["default"].createElement(Button.Button, { icon: "more", ariaLabel: "More actions", type: "secondary", variation: "subtle", onClick: handleMoreClick })),
-        React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, React.Children.map(actions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({}, action.props, { item: item })))))));
+        React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
     function handleMoreClick(event) {
+        // Prevent firing the parent's onClick event when it is nested
+        // within a clickable list item
+        event.stopPropagation();
         setShowMenu(true);
         const rect = event.currentTarget.getBoundingClientRect();
-        const posX = rect.x + rect.width;
+        const posX = rect.x;
         const posY = rect.y + rect.height;
         setMenuPosition({ x: posX, y: posY });
     }
@@ -398,6 +463,31 @@ function DataListItemActionsOverflow({ item, actions, }) {
     }
 }
 
+function DataListActions({ children, itemsToExpose = 2, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    const childrenArray = React.Children.toArray(children).filter(React.isValidElement);
+    const exposedActions = getExposedActions(childrenArray, itemsToExpose);
+    childrenArray.splice(0, exposedActions.length);
+    return (React__default["default"].createElement(DataListOverflowFade, null,
+        exposedActions.map(({ props }) => {
+            if (props.visible && !props.visible(activeItem))
+                return null;
+            if (!props.icon)
+                return null;
+            return (React__default["default"].createElement(Tooltip.Tooltip, { key: props.label, message: props.label },
+                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: props.label, onClick: () => {
+                        var _a, _b;
+                        if (activeItem) {
+                            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
+                        }
+                        else {
+                            (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
+                        }
+                    }, type: "secondary", variation: "subtle" })));
+        }),
+        React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray })));
+}
+
 // This component is meant to capture the props of the DataList.ItemActions
 function DataListItemActions(
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -408,74 +498,119 @@ const variants = {
     hidden: { opacity: 0, y: 10 },
     visible: { opacity: 1, y: 0 },
 };
-function InternalDataListItemActions({ item, }) {
-    const { itemActionComponent } = useDataListContext();
-    if (!itemActionComponent)
-        return null;
-    const { children } = itemActionComponent.props;
-    const childrenArray = React.Children.toArray(children).filter(React.isValidElement);
-    const exposedActions = getExposedActions(childrenArray);
-    childrenArray.splice(0, exposedActions.length);
+function InternalDataListItemActions({ actions, }) {
     return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
             duration: TRANSITION_DURATION_IN_SECONDS,
             delay: TRANSITION_DELAY_IN_SECONDS,
-        }, className: styles$7.menu, onContextMenu: handleContextMenu },
-        exposedActions.map(({ props }) => {
-            if (!props.icon)
-                return null;
-            return (React__default["default"].createElement(Tooltip.Tooltip, { key: props.label, message: props.label },
-                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: props.label, onClick: () => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, item); }, type: "secondary", variation: "subtle" })));
-        }),
-        React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray, item: item })));
+        }, className: styles$c.menu, onContextMenu: handleContextMenu },
+        React__default["default"].createElement(DataListActions, null, actions)));
 }
 function handleContextMenu(event) {
     event.stopPropagation();
 }
-function getExposedActions(childrenArray) {
-    const firstTwoChildren = childrenArray.slice(0, 2);
-    return firstTwoChildren.reduce((result, child, i) => {
-        const hasIcon = Boolean(child.props.icon);
-        const isFirstChild = i === 0;
-        if (isFirstChild && hasIcon) {
-            return [...result, child];
+
+function DataListItemInternal({ children, item, }) {
+    const { selected, onSelect } = useDataListContext();
+    if (selected !== undefined && onSelect) {
+        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable, {
+                [styles$f.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
+            }) },
+            children,
+            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
+    }
+    return children;
+    function handleChange() {
+        if (selected === null || selected === void 0 ? void 0 : selected.includes(item.id)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected === null || selected === void 0 ? void 0 : selected.filter(id => id !== item.id));
         }
-        const isSecondChild = i === 1;
-        const hasFirstChild = result.length === 1;
-        if (isSecondChild && hasIcon && hasFirstChild) {
-            return [...result, child];
+        else if (selected) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selected, item.id]);
         }
-        return result;
-    }, []);
+    }
+}
+
+function DataListItemClickableInternal({ onClick, url, to, children, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    if (!activeItem)
+        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    if (to) {
+        const computedTo = typeof to === "string" ? to : to(activeItem);
+        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles$f.listItemClickable, to: computedTo, onClick: handleClick }, children));
+    }
+    if (url) {
+        const href = typeof url === "string" ? url : url(activeItem);
+        return (React__default["default"].createElement("a", { className: styles$f.listItemClickable, href: href, onClick: handleClick }, children));
+    }
+    if (onClick) {
+        return (
+        // A button can be nested within the list item. To prevent a button inside
+        // button error, we need to manually declare a div to be a button
+        React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: styles$f.listItemClickable, onClick: handleClick, onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleClick();
+                }
+            } }, children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    function handleClick() {
+        activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
+    }
+}
+
+function DataListItemClickable({ children }) {
+    const { itemActionComponent } = useDataListContext();
+    if (itemActionComponent) {
+        const props = itemActionComponent.props;
+        return (React__default["default"].createElement(DataListItemClickableInternal, Object.assign({}, props), children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 }
 
-function DataListItems({ layouts, mediaMatches, data, }) {
+function useGetItemActions(item) {
     const { itemActionComponent } = useDataListContext();
-    const elementData = React.useMemo(() => generateListItemElements(data), [data]);
-    const [activeID, setActiveID] = React.useState();
+    const itemActions = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) || [];
+    const actionsArray = React.Children.toArray(itemActions);
+    const actions = React.useMemo(() => {
+        return actionsArray.filter(action => {
+            if (React.isValidElement(action) && action.props.visible) {
+                return action.props.visible(item);
+            }
+            return true;
+        });
+    }, [itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children, item]);
+    return {
+        actions: actions,
+        hasActions: Boolean(actions.length),
+    };
+}
+
+// eslint-disable-next-line max-statements
+function DataListItem({ item, layout, }) {
+    const { hasInLayoutActions } = useDataListLayoutContext();
+    const [showMenu, setShowMenu] = React.useState(false);
     const [contextPosition, setContextPosition] = React.useState();
-    const contextMenuActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
+    const generatedItem = React.useMemo(() => generateListItemElement(item), [item]);
+    const { actions, hasActions } = useGetItemActions(item);
     const isContextMenuVisible = Boolean(contextPosition);
-    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
-            const item = data[i];
-            const isActive = activeID === item.id;
-            const shouldShowContextMenu = isActive && isContextMenuVisible && Boolean(contextMenuActions);
-            return (React__default["default"].createElement("div", { onMouseEnter: handleMouseEnter(item), onMouseLeave: handleMouseLeave, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$d.listItem, {
-                    [styles$d.active]: isActive && isContextMenuVisible,
-                }), key: item.id },
-                React__default["default"].createElement(DataListItemInternal, { item: data[i] }, layout.props.children(child)),
-                React__default["default"].createElement(framerMotion.AnimatePresence, null,
-                    isActive && React__default["default"].createElement(InternalDataListItemActions, { item: item }),
-                    React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions &&
-                        React.Children.map(contextMenuActions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({ key: item.id }, action.props, { item: item }))))))));
-        }))) }));
-    function handleMouseEnter(item) {
-        return () => setActiveID(item.id);
-    }
-    function handleMouseLeave() {
-        !isContextMenuVisible && setActiveID(undefined);
+    const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
+    return (React__default["default"].createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
+        React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$f.listItem, {
+                [styles$f.active]: showMenu && isContextMenuVisible,
+            }), key: item.id },
+            React__default["default"].createElement(DataListItemInternal, { item: item },
+                React__default["default"].createElement(DataListItemClickable, null, layout(generatedItem))),
+            React__default["default"].createElement(framerMotion.AnimatePresence, null,
+                showMenu && hasActions && !hasInLayoutActions && (React__default["default"].createElement(InternalDataListItemActions, { actions: actions })),
+                React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, actions)))));
+    function handleShowMenu() {
+        setShowMenu(true);
+    }
+    function handleHideMenu() {
+        setShowMenu(false);
     }
     function handleContextMenu(event) {
-        if (!contextMenuActions || isContextMenuVisible)
+        if (!hasActions || isContextMenuVisible)
             return;
         event.preventDefault();
         setContextPosition({
@@ -485,21 +620,80 @@ function DataListItems({ layouts, mediaMatches, data, }) {
     }
 }
 
+function DataListItems({ size = "xs", }) {
+    const { data, layouts } = useDataListContext();
+    const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
+    const layout = layouts[size];
+    if (!layout)
+        return null;
+    return (React__default["default"].createElement(DataListLayoutContext.Provider, { value: {
+            isInLayoutProvider: true,
+            hasInLayoutActions,
+            setHasInLayoutActions,
+        } }, data.map((child, i) => (React__default["default"].createElement(DataListItem, { key: data[i].id, index: i, item: child, layout: layout })))));
+}
+
+function DataListLayout({ children, size = "xs", }) {
+    const { layoutBreakpoints, registerLayout, registerLayoutBreakpoints, loadingState, } = useDataListContext();
+    const breakpoints = useResponsiveSizing();
+    React.useEffect(() => {
+        registerLayoutBreakpoints(size);
+    }, [size]);
+    React.useEffect(() => {
+        registerLayout(size, children);
+    }, [size, children]);
+    const sizeIndex = layoutBreakpoints.indexOf(size);
+    const nextAvailableSize = layoutBreakpoints[sizeIndex + 1];
+    const shouldRenderList = breakpoints[size] && !breakpoints[nextAvailableSize];
+    if (loadingState !== "initial" && shouldRenderList) {
+        return React__default["default"].createElement(DataListItems, { size: size });
+    }
+    return null;
+}
+
+var css_248z$6 = ".v-GrdlFpBLk- {\n  /* Offset the button's padding so the height of the header bar doesn't change */\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n}\n";
+var styles$6 = {"bulkActions":"v-GrdlFpBLk-"};
+styleInject_es.styleInject(css_248z$6);
+
+// This component is meant to capture the props of the DataList.BulkActions
+function DataListBulkActions(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return null;
+}
+function InternalDataListBulkActions() {
+    const { bulkActionsComponent } = useDataListContext();
+    if (!bulkActionsComponent)
+        return null;
+    const { children } = bulkActionsComponent.props;
+    const { sm } = useResponsiveSizing();
+    // Collapse all actions under "More actions" when breakpoint is smaller than sm
+    const itemsToExpose = sm ? 3 : 0;
+    return (React__default["default"].createElement("div", { className: styles$6.bulkActions },
+        React__default["default"].createElement(DataListActions, { itemsToExpose: itemsToExpose }, children)));
+}
+
 function DataListHeaderCheckbox({ children }) {
     const { data, totalCount, selected = [], onSelectAll, onSelect, } = useDataListContext();
     if (!onSelectAll && !onSelect)
         return children;
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectable) },
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.selectAllCheckbox, {
-                [styles$d.visible]: Boolean(onSelectAll),
+    const { sm } = useResponsiveSizing();
+    // Show "Deselect All" if breakpoint is sm or higher
+    const deselectText = sm ? "Deselect All" : "Deselect";
+    const selectedLabel = selected.length ? `${selected.length} selected` : "";
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable) },
+        React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectAllCheckbox, {
+                [styles$f.visible]: Boolean(onSelectAll),
             }) },
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll })),
-        React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$d.headerBatchSelect },
-                React__default["default"].createElement(Text.Text, null,
-                    React__default["default"].createElement("b", null,
+            React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll },
+                React__default["default"].createElement("div", { className: styles$f.srOnly }, selectedLabel))),
+        React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$f.batchSelectContainer },
+                React__default["default"].createElement("div", { className: styles$f.headerBatchSelect },
+                    React__default["default"].createElement(Text.Text, null,
                         selected.length,
-                        " selected")),
-                React__default["default"].createElement(Button.Button, { label: "Deselect All", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })) })));
+                        " selected"),
+                    React__default["default"].createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                React__default["default"].createElement(InternalDataListBulkActions, null)) })));
     function isAllSelected() {
         // If there's a totalCount, we can use that to accurately determine if the
         // user have "selected all".
@@ -514,112 +708,62 @@ function DataListHeaderCheckbox({ children }) {
     }
 }
 
-function useMediaQuery(CSSMediaQuery) {
-    const [matches, setMatches] = React.useState(window.matchMedia(CSSMediaQuery).matches);
-    React.useEffect(() => {
-        const media = window.matchMedia(CSSMediaQuery);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-        const listener = () => setMatches(media.matches);
-        media.addEventListener("change", listener);
-        return () => media.removeEventListener("change", listener);
-    }, [CSSMediaQuery]);
-    return matches;
-}
-
-function useResponsiveSizing() {
-    const xs = useMediaQuery(`(width > ${BREAKPOINT_SIZES.xs}px)`);
-    const sm = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.sm}px)`);
-    const md = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.md}px)`);
-    const lg = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.lg}px)`);
-    const xl = useMediaQuery(`(width >= ${BREAKPOINT_SIZES.xl}px)`);
-    return { xs, sm, md, lg, xl };
-}
-
-function useShowHeader() {
-    const { headerVisibility } = useDataListContext();
-    if (headerVisibility === undefined)
-        return true;
-    const sizes = useResponsiveSizing();
-    const sizeKeys = Object.keys(sizes);
-    const showHeader = sizeKeys.reduce((previous, breakpoint) => {
-        const isHeaderVisible = headerVisibility[breakpoint] || false;
-        const isBreakpointTriggered = sizes[breakpoint];
-        return previous || (isBreakpointTriggered && isHeaderVisible);
-    }, false);
-    return showHeader;
-}
-
-function DataListHeader({ layouts, mediaMatches, headerData, }) {
-    const showHeader = useShowHeader();
-    if (!showHeader || !headerData)
+function DataListHeader() {
+    const breakpoints = useResponsiveSizing();
+    const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, selected, layoutBreakpoints, } = useDataListContext();
+    const size = getVisibleSize();
+    const { layout } = useActiveLayout();
+    const visible = headerVisibility[size];
+    const noItemsSelected = (selected === null || selected === void 0 ? void 0 : selected.length) === 0;
+    if ((!visible && noItemsSelected) || !layout)
         return null;
-    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.headerTitles) },
-            React__default["default"].createElement(DataListHeaderCheckbox, null, layout.props.children(headerData)))) }));
-}
-
-const LOADING_STATE_LIMIT_ITEMS = 10;
-const DATALIST_LOADINGSTATE_ROW_TEST_ID = "ATL-DataList-LoadingState-Row";
-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);
-        return acc;
-    }, {}));
-    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
-            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$b.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$b.mobileLoadingState, key: i },
-            React__default["default"].createElement(Glimmer.Glimmer.Text, null)));
-    })));
-}
-
-function DataListLayout(
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_) {
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
+    const headerData = generateHeaderElements(headers);
+    if (!headerData)
+        return null;
+    return (React__default["default"].createElement("div", { className: styles$f.headerTitles },
+        React__default["default"].createElement(DataListHeaderCheckbox, null, layout(headerData))));
+    function getVisibleSize() {
+        const visibilityKeys = Object.keys(headerVisibility);
+        const headerBreakpoints = sortBreakpoints(visibilityKeys).reverse();
+        const visibleHeaderSize = headerBreakpoints.find(key => breakpoints[key]);
+        return visibleHeaderSize || layoutBreakpoints[0];
+    }
 }
 
-var css_248z$4 = ".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$4 = {"filters":"E-mG3prPSN8-","filterActions":"_0LGNoZxtqSE-","overflowTrigger":"LA3-gtgehrE-","overflowLeft":"fSPvawYWzZ8-","overflowRight":"ChfEJMPPVTk-"};
-styleInject_es.styleInject(css_248z$4);
-
-const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
-
 function DataListSort() {
     const { sorting, headers } = useDataListContext();
-    const divRef = React.useRef(null);
-    const [showPopover, setShowPopover] = React.useState(false);
     if (!sorting)
         return null;
     const { sortable, state, onSort } = sorting;
     const sortByOptions = getSortByOptions();
-    const canChangeOrder = !(state === null || state === void 0 ? void 0 : state.key);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("span", { ref: divRef },
-            React__default["default"].createElement(Button.Button, Object.assign({}, (!state && { icon: "add", iconOnRight: true }), { label: getButtonLabel(), variation: "subtle", onClick: () => setShowPopover(!showPopover) }))),
-        React__default["default"].createElement(Popover.Popover, { attachTo: divRef, open: showPopover, onRequestClose: () => setShowPopover(false) },
-            React__default["default"].createElement(Content.Content, null,
-                React__default["default"].createElement(Heading.Heading, { level: 5 }, "Sort by"),
-                React__default["default"].createElement(Chip.Chips, { selected: (state === null || state === void 0 ? void 0 : state.key) || "none", onChange: handleKeyChange }, sortByOptions.map(({ label, value }) => (React__default["default"].createElement(Chip.Chip, { key: label, label: label, value: value })))),
-                React__default["default"].createElement(Heading.Heading, { level: 5 }, "Ordered by"),
-                React__default["default"].createElement(Chip.Chips, { selected: state === null || state === void 0 ? void 0 : state.order, onChange: handleSortingChange },
-                    React__default["default"].createElement(Chip.Chip, { label: "Ascending", value: "asc", disabled: canChangeOrder }),
-                    React__default["default"].createElement(Chip.Chip, { label: "Descending", value: "desc", disabled: canChangeOrder }))))));
+    console.log({ state });
+    return (React__default["default"].createElement(Combobox.Combobox, { onSelect: selection => {
+            handleKeyChange(selection[0].id.toString());
+        }, selected: [
+            {
+                id: `${state === null || state === void 0 ? void 0 : state.key},${state === null || state === void 0 ? void 0 : state.order}`,
+                label: (state === null || state === void 0 ? void 0 : state.order) || "",
+            },
+        ] },
+        React__default["default"].createElement(Combobox.Combobox.Activator, null,
+            React__default["default"].createElement(Chip.Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React__default["default"].createElement(Chip.Chip.Suffix, null,
+                React__default["default"].createElement(Icon.Icon, { name: "arrowDown", size: "small" }))))),
+        sortByOptions.map(({ label, value }) => {
+            return React__default["default"].createElement(Combobox.Combobox.Option, { key: value, id: value, label: label });
+        })));
     function getSortByOptions() {
         const options = sortable.reduce((acc, sort) => {
             const label = headers[sort];
             if (!label)
                 return acc;
-            acc.push({ label, value: sort.toString() });
+            if (label === "Last activity") {
+                acc.push({ label: "Last Activity (Newest)", value: `${sort},desc` });
+                acc.push({ label: "Last Activity (Oldest)", value: `${sort},asc` });
+            }
+            else {
+                acc.push({ label: `${label} (A-Z)`, value: `${sort},asc` });
+                acc.push({ label: `${label} (Z-A)`, value: `${sort},desc` });
+            }
             return acc;
         }, []);
         // Inject a none option as the first option
@@ -627,24 +771,31 @@ function DataListSort() {
         return options;
     }
     function getButtonLabel() {
-        const label = state && headers[state.key];
-        if (!label)
-            return "Sort by";
-        return `Sort by: ${label}, ${state.order}`;
+        const selectedOption = sortByOptions.find(option => option.value === `${state === null || state === void 0 ? void 0 : state.key},${state === null || state === void 0 ? void 0 : state.order}`);
+        return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || "";
     }
     function handleKeyChange(value) {
         if (value && value !== "none") {
-            onSort({ key: value, order: (state === null || state === void 0 ? void 0 : state.order) || "asc" });
+            const [key, order] = value.split(",");
+            onSort({ key, order: order });
             return;
         }
         onSort(undefined);
     }
-    function handleSortingChange(value) {
-        if ((state === null || state === void 0 ? void 0 : state.key) && value) {
-            onSort({ key: state.key, order: value });
-            return;
-        }
-    }
+}
+
+function useShowHeader() {
+    const { headerVisibility } = useDataListContext();
+    if (headerVisibility === undefined)
+        return true;
+    const sizes = useResponsiveSizing();
+    const sizeKeys = Object.keys(sizes);
+    const showHeader = sizeKeys.reduce((previous, breakpoint) => {
+        const isHeaderVisible = headerVisibility[breakpoint] || false;
+        const isBreakpointTriggered = sizes[breakpoint];
+        return previous || (isBreakpointTriggered && isHeaderVisible);
+    }, false);
+    return showHeader;
 }
 
 // This component is meant to capture the props of the DataList.Filters
@@ -660,25 +811,17 @@ function InternalDataListFilters() {
     const showHeader = useShowHeader();
     const showSortButton = !showHeader;
     const component = getCompoundComponent(parentChildren, DataListFilters);
-    const [leftRef, isLeftVisible] = useInView.useInView();
-    const [rightRef, isRightVisible] = useInView.useInView();
     if (!showSortButton && !component)
         return null;
     const children = component === null || component === void 0 ? void 0 : component.props.children;
-    return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$4.filters, {
-            [styles$4.overflowLeft]: !isLeftVisible,
-            [styles$4.overflowRight]: !isRightVisible,
-        }) },
-        React__default["default"].createElement("div", { className: styles$4.filterActions },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$4.overflowTrigger }),
-            children && children,
-            showSortButton && React__default["default"].createElement(DataListSort, null),
-            React__default["default"].createElement("span", { ref: rightRef, className: styles$4.overflowTrigger }))));
+    return (React__default["default"].createElement(DataListOverflowFade, null,
+        children && children,
+        showSortButton && React__default["default"].createElement(DataListSort, null)));
 }
 
-var css_248z$3 = ".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$3 = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
-styleInject_es.styleInject(css_248z$3);
+var css_248z$5 = ".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(217, 223, 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$5 = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
+styleInject_es.styleInject(css_248z$5);
 
 function DataListStickyHeader({ children }) {
     const [isStuck, setIsStuck] = React.useState(false);
@@ -693,12 +836,12 @@ function DataListStickyHeader({ children }) {
             ref.current && observer.unobserve(ref.current);
         };
     }, [handleObserver, ref.current]);
-    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$3.header, { [styles$3.stuck]: isStuck }) }, children));
+    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
 }
 
-var css_248z$2 = ".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";
-var styles$2 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
-styleInject_es.styleInject(css_248z$2);
+var css_248z$4 = ".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";
+var styles$4 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
+styleInject_es.styleInject(css_248z$4);
 
 const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
 // This component is meant to capture the props of the DataList.Search
@@ -707,7 +850,7 @@ function DataListSearch(_) {
     return null;
 }
 /**
- * Renders the DataList.Search component
+ * Renders the DataList.Search component.
  */
 function InternalDataListSearch() {
     const inputRef = React.useRef(null);
@@ -716,15 +859,19 @@ function InternalDataListSearch() {
     const debouncedSearch = React.useCallback(debounce__default["default"]((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
     if (!searchComponent)
         return null;
-    const { placeholder } = searchComponent.props;
+    const { placeholder, initialValue } = searchComponent.props;
     return (React__default["default"].createElement("div", { className: classnames__default["default"]({
-            [styles$2.withNoFilters]: !filterComponent && !sorting,
+            [styles$4.withNoFilters]: !filterComponent && !sorting,
         }) },
-        React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$2.searchInput, {
-                [styles$2.searchInputVisible]: visible,
+        React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$4.searchInput, {
+                [styles$4.searchInputVisible]: visible,
             }) },
-            React__default["default"].createElement(InputText.InputText, { ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
-        React__default["default"].createElement("div", { className: styles$2.searchButton },
+            React__default["default"].createElement(InputText.InputText
+            // If the initial value changes, reset the input.
+            , { 
+                // If the initial value changes, reset the input.
+                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, size: "small" })),
+        React__default["default"].createElement("div", { className: styles$4.searchButton },
             React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default["default"].createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
         if (placeholder)
@@ -742,9 +889,9 @@ function InternalDataListSearch() {
     }
 }
 
-var css_248z$1 = ".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$1 = {"emptyStateWrapper":"zg3w9nQga-M-"};
-styleInject_es.styleInject(css_248z$1);
+var css_248z$3 = ".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$3 = {"emptyStateWrapper":"zg3w9nQga-M-"};
+styleInject_es.styleInject(css_248z$3);
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListEmptyState(_) {
@@ -753,7 +900,7 @@ function DataListEmptyState(_) {
 function InternalDataListEmptyState() {
     const { emptyStateComponents: components, filtered } = React.useContext(DataListContext);
     const { message, action } = getMessages();
-    return (React__default["default"].createElement("div", { className: styles$1.emptyStateWrapper },
+    return (React__default["default"].createElement("div", { className: styles$3.emptyStateWrapper },
         React__default["default"].createElement(Text.Text, { align: "center" }, message),
         renderButton(action)));
     function getMessages() {
@@ -787,9 +934,9 @@ function getEmptyStates(components) {
     return { defaultEmptyState, filteredEmptyState };
 }
 
-var css_248z = ".IC-Y9bTIVFo- {\n  position: relative;\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\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\n._6zA6B-jmz6o- {\n  opacity: 0;\n  -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n  -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n          animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n          animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
-var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
-styleInject_es.styleInject(css_248z);
+var css_248z$2 = ".IC-Y9bTIVFo- {\n  position: relative;\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\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\n._6zA6B-jmz6o- {\n  opacity: 0;\n  -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n  -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n          animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n          animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+var styles$2 = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
+styleInject_es.styleInject(css_248z$2);
 
 function DataListLoadMoreTrigger() {
     const { onLoadMore } = useDataListContext();
@@ -797,7 +944,7 @@ function DataListLoadMoreTrigger() {
     React.useEffect(() => {
         isInView && (onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore());
     }, [isInView]);
-    return (React__default["default"].createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
+    return (React__default["default"].createElement("div", { ref: inViewRef, className: styles$2.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
 }
 
 const MAX_DATA_COUNT = 50;
@@ -806,77 +953,137 @@ function DataListLoadMore({ onBackToTop }) {
     const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(DataListLoadMoreTrigger, { key: data.length }),
-        loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+        loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles$2.loadingMore },
             React__default["default"].createElement(Spinner.Spinner, { size: "small" }))),
-        showBackToTop && (React__default["default"].createElement("div", { className: styles.backToTop },
+        showBackToTop && (React__default["default"].createElement("div", { className: styles$2.backToTop },
             React__default["default"].createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
 }
 
-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
+var css_248z$1 = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 44px;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: 0;\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  text-align: left;\n  background: none;\n  cursor: pointer;\n  transition: background 200ms ease;\n  transition: background var(--timing-base) ease;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
+var styles$1 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
+styleInject_es.styleInject(css_248z$1);
+
+function DataListAction({ label, icon, destructive, visible = () => true, onClick, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    // Don't render if the item is not visible
+    if (activeItem && !visible(activeItem)) {
+        return null;
+    }
+    const color = destructive ? "critical" : "blue";
+    return (React__default["default"].createElement("button", { type: "button", className: styles$1.action, onClick: handleClick },
+        icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color }),
+        React__default["default"].createElement(Typography.Typography, { textColor: color },
+            React__default["default"].createElement("span", { className: styles$1.label }, label))));
+    function handleClick() {
+        if (activeItem) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(activeItem);
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    }
+}
+
+var css_248z = "._0m75bgCVBhk- {\n  visibility: hidden;\n}\n";
+var styles = {"hidden":"_0m75bgCVBhk-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListLayoutActions() {
+    const { itemActionComponent, loadingState } = useDataListContext();
+    const { setHasInLayoutActions } = useDataListLayoutContext();
+    const { children: actionsChildren } = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props) || {};
+    const actions = React.Children.toArray(actionsChildren);
+    const hasActions = actions.length > 0;
     React.useEffect(() => {
-        BREAKPOINTS.forEach(breakpoint => {
-            mediaQueries[breakpoint].addEventListener("change", handlers[breakpoint]);
-        });
+        setHasInLayoutActions(hasActions);
         return () => {
-            BREAKPOINTS.forEach(breakpoint => {
-                mediaQueries[breakpoint].removeEventListener("change", handlers[breakpoint]);
-            });
+            setHasInLayoutActions(false);
         };
-    }, [mediaQueries]);
-    return matches;
+    }, []);
+    if (loadingState === "initial") {
+        return React__default["default"].createElement(Glimmer.Glimmer, { shape: "square", size: "large" });
+    }
+    if (!hasActions)
+        return null;
+    return (React__default["default"].createElement(DataListLayoutActionsWrapper, null,
+        React__default["default"].createElement(DataListItemActionsOverflow, { actions: actions })));
 }
-function breakpointToMediaQuery(breakpoint) {
-    return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
+function DataListLayoutActionsWrapper({ children }) {
+    const { isInLayoutProvider } = useDataListLayoutContext();
+    if (isInLayoutProvider)
+        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    return React__default["default"].createElement("div", { className: styles.hidden }, children);
+}
+
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListStatusBar(_) {
+    return null;
+}
+/**
+ * Renders the DataList.StatusBar component
+ */
+function InternalDataListStatusBar() {
+    const { children: parentChildren } = useDataListContext();
+    const component = getCompoundComponent(parentChildren, DataListStatusBar);
+    if (!component)
+        return null;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 }
 
 function DataList(_a) {
-    var _b;
-    var { sorting } = _a, props = tslib_es6.__rest(_a, ["sorting"]);
+    var { selected = [], sorting } = _a, props = tslib_es6.__rest(_a, ["selected", "sorting"]);
+    const [layoutBreakpoints, setLayoutBreakpoints] = React.useState([]);
+    const [layouts, setLayouts] = React.useState({});
     const searchComponent = getCompoundComponent(props.children, DataListSearch);
     const filterComponent = getCompoundComponent(props.children, DataListFilters);
     const layoutComponents = getCompoundComponents(props.children, DataListLayout);
     const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
     const itemActionComponent = getCompoundComponent(props.children, DataListItemActions);
+    const bulkActionsComponent = getCompoundComponent(props.children, DataListBulkActions);
     return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
             filterComponent,
             layoutComponents,
             emptyStateComponents,
-            itemActionComponent }, props), { selected: (_b = props.selected) !== null && _b !== void 0 ? _b : [], 
+            itemActionComponent,
+            bulkActionsComponent,
+            layoutBreakpoints,
+            registerLayoutBreakpoints,
+            layouts,
+            registerLayout }, props), { selected, 
             // T !== DataListObject
             sorting: sorting }) },
         React__default["default"].createElement(InternalDataList, null)));
+    function registerLayoutBreakpoints(size) {
+        setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
+    }
+    function registerLayout(size, children) {
+        setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
+    }
 }
 function InternalDataList() {
-    const { data, headers, title, totalCount, headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, loadingState = "none", layoutComponents, } = useDataListContext();
+    const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
     const backToTopRef = React.useRef(null);
-    const headerData = generateHeaderElements(headers);
-    const mediaMatches = useLayoutMediaQueries();
     const initialLoading = loadingState === "initial";
     const showEmptyState = !initialLoading && data.length === 0;
     const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
-    return (React__default["default"].createElement("div", { className: styles$d.wrapper },
-        React__default["default"].createElement("div", { className: styles$d.titleContainer },
+    return (React__default["default"].createElement("div", { className: styles$f.wrapper },
+        React__default["default"].createElement("div", { className: styles$f.titleContainer },
             title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
             React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
         React__default["default"].createElement("div", { ref: backToTopRef }),
         React__default["default"].createElement(DataListStickyHeader, null,
-            React__default["default"].createElement("div", { className: styles$d.headerFilters },
+            React__default["default"].createElement("div", { className: styles$f.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
-            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 })),
+            React__default["default"].createElement(InternalDataListStatusBar, null),
+            React__default["default"].createElement(DataListHeader, null)),
+        initialLoading && React__default["default"].createElement(DataListLoadingState, null),
         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$d.filtering },
-            React__default["default"].createElement("div", { className: styles$d.filteringSpinner },
+        layoutComponents,
+        loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$f.filtering },
+            React__default["default"].createElement("div", { className: styles$f.filteringSpinner },
                 React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
         shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
     function handleBackToTop() {
@@ -892,11 +1099,54 @@ function InternalDataList() {
         });
     }
 }
+/**
+ * Sets the layout that the DataList item and header will use.
+ */
 DataList.Layout = DataListLayout;
+/**
+ * By using this component, we can render the actions anywhere in the layout
+ * instead of being added automatically on hover.
+ */
+DataList.LayoutActions = DataListLayoutActions;
+/**
+ * When the DataList is either empty and/or filtered, this component will be
+ * rendered.
+ */
 DataList.EmptyState = DataListEmptyState;
+/**
+ * Adds the filter components of your choosing to the DataList.
+ */
 DataList.Filters = DataListFilters;
+/**
+ * Enables the search functionality of the DataList.
+ *
+ * Since the debounce is implemented within the component, it can only be an
+ * uncontrolled component. Thus the lack of a `value` prop.
+ */
 DataList.Search = DataListSearch;
+/**
+ * Defines the group actions you could do on a single DataList item.
+ */
 DataList.ItemActions = DataListItemActions;
-DataList.Action = DataListAction;
+/**
+ * Defines the group actions you could do on multiple DataList items.
+ */
+DataList.BulkActions = DataListBulkActions;
+/**
+ * Defines the action in a DataList. This should be used inside the
+ * DataListItemActions component.
+ */
+DataList.ItemAction = DataListAction;
+/**
+ * Defines the batch action in a DataList. This should be used inside the
+ * DataListBulkActions component.
+ */
+DataList.BatchAction = function DataListBatchAction(props) {
+    return React__default["default"].createElement(DataListAction, Object.assign({}, props));
+};
+/**
+ * Defines a status bar that is rendered between the filters and the header.
+ */
+DataList.StatusBar = DataListStatusBar;
 
 exports.DataList = DataList;