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

package/dist/DataList/index.js

@@ -5,62 +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');
-var ReactDOM = 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 foundation = require('@jobber/design/foundation');
-var noop = require('lodash/noop');
+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 noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$e = ".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$e = {"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$e);
+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$d = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
-var styles$d = {"results":"F56prQsXm3A-"};
-styleInject_es.styleInject(css_248z$d);
+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, }) {
@@ -76,12 +72,57 @@ function DataListTotalCount({ totalCount, loading, }) {
             totalCount.toLocaleString(),
             " results)"));
     }
-    return (React__default["default"].createElement("div", { className: styles$d.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$c = ".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$c = {"loadingItem":"Rh--6fVpkm4-","mobileLoadingState":"zbS7UvpVoWI-"};
-styleInject_es.styleInject(css_248z$c);
+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";
@@ -104,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$b = ".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$b = {"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)
@@ -126,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$b.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$b.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)))));
@@ -158,54 +275,43 @@ function buildIntersectionThreshold(items) {
     return thresholds;
 }
 
-var css_248z$a = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
-var styles$a = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
-styleInject_es.styleInject(css_248z$a);
-
-var css_248z$9 = ".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 styles$9 = {"sortIcon":"AN5egORYy-0-","active":"F1uTDCK0Sb0-","inactive":"_6KYeQXWXLQ8-"};
+var css_248z$9 = ".fLmJZJJqMcE- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n\n.UG8cHUT3Hds- {\n  cursor: pointer;\n}\n";
+var styles$9 = {"headerLabel":"fLmJZJJqMcE-","sortable":"UG8cHUT3Hds-"};
 styleInject_es.styleInject(css_248z$9);
 
+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);
+
 const SORTING_ICON_TEST_ID = "ATL-DataList-Sorting-Icon";
 function DataListSortingArrows({ order }) {
-    return (React__default["default"].createElement("div", { className: styles$9.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
+    return (React__default["default"].createElement("div", { className: styles$8.sortIcon, "data-testid": SORTING_ICON_TEST_ID },
         React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default["default"].createElement("path", { className: getActiveClassName("asc"), d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
             React__default["default"].createElement("path", { className: getActiveClassName("desc"), d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
     function getActiveClassName(targetOrder) {
-        return order === targetOrder ? styles$9.active : styles$9.inactive;
+        return order === targetOrder ? styles$8.active : styles$8.inactive;
     }
 }
 
-const defaultValues$1 = {
-    title: "",
-    data: [],
-    headers: {},
-    children: [],
-    selected: [],
-};
-const DataListContext = React.createContext(defaultValues$1);
-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);
     const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
     const Tag = isSortable ? "button" : "div";
-    return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$a.headerLabel, {
-            [styles$a.sortable]: isSortable,
+    return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$9.headerLabel, {
+            [styles$9.sortable]: isSortable,
         }), onClick: handleOnClick },
         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,
         });
     }
@@ -234,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;
@@ -259,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
@@ -268,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$e.selectable, {
-                [styles$e.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$8 = ".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$8 = {"menu":"jHcHGQ-HDbk-"};
-styleInject_es.styleInject(css_248z$8);
-
-var css_248z$7 = ".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(250, 246, 219);\n  background-color: var(--color-surface--hover);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
-var styles$7 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
-styleInject_es.styleInject(css_248z$7);
-
-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$7.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$7.label }, label))));
+const DataListLayoutActionsContext = React.createContext({ activeItem: undefined });
+function useDataListLayoutActionsContext() {
+    return React.useContext(DataListLayoutActionsContext);
 }
 
-var css_248z$6 = ".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$6 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
-styleInject_es.styleInject(css_248z$6);
+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 },
@@ -358,10 +410,14 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     useRefocusOnActivator.useRefocusOnActivator(visible);
     const focusTrapRef = useFocusTrap.useFocusTrap(visible);
     useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
