@jobber/components 6.82.3 → 6.82.4

package/dist/Chips/InternalChipDismissible/InternalChipDismissibleTypes.d.ts

@@ -2,7 +2,7 @@ import { ChipProps } from "../Chip";
 import { ChipDismissibleProps } from "../ChipsTypes";
 export type InternalChipDismissibleProps = Omit<ChipDismissibleProps, "type">;
 export interface ChipDismissibleInputProps extends Pick<InternalChipDismissibleProps, "activator" | "isLoadingMore" | "onSearch" | "onLoadMore"> {
-    readonly attachTo: HTMLElement | null;
+    readonly attachTo: React.RefObject<Element | null>;
     readonly options: ChipProps[];
     onCustomOptionSelect?(value: string): void;
     onOptionSelect(value: string): void;

package/dist/Chips/InternalChipDismissible/hooks/index.cjs

@@ -17,9 +17,7 @@ require('../../../_setToString-cjs.js');
 require('../../../debounce-cjs.js');
 require('../../../Icon-cjs.js');
 require('@jobber/design');
-require('../../../floating-ui.react-cjs.js');
-require('react-dom');
-require('../../../maxHeight-cjs.js');
+require('react-popper');
 
 
 

package/dist/Chips/InternalChipDismissible/hooks/index.mjs

@@ -15,6 +15,4 @@ import '../../../_setToString-es.js';
 import '../../../debounce-es.js';
 import '../../../Icon-es.js';
 import '@jobber/design';
-import '../../../floating-ui.react-es.js';
-import 'react-dom';
-import '../../../maxHeight-es.js';
+import 'react-popper';

package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissible.d.ts

@@ -1,8 +1,7 @@
 import { KeyboardEvent, MouseEvent } from "react";
 import { InternalChipDismissibleProps } from "../InternalChipDismissibleTypes";
 export declare function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }: InternalChipDismissibleProps): {
-    ref: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
-    wrapperElement: HTMLDivElement | null;
+    ref: import("react").RefObject<HTMLDivElement>;
     sortedVisibleChipOptions: import("../../Chip").ChipProps[];
     availableChipOptions: import("../../Chip").ChipProps[];
     handleChipRemove: (value: string) => () => void;

package/dist/Chips/InternalChipDismissible/hooks/useRepositionMenu.d.ts

@@ -1,10 +1,16 @@
-import React from "react";
-export interface UseRepositionMenu {
-    readonly setFloatingRef: (ref: HTMLElement | null) => void;
-    readonly targetWidth: number | undefined;
-    readonly styles: {
-        float: React.CSSProperties;
+import { RefObject } from "react";
+export declare function useRepositionMenu(attachTo: RefObject<Element | null>): {
+    setPositionedElementRef: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null | undefined>>;
+    targetWidth: number | undefined;
+    styles: {
+        [key: string]: React.CSSProperties;
     };
-    readonly update: () => void;
-}
-export declare function useRepositionMenu(attachTo: HTMLElement | null): UseRepositionMenu;
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+    state: import("@popperjs/core").State | null;
+    update: import("@popperjs/core").Instance["update"] | null;
+    forceUpdate: import("@popperjs/core").Instance["forceUpdate"] | null;
+};

package/dist/Chips/InternalChipDismissible/hooks/useScrollToActive.d.ts

@@ -1 +1 @@
-export declare function useScrollToActive(index: number): import("react").MutableRefObject<HTMLDivElement | null>;
+export declare function useScrollToActive(index: number): import("react").RefObject<HTMLDivElement>;

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -18,9 +18,7 @@ require('../../_setToString-cjs.js');
 require('../../debounce-cjs.js');
 require('../../Icon-cjs.js');
 require('@jobber/design');
-require('../../floating-ui.react-cjs.js');
-require('react-dom');
-require('../../maxHeight-cjs.js');
+require('react-popper');
 require('classnames');
 require('../../useSafeLayoutEffect-cjs.js');
 require('../../Text-cjs.js');
@@ -35,6 +33,8 @@ require('../../Avatar-cjs.js');
 require('color');
 require('../../useChildComponent-cjs.js');
 require('../../Tooltip-cjs.js');
+require('../../floating-ui.react-cjs.js');
+require('react-dom');
 require('framer-motion');
 require('../../useIsMounted-cjs.js');
 

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -16,9 +16,7 @@ import '../../_setToString-es.js';
 import '../../debounce-es.js';
 import '../../Icon-es.js';
 import '@jobber/design';
-import '../../floating-ui.react-es.js';
-import 'react-dom';
-import '../../maxHeight-es.js';
+import 'react-popper';
 import 'classnames';
 import '../../useSafeLayoutEffect-es.js';
 import '../../Text-es.js';
@@ -33,5 +31,7 @@ import '../../Avatar-es.js';
 import 'color';
 import '../../useChildComponent-es.js';
 import '../../Tooltip-es.js';
+import '../../floating-ui.react-es.js';
+import 'react-dom';
 import 'framer-motion';
 import '../../useIsMounted-es.js';

package/dist/Chips/index.cjs

@@ -20,9 +20,7 @@ require('../_setToString-cjs.js');
 require('../debounce-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
-require('../floating-ui.react-cjs.js');
-require('react-dom');
-require('../maxHeight-cjs.js');
+require('react-popper');
 require('classnames');
 require('../useSafeLayoutEffect-cjs.js');
 require('../Text-cjs.js');
@@ -36,6 +34,8 @@ require('../Avatar-cjs.js');
 require('color');
 require('../useChildComponent-cjs.js');
 require('../Tooltip-cjs.js');
+require('../floating-ui.react-cjs.js');
+require('react-dom');
 require('framer-motion');
 require('../useIsMounted-cjs.js');
 

package/dist/Chips/index.mjs

@@ -18,9 +18,7 @@ import '../_setToString-es.js';
 import '../debounce-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
-import '../floating-ui.react-es.js';
-import 'react-dom';
-import '../maxHeight-es.js';
+import 'react-popper';
 import 'classnames';
 import '../useSafeLayoutEffect-es.js';
 import '../Text-es.js';
@@ -34,6 +32,8 @@ import '../Avatar-es.js';
 import 'color';
 import '../useChildComponent-es.js';
 import '../Tooltip-es.js';
+import '../floating-ui.react-es.js';
+import 'react-dom';
 import 'framer-motion';
 import '../useIsMounted-es.js';
 

package/dist/InternalChipDismissible-cjs.js

@@ -4,9 +4,9 @@ var React = require('react');
 var useScrollToActive = require('./useScrollToActive-cjs.js');
 require('./isObjectLike-cjs.js');
 require('@jobber/design');
+require('react-popper');
 var classnames = require('classnames');
 var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
-var floatingUi_react = require('./floating-ui.react-cjs.js');
 var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
 var Spinner = require('./Spinner-cjs.js');
@@ -19,16 +19,14 @@ function InternalChip({ label, active = false, disabled = false, invalid = false
         suffix && React.createElement(Chip.ChipNamespace.Suffix, null, suffix)));
 }
 
-var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
+var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuList":"J8USVG1tjPs-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
 
-// Adding Portal moves it over the limit, but doesn't impact the readabiltiy
-// eslint-disable-next-line max-statements
 function InternalChipDismissibleInput(props) {
     const { activator = React.createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
     const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, showInput, generateDescendantId, handleBlur, handleFocus, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleShowInput, handleDebouncedSearch, } = useScrollToActive.useInternalChipDismissibleInput(props);
-    const scrollableRef = useScrollToActive.useScrollToActive(activeIndex);
+    const menuRef = useScrollToActive.useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useScrollToActive.useInView();
-    const { styles: floatingStyles, update, setFloatingRef, } = useScrollToActive.useRepositionMenu(attachTo);
+    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useScrollToActive.useRepositionMenu(attachTo);
     useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
         update === null || update === void 0 ? void 0 : update();
     }, [allOptions, menuOpen, update, options]);
@@ -43,28 +41,25 @@ function InternalChipDismissibleInput(props) {
         return React.cloneElement(activator, { onClick: handleShowInput });
     }
     const shouldShowMenu = menuOpen && (hasAvailableOptions || isLoadingMore);
-    const menuContent = (React.createElement("div", { ref: node => {
-            setFloatingRef(node);
-            scrollableRef.current = node;
-        }, role: "listbox", id: menuId, className: styles.menu, style: floatingStyles.float, "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 })))));
     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": shouldShowMenu, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: () => setTimeout(handleBlur, 200), onFocus: handleFocus, autoFocus: true }),
-        shouldShowMenu && React.createElement(floatingUi_react.FloatingPortal, null, menuContent)));
+        shouldShowMenu && (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, wrapperElement, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useScrollToActive.useInternalChipDismissible(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(Chip.InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
-        React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperElement, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore, onlyShowMenuOnSearch: props.onlyShowMenuOnSearch, autoSelectOnClickOutside: props.autoSelectOnClickOutside })));
+        React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore, onlyShowMenuOnSearch: props.onlyShowMenuOnSearch, autoSelectOnClickOutside: props.autoSelectOnClickOutside })));
 }
 
 exports.InternalChip = InternalChip;

