@jobber/components 4.46.0 → 4.46.1-JOB-79340.32

package/dist/Chips/index.js

@@ -2,37 +2,141 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var Chips = require('../Chips-5ff2b9d2.js');
 var React = require('react');
-var Chip = require('../Chip-4d8e6370.js');
-require('uuid');
+var useAssert = require('@jobber/hooks/useAssert');
+var classnames = require('classnames');
+var Icon = require('../Icon-405a216c.js');
+var Avatar = require('../Avatar-1aa30ee1.js');
+var Typography = require('../Typography-83915c54.js');
+var Tooltip = require('../Tooltip-ae33a335.js');
 require('../style-inject.es-9d2f5f4e.js');
-require('classnames');
-require('@jobber/hooks/useAssert');
-require('../Icon-405a216c.js');
-require('@jobber/design');
-require('../Avatar-1aa30ee1.js');
-require('color');
-require('../Typography-9bff9c91.js');
-require('../Tooltip-59dbab5b.js');
-require('react-dom');
-require('framer-motion');
-require('react-popper');
-require('../Text-59bde58c.js');
+require('../Chip-00e281e9.js');
 require('lodash/sortBy');
 require('@jobber/hooks/useLiveAnnounce');
+require('uuid');
 require('lodash/debounce');
-require('../Button-d89f2271.js');
+require('react-popper');
+require('../Text-54334431.js');
+require('../Button-db6114a6.js');
 require('react-router-dom');
 require('../Spinner-9d8fc7ff.js');
