@jobber/components 4.39.0 → 4.40.0

package/dist/DataList/index.js

@@ -29,10 +29,18 @@ var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.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 Spinner = require('../Spinner-9d8fc7ff.js');
-require('../Content-2ca1ffe1.js');
+require('../ButtonDismiss-82680c7d.js');
+require('lodash/sortBy');
+require('@jobber/hooks/useLiveAnnounce');
 require('../FormField-d6138b7f.js');
 require('../InputValidation-b5a3d92c.js');
 
@@ -187,14 +195,14 @@ function DataListHeaderTile({ headers, headerKey, }) {
             [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.direction }))));
+        (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.direction) === "desc") {
+        if ((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({
-            direction: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.direction) === "asc" ? "desc" : "asc",
+            order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "asc" ? "desc" : "asc",
             key: sortingKey,
         });
     }
@@ -479,14 +487,45 @@ function DataListHeaderCheckbox({ children }) {
     }
 }
 
-function DataListHeader({ layouts, mediaMatches, headerData, headerVisibility, }) {
-    const matchingMediaQueries = Object.keys(mediaMatches || {}).filter((key) => !!(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[key]));
-    const sortedVisibleBreakpoints = sortSizeProp(matchingMediaQueries);
-    // Determines if the header should be visible based on the headerVisibility
-    const showHeader = sortedVisibleBreakpoints.reduce((previousVisibility, breakpoint) => {
-        var _a;
-        return (_a = headerVisibility[breakpoint]) !== null && _a !== void 0 ? _a : previousVisibility;
-    }, true);
+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)
         return null;
     return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement("div", { className: classnames__default["default"](styles$d.headerTitles) },
@@ -528,6 +567,59 @@ styleInject_es.styleInject(css_248z$4);
 
 const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
 
+function DataListSort() {
+    const { sorting, headers } = useDataListContext();
+    const divRef = React.useRef(null);
+    const [showPopover, setShowPopover] = React.useState(false);
+    if (!sorting)
+        return null;
+    const { sortable, state, onSort } = sorting;
+    const sortByOptions = getSortByOptions();
+    const canChangeOrder = !(state === null || state === void 0 ? void 0 : state.key);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("span", { ref: divRef },
+            React__default["default"].createElement(Button.Button, Object.assign({}, (!state && { icon: "add", iconOnRight: true }), { label: getButtonLabel(), variation: "subtle", onClick: () => setShowPopover(!showPopover) }))),
+        React__default["default"].createElement(Popover.Popover, { attachTo: divRef, open: showPopover, onRequestClose: () => setShowPopover(false) },
+            React__default["default"].createElement(Content.Content, null,
+                React__default["default"].createElement(Heading.Heading, { level: 5 }, "Sort by"),
+                React__default["default"].createElement(Chip.Chips, { selected: (state === null || state === void 0 ? void 0 : state.key) || "none", onChange: handleKeyChange }, sortByOptions.map(({ label, value }) => (React__default["default"].createElement(Chip.Chip, { key: label, label: label, value: value })))),
+                React__default["default"].createElement(Heading.Heading, { level: 5 }, "Ordered by"),
+                React__default["default"].createElement(Chip.Chips, { selected: state === null || state === void 0 ? void 0 : state.order, onChange: handleSortingChange },
+                    React__default["default"].createElement(Chip.Chip, { label: "Ascending", value: "asc", disabled: canChangeOrder }),
+                    React__default["default"].createElement(Chip.Chip, { label: "Descending", value: "desc", disabled: canChangeOrder }))))));
+    function getSortByOptions() {
+        const options = sortable.reduce((acc, sort) => {
+            const label = headers[sort];
+            if (!label)
+                return acc;
+            acc.push({ label, value: sort.toString() });
+            return acc;
+        }, []);
+        // Inject a none option as the first option
+        options.unshift({ label: "None", value: "none" });
+        return options;
+    }
+    function getButtonLabel() {
+        const label = state && headers[state.key];
+        if (!label)
+            return "Sort by";
+        return `Sort by: ${label}, ${state.order}`;
+    }
+    function handleKeyChange(value) {
+        if (value && value !== "none") {
+            onSort({ key: value, order: (state === null || state === void 0 ? void 0 : state.order) || "asc" });
+            return;
+        }
+        onSort(undefined);
+    }
+    function handleSortingChange(value) {
+        if ((state === null || state === void 0 ? void 0 : state.key) && value) {
+            onSort({ key: state.key, order: value });
+            return;
+        }
+    }
+}
+
 // This component is meant to capture the props of the DataList.Filters
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListFilters(_) {
@@ -538,19 +630,22 @@ function DataListFilters(_) {
  */
 function InternalDataListFilters() {
     const { children: parentChildren } = useDataListContext();
+    const showHeader = useShowHeader();
+    const showSortButton = !showHeader;
     const component = getCompoundComponent(parentChildren, DataListFilters);
     const [leftRef, isLeftVisible] = useInView.useInView();
     const [rightRef, isRightVisible] = useInView.useInView();
-    if (!component)
+    if (!showSortButton && !component)
         return null;
-    const { children } = component.props;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
     return (React__default["default"].createElement("div", { "data-testid": CONTAINER_TEST_ID, className: classnames__default["default"](styles$4.filters, {
             [styles$4.overflowLeft]: !isLeftVisible,
             [styles$4.overflowRight]: !isRightVisible,
         }) },
         React__default["default"].createElement("div", { className: styles$4.filterActions },
             React__default["default"].createElement("span", { ref: leftRef, className: styles$4.overflowTrigger }),
-            children,
+            children && children,
+            showSortButton && React__default["default"].createElement(DataListSort, null),
             React__default["default"].createElement("span", { ref: rightRef, className: styles$4.overflowTrigger }))));
 }
 
@@ -574,7 +669,7 @@ function DataListStickyHeader({ children }) {
     return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$3.header, { [styles$3.stuck]: isStuck }) }, children));
 }
 