package/dist/InternalChipDismissible-es.js

@@ -2,9 +2,9 @@ import React__default, { useEffect } from 'react';
 import { a as useInternalChipDismissibleInput, d as useScrollToActive, b as useInView, c as useRepositionMenu, u as useInternalChipDismissible } from './useScrollToActive-es.js';
 import './isObjectLike-es.js';
 import '@jobber/design';
+import 'react-popper';
 import classnames from 'classnames';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
-import { F as FloatingPortal } from './floating-ui.react-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { S as Spinner } from './Spinner-es.js';
@@ -17,16 +17,14 @@ function InternalChip({ label, active = false, disabled = false, invalid = false
         suffix && React__default.createElement(ChipNamespace.Suffix, null, suffix)));
 }
 
-var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
+var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuList":"J8USVG1tjPs-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
 
-// Adding Portal moves it over the limit, but doesn't impact the readabiltiy
-// eslint-disable-next-line max-statements
 function InternalChipDismissibleInput(props) {
     const { activator = React__default.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
     const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, showInput, generateDescendantId, handleBlur, handleFocus, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleShowInput, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
-    const scrollableRef = useScrollToActive(activeIndex);
+    const menuRef = useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useInView();
-    const { styles: floatingStyles, update, setFloatingRef, } = useRepositionMenu(attachTo);
+    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useRepositionMenu(attachTo);
     useSafeLayoutEffect_1(() => {
         update === null || update === void 0 ? void 0 : update();
     }, [allOptions, menuOpen, update, options]);
@@ -41,28 +39,25 @@ function InternalChipDismissibleInput(props) {
         return React__default.cloneElement(activator, { onClick: handleShowInput });
     }
     const shouldShowMenu = menuOpen && (hasAvailableOptions || isLoadingMore);
-    const menuContent = (React__default.createElement("div", { ref: node => {
-            setFloatingRef(node);
-            scrollableRef.current = node;
-        }, role: "listbox", id: menuId, className: styles.menu, style: floatingStyles.float, "data-testid": "chip-menu" },
-        allOptions.map((option, i) => (React__default.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__default.createElement("span", { "aria-hidden": true }, option.prefix),
-            React__default.createElement(Text, null, option.label)))),
-        React__default.createElement("div", { ref: visibleChildRef }),
-        isLoadingMore && (React__default.createElement("div", { className: styles.loadingIndicator },
-            React__default.createElement(Spinner, { size: "small", inline: true })))));
     return (React__default.createElement(React__default.Fragment, null,
         React__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": shouldShowMenu, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: () => setTimeout(handleBlur, 200), onFocus: handleFocus, autoFocus: true }),
-        shouldShowMenu && React__default.createElement(FloatingPortal, null, menuContent)));
+        shouldShowMenu && (React__default.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
+            React__default.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
+                allOptions.map((option, i) => (React__default.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__default.createElement("span", { "aria-hidden": true }, option.prefix),
+                    React__default.createElement(Text, null, option.label)))),
+                React__default.createElement("div", { ref: visibleChildRef }),
+                isLoadingMore && (React__default.createElement("div", { className: styles.loadingIndicator },
+                    React__default.createElement(Spinner, { size: "small", inline: true }))))))));
 }
 
 function InternalChipDismissible(props) {
-    const { availableChipOptions, ref: wrapperRef, wrapperElement, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
+    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
     return (React__default.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
         sortedVisibleChipOptions.map(chip => (React__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.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
-        React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperElement, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore, onlyShowMenuOnSearch: props.onlyShowMenuOnSearch, autoSelectOnClickOutside: props.autoSelectOnClickOutside })));
+        React__default.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore, onlyShowMenuOnSearch: props.onlyShowMenuOnSearch, autoSelectOnClickOutside: props.autoSelectOnClickOutside })));
 }
 
 export { InternalChipDismissible as I, InternalChip as a };