+require('@jobber/design');
+require('color');
+require('react-dom');
+require('framer-motion');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+// Only need the component to pass in the data as a react children
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function Chip(props) {
+    // Throw error when <Chip /> gets used outside of the <Chips />
+    useAssert.useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+}
+
+function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
+    const buttonRef = React.useRef();
+    return (React__default["default"].createElement("div", { ref: buttonRef, className: Chips.styles.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__default["default"].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__default["default"].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__default["default"].createElement(InternalChipButton, Object.assign({}, affix.props));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+    function renderChipIcon(icon) {
+        const color = getIconColor();
+        return (React__default["default"].createElement("div", { className: Chips.styles.icon }, React__default["default"].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(!!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__default["default"](Chips.styles.chip, {
+        [Chips.styles.clickable]: isClickable,
+        [Chips.styles.active]: active,
+        [Chips.styles.disabled]: disabled,
+        [Chips.styles.invalid]: invalid,
+        [Chips.styles.hasPrefix]: prefix,
+        [Chips.styles.hasSuffix]: suffix,
+    });
+    const affixProps = { active, invalid, disabled };
+    const Tag = onClick ? "button" : "div";
+    const chip = (React__default["default"].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__default["default"].createElement(InternalChipAffix, Object.assign({ affix: prefix }, affixProps)),
+        React__default["default"].createElement(Typography.Typography, { element: "span", numberOfLines: 1, size: "base" },
+            React__default["default"].createElement("span", { ref: setTruncateRef }, label)),
+        React__default["default"].createElement(InternalChipAffix, Object.assign({ affix: suffix }, affixProps))));
+    return isTruncated() ? React__default["default"].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;
+    }
+}
 
 function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {
-    return (React__default["default"].createElement(Chip.InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default["default"].createElement(Chip.InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
+    return (React__default["default"].createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default["default"].createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
-exports.Chip = Chip.Chip;
-exports.Chips = Chip.Chips;
+exports.Chips = Chips.Chips;
+exports.InternalChipDismissible = Chips.InternalChipDismissible;
+exports.InternalChipMultiSelect = Chips.InternalChipMultiSelect;
+exports.InternalChipSingleSelect = Chips.InternalChipSingleSelect;
+exports.Chip = Chip;
 exports.ChipDismissible = ChipDismissible;

package/dist/{Chip-4d8e6370.js → Chips-5ff2b9d2.js}

@@ -1,131 +1,39 @@
 'use strict';
 
 var React = require('react');
-var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var classnames = require('classnames');
-var useAssert = require('@jobber/hooks/useAssert');
+var Chip = require('./Chip-00e281e9.js');
 var Icon = require('./Icon-405a216c.js');
-var Avatar = require('./Avatar-1aa30ee1.js');
-var Typography = require('./Typography-9bff9c91.js');
-var Tooltip = require('./Tooltip-59dbab5b.js');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
+var uuid = require('uuid');
 var debounce = require('lodash/debounce');
 var reactPopper = require('react-popper');
-var Text = require('./Text-59bde58c.js');
-var Button = require('./Button-d89f2271.js');
+var classnames = require('classnames');
+var Text = require('./Text-54334431.js');
+var Button = require('./Button-db6114a6.js');
 var Spinner = require('./Spinner-9d8fc7ff.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var css_248z$1 = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.zn6onyiQVmA- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.PEnZzMEgbhU- {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  color: rgba(101, 120, 132, 1);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  transition: 200ms ease-in-out;\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.dtysUhwYdG4-,\n.xGaMCAYsdwA- {\n  padding: calc((16px / 4) + (16px / 8)) calc(16px / 2);\n  padding: calc(calc(16px / 4) + calc(16px / 8)) calc(16px / 2);\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n.dtysUhwYdG4- {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.xGaMCAYsdwA- {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n.dtysUhwYdG4-.xGaMCAYsdwA- {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n.SNT7gGV-h-o-,\n.W4D98cvEth4- ~ .PEnZzMEgbhU- {\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  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n.PEnZzMEgbhU-:focus,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU- {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.SNT7gGV-h-o-:hover,\n.W4D98cvEth4- ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-):hover,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-) {\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n.PEnZzMEgbhU-._0hEzaTXK9M0- {\n  border-color: rgb(1, 41, 57);\n  border-color: var(--color-surface--reverse);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\n  background-color: rgb(1, 41, 57);\n  background-color: var(--color-surface--reverse);\n}\n\n.PEnZzMEgbhU-.JApS2787BU8- {\n  border-color: rgb(128, 25, 0);\n  border-color: var(--color-critical--onSurface);\n  color: rgb(128, 25, 0);\n  color: var(--color-critical--onSurface);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-critical--surface);\n}\n\n.PEnZzMEgbhU-.Kg0c8WVgMpg- {\n  border-color: rgb(225, 225, 225);\n  border-color: var(--color-disabled--secondary);\n  color: rgb(181, 181, 181);\n  color: var(--color-disabled);\n  background-color: rgb(225, 225, 225);\n  background-color: var(--color-disabled--secondary);\n}\n\n._0hEzaTXK9M0-.Kg0c8WVgMpg- {\n  border-color: rgb(181, 181, 181);\n  border-color: var(--color-disabled);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(181, 181, 181);\n  background-color: var(--color-disabled);\n}\n\n.JApS2787BU8-.Kg0c8WVgMpg- {\n  border-color: rgb(201, 66, 33);\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n.W4D98cvEth4- {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._0-ZWexS4Gfg- {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._0-ZWexS4Gfg-:hover,\n._0-ZWexS4Gfg-:focus {\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-surface--hover);\n}\n\n._0-ZWexS4Gfg-:focus,\n.SNT7gGV-h-o- ._0-ZWexS4Gfg-:hover {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n.DQPnZP4UZpw- > svg {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n}\n\n.DQPnZP4UZpw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
 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-"};
 styleInject_es.styleInject(css_248z$1);
 
-function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = React.useRef();
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement(InternalChipButton, Object.assign({}, affix.props));
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
-    function renderChipIcon(icon) {
-        const color = getIconColor();
-        return (React__default["default"].createElement("div", { className: styles$1.icon }, React__default["default"].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(!!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__default["default"](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__default["default"].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__default["default"].createElement(InternalChipAffix, Object.assign({ affix: prefix }, affixProps)),
-        React__default["default"].createElement(Typography.Typography, { element: "span", numberOfLines: 1, size: "base" },
-            React__default["default"].createElement("span", { ref: setTruncateRef }, label)),
-        React__default["default"].createElement(InternalChipAffix, Object.assign({ affix: suffix }, affixProps))));
-    return isTruncated() ? React__default["default"].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;
-    }
-}
-
-function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChange, onClick, }) {
+function InternalChipSingleSelect({ children, selected, onChange, onClick, }) {
     return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React__default["default"].Children.map(children, child => {
-        const isSelected = child.props.value === selected;
+        const isSelected = (child === null || child === void 0 ? void 0 : child.props.value) === selected || (child === null || child === void 0 ? void 0 : child.props.label) === selected;
         return (React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "radio", checked: isSelected, className: styles$1.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
+            React__default["default"].createElement("input", { type: "radio", checked: isSelected, className: styles$1.input, onClick: handleClick((child === null || child === void 0 ? void 0 : child.props.value) || ""), onKeyUp: handleKeyUp(isSelected, (child === null || child === void 0 ? void 0 : child.props.value) || ""), onChange: () => {
                     /* No op. onClick handles the change to allow deselecting. */
-                }, disabled: child.props.disabled }),
-            React__default["default"].createElement(InternalChip, Object.assign({}, child.props, { active: isSelected }))));
+                }, disabled: child === null || child === void 0 ? void 0 : child.props.disabled }),
+            React__default["default"].createElement(Chip.Chip, { label: (child === null || child === void 0 ? void 0 : child.props.label) || "", role: "option", actAsFormElement: true },
+                React__default["default"].createElement(Chip.Chip.Suffix, null, isSelected && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", size: "small", color: "heading" }))))));
     })));
     function handleKeyUp(active, value) {
         if (!active)
@@ -151,46 +59,37 @@ function InternalChipSingleSelect({ children, selected, name = uuid.v1(), onChan
 
 function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
     return (React__default["default"].createElement("div", { className: styles$1.wrapper, "data-testid": "multiselect-chips" }, React__default["default"].Children.map(children, chip => {
-        const isChipActive = isChipSelected(chip.props.value);
+        const isChipActive = selected === null || selected === void 0 ? void 0 : selected.includes((chip === null || chip === void 0 ? void 0 : chip.props.value) || (chip === null || chip === void 0 ? void 0 : chip.props.label));
         return (React__default["default"].createElement("label", null,
-            React__default["default"].createElement("input", { type: "checkbox", checked: isChipActive, className: styles$1.input, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
-            React__default["default"].createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
+            React__default["default"].createElement("input", { type: "checkbox", checked: isChipActive, className: styles$1.input, onClick: chip && handleClick(chip.props.value), onChange: chip && handleChange(chip.props.value), disabled: chip === null || chip === void 0 ? void 0 : chip.props.disabled }),
+            chip && (React__default["default"].createElement(Chip.Chip, Object.assign({}, chip.props, { actAsFormElement: true }),
+                React__default["default"].createElement(Chip.Chip.Suffix, null, isChipActive && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", size: "small", color: "heading" })))))));
+        function isChipSelected(value) {
+            return selected === null || selected === void 0 ? void 0 : selected.includes(value);
+        }
+        function handleClick(value) {
+            return (event) => onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
+        }
+        function handleChange(value) {
+            return () => {
+                if (isChipSelected(value)) {
+                    handleDeselect(value);
+                }
+                else {
+                    handleSelect(value);
+                }
+            };
+        }
+        function handleSelect(value) {
+            const newVal = [...(selected || []), value];
+            onChange(newVal);
+        }
+        function handleDeselect(value) {
+            const values = selected;
+            const newVal = values === null || values === void 0 ? void 0 : values.filter(val => val !== value);
+            onChange(newVal || []);
+        }
     })));
-    function isChipSelected(value) {
-        return selected.includes(value);
-    }
-    function handleClick(value) {
-        return (event) => onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
-    }
-    function handleChange(value) {
-        return () => {
-            if (isChipSelected(value)) {
-                handleDeselect(value);
-            }
-            else {
-                handleSelect(value);
-            }
-        };
-    }
-    function handleSelect(value) {
-        const newVal = [...selected, value];
-        onChange(newVal);
-    }
-    function handleDeselect(value) {
-        const values = selected;
-        const newVal = values.filter(val => val !== value);
-        onChange(newVal);
-    }
-    function checkmarkIcon(show) {
-        // Ideally, we should be returning a fragment `<></>` when a function
-        // returns a component / element. However, this one needs to return nothing
-        // to prevent it from randomly rendering a suffix.
-        //
-        // DO NOT COPY!
-        if (!show)
-            return;
-        return React__default["default"].createElement(Icon.Icon, { name: "checkmark" });
-    }
 }
 
 var css_248z = ".sCNIjluCskc- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: calc(16px / 16) solid transparent;\n  border: var(--border-base) solid transparent;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.MFUlz1WQLdk- {\n  -ms-flex: 1;\n      flex: 1;\n  min-width: 120px;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  line-height: 1.25;\n  line-height: var(--typography--lineHeight-base);\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n.MFUlz1WQLdk-:focus {\n  outline: none;\n}\n\n.V9eYJdjPAeY- {\n  position: relative;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n.LdytkOeCU9c- {\n  max-height: 320px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.y7Cz2u8BuNE-,\n._-7bmao8Q9As- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.y7Cz2u8BuNE-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n.y7Cz2u8BuNE-:focus,\n.iCwWdcmtInc- {\n  outline: none;\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-surface--hover);\n}\n\n._-7bmao8Q9As- {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
@@ -199,19 +98,20 @@ styleInject_es.styleInject(css_248z);
 
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
     const ref = React.useRef(null);
-    const chipOptions = children.map(chip => chip.props);
-    const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
-    const sortedVisibleChipOptions = sortBy__default["default"](visibleChipOptions, chip => selected.indexOf(chip.value));
-    const availableChipOptions = chipOptions.filter(chip => !selected.includes(chip.value));
+    const chipOptions = children === null || children === void 0 ? void 0 : children.map(chip => chip.props);
+    const visibleChipOptions = chipOptions === null || chipOptions === void 0 ? void 0 : chipOptions.filter(chip => selected === null || selected === void 0 ? void 0 : selected.includes(chip.value));
+    const sortedVisibleChipOptions = sortBy__default["default"](visibleChipOptions, chip => selected === null || selected === void 0 ? void 0 : selected.indexOf(chip.value));
+    const availableChipOptions = chipOptions === null || chipOptions === void 0 ? void 0 : chipOptions.filter(chip => !(selected === null || selected === void 0 ? void 0 : selected.includes(chip.value)));
     const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
     const actions = {
         handleChipRemove: (value) => {
             return () => {
                 liveAnnounce(`${value} Removed`);
-                onChange(selected.filter(val => val !== value));
+                onChange((selected === null || selected === void 0 ? void 0 : selected.filter(val => val !== value)) || []);
+                onClick && onClick({}, value);
             };
         },
-        handleChipAdd: (value) => onChange([...selected, value]),
+        handleChipAdd: (value) => onChange([...(selected || []), value]),
         handleCustomAdd: onCustomAdd,
         handleChipClick: (value) => {
             if (onClick === undefined)
@@ -268,7 +168,7 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
     const [shouldCancelBlur, setShouldCancelBlur] = React.useState(false);
     const [shouldCancelEnter, setShouldCancelEnter] = React.useState(false);
     const canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
-    const maxOptionIndex = allOptions.length - 1;
+    const maxOptionIndex = (allOptions === null || allOptions === void 0 ? void 0 : allOptions.length) - 1;
     const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
     React.useEffect(() => {
         setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
@@ -276,8 +176,8 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
     const computed = {
         menuId,
         inputRef: React.useRef(null),
-        activeOption: allOptions[activeIndex],
-        hasAvailableOptions: allOptions.length > 0,
+        activeOption: allOptions === null || allOptions === void 0 ? void 0 : allOptions[activeIndex],
+        hasAvailableOptions: (allOptions === null || allOptions === void 0 ? void 0 : allOptions.length) > 0,
         nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
         previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
     };
@@ -365,16 +265,14 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
         shouldCancelBlur });
 }
 function generateOptions(options, searchValue, canAddCustomOption) {
-    const allOptions = options
-        .filter(option => option.label.toLowerCase().match(searchValue.trim().toLowerCase()))
-        .map(opt => (Object.assign(Object.assign({}, opt), { custom: false })));
+    const allOptions = options === null || options === void 0 ? void 0 : options.filter(option => option.label.toLowerCase().match(searchValue.trim().toLowerCase())).map(opt => (Object.assign(Object.assign({}, opt), { custom: false })));
     const { shouldAddCustomOption, customOption } = generateCustomOption(allOptions, searchValue, canAddCustomOption);
     shouldAddCustomOption && allOptions.push(customOption);
     return allOptions;
 }
 function generateCustomOption(options, searchValue, canAddCustomOption) {
     function shouldAddCustomOption() {
-        const isMatchingOption = options.some(option => option.label.toLowerCase() === searchValue.trim().toLowerCase());
+        const isMatchingOption = options === null || options === void 0 ? void 0 : options.some(option => option.label.toLowerCase() === searchValue.trim().toLowerCase());
         return !!searchValue && !isMatchingOption;
     }
     return {
@@ -472,7 +370,7 @@ function InternalChipDismissibleInput(props) {
         React__default["default"].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__default["default"](handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
         (hasAvailableOptions || isLoadingMore) && (React__default["default"].createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
             React__default["default"].createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
-                allOptions.map((option, i) => (React__default["default"].createElement("button", { key: option.value, role: "option", id: generateDescendantId(i), className: classnames__default["default"](styles.menuListOption, {
+                allOptions.map((option, i) => (React__default["default"].createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames__default["default"](styles.menuListOption, {
                         [styles.activeOption]: activeIndex === i,
                     }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
                     React__default["default"].createElement("span", { "aria-hidden": true }, option.prefix),
@@ -485,8 +383,10 @@ function InternalChipDismissibleInput(props) {
 function InternalChipDismissible(props) {
     const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
     return (React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
-        sortedVisibleChipOptions.map(chip => (React__default["default"].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__default["default"].createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
-        React__default["default"].createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
+        sortedVisibleChipOptions.map(chip => (React__default["default"].createElement(Chip.Chip, Object.assign({ key: chip.value }, chip, { onClick: (inVal, ev) => { var _a; return (_a = handleChipClick(inVal)) === null || _a === void 0 ? void 0 : _a(ev); }, value: chip.label, role: "radio", "data-testid": props.dataTestId || "remove-chip-button", ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0 }),
+            React__default["default"].createElement(Chip.Chip.Suffix, { onKeyDown: (ev) => handleChipKeyDown(chip.value)(ev), onClick: handleChipRemove(chip.value) },
+                React__default["default"].createElement(Icon.Icon, { name: "cross", size: "small" }))))),
+        React__default["default"].createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions || [], onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
 }
 
 function Chips(props) {
@@ -500,15 +400,8 @@ function Chips(props) {
     }
 }
 
-// Only need the component to pass in the data as a react children
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function Chip(props) {
-    // Throw error when <Chip /> gets used outside of the <Chips />
-    useAssert.useAssert(true, "`<Chip>` component can only be used inside `<Chips>`");
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
-}
-
-exports.Chip = Chip;
 exports.Chips = Chips;
-exports.InternalChip = InternalChip;
-exports.InternalChipButton = InternalChipButton;
+exports.InternalChipDismissible = InternalChipDismissible;
+exports.InternalChipMultiSelect = InternalChipMultiSelect;
+exports.InternalChipSingleSelect = InternalChipSingleSelect;
+exports.styles = styles$1;

package/dist/Combobox/Combobox.d.ts

@@ -1,18 +1,7 @@
-import { ReactElement } from "react";
+import { ComboboxProps } from "@jobber/components/Combobox/Combobox.types";
 import { ComboboxContent } from "./components/ComboboxContent";
 import { ComboboxAction } from "./components/ComboboxAction";
 import { ComboboxTriggerButton, ComboboxTriggerChip } from "./components/ComboboxTrigger";
-export interface ComboboxProps {
-    readonly children: ReactElement | ReactElement[];
-    /**
-     * When `true`, `Combobox` will allow for multiple selections
-     *
-     * @default false
-     */
-    readonly multiSelect?: boolean;
-}
-export declare const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger element";
-export declare const COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = "Combobox must have a Trigger and Combobox.Content element";
 export declare const Combobox: {
     (props: ComboboxProps): JSX.Element;
     TriggerButton: typeof ComboboxTriggerButton;