@jobber/components 4.85.5 → 4.85.6-CJS-to-ESM.1

package/dist/DataList/index.cjs

@@ -0,0 +1,98 @@
+'use strict';
+
+var DataList = require('../DataList-DcPfsE4o.js');
+require('../tslib.es6-ld72nsZq.js');
+require('react');
+require('../DataList-BL3zeA83.js');
+require('../style-inject.es-XZHJH68X.js');
+require('../DataListTotalCount-B9K3hGqp.js');
+require('../Text-D9gsHxbp.js');
+require('../Typography-Dx8KtnBw.js');
+require('classnames');
+require('../Glimmer-Cgcy2Ruw.js');
+require('../Content-B8Od1cqS.js');
+require('../DataListLoadingState-BovqtnV7.js');
+require('../DataListContext-CWEeA357.js');
+require('../noop-DXH2P2oE.js');
+require('../_commonjsHelpers-BJu3ubxk.js');
+require('../useActiveLayout-BzQghohH.js');
+require('../useResponsiveSizing-CMuS7Or1.js');
+require('../DataList.const-YbvF2-QB.js');
+require('@jobber/design');
+require('../DataListLayout-fuctDjAR.js');
+require('../DataListItems-C37QwFLL.js');
+require('../DataListLayoutContext-BiMbo7LQ.js');
+require('../DataListItem-27SGm5NU.js');
+require('framer-motion');
+require('../DataListItemActions-B0IR13cA.js');
+require('../DataListActions-D2xI1Gnz.js');
+require('../Tooltip-DWAVu0yQ.js');
+require('react-dom');
+require('@jobber/hooks/useSafeLayoutEffect');
+require('react-popper');
+require('../Button-D3mW3Hcg.js');
+require('react-router-dom');
+require('../Icon-B9XNdA1T.js');
+require('../DataListOverflowFade-DxUdWrD0.js');
+require('@jobber/hooks/useInView');
+require('../DataList.utils-B0hOFZaX.js');
+require('../_getTag-CHBhnZgu.js');
+require('../isObjectLike-CsWGWxp9.js');
+require('../DataListTags-C5inHFOR.js');
+require('../InlineLabel-BPjH1ASc.js');
+require('../DataListHeaderTile-BcvpRQqc.js');
+require('@jobber/hooks/useFocusTrap');
+require('@jobber/hooks/useRefocusOnActivator');
+require('../DataListSortingOptions-ZiARzP5b.js');
+require('@jobber/hooks/useOnKeyDown');
+require('../FormatDate-BzJETLja.js');
+require('../Heading-suKDLmO4.js');
+require('../getAtlantisConfig-mcMVqf6m.js');
+require('../DataListLayoutContext-DT0mtKzt.js');
+require('../DataListItemActionsOverflow-Dt1rZ_ch.js');
+require('../DataListActionsMenu-CjBKmZT6.js');
+require('../Checkbox-C78HDAVJ.js');
+require('react-hook-form');
+require('../useBatchSelect-B7U15920.js');
+require('../DataListItemClickable-CPGV8QJU.js');
+require('../DataListHeader-BFg0X9Jz.js');
+require('../AnimatedSwitcher-UmlTf067.js');
+require('../DataListBulkActions-BSjCVCSw.js');
+require('../DataListFilters-Dfw7ptNa.js');
+require('../DataListSort-CQ62ewRY.js');
+require('../Combobox-Dr5ftH9X.js');
+require('../ComboboxContent-D44NnZaD.js');
+require('../ComboboxContentSearch-UAyHetvM.js');
+require('../ComboboxContentList-DHQ0x2ml.js');
+require('../Spinner-DT15aa_r.js');
+require('../AnimatedPresence-DFaAEYUa.js');
+require('../ComboboxOption-CWkyTkzU.js');
+require('../Flex-CBKf3epb.js');
+require('../ComboboxProvider-BwxfVgmL.js');
+require('../ComboboxLoadMore-Dk2tUBxS.js');
+require('../ComboboxContentHeader-CJ0if4JI.js');
+require('../ComboboxAction-B3RwsCtx.js');
+require('../ComboboxTrigger-ZqNl11Qy.js');
+require('../Chip-Div4v8At.js');
+require('../Avatar-Q2BQymsE.js');
+require('color');
+require('../useChildComponent-BUH0ttPi.js');
+require('../debounce-B-pQrPa0.js');
+require('../isSymbol-CqL-NQwG.js');
+require('../ComboboxActivator-B-2nmWQ-.js');
+require('@jobber/hooks/useAssert');
+require('../DataListStickyHeader-BKN9V51R.js');
+require('../DataListSearch-D0pqhE8d.js');
+require('../InputText-D1KkzO4T.js');
+require('../FormField-BBg_JAlJ.js');
+require('@jobber/hooks/useShowClear');
+require('../InputValidation-DIwnbDDv.js');
+require('../DataListEmptyState-CvRFHlYt.js');
+require('../DataListLoadMore-BThmoeQ0.js');
+require('../DataListAction-CzSLV230.js');
+require('../DataListLayoutActions-BrXEXuWB.js');
+require('../DataListStatusBar-Va-ssWph.js');
+
+
+
+exports.DataList = DataList.DataList;