package/dist/index.cjs

@@ -130,6 +130,7 @@ require('./_getTag-cjs.js');
 require('./isSymbol-cjs.js');
 require('./_baseEach-cjs.js');
 require('./debounce-cjs.js');
+require('react-popper');
 require('./ComboboxContent-cjs.js');
 require('./ComboboxContentSearch-cjs.js');
 require('./ComboboxContentList-cjs.js');
@@ -179,7 +180,6 @@ require('./DataListAction-cjs.js');
 require('./DataListLayoutActions-cjs.js');
 require('./DataListStatusBar-cjs.js');
 require('./throttle-cjs.js');
-require('react-popper');
 require('./omit-cjs.js');
 require('./useFormFieldFocus-cjs.js');
 require('filesize');

package/dist/index.mjs

@@ -128,6 +128,7 @@ import './_getTag-es.js';
 import './isSymbol-es.js';
 import './_baseEach-es.js';
 import './debounce-es.js';
+import 'react-popper';
 import './ComboboxContent-es.js';
 import './ComboboxContentSearch-es.js';
 import './ComboboxContentList-es.js';
@@ -177,7 +178,6 @@ import './DataListAction-es.js';
 import './DataListLayoutActions-es.js';
 import './DataListStatusBar-es.js';
 import './throttle-es.js';
