@jobber/components 6.75.2 → 6.76.0

package/dist/Autocomplete-es.js

@@ -3,7 +3,7 @@ import React__default, { useCallback, useEffect, useState, forwardRef, useMemo,
 import { u as useDebounce_2 } from './useDebounce-es.js';
 import classnames from 'classnames';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
-import { b as useFloating, o as offset, i as flip, q as size, d as autoUpdate, h as FloatingPortal } from './floating-ui.react-es.js';
+import { b as useFloating, o as offset, i as flip, q as size, d as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';

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: React.RefObject<Element | null>;
+    readonly attachTo: HTMLElement | null;
     readonly options: ChipProps[];
     onCustomOptionSelect?(value: string): void;
     onOptionSelect(value: string): void;

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

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

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

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

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

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

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

@@ -1,16 +1,10 @@
-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;
+import React from "react";
+export interface UseRepositionMenu {
+    readonly setFloatingRef: (ref: HTMLElement | null) => void;
+    readonly targetWidth: number | undefined;
+    readonly styles: {
+        float: React.CSSProperties;
     };
-    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;
-};
+    readonly update: () => void;
+}
+export declare function useRepositionMenu(attachTo: HTMLElement | null): UseRepositionMenu;

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

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

package/dist/Chips/InternalChipDismissible/index.cjs

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

package/dist/Chips/InternalChipDismissible/index.mjs

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

package/dist/Chips/index.cjs

@@ -20,7 +20,8 @@ require('../_setToString-cjs.js');
 require('../debounce-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
-require('react-popper');
+require('../floating-ui.react-cjs.js');
+require('react-dom');
 require('classnames');
 require('../useSafeLayoutEffect-cjs.js');
 require('../Text-cjs.js');
@@ -34,9 +35,9 @@ require('../Avatar-cjs.js');
 require('color');
 require('../useChildComponent-cjs.js');
 require('../Tooltip-cjs.js');
-require('react-dom');
 require('framer-motion');
 require('../useIsMounted-cjs.js');
+require('react-popper');
 
 function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {
     return (React.createElement(InternalChipDismissible.InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React.createElement(Chip$1.InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));

package/dist/Chips/index.mjs

@@ -18,7 +18,8 @@ import '../_setToString-es.js';
 import '../debounce-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
-import 'react-popper';
+import '../floating-ui.react-es.js';
+import 'react-dom';
 import 'classnames';
 import '../useSafeLayoutEffect-es.js';
 import '../Text-es.js';
@@ -32,9 +33,9 @@ import '../Avatar-es.js';
 import 'color';
 import '../useChildComponent-es.js';
 import '../Tooltip-es.js';
-import 'react-dom';
 import 'framer-motion';
 import '../useIsMounted-es.js';
+import 'react-popper';
 
 function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {
     return (React__default.createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default.createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));

package/dist/ComboboxContent-es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext, useRef, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
-import { u as useFloatingParentNodeId, a as useFloatingNodeId, b as useFloating, c as autoPlacement, o as offset, s as shift, d as autoUpdate, e as useDismiss, f as useInteractions, F as FloatingTree, g as FloatingNode, h as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloatingParentNodeId, a as useFloatingNodeId, b as useFloating, c as autoPlacement, o as offset, s as shift, d as autoUpdate, e as useDismiss, f as useInteractions, g as FloatingTree, h as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
 import { C as ComboboxContentSearch } from './ComboboxContentSearch-es.js';
 import { C as ComboboxContentList } from './ComboboxContentList-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,14 +19,16 @@ 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-","menuList":"J8USVG1tjPs-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
+var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","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 menuRef = useScrollToActive.useScrollToActive(activeIndex);
+    const scrollableRef = useScrollToActive.useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useScrollToActive.useInView();
-    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useScrollToActive.useRepositionMenu(attachTo);
+    const { styles: floatingStyles, update, setFloatingRef, } = useScrollToActive.useRepositionMenu(attachTo);
     useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
         update === null || update === void 0 ? void 0 : update();
     }, [allOptions, menuOpen, update, options]);
@@ -41,25 +43,28 @@ 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("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 }))))))));
+        shouldShowMenu && React.createElement(floatingUi_react.FloatingPortal, null, menuContent)));
 }
 
 function InternalChipDismissible(props) {
-    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useScrollToActive.useInternalChipDismissible(props);
+    const { availableChipOptions, ref: wrapperRef, wrapperElement, 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: wrapperRef, 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: wrapperElement, 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,14 +17,16 @@ 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-","menuList":"J8USVG1tjPs-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
+var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","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 menuRef = useScrollToActive(activeIndex);
+    const scrollableRef = useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useInView();
-    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useRepositionMenu(attachTo);
+    const { styles: floatingStyles, update, setFloatingRef, } = useRepositionMenu(attachTo);
     useSafeLayoutEffect_1(() => {
         update === null || update === void 0 ? void 0 : update();
     }, [allOptions, menuOpen, update, options]);
@@ -39,25 +41,28 @@ 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("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 }))))))));
+        shouldShowMenu && React__default.createElement(FloatingPortal, null, menuContent)));
 }
 
 function InternalChipDismissible(props) {
-    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
+    const { availableChipOptions, ref: wrapperRef, wrapperElement, 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: wrapperRef, 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: wrapperElement, 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/Modal/index.mjs

@@ -9,7 +9,7 @@ import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
-import { a as useFloatingNodeId, b as useFloating, k as useClick, e as useDismiss, m as useRole, f as useInteractions, u as useFloatingParentNodeId, F as FloatingTree, g as FloatingNode, h as FloatingPortal, n as FloatingOverlay, p as FloatingFocusManager } from '../floating-ui.react-es.js';
+import { a as useFloatingNodeId, b as useFloating, k as useClick, e as useDismiss, m as useRole, f as useInteractions, u as useFloatingParentNodeId, g as FloatingTree, h as FloatingNode, F as FloatingPortal, n as FloatingOverlay, p as FloatingFocusManager } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';

package/dist/floating-ui.react-es.js

@@ -6029,4 +6029,4 @@ function useRole(context, props) {
   } : {}, [enabled, reference, floating, item]);
 }
 
-export { FloatingTree as F, useFloatingNodeId as a, useFloating as b, autoPlacement as c, autoUpdate as d, useDismiss as e, useInteractions as f, FloatingNode as g, FloatingPortal as h, flip as i, arrow as j, useClick as k, limitShift as l, useRole as m, FloatingOverlay as n, offset as o, FloatingFocusManager as p, size as q, shift as s, useFloatingParentNodeId as u };
+export { FloatingPortal as F, useFloatingNodeId as a, useFloating as b, autoPlacement as c, autoUpdate as d, useDismiss as e, useInteractions as f, FloatingTree as g, FloatingNode as h, flip as i, arrow as j, useClick as k, limitShift as l, useRole as m, FloatingOverlay as n, offset as o, FloatingFocusManager as p, size as q, shift as s, useFloatingParentNodeId as u };

package/dist/index.cjs

@@ -128,7 +128,6 @@ 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');
@@ -178,6 +177,7 @@ 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

@@ -126,7 +126,6 @@ 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';
@@ -176,6 +175,7 @@ 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,12 +3548,9 @@ 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,7 +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 reactPopper = require('react-popper');
+var floatingUi_react = require('./floating-ui.react-cjs.js');
 
 var baseEach = _baseEach._baseEach,
     isArrayLike = isTypedArray.isArrayLike_1;
@@ -310,7 +310,7 @@ function findFocusableElement(element, direction) {
     return findFocusableElement(nextElement, direction);
 }
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
-    const ref = React.useRef(null);
+    const [wrapperElement, setWrapperElement] = React.useState(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));
@@ -367,7 +367,7 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
             };
         },
     };