package/dist/DataList/index.mjs

@@ -0,0 +1,92 @@
+export { D as DataList } from '../DataList-UzxXqfXV.js';
+import '../tslib.es6-Df1SgIEn.js';
+import 'react';
+import '../DataList-D8rsiB6p.js';
+import '../style-inject.es-tgCJW-Cu.js';
+import '../DataListTotalCount-Dzzm_buN.js';
+import '../Text-DEviM1Tv.js';
+import '../Typography-G8pA_xwj.js';
+import 'classnames';
+import '../Glimmer-Dz1E9Bo5.js';
+import '../Content-BknIp35w.js';
+import '../DataListLoadingState-DKSypijq.js';
+import '../DataListContext-DHdRjGCC.js';
+import '../noop-D_wzwwIq.js';
+import '../_commonjsHelpers-BFTU3MAI.js';
+import '../useActiveLayout-DazMYwxf.js';
+import '../useResponsiveSizing-DRjeJos_.js';
+import '../DataList.const-Wz370ukq.js';
+import '@jobber/design';
+import '../DataListLayout-BkqOAi5X.js';
+import '../DataListItems-CmmwaaoF.js';
+import '../DataListLayoutContext-D5Jhd_ZG.js';
+import '../DataListItem-CEcG1clf.js';
+import 'framer-motion';
+import '../DataListItemActions-DbMxVTo5.js';
+import '../DataListActions-DYrocbl7.js';
+import '../Tooltip-DG1mcZlX.js';
+import 'react-dom';
+import '@jobber/hooks/useSafeLayoutEffect';
+import 'react-popper';
+import '../Button-CWVwgwhn.js';
+import 'react-router-dom';
+import '../Icon-CoHJokXb.js';
+import '../DataListOverflowFade-DUocP0Jz.js';
+import '@jobber/hooks/useInView';
+import '../DataList.utils-C931OWj0.js';
+import '../_getTag-DYzEQmpZ.js';
+import '../isObjectLike-91E0YOes.js';
+import '../DataListTags-CHZr9DW3.js';
+import '../InlineLabel-x3msDD5R.js';
+import '../DataListHeaderTile-CUaHgFkG.js';
+import '@jobber/hooks/useFocusTrap';
+import '@jobber/hooks/useRefocusOnActivator';
+import '../DataListSortingOptions-BGNu0KOG.js';
+import '@jobber/hooks/useOnKeyDown';
+import '../FormatDate-Dxs33-Xj.js';
+import '../Heading-CL3UujY7.js';
+import '../getAtlantisConfig-6FPWID0P.js';
+import '../DataListLayoutContext-D3REliDa.js';
+import '../DataListItemActionsOverflow-B1XTLLAZ.js';
+import '../DataListActionsMenu-3JxvPbGZ.js';
+import '../Checkbox-qsepteuE.js';
+import 'react-hook-form';
+import '../useBatchSelect-DMD3JH4P.js';
+import '../DataListItemClickable-a9vfumwQ.js';
+import '../DataListHeader-DB1ikJ1G.js';
+import '../AnimatedSwitcher-B4fUExeN.js';
+import '../DataListBulkActions-OLJ1EzI6.js';
+import '../DataListFilters-y0CrJgWe.js';
+import '../DataListSort-CW4v1psG.js';
+import '../Combobox-BwSFlPWt.js';
+import '../ComboboxContent-B108quRR.js';
+import '../ComboboxContentSearch-B8hsfo_D.js';
+import '../ComboboxContentList-DmdT_cqp.js';
+import '../Spinner-BOhyUAA_.js';
+import '../AnimatedPresence-D73apgLB.js';
+import '../ComboboxOption-D_f4NcBM.js';
+import '../Flex-DXDpEzMI.js';
+import '../ComboboxProvider-Dm_tfmkr.js';
+import '../ComboboxLoadMore-C3JuiaZf.js';
+import '../ComboboxContentHeader-DFLlxg-X.js';
+import '../ComboboxAction-BzEwYtPm.js';
+import '../ComboboxTrigger-BAOfY8Og.js';
+import '../Chip-tWHAQezL.js';
+import '../Avatar-DZCQBKMr.js';
+import 'color';
+import '../useChildComponent-D95jU7NM.js';
+import '../debounce-asENWBkf.js';
+import '../isSymbol-BEvcpX3s.js';
+import '../ComboboxActivator-DkcbNfv5.js';
+import '@jobber/hooks/useAssert';
+import '../DataListStickyHeader-CCG09E7V.js';
+import '../DataListSearch-DiHOG8VU.js';
+import '../InputText-CgykvJl2.js';
+import '../FormField-C-d0U7Ww.js';
+import '@jobber/hooks/useShowClear';
+import '../InputValidation-BmgvSw0e.js';
+import '../DataListEmptyState-Rk1OowmR.js';
+import '../DataListLoadMore-eMdC9JGb.js';
+import '../DataListAction-CMZbwbN5.js';
+import '../DataListLayoutActions-C1xVkV8F.js';
+import '../DataListStatusBar-EQKC5MHS.js';