-    return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$6.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$6.menu, style: getPositionCssVars(), onClick: onRequestClose },
-            React__default["default"].createElement("div", { tabIndex: 0, ref: focusTrapRef }, children))))), document.body);
+    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 {
@@ -372,10 +428,10 @@ 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 + foundation.tokens["space-base"];
+        const xOffSet = x + width - window.innerWidth + design.tokens["space-base"];
         const yOffSet = y + height - window.innerHeight;
         const newPosX = Math.floor(xIsOffScreen ? x - xOffSet : x);
         const newPosY = Math.floor(yIsOffScreen ? y - yOffSet : y);
@@ -383,14 +439,19 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     }
 }
 
-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 })),
-        item && (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;
@@ -402,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
@@ -412,101 +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$8.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;
-    }, []);
+    }
 }
 
-const defaultValues = {
-    isInLayoutProvider: false,
-    hasInLayoutActions: false,
-    setHasInLayoutActions: noop__default["default"],
-};
-const DataListLayoutContext = React.createContext(defaultValues);
-function useDataListLayoutContext() {
-    return React.useContext(DataListLayoutContext);
+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 DataListItems({ layouts, mediaMatches, data, }) {
+function DataListItemClickable({ children }) {
     const { itemActionComponent } = useDataListContext();
-    const elementData = React.useMemo(() => generateListItemElements(data), [data]);
-    const [hasInLayoutActions, setHasInLayoutActions] = React.useState(false);
-    const [activeID, setActiveID] = React.useState();
-    const [activeItem, setActiveItem] = React.useState();
+    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 useGetItemActions(item) {
+    const { itemActionComponent } = useDataListContext();
+    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(DataListLayoutContext.Provider, { value: {
-            isInLayoutProvider: true,
-            hasInLayoutActions,
-            setHasInLayoutActions,
-            activeItem,
-        } },
-        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", { 
-                    // Set the active item whenever the element or any of its
-                    // children are clicked
-                    onClick: handleSetActiveItem(item), onMouseEnter: handleSetActiveItem(item), onMouseLeave: handleUnsetActiveItem, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$e.listItem, {
-                        [styles$e.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,
-                        activeID === item.id && !hasInLayoutActions && (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 handleSetActiveItem(item) {
-        return () => {
-            setActiveID(item.id);
-            setActiveItem(item);
-        };
+    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 handleUnsetActiveItem() {
-        if (isContextMenuVisible)
-            return;
-        setActiveID(undefined);
-        setActiveItem(undefined);
+    function handleHideMenu() {
+        setShowMenu(false);
     }
     function handleContextMenu(event) {
-        if (!contextMenuActions || isContextMenuVisible)
+        if (!hasActions || isContextMenuVisible)
             return;
         event.preventDefault();
         setContextPosition({
@@ -516,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$e.selectable) },
-        React__default["default"].createElement("div", { className: classnames__default["default"](styles$e.selectAllCheckbox, {
-                [styles$e.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$e.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".
@@ -545,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$e.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$c.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$c.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$5 = ".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$5 = {"filters":"E-mG3prPSN8-","filterActions":"_0LGNoZxtqSE-","overflowTrigger":"LA3-gtgehrE-","overflowLeft":"fSPvawYWzZ8-","overflowRight":"ChfEJMPPVTk-"};
-styleInject_es.styleInject(css_248z$5);
-
-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
@@ -658,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
@@ -691,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$5.filters, {
-            [styles$5.overflowLeft]: !isLeftVisible,
-            [styles$5.overflowRight]: !isRightVisible,
-        }) },
-        React__default["default"].createElement("div", { className: styles$5.filterActions },
-            React__default["default"].createElement("span", { ref: leftRef, className: styles$5.overflowTrigger }),
-            children && children,
-            showSortButton && React__default["default"].createElement(DataListSort, null),
-            React__default["default"].createElement("span", { ref: rightRef, className: styles$5.overflowTrigger }))));
+    return (React__default["default"].createElement(DataListOverflowFade, null,
+        children && children,
+        showSortButton && React__default["default"].createElement(DataListSort, null)));
 }
 
-var css_248z$4 = ".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$4 = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
-styleInject_es.styleInject(css_248z$4);
+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);
@@ -724,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$4.header, { [styles$4.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$3 = ".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$3 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
-styleInject_es.styleInject(css_248z$3);
+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
@@ -738,7 +850,7 @@ function DataListSearch(_) {
     return null;
 }
 /**
- * Renders the DataList.Search component
+ * Renders the DataList.Search component.
  */
 function InternalDataListSearch() {
     const inputRef = React.useRef(null);
@@ -747,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$3.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$3.searchInput, {
-                [styles$3.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$3.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)
@@ -773,9 +889,9 @@ function InternalDataListSearch() {
     }
 }
 
-var css_248z$2 = ".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$2 = {"emptyStateWrapper":"zg3w9nQga-M-"};
-styleInject_es.styleInject(css_248z$2);
+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(_) {
@@ -784,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$2.emptyStateWrapper },
+    return (React__default["default"].createElement("div", { className: styles$3.emptyStateWrapper },
         React__default["default"].createElement(Text.Text, { align: "center" }, message),
         renderButton(action)));
     function getMessages() {
@@ -818,9 +934,9 @@ function getEmptyStates(components) {
     return { defaultEmptyState, filteredEmptyState };
 }
 
-var css_248z$1 = ".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$1 = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
-styleInject_es.styleInject(css_248z$1);
+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();
@@ -828,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$1.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;
@@ -837,19 +953,44 @@ 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$1.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$1.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" })))));
 }
 
+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 } = useDataListContext();
-    const { setHasInLayoutActions, activeItem } = useDataListLayoutContext();
+    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;
@@ -859,10 +1000,13 @@ function DataListLayoutActions() {
             setHasInLayoutActions(false);
         };
     }, []);
+    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, item: activeItem })));
+        React__default["default"].createElement(DataListItemActionsOverflow, { actions: actions })));
 }
 function DataListLayoutActionsWrapper({ children }) {
     const { isInLayoutProvider } = useDataListLayoutContext();
@@ -871,71 +1015,75 @@ function DataListLayoutActionsWrapper({ children }) {
     return React__default["default"].createElement("div", { className: styles.hidden }, children);
 }
 
-function useLayoutMediaQueries() {
-    const mediaQueries = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: window.matchMedia(breakpointToMediaQuery(breakpoint)) })), {});
-    const initialMatches = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: mediaQueries[breakpoint].matches })), {});
-    const [matches, setMatches] = React.useState(initialMatches);
-    const handlers = BREAKPOINTS.reduce((previous, breakpoint) => {
-        const handler = (e) => setMatches(previousMatches => (Object.assign(Object.assign({}, previousMatches), { [breakpoint]: e.matches })));
-        return Object.assign(Object.assign({}, previous), { [breakpoint]: handler });
-    }, {});
-    // Set up mediaQuery event handlers
-    React.useEffect(() => {
-        BREAKPOINTS.forEach(breakpoint => {
-            mediaQueries[breakpoint].addEventListener("change", handlers[breakpoint]);
-        });
-        return () => {
-            BREAKPOINTS.forEach(breakpoint => {
-                mediaQueries[breakpoint].removeEventListener("change", handlers[breakpoint]);
-            });
-        };
-    }, [mediaQueries]);
-    return matches;
+// 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;
 }
-function breakpointToMediaQuery(breakpoint) {
-    return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
+/**
+ * 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$e.wrapper },
-        React__default["default"].createElement("div", { className: styles$e.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$e.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$e.filtering },
-            React__default["default"].createElement("div", { className: styles$e.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() {
@@ -971,16 +1119,34 @@ DataList.EmptyState = DataListEmptyState;
 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;
+/**
+ * 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.Action = DataListAction;
+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;