-    return Object.assign(Object.assign({}, actions), { ref,
+    return Object.assign(Object.assign({}, actions), { ref: setWrapperElement, wrapperElement,
         sortedVisibleChipOptions,
         availableChipOptions });
 }
@@ -573,17 +573,37 @@ function useInView() {
     return { ref, isInView };
 }
 
+const ROUNDED_BORDER_ARROW_EDGE_OFFSET = 8;
+const PREFERRED_MAX_HEIGHT = 320;
 function useRepositionMenu(attachTo) {
-    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"] } },
+    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 = Math.min(PREFERRED_MAX_HEIGHT, availableHeight);
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${maxHeight}px`,
+                    });
+                },
+            }),
         ],
+        elements: {
+            reference: attachTo,
+        },
+        whileElementsMounted: floatingUi_react.autoUpdate,
     });
-    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    return Object.assign(Object.assign({}, popper), { setPositionedElementRef, targetWidth });
+    const targetWidth = attachTo === null || attachTo === void 0 ? void 0 : attachTo.clientWidth;
+    return {
+        setFloatingRef: refs.setFloating,
+        targetWidth,
+        styles: {
+            float: floatingStyles,
+        },
+        update,
+    };
 }
 
 function useScrollToActive(index) {

package/dist/useScrollToActive-es.js

@@ -1,4 +1,4 @@
-import React__default, { useRef, useId, useState, useEffect } from 'react';
+import React__default, { useState, useId, useEffect, useRef } 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,7 +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 { usePopper } from 'react-popper';
+import { b as useFloating, o as offset, i as flip, q as size, d as autoUpdate } from './floating-ui.react-es.js';
 
 var baseEach = _baseEach,
     isArrayLike = isArrayLike_1;
@@ -308,7 +308,7 @@ function findFocusableElement(element, direction) {
     return findFocusableElement(nextElement, direction);
 }
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
-    const ref = useRef(null);
+    const [wrapperElement, setWrapperElement] = useState(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));
@@ -365,7 +365,7 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
             };
         },
     };
-    return Object.assign(Object.assign({}, actions), { ref,
+    return Object.assign(Object.assign({}, actions), { ref: setWrapperElement, wrapperElement,
         sortedVisibleChipOptions,
         availableChipOptions });
 }
@@ -571,17 +571,37 @@ function useInView() {
     return { ref, isInView };
 }
 
+const ROUNDED_BORDER_ARROW_EDGE_OFFSET = 8;
+const PREFERRED_MAX_HEIGHT = 320;
 function useRepositionMenu(attachTo) {
-    var _a;
-    const [positionElement, setPositionedElementRef] = useState();
-    const popper = usePopper(attachTo.current, positionElement, {
-        modifiers: [
-            { name: "offset", options: { offset: [0, 8] } },
-            { name: "flip", options: { fallbackPlacements: ["top"] } },
+    const { refs, floatingStyles, update } = useFloating({
+        placement: "bottom",
+        middleware: [
+            offset(ROUNDED_BORDER_ARROW_EDGE_OFFSET),
+            flip({ fallbackPlacements: ["top"] }),
+            size({
+                apply({ availableHeight, elements }) {
+                    const maxHeight = Math.min(PREFERRED_MAX_HEIGHT, availableHeight);
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${maxHeight}px`,
+                    });
+                },
+            }),
         ],
+        elements: {
+            reference: attachTo,
+        },
+        whileElementsMounted: autoUpdate,
     });
-    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    return Object.assign(Object.assign({}, popper), { setPositionedElementRef, targetWidth });
+    const targetWidth = attachTo === null || attachTo === void 0 ? void 0 : attachTo.clientWidth;
+    return {
+        setFloatingRef: refs.setFloating,
+        targetWidth,
+        styles: {
+            float: floatingStyles,
+        },
+        update,
+    };
 }
 
 function useScrollToActive(index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.75.2",
+  "version": "6.76.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "bb84b11ab06015d9d2b114dd459478572be3baa2"
+  "gitHead": "662d5d1d30f55231de5d9a0754d21f1829cd594e"
 }