package/dist/DataList-BL3zeA83.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+var css_248z = ".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: 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: var(--elevation-base);\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(var(--space-small) + var(--space-smaller)) 0;\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.TFO76ysivmg-:empty {\n  display: none;\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: var(--space-largest);\n  padding: var(--space-small);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: var(--space-small);\n  gap: var(--data-list--header-actions-gap);\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(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: var(--space-small);\n  border-bottom: var(--border-base) solid var(--color-border);\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: var(--color-surface--hover);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc(var(--space-small) * -1) 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 (--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: var(--space-small);\n     -moz-column-gap: var(--space-small);\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(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: var(--space-smaller);\n  opacity: 1;\n  transition: opacity var(--timing-quick) ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\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: 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 = {"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);
+
+exports.styles = styles;

package/dist/DataList-D8rsiB6p.js

@@ -0,0 +1,7 @@
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+
+var css_248z = ".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: 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: var(--elevation-base);\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(var(--space-small) + var(--space-smaller)) 0;\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.TFO76ysivmg-:empty {\n  display: none;\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: var(--space-largest);\n  padding: var(--space-small);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n  --data-list--header-actions-gap: var(--space-small);\n  display: -ms-flexbox;\n  display: flex;\n  gap: var(--space-small);\n  gap: var(--data-list--header-actions-gap);\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(var(--space-small) * -1) 0;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\n  padding: var(--space-small);\n  border-bottom: var(--border-base) solid var(--color-border);\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: var(--color-surface--hover);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  margin: calc(var(--space-small) * -1) 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 (--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: var(--space-small);\n     -moz-column-gap: var(--space-small);\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(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: var(--space-smaller);\n  opacity: 1;\n  transition: opacity var(--timing-quick) ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\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: 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 = {"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(css_248z);
+
+export { styles as s };

package/dist/DataList-DcPfsE4o.js