-var css_248z$2 = ".SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n  position: absolute;\n  /* Inputs are off by 1 when put beside a button */\n  top: calc((16px / 2) - 1px);\n  top: calc(calc(16px / 2) - 1px);\n  top: calc(var(--space-small) - 1px);\n  right: calc((16px * 3) - (16px / 8));\n  right: calc(calc(16px * 3) - calc(16px / 8));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out,\n    width 200ms ease-in-out, visibility 200ms ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
+var css_248z$2 = ".SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smallest));\n\n  position: absolute;\n  /* Inputs are off by 1 when put beside a button */\n  top: calc((16px / 2) + 1px);\n  top: calc(calc(16px / 2) + 1px);\n  top: calc(var(--space-small) + 1px);\n  right: calc((16px * 3) - (16px / 8));\n  right: calc(calc(16px * 3) - calc(16px / 8));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out,\n    width 200ms ease-in-out, visibility 200ms ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    opacity: 1;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
 var styles$2 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
 styleInject_es.styleInject(css_248z$2);
 
@@ -590,12 +685,14 @@ function DataListSearch(_) {
 function InternalDataListSearch() {
     const inputRef = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
-    const { searchComponent, filterComponent, title } = useDataListContext();
+    const { searchComponent, filterComponent, sorting, title } = useDataListContext();
     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;
-    return (React__default["default"].createElement("div", { className: classnames__default["default"]({ [styles$2.withNoFilters]: !filterComponent }) },
+    return (React__default["default"].createElement("div", { className: classnames__default["default"]({
+            [styles$2.withNoFilters]: !filterComponent && !sorting,
+        }) },
         React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$2.searchInput, {
                 [styles$2.searchInputVisible]: visible,
             }) },

package/dist/Popover/index.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var reactPopper = require('react-popper');
-var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var ButtonDismiss = require('../ButtonDismiss-82680c7d.js');
+var Popover = require('../Popover-bbfc6aa1.js');
+require('react');
+require('react-popper');
+require('@jobber/hooks/useRefocusOnActivator');
+require('../style-inject.es-9d2f5f4e.js');
+require('../ButtonDismiss-82680c7d.js');
 require('../Button-fd8413b2.js');
 require('classnames');
 require('react-router-dom');
@@ -14,48 +15,6 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-fd6f932a.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css_248z = ":root {\n  --card--base-padding: var(--space-base);\n  --popover--padding: var(--space-base);\n  --popover--width: calc(var(--base-unit) * 21.875);\n  --dismiss--button-padding: calc(var(--base-unit) / 4);\n}\n\n.oSlK4rLUvzE- {\n  display: -ms-flexbox;\n  display: flex;\n  position: \"relative\";\n  padding: calc(16px * 1);\n  padding: var(--popover--padding);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.XVPpPb-7e30- {\n  float: right;\n  padding: calc(16px / 4);\n  padding: var(--dismiss--button-padding);\n  text-align: right;\n}\n\n.TDuYbqXaLW0- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: -webkit-max-content;\n  width: max-content;\n  max-width: calc(16px * 21.875);\n  max-width: var(--popover--width);\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  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\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  line-height: normal;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n.TDuYbqXaLW0- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n.LJCpn0zf1e8- {\n  visibility: hidden;\n}\n\n.LJCpn0zf1e8-,\n.LJCpn0zf1e8-::before {\n  position: absolute;\n  width: 16px;\n  width: var(--base-unit);\n  height: 16px;\n  height: var(--base-unit);\n  background: inherit;\n}\n\n.LJCpn0zf1e8-::before {\n  content: \"\";\n  visibility: visible;\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n          clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8- {\n  bottom: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8-::before {\n  -webkit-transform: rotate(-135deg);\n          transform: rotate(-135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"bottom\"] > .LJCpn0zf1e8- {\n  top: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8- {\n  right: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8-::before {\n  -webkit-transform: rotate(135deg);\n          transform: rotate(135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8- {\n  left: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8-::before {\n  -webkit-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n}\n";
-var classes = {"header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","popover":"TDuYbqXaLW0-","arrow":"LJCpn0zf1e8-"};
-styleInject_es.styleInject(css_248z);
-
-function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
-    const [popperElement, setPopperElement] = React.useState();
-    const [arrowElement, setArrowElement] = React.useState();
-    const { styles: popperStyles, attributes } = reactPopper.usePopper(attachTo instanceof Element ? attachTo : attachTo.current, popperElement, {
-        modifiers: buildModifiers(arrowElement),
-        placement: preferredPlacement,
-    });
-    useRefocusOnActivator.useRefocusOnActivator(open);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", Object.assign({ role: "dialog", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
-        React__default["default"].createElement("div", { className: classes.dismissButton },
-            React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
-        children,
-        React__default["default"].createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
-}
-function buildModifiers(arrowElement) {
-    const modifiers = [
-        {
-            name: "arrow",
-            options: { element: arrowElement, padding: 10 },
-        },
-        {
-            name: "offset",
-            options: {
-                offset: [0, 10],
-            },
-        },
-        {
-            name: "flip",
-            options: {
-                fallbackPlacements: ["auto"],
-            },
-        },
-    ];
-    return modifiers;
-}
-
-exports.Popover = Popover;
+exports.Popover = Popover.Popover;

package/dist/Popover-bbfc6aa1.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var reactPopper = require('react-popper');
+var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var ButtonDismiss = require('./ButtonDismiss-82680c7d.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = ":root {\n  --card--base-padding: var(--space-base);\n  --popover--padding: var(--space-base);\n  --popover--width: calc(var(--base-unit) * 21.875);\n  --dismiss--button-padding: calc(var(--base-unit) / 4);\n}\n\n.oSlK4rLUvzE- {\n  display: -ms-flexbox;\n  display: flex;\n  position: \"relative\";\n  padding: calc(16px * 1);\n  padding: var(--popover--padding);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.XVPpPb-7e30- {\n  float: right;\n  padding: calc(16px / 4);\n  padding: var(--dismiss--button-padding);\n  text-align: right;\n}\n\n.TDuYbqXaLW0- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: -webkit-max-content;\n  width: max-content;\n  max-width: calc(16px * 21.875);\n  max-width: var(--popover--width);\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  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\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  line-height: normal;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n.TDuYbqXaLW0- > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n.LJCpn0zf1e8- {\n  visibility: hidden;\n}\n\n.LJCpn0zf1e8-,\n.LJCpn0zf1e8-::before {\n  position: absolute;\n  width: 16px;\n  width: var(--base-unit);\n  height: 16px;\n  height: var(--base-unit);\n  background: inherit;\n}\n\n.LJCpn0zf1e8-::before {\n  content: \"\";\n  visibility: visible;\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n          clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8- {\n  bottom: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"top\"] > .LJCpn0zf1e8-::before {\n  -webkit-transform: rotate(-135deg);\n          transform: rotate(-135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"bottom\"] > .LJCpn0zf1e8- {\n  top: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8- {\n  right: -5px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"left\"] > .LJCpn0zf1e8-::before {\n  -webkit-transform: rotate(135deg);\n          transform: rotate(135deg);\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8- {\n  left: -7px;\n}\n\n.TDuYbqXaLW0-[data-popper-placement^=\"right\"] > .LJCpn0zf1e8-::before {\n  -webkit-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n}\n";
+var classes = {"header":"oSlK4rLUvzE-","dismissButton":"XVPpPb-7e30-","popover":"TDuYbqXaLW0-","arrow":"LJCpn0zf1e8-"};
+styleInject_es.styleInject(css_248z);
+
+function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
+    const [popperElement, setPopperElement] = React.useState();
+    const [arrowElement, setArrowElement] = React.useState();
+    const { styles: popperStyles, attributes } = reactPopper.usePopper(attachTo instanceof Element ? attachTo : attachTo.current, popperElement, {
+        modifiers: buildModifiers(arrowElement),
+        placement: preferredPlacement,
+    });
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", Object.assign({ role: "dialog", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
+        React__default["default"].createElement("div", { className: classes.dismissButton },
+            React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
+        children,
+        React__default["default"].createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
+}
+function buildModifiers(arrowElement) {
+    const modifiers = [
+        {
+            name: "arrow",
+            options: { element: arrowElement, padding: 10 },
+        },
+        {
+            name: "offset",
+            options: {
+                offset: [0, 10],
+            },
+        },
+        {
+            name: "flip",
+            options: {
+                fallbackPlacements: ["auto"],
+            },
+        },
+    ];
+    return modifiers;
+}
+
+exports.Popover = Popover;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.39.0",
+  "version": "4.40.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3ebee9c0f86bbe3a2fe26bf09572a5b4599a9a0c"
+  "gitHead": "621f279e8f27d74e69fd76f63b763e38196cd000"
 }