-import 'react-popper';
 import './omit-es.js';
 import './useFormFieldFocus-es.js';
 import 'filesize';

package/dist/styles.css

@@ -3548,9 +3548,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   z-index: 6;
   z-index: var(--elevation-menu);
   width: 100%;
+}
+
+.J8USVG1tjPs- {
+  max-height: 320px;
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--shadow-base);
-  box-sizing: border-box;
   padding: 8px 0;
   padding: var(--space-small) 0;
   border-radius: 8px;

package/dist/useScrollToActive-cjs.js

@@ -11,8 +11,7 @@ var identity$1 = require('./identity-cjs.js');
 var _isIterateeCall = require('./_isIterateeCall-cjs.js');
 var debounce = require('./debounce-cjs.js');
 var Icon = require('./Icon-cjs.js');
-var floatingUi_react = require('./floating-ui.react-cjs.js');
-var maxHeight = require('./maxHeight-cjs.js');
+var reactPopper = require('react-popper');
 
 var baseEach = _baseEach._baseEach,
     isArrayLike = isTypedArray.isArrayLike_1;
@@ -311,7 +310,7 @@ function findFocusableElement(element, direction) {
     return findFocusableElement(nextElement, direction);
 }
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
-    const [wrapperElement, setWrapperElement] = React.useState(null);
+    const ref = React.useRef(null);
     const chipOptions = children.map(chip => chip.props);
     const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
     const sortedVisibleChipOptions = sortBy$1(visibleChipOptions, chip => selected.indexOf(chip.value));
@@ -368,7 +367,7 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
             };
         },
     };