@@ -0,0 +1,141 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-ld72nsZq.js');
+var React = require('react');
+var DataList$1 = require('./DataList-BL3zeA83.js');
+var DataListTotalCount = require('./DataListTotalCount-B9K3hGqp.js');
+var DataListLoadingState = require('./DataListLoadingState-BovqtnV7.js');
+var DataListLayout = require('./DataListLayout-fuctDjAR.js');
+var DataListHeader = require('./DataListHeader-BFg0X9Jz.js');
+var DataListFilters = require('./DataListFilters-Dfw7ptNa.js');
+var DataListStickyHeader = require('./DataListStickyHeader-BKN9V51R.js');
+var DataListSearch = require('./DataListSearch-D0pqhE8d.js');
+var DataListEmptyState = require('./DataListEmptyState-CvRFHlYt.js');
+var DataListLoadMore = require('./DataListLoadMore-BThmoeQ0.js');
+var DataListItemActions = require('./DataListItemActions-B0IR13cA.js');
+var DataListAction = require('./DataListAction-CzSLV230.js');
+var DataListLayoutActions = require('./DataListLayoutActions-BrXEXuWB.js');
+var DataListContext = require('./DataListContext-CWEeA357.js');
+var DataList_utils = require('./DataList.utils-B0hOFZaX.js');
+var DataList_const = require('./DataList.const-YbvF2-QB.js');
+var DataListBulkActions = require('./DataListBulkActions-BSjCVCSw.js');
+var DataListStatusBar = require('./DataListStatusBar-Va-ssWph.js');
+var Heading = require('./Heading-suKDLmO4.js');
+var Spinner = require('./Spinner-DT15aa_r.js');
+
+function DataList(_a) {
+    var { selected = [], sorting } = _a, props = tslib_es6.__rest(_a, ["selected", "sorting"]);
+    const [layouts, setLayouts] = React.useState({});
+    const layoutBreakpoints = React.useMemo(() => DataList_utils.sortBreakpoints(Object.keys(layouts)), [layouts]);
+    const searchComponent = DataList_utils.getCompoundComponent(props.children, DataListSearch.DataListSearch);
+    const filterComponent = DataList_utils.getCompoundComponent(props.children, DataListFilters.DataListFilters);
+    const layoutComponents = DataList_utils.getCompoundComponents(props.children, DataListLayout.DataListLayout);
+    const emptyStateComponents = DataList_utils.getCompoundComponents(props.children, DataListEmptyState.DataListEmptyState);
+    const itemActionComponent = DataList_utils.getCompoundComponent(props.children, DataListItemActions.DataListItemActions);
+    const bulkActionsComponent = DataList_utils.getCompoundComponent(props.children, DataListBulkActions.DataListBulkActions);
+    const headerCount = Object.keys(props.headers).length;
+    const shouldRenderStickyHeader = !!filterComponent || !!searchComponent || headerCount > 0;
+    return (React.createElement(DataListContext.DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
+            filterComponent,
+            layoutComponents,
+            emptyStateComponents,
+            itemActionComponent,
+            bulkActionsComponent,
+            layoutBreakpoints,
+            layouts,
+            registerLayout }, props), { selected, 
+            // T !== DataListObject
+            sorting: sorting }) },
+        React.createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
+    function registerLayout(size, children) {
+        setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
+    }
+}
+function InternalDataList({ shouldRenderStickyHeader, }) {
+    const { data, title, totalCount, loadingState = "none", layoutComponents, } = DataListContext.useDataListContext();
+    const backToTopRef = React.useRef(null);
+    const initialLoading = loadingState === "initial";
+    const showEmptyState = !initialLoading && data.length === 0;
+    const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
+    return (React.createElement("div", { className: DataList$1.styles.wrapper },
+        React.createElement("div", { className: DataList$1.styles.titleContainer },
+            title && React.createElement(Heading.Heading, { level: 3 }, title),
+            React.createElement(DataListTotalCount.DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
+        React.createElement("div", { ref: backToTopRef }),
+        shouldRenderStickyHeader && (React.createElement(DataListStickyHeader.DataListStickyHeader, null,
+            React.createElement("div", { className: DataList$1.styles.headerFilters },
+                React.createElement(DataListFilters.InternalDataListFilters, null),
+                React.createElement(DataListSearch.InternalDataListSearch, null)),
+            React.createElement(DataListStatusBar.InternalDataListStatusBar, null),
+            React.createElement(DataListHeader.DataListHeader, null))),
+        initialLoading && React.createElement(DataListLoadingState.DataListLoadingState, null),
+        showEmptyState && React.createElement(DataListEmptyState.InternalDataListEmptyState, null),
+        layoutComponents,
+        loadingState === "filtering" && (React.createElement("div", { "data-testid": DataList_const.DATA_LIST_FILTERING_SPINNER_TEST_ID, className: DataList$1.styles.filtering },
+            React.createElement("div", { className: DataList$1.styles.filteringSpinner },
+                React.createElement(Spinner.Spinner, { size: "small" })))),
+        shouldRenderLoadMoreTrigger && (React.createElement(DataListLoadMore.DataListLoadMore, { onBackToTop: handleBackToTop }))));
+    function handleBackToTop() {
+        var _a;
+        // For testing purposes since jest doesn't know scrollIntoView.
+        // This prevents consumer's tests from needing to mock scrollIntoView.
+        if (!window.HTMLElement.prototype.scrollIntoView)
+            return;
+        (_a = backToTopRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }
+}
+/**
+ * Sets the layout that the DataList item and header will use.
+ */
+DataList.Layout = DataListLayout.DataListLayout;
+/**
+ * By using this component, we can render the actions anywhere in the layout
+ * instead of being added automatically on hover.
+ */
+DataList.LayoutActions = DataListLayoutActions.DataListLayoutActions;
+/**
+ * When the DataList is either empty and/or filtered, this component will be
+ * rendered.
+ */
+DataList.EmptyState = DataListEmptyState.DataListEmptyState;
+/**
+ * Adds the filter components of your choosing to the DataList.
+ */
+DataList.Filters = DataListFilters.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.DataListSearch;
+/**
+ * Defines the group actions you could do on a single DataList item.
+ */
+DataList.ItemActions = DataListItemActions.DataListItemActions;
+/**
+ * Defines the action in a DataList. This should be used inside the
+ * DataListItemActions component.
+ */
+DataList.ItemAction = DataListAction.DataListAction;
+/**
+ * Defines the group actions you could do on multiple DataList items.
+ */
+DataList.BatchActions = DataListBulkActions.DataListBulkActions;
+/**
+ * Defines the batch action in a DataList. This should be used inside the
+ * DataListBatchActions component.
+ */
+DataList.BatchAction = function DataListBatchAction(props) {
+    return React.createElement(DataListAction.DataListAction, Object.assign({}, props));
+};
+/**
+ * Defines a status bar that is rendered between the filters and the header.
+ */
+DataList.StatusBar = DataListStatusBar.DataListStatusBar;
+
+exports.DataList = DataList;

package/dist/DataList-UzxXqfXV.js

@@ -0,0 +1,139 @@
+import { _ as __rest } from './tslib.es6-Df1SgIEn.js';
+import React, { useState, useMemo, useRef } from 'react';
+import { s as styles } from './DataList-D8rsiB6p.js';
+import { a as DataListTotalCount } from './DataListTotalCount-Dzzm_buN.js';
+import { a as DataListLoadingState } from './DataListLoadingState-DKSypijq.js';
+import { D as DataListLayout } from './DataListLayout-BkqOAi5X.js';
+import { D as DataListHeader } from './DataListHeader-DB1ikJ1G.js';
+import { I as InternalDataListFilters, D as DataListFilters } from './DataListFilters-y0CrJgWe.js';
+import { D as DataListStickyHeader } from './DataListStickyHeader-CCG09E7V.js';
+import { I as InternalDataListSearch, a as DataListSearch } from './DataListSearch-DiHOG8VU.js';
+import { I as InternalDataListEmptyState, D as DataListEmptyState } from './DataListEmptyState-Rk1OowmR.js';
+import { D as DataListLoadMore } from './DataListLoadMore-eMdC9JGb.js';
+import { D as DataListItemActions } from './DataListItemActions-DbMxVTo5.js';
+import { D as DataListAction } from './DataListAction-CMZbwbN5.js';
+import { D as DataListLayoutActions } from './DataListLayoutActions-C1xVkV8F.js';
+import { D as DataListContext, u as useDataListContext } from './DataListContext-DHdRjGCC.js';
+import { s as sortBreakpoints, g as getCompoundComponent, a as getCompoundComponents } from './DataList.utils-C931OWj0.js';
+import { D as DATA_LIST_FILTERING_SPINNER_TEST_ID } from './DataList.const-Wz370ukq.js';
+import { D as DataListBulkActions } from './DataListBulkActions-OLJ1EzI6.js';
+import { I as InternalDataListStatusBar, D as DataListStatusBar } from './DataListStatusBar-EQKC5MHS.js';
+import { H as Heading } from './Heading-CL3UujY7.js';
+import { S as Spinner } from './Spinner-BOhyUAA_.js';
+
+function DataList(_a) {
+    var { selected = [], sorting } = _a, props = __rest(_a, ["selected", "sorting"]);
+    const [layouts, setLayouts] = useState({});
+    const layoutBreakpoints = useMemo(() => sortBreakpoints(Object.keys(layouts)), [layouts]);
+    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);
+    const headerCount = Object.keys(props.headers).length;
+    const shouldRenderStickyHeader = !!filterComponent || !!searchComponent || headerCount > 0;
+    return (React.createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
+            filterComponent,
+            layoutComponents,
+            emptyStateComponents,
+            itemActionComponent,
+            bulkActionsComponent,
+            layoutBreakpoints,
+            layouts,
+            registerLayout }, props), { selected, 
+            // T !== DataListObject
+            sorting: sorting }) },
+        React.createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
+    function registerLayout(size, children) {
+        setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
+    }
+}
+function InternalDataList({ shouldRenderStickyHeader, }) {
+    const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
+    const backToTopRef = useRef(null);
+    const initialLoading = loadingState === "initial";
+    const showEmptyState = !initialLoading && data.length === 0;
+    const shouldRenderLoadMoreTrigger = !initialLoading && !showEmptyState;
+    return (React.createElement("div", { className: styles.wrapper },
+        React.createElement("div", { className: styles.titleContainer },
+            title && React.createElement(Heading, { level: 3 }, title),
+            React.createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
+        React.createElement("div", { ref: backToTopRef }),
+        shouldRenderStickyHeader && (React.createElement(DataListStickyHeader, null,
+            React.createElement("div", { className: styles.headerFilters },
+                React.createElement(InternalDataListFilters, null),
+                React.createElement(InternalDataListSearch, null)),
+            React.createElement(InternalDataListStatusBar, null),
+            React.createElement(DataListHeader, null))),
+        initialLoading && React.createElement(DataListLoadingState, null),
+        showEmptyState && React.createElement(InternalDataListEmptyState, null),
+        layoutComponents,
+        loadingState === "filtering" && (React.createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles.filtering },
+            React.createElement("div", { className: styles.filteringSpinner },
+                React.createElement(Spinner, { size: "small" })))),
+        shouldRenderLoadMoreTrigger && (React.createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
+    function handleBackToTop() {
+        var _a;
+        // For testing purposes since jest doesn't know scrollIntoView.
+        // This prevents consumer's tests from needing to mock scrollIntoView.
+        if (!window.HTMLElement.prototype.scrollIntoView)
+            return;
+        (_a = backToTopRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }
+}
+/**
+ * Sets the layout that the DataList item and header will use.
+ */
+DataList.Layout = DataListLayout;
+/**
+ * By using this component, we can render the actions anywhere in the layout
+ * instead of being added automatically on hover.
+ */
+DataList.LayoutActions = DataListLayoutActions;
+/**
+ * When the DataList is either empty and/or filtered, this component will be
+ * rendered.
+ */
+DataList.EmptyState = DataListEmptyState;
+/**
+ * Adds the filter components of your choosing to the DataList.
+ */
+DataList.Filters = DataListFilters;
+/**
+ * Enables the search functionality of the DataList.
+ *
+ * Since the debounce is implemented within the component, it can only be an
+ * uncontrolled component. Thus the lack of a `value` prop.
+ */
+DataList.Search = DataListSearch;
+/**
+ * Defines the group actions you could do on a single DataList item.
+ */
+DataList.ItemActions = DataListItemActions;
+/**
+ * Defines the action in a DataList. This should be used inside the
+ * DataListItemActions component.
+ */
+DataList.ItemAction = DataListAction;
+/**
+ * Defines the group actions you could do on multiple DataList items.
+ */
+DataList.BatchActions = DataListBulkActions;
+/**
+ * Defines the batch action in a DataList. This should be used inside the
+ * DataListBatchActions component.
+ */
+DataList.BatchAction = function DataListBatchAction(props) {
+    return React.createElement(DataListAction, Object.assign({}, props));
+};
+/**
+ * Defines a status bar that is rendered between the filters and the header.
+ */
+DataList.StatusBar = DataListStatusBar;
+
+export { DataList as D };

package/dist/DataList.const-Wz370ukq.js

@@ -0,0 +1,25 @@
+import { tokens } from '@jobber/design';
+
+const EMPTY_RESULTS_MESSAGE = "List is looking empty";
+const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
+const EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = "DataListEmptyState action prop must be a Button component";
+/**
+ * Breakpoints that we support
+ */
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
+const BREAKPOINT_SIZES = {
+    xs: 0,
+    sm: 490,
+    md: 768,
+    lg: 1080,
+    xl: 1440,
+};
+const SEARCH_DEBOUNCE_DELAY = tokens["timing-slowest"];
+const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
+const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
+const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
+const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
+const TRANSITION_DURATION_IN_SECONDS = tokens["timing-base"] / 1000;
+const TRANSITION_DELAY_IN_SECONDS = tokens["timing-quick"] / 1000;
+
+export { BREAKPOINTS as B, DATA_LIST_FILTERING_SPINNER_TEST_ID as D, EMPTY_FILTER_RESULTS_MESSAGE as E, SEARCH_DEBOUNCE_DELAY as S, TRANSITION_DURATION_IN_SECONDS as T, DATA_LIST_STICKY_HEADER_TEST_ID as a, EMPTY_RESULTS_MESSAGE as b, EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR as c, TRANSITION_DELAY_IN_SECONDS as d, BREAKPOINT_SIZES as e, DATA_LOAD_MORE_TEST_ID as f, DATA_LIST_LOADING_MORE_SPINNER_TEST_ID as g };

package/dist/DataList.const-YbvF2-QB.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var design = require('@jobber/design');
+
+const EMPTY_RESULTS_MESSAGE = "List is looking empty";
+const EMPTY_FILTER_RESULTS_MESSAGE = "No results for selected filters";
+const EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = "DataListEmptyState action prop must be a Button component";
+/**
+ * Breakpoints that we support
+ */
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
+const BREAKPOINT_SIZES = {
+    xs: 0,
+    sm: 490,
+    md: 768,
+    lg: 1080,
+    xl: 1440,
+};
+const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
+const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
+const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
+const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
+const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
+const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
+const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
+
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.BREAKPOINT_SIZES = BREAKPOINT_SIZES;
+exports.DATA_LIST_FILTERING_SPINNER_TEST_ID = DATA_LIST_FILTERING_SPINNER_TEST_ID;
+exports.DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = DATA_LIST_LOADING_MORE_SPINNER_TEST_ID;
+exports.DATA_LIST_STICKY_HEADER_TEST_ID = DATA_LIST_STICKY_HEADER_TEST_ID;
+exports.DATA_LOAD_MORE_TEST_ID = DATA_LOAD_MORE_TEST_ID;
+exports.EMPTY_FILTER_RESULTS_MESSAGE = EMPTY_FILTER_RESULTS_MESSAGE;
+exports.EMPTY_RESULTS_MESSAGE = EMPTY_RESULTS_MESSAGE;
+exports.EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR = EMPTY_STATE_ACTION_BUTTON_ONLY_ERROR;
+exports.SEARCH_DEBOUNCE_DELAY = SEARCH_DEBOUNCE_DELAY;
+exports.TRANSITION_DELAY_IN_SECONDS = TRANSITION_DELAY_IN_SECONDS;
+exports.TRANSITION_DURATION_IN_SECONDS = TRANSITION_DURATION_IN_SECONDS;