@jobber/components 5.37.1 → 5.39.0

package/dist/{useResizeObserver-DRmrXVEe.js → useResizeObserver-8HY3hMai.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-CeSHm1M2.js');
+var _commonjsHelpers = require('./_commonjsHelpers-BLIunDkT.js');
 var React = require('react');
-var throttle$1 = require('./throttle-Cprv6cRN.js');
+var throttle$1 = require('./throttle-QtIZuNyM.js');
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/{useResizeObserver-Dopljm7C.js → useResizeObserver-jWhmquZ0.js}

@@ -1,6 +1,6 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-pBx_5ASz.js';
+import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-Wxgt4_Xa.js';
 import React from 'react';
-import { a as throttle_1 } from './throttle-BdsTStEK.js';
+import { a as throttle_1 } from './throttle-gSkQbGPK.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/{useResponsiveSizing-s676YOix.js → useResponsiveSizing-9QQN0EFU.js}

@@ -1,5 +1,5 @@
 import { useCallback, useSyncExternalStore } from 'react';
-import { e as BREAKPOINT_SIZES } from './DataList.const-CfcXhjZR.js';
+import { e as BREAKPOINT_SIZES } from './DataList.const-C5MOShrr.js';
 
 const mediaQueryStore = {
     subscribe(onChange, query) {

package/dist/{useResponsiveSizing-BTk6Z4hD.js → useResponsiveSizing-ComOPgOQ.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var DataList_const = require('./DataList.const-B_t_nNPW.js');
+var DataList_const = require('./DataList.const-CWr0pMgl.js');
 
 const mediaQueryStore = {
     subscribe(onChange, query) {

package/dist/{useScrollToActive-CcSdwphe.js → useScrollToActive-BKZ6e8vn.js}

@@ -1,14 +1,14 @@
 import React, { useRef, useId, useState, useEffect } from 'react';
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-pBx_5ASz.js';
-import { _ as _baseFlatten } from './_baseFlatten-BIGjs7C-.js';
-import { a as _arrayMap, b as _baseGet } from './_getAllKeys-DuIeLomp.js';
-import { _ as _baseEach, a as _baseIteratee } from './_baseEach-BswM2DnU.js';
-import { b as isArrayLike_1, k as _baseUnary, a as isArray_1 } from './isTypedArray-Cd4gzGPz.js';
-import { i as isSymbol_1 } from './isSymbol-DwoFqCBz.js';
-import { i as identity_1 } from './identity-CBz1SXvU.js';
-import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-5JAuCV4M.js';
-import { a as debounce } from './debounce-4ZcizSQk.js';
-import { I as Icon } from './Icon-CTOShA1M.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-Wxgt4_Xa.js';
+import { _ as _baseFlatten } from './_baseFlatten-BUCWilZg.js';
+import { a as _arrayMap, b as _baseGet } from './_getAllKeys-B0qArHwj.js';
+import { _ as _baseEach, a as _baseIteratee } from './_baseEach-mgJVw9ae.js';
+import { b as isArrayLike_1, k as _baseUnary, a as isArray_1 } from './isTypedArray-B8ZChn46.js';
+import { i as isSymbol_1 } from './isSymbol-v0Zzh12-.js';
+import { i as identity_1 } from './identity-BAOeCZJm.js';
+import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-BNl3cdoq.js';
+import { a as debounce } from './debounce-B08Maooe.js';
+import { I as Icon } from './Icon-BL38PebQ.js';
 import { usePopper } from 'react-popper';
 
 var baseEach = _baseEach,

package/dist/{useScrollToActive-Cb2c6DGY.js → useScrollToActive-_tVmfyq_.js}

@@ -1,16 +1,16 @@
 'use strict';
 
 var React = require('react');
-var _commonjsHelpers = require('./_commonjsHelpers-CeSHm1M2.js');
-var _baseFlatten = require('./_baseFlatten-D1NZA8St.js');
-var _getAllKeys = require('./_getAllKeys-Co5GejcG.js');
-var _baseEach = require('./_baseEach-CqpoWL75.js');
-var isTypedArray = require('./isTypedArray-K4_TLJfP.js');
-var isSymbol$1 = require('./isSymbol-CqA9L5IE.js');
-var identity$1 = require('./identity-CjCnhCLi.js');
-var _isIterateeCall = require('./_isIterateeCall-CzcrXhGB.js');
-var debounce = require('./debounce-3grWz_0o.js');
-var Icon = require('./Icon-mR0kGeqa.js');
+var _commonjsHelpers = require('./_commonjsHelpers-BLIunDkT.js');
+var _baseFlatten = require('./_baseFlatten-bwbr66hJ.js');
+var _getAllKeys = require('./_getAllKeys-B6iwtHMp.js');
+var _baseEach = require('./_baseEach-BYeOIKni.js');
+var isTypedArray = require('./isTypedArray-CmPxpu8_.js');
+var isSymbol$1 = require('./isSymbol-B0s5GHcC.js');
+var identity$1 = require('./identity-ZxEoiIJX.js');
+var _isIterateeCall = require('./_isIterateeCall-BIAGiMig.js');
+var debounce = require('./debounce-s15hWybq.js');
+var Icon = require('./Icon-4aSo6vx6.js');
 var reactPopper = require('react-popper');
 
 var baseEach = _baseEach._baseEach,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "5.37.1",
+  "version": "5.39.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -495,5 +495,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "453644a266a523942e0d280584025e3998eb164f"
+  "gitHead": "f30f32b00a3f8f235aad4274903c8d5b5d91f49e"
 }

package/dist/Chip-CvKSs5Nu.js

@@ -1,80 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var useInView = require('./useInView-5w2grgM7.js');
-var Avatar = require('./Avatar-BoNMbFuY.js');
-var Icon = require('./Icon-mR0kGeqa.js');
-var useChildComponent = require('./useChildComponent-Bk38nqw-.js');
-var Typography = require('./Typography-CZXlC9J2.js');
-var Tooltip = require('./Tooltip-CyjsiD9h.js');
-
-var styles = {"chip":"af7U8MvcbHE-","clickableSuffix":"GnA73aYUbak-","suffix":"ySADfZ0FckM-","prefix":"e905AYK4SCc-","empty":"usdkmQ9Sxbk-","chipBar":"dg1-Izy1eQA-","selected":"-lz0EYLTDgg-","base":"wSI5L-5rODg-","invalid":"SmUxkzpIC84-","subtle":"Mux23dmZSuw-","disabled":"MbRItb9vKhc-","chipContent":"tJhURjR2Vec-","truncateGradient":"G3QXY0rNcK0-","chipLabelRef":"MUKEW6c2nNA-","spinning":"v2Qb-3r7q-g-"};
-
-function ChipPrefix({ children }) {
-    const avatarOrIcon = useChildComponent.useChildComponent(children, d => d.type === Avatar.Avatar || d.type === Icon.Icon);
-    if (!avatarOrIcon)
-        return React.createElement(React.Fragment, null, children);
-    return React.createElement("span", { className: classnames(styles.prefix) }, avatarOrIcon);
-}
-
-function ChipSuffix({ children, className, onClick, testID, ariaLabel, }) {
-    var _a;
-    let singleChild = useChildComponent.useChildComponent(children, d => d.type === Icon.Icon);
-    const handleClick = (event) => {
-        if (!onClick) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-    };
-    if (!allowedSuffixIcons.includes((_a = singleChild === null || singleChild === void 0 ? void 0 : singleChild.props) === null || _a === void 0 ? void 0 : _a.name)) {
-        singleChild = undefined;
-    }
-    return (React.createElement("span", { className: classnames(onClick ? styles.clickableSuffix : styles.suffix, className, !singleChild && styles.empty), onClick: handleClick, onKeyPress: handleClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "data-testid": testID, "aria-label": ariaLabel }, singleChild));
-}
-const allowedSuffixIcons = ["cross", "add", "checkmark", "arrowDown"];
-
-const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
-    const classes = classnames(styles.chip, {
-        [styles.invalid]: invalid,
-        [styles.base]: variation === "base",
-        [styles.subtle]: variation === "subtle",
-        [styles.disabled]: disabled,
-    });
-    const prefix = useChildComponent.useChildComponent(children, d => d.type === Chip.Prefix);
-    const suffix = useChildComponent.useChildComponent(children, d => d.type === Chip.Suffix);
-    const [labelRef, labelFullyVisible] = useInView.useInView_2();
-    const [headingRef, headingFullyVisible] = useInView.useInView_2();
-    const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
-    return (React.createElement(Tooltip.Tooltip, { message: tooltipMessage },
-        React.createElement("button", { className: classes, onClick: (ev) => onClick && onClick(value, ev), tabIndex: tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel || label, disabled: disabled, role: role, type: "button" },
-            prefix,
-            React.createElement("div", { className: styles.chipContent },
-                heading && (React.createElement(React.Fragment, null,
-                    React.createElement(Typography.Typography, { size: "base", fontWeight: "medium" },
-                        heading,
-                        React.createElement("span", { ref: headingRef, className: styles.chipLabelRef })),
-                    label && React.createElement("span", { className: styles.chipBar }))),
-                React.createElement(Typography.Typography, { size: "base" },
-                    label,
-                    React.createElement("span", { ref: labelRef, className: styles.chipLabelRef })),
-                !labelFullyVisible && (React.createElement("div", { className: styles.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
-            suffix)));
-};
-function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
-    let message = "";
-    if (heading && !headingFullyVisible) {
-        message = `${heading} | ${label}`;
-    }
-    else if (!labelFullyVisible) {
-        message = label;
-    }
-    return message;
-}
-Chip.Prefix = ChipPrefix;
-Chip.Suffix = ChipSuffix;
-
-exports.Chip = Chip;
-exports.styles = styles;

package/dist/Chip-Qfqwzu4r.js

@@ -1,77 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { u as useInView_2 } from './useInView-CEgmyj9o.js';
-import { A as Avatar } from './Avatar-BnkP21mh.js';
-import { I as Icon } from './Icon-CTOShA1M.js';
-import { u as useChildComponent } from './useChildComponent-0yCY0m_Z.js';
-import { T as Typography } from './Typography-CRoX9edW.js';
-import { T as Tooltip } from './Tooltip-C4syshPl.js';
-
-var styles = {"chip":"af7U8MvcbHE-","clickableSuffix":"GnA73aYUbak-","suffix":"ySADfZ0FckM-","prefix":"e905AYK4SCc-","empty":"usdkmQ9Sxbk-","chipBar":"dg1-Izy1eQA-","selected":"-lz0EYLTDgg-","base":"wSI5L-5rODg-","invalid":"SmUxkzpIC84-","subtle":"Mux23dmZSuw-","disabled":"MbRItb9vKhc-","chipContent":"tJhURjR2Vec-","truncateGradient":"G3QXY0rNcK0-","chipLabelRef":"MUKEW6c2nNA-","spinning":"v2Qb-3r7q-g-"};
-
-function ChipPrefix({ children }) {
-    const avatarOrIcon = useChildComponent(children, d => d.type === Avatar || d.type === Icon);
-    if (!avatarOrIcon)
-        return React.createElement(React.Fragment, null, children);
-    return React.createElement("span", { className: classnames(styles.prefix) }, avatarOrIcon);
-}
-
-function ChipSuffix({ children, className, onClick, testID, ariaLabel, }) {
-    var _a;
-    let singleChild = useChildComponent(children, d => d.type === Icon);
-    const handleClick = (event) => {
-        if (!onClick) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-    };
-    if (!allowedSuffixIcons.includes((_a = singleChild === null || singleChild === void 0 ? void 0 : singleChild.props) === null || _a === void 0 ? void 0 : _a.name)) {
-        singleChild = undefined;
-    }
-    return (React.createElement("span", { className: classnames(onClick ? styles.clickableSuffix : styles.suffix, className, !singleChild && styles.empty), onClick: handleClick, onKeyPress: handleClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "data-testid": testID, "aria-label": ariaLabel }, singleChild));
-}
-const allowedSuffixIcons = ["cross", "add", "checkmark", "arrowDown"];
-
-const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
-    const classes = classnames(styles.chip, {
-        [styles.invalid]: invalid,
-        [styles.base]: variation === "base",
-        [styles.subtle]: variation === "subtle",
-        [styles.disabled]: disabled,
-    });
-    const prefix = useChildComponent(children, d => d.type === Chip.Prefix);
-    const suffix = useChildComponent(children, d => d.type === Chip.Suffix);
-    const [labelRef, labelFullyVisible] = useInView_2();
-    const [headingRef, headingFullyVisible] = useInView_2();
-    const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
-    return (React.createElement(Tooltip, { message: tooltipMessage },
-        React.createElement("button", { className: classes, onClick: (ev) => onClick && onClick(value, ev), tabIndex: tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel || label, disabled: disabled, role: role, type: "button" },
-            prefix,
-            React.createElement("div", { className: styles.chipContent },
-                heading && (React.createElement(React.Fragment, null,
-                    React.createElement(Typography, { size: "base", fontWeight: "medium" },
-                        heading,
-                        React.createElement("span", { ref: headingRef, className: styles.chipLabelRef })),
-                    label && React.createElement("span", { className: styles.chipBar }))),
-                React.createElement(Typography, { size: "base" },
-                    label,
-                    React.createElement("span", { ref: labelRef, className: styles.chipLabelRef })),
-                !labelFullyVisible && (React.createElement("div", { className: styles.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
-            suffix)));
-};
-function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
-    let message = "";
-    if (heading && !headingFullyVisible) {
-        message = `${heading} | ${label}`;
-    }
-    else if (!labelFullyVisible) {
-        message = label;
-    }
-    return message;
-}
-Chip.Prefix = ChipPrefix;
-Chip.Suffix = ChipSuffix;
-
-export { Chip as C, styles as s };

package/dist/InternalChipDismissible-CLJsvs-K.js

@@ -1,152 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { a as useInternalChipDismissibleInput, d as useScrollToActive, b as useInView, c as useRepositionMenu, u as useInternalChipDismissible } from './useScrollToActive-CcSdwphe.js';
-import './isObjectLike-DTwl2dr2.js';
-import '@jobber/design';
-import 'react-popper';
-import { a as debounce } from './debounce-4ZcizSQk.js';
-import classnames from 'classnames';
-import { T as Text } from './Text-OejtJe9c.js';
-import { B as Button } from './Button-BorESRA8.js';
-import { S as Spinner } from './Spinner-CclQH5p6.js';
-import { u as useAssert_2 } from './useAssert-6YWzzvfL.js';
-import { I as Icon } from './Icon-CTOShA1M.js';
-import { A as Avatar } from './Avatar-BnkP21mh.js';
-import { T as Typography } from './Typography-CRoX9edW.js';
-import { T as Tooltip } from './Tooltip-C4syshPl.js';
-
-var styles$1 = {"wrapper":"zn6onyiQVmA-","chip":"PEnZzMEgbhU-","hasPrefix":"dtysUhwYdG4-","hasSuffix":"xGaMCAYsdwA-","clickable":"SNT7gGV-h-o-","input":"W4D98cvEth4-","active":"_0hEzaTXK9M0-","invalid":"JApS2787BU8-","disabled":"Kg0c8WVgMpg-","button":"_0-ZWexS4Gfg-","icon":"DQPnZP4UZpw-","spinning":"_233cNMGKLQo-"};
-
-function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = useRef();
-    return (React.createElement("div", { ref: buttonRef, className: styles$1.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
-        React.createElement(Icon, { name: icon, color: getColor() })));
-    function handleKeyUp(event) {
-        if (document.activeElement === buttonRef.current &&
-            (event.key === " " || event.key === "Enter")) {
-            event.stopPropagation();
-            buttonRef.current.click();
-        }
-    }
-    function handleKeyDown(event) {
-        if (document.activeElement === buttonRef.current && event.key === " ") {
-            // Don't scroll down
-            event.preventDefault();
-        }
-    }
-    function getColor() {
-        if (disabled)
-            return "disabled";
-        if (invalid)
-            return "critical";
-        return "greyBlue";
-    }
-    function handleClick(event) {
-        event.stopPropagation();
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }
-}
-
-function InternalChipAffix({ affix, active, invalid, disabled, }) {
-    assertProps();
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Avatar) {
-        return React.createElement(Avatar, Object.assign({}, affix.props, { size: "small" }));
-    }
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Icon) {
-        return renderChipIcon(affix);
-    }
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton) {
-        return React.createElement(InternalChipButton, Object.assign({}, affix.props));
-    }
-    return React.createElement(React.Fragment, null);
-    function renderChipIcon(icon) {
-        const color = getIconColor();
-        return (React.createElement("div", { className: styles$1.icon }, React.cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
-    }
-    function getIconColor() {
-        if (disabled && !active)
-            return "disabled";
-        if (invalid && !disabled)
-            return "critical";
-        if (active)
-            return "white";
-        return;
-    }
-    function assertProps() {
-        const isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar || false;
-        const isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon || false;
-        const isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
-        useAssert_2(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
-    }
-}
-
-function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    const [truncateRef, setTruncateRef] = useState();
-    const isClickable = onClick && !disabled;
-    const classNames = classnames(styles$1.chip, {
-        [styles$1.clickable]: isClickable,
-        [styles$1.active]: active,
-        [styles$1.disabled]: disabled,
-        [styles$1.invalid]: invalid,
-        [styles$1.hasPrefix]: prefix,
-        [styles$1.hasSuffix]: suffix,
-    });
-    const affixProps = { active, invalid, disabled };
-    const Tag = onClick ? "button" : "div";
-    const chip = (React.createElement(Tag, Object.assign({ className: classNames }, (isClickable && { onClick, disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
-        React.createElement(InternalChipAffix, Object.assign({ affix: prefix }, affixProps)),
-        React.createElement(Typography, { element: "span", numberOfLines: 1, size: "base" },
-            React.createElement("span", { ref: setTruncateRef }, label)),
-        React.createElement(InternalChipAffix, Object.assign({ affix: suffix }, affixProps))));
-    return isTruncated() ? React.createElement(Tooltip, { message: label }, chip) : chip;
-    function isTruncated() {
-        var _a;
-        const truncateParentHeight = ((_a = truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
-        const truncateChildHeight = (truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.offsetHeight) || 0;
-        return truncateChildHeight >= truncateParentHeight * 2;
-    }
-}
-
-var styles = {"wrapper":"sCNIjluCskc-","input":"MFUlz1WQLdk-","menu":"V9eYJdjPAeY-","menuList":"LdytkOeCU9c-","menuListOption":"y7Cz2u8BuNE-","loadingIndicator":"_-7bmao8Q9As-","activeOption":"iCwWdcmtInc-","spinning":"c88tg50FoHI-"};
-
-function InternalChipDismissibleInput(props) {
-    const { activator = React.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
-    const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
-    const menuRef = useScrollToActive(activeIndex);
-    const { ref: visibleChildRef, isInView } = useInView();
-    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useRepositionMenu(attachTo);
-    useEffect(() => {
-        if (menuOpen && update)
-            update();
-    }, [allOptions]);
-    useEffect(() => {
-        handleDebouncedSearch();
-        return handleDebouncedSearch.cancel;
-    }, [searchValue]);
-    useEffect(() => {
-        isInView && onLoadMore && onLoadMore(searchValue);
-    }, [isInView]);
-    if (!menuOpen) {
-        return React.cloneElement(activator, { onClick: handleOpenMenu });
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
-        (hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
-            React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
-                allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
-                        [styles.activeOption]: activeIndex === i,
-                    }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
-                    React.createElement("span", { "aria-hidden": true }, option.prefix),
-                    React.createElement(Text, null, option.label)))),
-                React.createElement("div", { ref: visibleChildRef }),
-                isLoadingMore && (React.createElement("div", { className: styles.loadingIndicator },
-                    React.createElement(Spinner, { size: "small", inline: true }))))))));
-}
-
-function InternalChipDismissible(props) {
-    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
-    return (React.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
-        sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
-        React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
-}
-
-export { InternalChipDismissible as I, InternalChip as a, InternalChipButton as b, styles$1 as s };

package/dist/InternalChipDismissible-StTOvxpy.js

@@ -1,157 +0,0 @@
-'use strict';
-
-var React = require('react');
-var useScrollToActive = require('./useScrollToActive-Cb2c6DGY.js');
-require('./isObjectLike-i_S0AKMg.js');
-require('@jobber/design');
-require('react-popper');
-var debounce = require('./debounce-3grWz_0o.js');
-var classnames = require('classnames');
-var Text = require('./Text-CIOw_MbQ.js');
-var Button = require('./Button-Cq7nFrdg.js');
-var Spinner = require('./Spinner-DGU4hKiw.js');
-var useAssert = require('./useAssert-D4PJ4ymq.js');
-var Icon = require('./Icon-mR0kGeqa.js');
-var Avatar = require('./Avatar-BoNMbFuY.js');
-var Typography = require('./Typography-CZXlC9J2.js');
-var Tooltip = require('./Tooltip-CyjsiD9h.js');
-
-var styles$1 = {"wrapper":"zn6onyiQVmA-","chip":"PEnZzMEgbhU-","hasPrefix":"dtysUhwYdG4-","hasSuffix":"xGaMCAYsdwA-","clickable":"SNT7gGV-h-o-","input":"W4D98cvEth4-","active":"_0hEzaTXK9M0-","invalid":"JApS2787BU8-","disabled":"Kg0c8WVgMpg-","button":"_0-ZWexS4Gfg-","icon":"DQPnZP4UZpw-","spinning":"_233cNMGKLQo-"};
-
-function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = React.useRef();
-    return (React.createElement("div", { ref: buttonRef, className: styles$1.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
-        React.createElement(Icon.Icon, { name: icon, color: getColor() })));
-    function handleKeyUp(event) {
-        if (document.activeElement === buttonRef.current &&
-            (event.key === " " || event.key === "Enter")) {
-            event.stopPropagation();
-            buttonRef.current.click();
-        }
-    }
-    function handleKeyDown(event) {
-        if (document.activeElement === buttonRef.current && event.key === " ") {
-            // Don't scroll down
-            event.preventDefault();
-        }
-    }
-    function getColor() {
-        if (disabled)
-            return "disabled";
-        if (invalid)
-            return "critical";
-        return "greyBlue";
-    }
-    function handleClick(event) {
-        event.stopPropagation();
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }
-}
-
-function InternalChipAffix({ affix, active, invalid, disabled, }) {
-    assertProps();
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar) {
-        return React.createElement(Avatar.Avatar, Object.assign({}, affix.props, { size: "small" }));
-    }
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon) {
-        return renderChipIcon(affix);
-    }
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton) {
-        return React.createElement(InternalChipButton, Object.assign({}, affix.props));
-    }
-    return React.createElement(React.Fragment, null);
-    function renderChipIcon(icon) {
-        const color = getIconColor();
-        return (React.createElement("div", { className: styles$1.icon }, React.cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
-    }
-    function getIconColor() {
-        if (disabled && !active)
-            return "disabled";
-        if (invalid && !disabled)
-            return "critical";
-        if (active)
-            return "white";
-        return;
-    }
-    function assertProps() {
-        const isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar.Avatar || false;
-        const isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon.Icon || false;
-        const isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
-        useAssert.useAssert_2(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
-    }
-}
-
-function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    const [truncateRef, setTruncateRef] = React.useState();
-    const isClickable = onClick && !disabled;
-    const classNames = classnames(styles$1.chip, {
-        [styles$1.clickable]: isClickable,
-        [styles$1.active]: active,
-        [styles$1.disabled]: disabled,
-        [styles$1.invalid]: invalid,
-        [styles$1.hasPrefix]: prefix,
-        [styles$1.hasSuffix]: suffix,
-    });
-    const affixProps = { active, invalid, disabled };
-    const Tag = onClick ? "button" : "div";
-    const chip = (React.createElement(Tag, Object.assign({ className: classNames }, (isClickable && { onClick, disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
-        React.createElement(InternalChipAffix, Object.assign({ affix: prefix }, affixProps)),
-        React.createElement(Typography.Typography, { element: "span", numberOfLines: 1, size: "base" },
-            React.createElement("span", { ref: setTruncateRef }, label)),
-        React.createElement(InternalChipAffix, Object.assign({ affix: suffix }, affixProps))));
-    return isTruncated() ? React.createElement(Tooltip.Tooltip, { message: label }, chip) : chip;
-    function isTruncated() {
-        var _a;
-        const truncateParentHeight = ((_a = truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
-        const truncateChildHeight = (truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.offsetHeight) || 0;
-        return truncateChildHeight >= truncateParentHeight * 2;
-    }
-}
-
-var styles = {"wrapper":"sCNIjluCskc-","input":"MFUlz1WQLdk-","menu":"V9eYJdjPAeY-","menuList":"LdytkOeCU9c-","menuListOption":"y7Cz2u8BuNE-","loadingIndicator":"_-7bmao8Q9As-","activeOption":"iCwWdcmtInc-","spinning":"c88tg50FoHI-"};
-
-function InternalChipDismissibleInput(props) {
-    const { activator = React.createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
-    const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useScrollToActive.useInternalChipDismissibleInput(props);
-    const menuRef = useScrollToActive.useScrollToActive(activeIndex);
-    const { ref: visibleChildRef, isInView } = useScrollToActive.useInView();
-    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useScrollToActive.useRepositionMenu(attachTo);
-    React.useEffect(() => {
-        if (menuOpen && update)
-            update();
-    }, [allOptions]);
-    React.useEffect(() => {
-        handleDebouncedSearch();
-        return handleDebouncedSearch.cancel;
-    }, [searchValue]);
-    React.useEffect(() => {
-        isInView && onLoadMore && onLoadMore(searchValue);
-    }, [isInView]);
-    if (!menuOpen) {
-        return React.cloneElement(activator, { onClick: handleOpenMenu });
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
-        (hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
-            React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
-                allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
-                        [styles.activeOption]: activeIndex === i,
-                    }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
-                    React.createElement("span", { "aria-hidden": true }, option.prefix),
-                    React.createElement(Text.Text, null, option.label)))),
-                React.createElement("div", { ref: visibleChildRef }),
-                isLoadingMore && (React.createElement("div", { className: styles.loadingIndicator },
-                    React.createElement(Spinner.Spinner, { size: "small", inline: true }))))))));
-}
-
-function InternalChipDismissible(props) {
-    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useScrollToActive.useInternalChipDismissible(props);
-    return (React.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
-        sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
-        React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
-}
-
-exports.InternalChip = InternalChip;
-exports.InternalChipButton = InternalChipButton;
-exports.InternalChipDismissible = InternalChipDismissible;
-exports.styles = styles$1;