-    return Object.assign(Object.assign({}, actions), { ref: setWrapperElement, wrapperElement,
+    return Object.assign(Object.assign({}, actions), { ref,
         sortedVisibleChipOptions,
         availableChipOptions });
 }
@@ -574,39 +573,17 @@ function useInView() {
     return { ref, isInView };
 }
 
-const ROUNDED_BORDER_ARROW_EDGE_OFFSET = 8;
-const PREFERRED_MAX_HEIGHT = 320;
 function useRepositionMenu(attachTo) {
-    const { refs, floatingStyles, update } = floatingUi_react.useFloating({
-        placement: "bottom",
-        middleware: [
-            floatingUi_react.offset(ROUNDED_BORDER_ARROW_EDGE_OFFSET),
-            floatingUi_react.flip({ fallbackPlacements: ["top"] }),
-            floatingUi_react.size({
-                apply({ availableHeight, elements }) {
-                    const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
-                        maxHeight: PREFERRED_MAX_HEIGHT,
-                    });
-                    Object.assign(elements.floating.style, {
-                        maxHeight: `${maxHeight$1}px`,
-                    });
-                },
-            }),
+    var _a;
+    const [positionElement, setPositionedElementRef] = React.useState();
+    const popper = reactPopper.usePopper(attachTo.current, positionElement, {
+        modifiers: [
+            { name: "offset", options: { offset: [0, 8] } },
+            { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
-        elements: {
-            reference: attachTo,
-        },
-        whileElementsMounted: floatingUi_react.autoUpdate,
     });
-    const targetWidth = attachTo === null || attachTo === void 0 ? void 0 : attachTo.clientWidth;
-    return {
-        setFloatingRef: refs.setFloating,
-        targetWidth,
-        styles: {
-            float: floatingStyles,
-        },
-        update,
-    };
+    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return Object.assign(Object.assign({}, popper), { setPositionedElementRef, targetWidth });
 }
 
 function useScrollToActive(index) {

package/dist/useScrollToActive-es.js

@@ -1,4 +1,4 @@
-import React__default, { useState, useId, useEffect, useRef } from 'react';
+import React__default, { useRef, useId, useState, useEffect } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { _ as _baseFlatten } from './_baseFlatten-es.js';
 import { a as _arrayMap, b as _baseGet } from './_baseGet-es.js';
@@ -9,8 +9,7 @@ import { i as identity_1 } from './identity-es.js';
 import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-es.js';
 import { a as debounce } from './debounce-es.js';
 import { I as Icon } from './Icon-es.js';
-import { u as useFloating, o as offset, f as flip, e as size, b as autoUpdate } from './floating-ui.react-es.js';
-import { c as calculateMaxHeight } from './maxHeight-es.js';
+import { usePopper } from 'react-popper';
 
 var baseEach = _baseEach,
     isArrayLike = isArrayLike_1;
@@ -309,7 +308,7 @@ function findFocusableElement(element, direction) {
     return findFocusableElement(nextElement, direction);
 }
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
-    const [wrapperElement, setWrapperElement] = useState(null);
+    const ref = useRef(null);
     const chipOptions = children.map(chip => chip.props);
     const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
     const sortedVisibleChipOptions = sortBy$1(visibleChipOptions, chip => selected.indexOf(chip.value));
@@ -366,7 +365,7 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
             };
         },
     };
-    return Object.assign(Object.assign({}, actions), { ref: setWrapperElement, wrapperElement,
+    return Object.assign(Object.assign({}, actions), { ref,
         sortedVisibleChipOptions,
         availableChipOptions });
 }
@@ -572,39 +571,17 @@ function useInView() {
     return { ref, isInView };
 }
 
-const ROUNDED_BORDER_ARROW_EDGE_OFFSET = 8;
-const PREFERRED_MAX_HEIGHT = 320;
 function useRepositionMenu(attachTo) {
-    const { refs, floatingStyles, update } = useFloating({
-        placement: "bottom",
-        middleware: [
-            offset(ROUNDED_BORDER_ARROW_EDGE_OFFSET),
-            flip({ fallbackPlacements: ["top"] }),
-            size({
-                apply({ availableHeight, elements }) {
-                    const maxHeight = calculateMaxHeight(availableHeight, {
-                        maxHeight: PREFERRED_MAX_HEIGHT,
-                    });
-                    Object.assign(elements.floating.style, {
-                        maxHeight: `${maxHeight}px`,
-                    });
-                },
-            }),
+    var _a;
+    const [positionElement, setPositionedElementRef] = useState();
+    const popper = usePopper(attachTo.current, positionElement, {
+        modifiers: [
+            { name: "offset", options: { offset: [0, 8] } },
+            { name: "flip", options: { fallbackPlacements: ["top"] } },
         ],
-        elements: {
-            reference: attachTo,
-        },
-        whileElementsMounted: autoUpdate,
     });
-    const targetWidth = attachTo === null || attachTo === void 0 ? void 0 : attachTo.clientWidth;
-    return {
-        setFloatingRef: refs.setFloating,
-        targetWidth,
-        styles: {
-            float: floatingStyles,
-        },
-        update,
-    };
+    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return Object.assign(Object.assign({}, popper), { setPositionedElementRef, targetWidth });
 }
 
 function useScrollToActive(index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.82.3",
+  "version": "6.82.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "1932bb5064a852b919486f264c599774d6bb596f"
+  "gitHead": "e427b1ce17860ffc8afd9ee3dccc75b4a89bdf2f"
 }