@jobber/components 6.82.6 → 6.84.0

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

@@ -2,7 +2,7 @@ import type { ChipProps } from "../Chip";
 import type { 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,9 @@ 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('../../../maxHeight-cjs.js');
 
 
 

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

@@ -15,4 +15,6 @@ 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 '../../../maxHeight-es.js';

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

@@ -1,7 +1,8 @@
 import type { KeyboardEvent, MouseEvent } from "react";
 import type { 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,7 @@
-import type { 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;
+export interface UseRepositionMenu {
+    readonly setFloatingRef: (ref: HTMLElement | null) => void;
+    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;
-};
+}
+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,9 +18,10 @@ 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('../../maxHeight-cjs.js');
 require('classnames');
-require('../../useSafeLayoutEffect-cjs.js');
 require('../../Text-cjs.js');
 require('../../Typography-cjs.js');
 require('../../Button-cjs.js');
@@ -33,9 +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('../../useSafeLayoutEffect-cjs.js');
 require('../../useIsMounted-cjs.js');
 
 

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -16,9 +16,10 @@ 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 '../../maxHeight-es.js';
 import 'classnames';
-import '../../useSafeLayoutEffect-es.js';
 import '../../Text-es.js';
 import '../../Typography-es.js';
 import '../../Button-es.js';
@@ -31,7 +32,6 @@ 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 '../../useSafeLayoutEffect-es.js';
 import '../../useIsMounted-es.js';

package/dist/Chips/index.cjs

@@ -20,9 +20,10 @@ 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('../maxHeight-cjs.js');
 require('classnames');
-require('../useSafeLayoutEffect-cjs.js');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
@@ -34,9 +35,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('../useSafeLayoutEffect-cjs.js');
 require('../useIsMounted-cjs.js');
 
 function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {

package/dist/Chips/index.mjs

@@ -18,9 +18,10 @@ 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 '../maxHeight-es.js';
 import 'classnames';
-import '../useSafeLayoutEffect-es.js';
 import '../Text-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';
@@ -32,9 +33,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 '../useSafeLayoutEffect-es.js';
 import '../useIsMounted-es.js';
 
 function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {

package/dist/FormField/FormFieldPostFix.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 interface FormFieldPostFixProps {
     readonly variation: "select" | "spinner";
     readonly visible?: boolean;
+    readonly className?: string;
 }
-export declare function FormFieldPostFix({ variation, visible, }: FormFieldPostFixProps): React.JSX.Element | null;
+export declare function FormFieldPostFix({ variation, visible, className, }: FormFieldPostFixProps): React.JSX.Element | null;
 export {};

package/dist/FormField-cjs.js

@@ -252,10 +252,10 @@ function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEn
         React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
 }
 
-function FormFieldPostFix({ variation, visible = true, }) {
+function FormFieldPostFix({ variation, visible = true, className, }) {
     if (!visible)
         return null;
-    return (React.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
+    return (React.createElement("span", { className: classnames(styles$1.postfix, className) }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
 }
 
 /**

package/dist/FormField-es.js

@@ -250,10 +250,10 @@ function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEn
         React__default.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
 }
 
-function FormFieldPostFix({ variation, visible = true, }) {
+function FormFieldPostFix({ variation, visible = true, className, }) {
     if (!visible)
         return null;
-    return (React__default.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
+    return (React__default.createElement("span", { className: classnames(styles$1.postfix, className) }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
 }
 
 /**

package/dist/InputTime/index.cjs

@@ -4,8 +4,8 @@ var React = require('react');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 var debounce = require('../debounce-cjs.js');
 var FormField = require('../FormField-cjs.js');
-require('@jobber/design');
 require('classnames');
+require('@jobber/design');
 require('react-hook-form');
 require('../Button-cjs.js');
 var omit = require('../omit-cjs.js');

package/dist/InputTime/index.mjs

@@ -2,8 +2,8 @@ import React__default, { useState, useCallback, useEffect, useRef, useId } from
 import { _ as __rest } from '../tslib.es6-es.js';
 import { a as debounce } from '../debounce-es.js';
 import { j as useFormFieldWrapperStyles, f as FormFieldWrapper, k as FormField } from '../FormField-es.js';
-import '@jobber/design';
 import 'classnames';
+import '@jobber/design';
 import 'react-hook-form';
 import '../Button-es.js';
 import { o as omit } from '../omit-es.js';

package/dist/InternalChipDismissible-cjs.js

@@ -4,9 +4,8 @@ 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,17 +18,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-","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-"};
 
 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);
-    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
-        update === null || update === void 0 ? void 0 : update();
-    }, [allOptions, menuOpen, update, options]);
+    const { styles: floatingStyles, setFloatingRef } = useScrollToActive.useRepositionMenu(attachTo);
     React.useEffect(() => {
         handleDebouncedSearch(searchValue, options);
         return handleDebouncedSearch.cancel;
@@ -41,25 +37,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,8 @@ 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,17 +16,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-","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-"};
 
 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);
-    useSafeLayoutEffect_1(() => {
-        update === null || update === void 0 ? void 0 : update();
-    }, [allOptions, menuOpen, update, options]);
+    const { styles: floatingStyles, setFloatingRef } = useRepositionMenu(attachTo);
     useEffect(() => {
         handleDebouncedSearch(searchValue, options);
         return handleDebouncedSearch.cancel;
@@ -39,25 +35,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/Select/OptionGroup.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { ReactNode } from "react";
+export interface OptionGroupProps {
+    readonly children?: ReactNode;
+    readonly label: string;
+    readonly disabled?: boolean;
+    /**
+     * Use at your own risk: Custom classnames for specific elements. This should only be used as a
+     * last resort. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     *
+     * Additional details: The provided class names are applied to the root `<optgroup>` element.
+     * Only effective when `Select` version={2} is used with `UNSAFE_experimentalStyles`.
+     */
+    readonly UNSAFE_className?: string;
+    /**
+     * Use at your own risk: Custom style for specific elements. This should only be used as a
+     * last resort. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     *
+     * Additional details: Styles are applied directly to the root `<optgroup>` element via
+     * `UNSAFE_style.container`. Only effective when `Select` version={2} is used with
+     * `UNSAFE_experimentalStyles`.
+     */
+    readonly UNSAFE_style?: {
+        container?: React.CSSProperties;
+    };
+}
+export declare function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }: OptionGroupProps): React.JSX.Element;

package/dist/Select/Select.types.d.ts

@@ -14,4 +14,11 @@ export interface SelectRebuiltProps extends Omit<SelectLegacyProps, "defaultValu
     onChange?(newValue?: string | number): void;
     version: 2;
     error?: string;
+    /**
+     * Opt-in to the customizable select UI (Chromium 123+).
+     * When true, the component will apply the custom select styles
+     * Defaults to false for native behavior.
+     * Only supported by Select version={2}.
+     */
+    readonly UNSAFE_experimentalStyles?: boolean;
 }

package/dist/Select/index.cjs

@@ -3,7 +3,7 @@
 var React = require('react');
 var omit = require('../omit-cjs.js');
 var FormField = require('../FormField-cjs.js');
-require('classnames');
+var classnames = require('classnames');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
@@ -67,6 +67,8 @@ function useSelectFormField({ id, name, disabled, autofocus, description, inline
     return { fieldProps, descriptionIdentifier };
 }
 
+var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
+
 function SelectRebuilt(props) {
     var _a, _b;
     const selectRef = (_a = props.inputRef) !== null && _a !== void 0 ? _a : React.useRef(null);
@@ -97,8 +99,8 @@ function SelectRebuilt(props) {
         handleFocus }));
     return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autofocus, name: name, wrapperRef: wrapperRef, error: (_b = props.error) !== null && _b !== void 0 ? _b : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
         React.createElement(React.Fragment, null,
-            React.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: inputStyle }), props.children),
-            React.createElement(FormField.FormFieldPostFix, { variation: "select" }))));
+            React.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }), props.children),
+            React.createElement(FormField.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
 function useSelectId(props) {
     const generatedId = React.useId();
@@ -109,6 +111,10 @@ function SelectOption({ children, disabled, value }) {
     return (React.createElement("option", { disabled: disabled, value: value }, children));
 }
 
+function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }) {
+    return (React.createElement("optgroup", { label: label, disabled: disabled, className: UNSAFE_className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container }, children));
+}
+
 function isNewSelectProps(props) {
     return props.version === 2;
 }
@@ -120,6 +126,8 @@ function Select(props) {
         return React.createElement(Select$1, Object.assign({}, props));
     }
 }
+Select.Option = SelectOption;
+Select.OptionGroup = OptionGroup;
 
 exports.Option = SelectOption;
 exports.Select = Select;

package/dist/Select/index.d.ts

@@ -3,4 +3,8 @@ import { type SelectLegacyProps, type SelectRebuiltProps } from "./Select.types"
 export { Option } from "./Option";
 export type SelectShimProps = SelectLegacyProps | SelectRebuiltProps;
 export declare function Select(props: SelectShimProps): React.JSX.Element;
+export declare namespace Select {
+    var Option: typeof import("./Option").Option;
+    var OptionGroup: typeof import("./OptionGroup").OptionGroup;
+}
 export type { SelectRebuiltProps, SelectLegacyProps };

package/dist/Select/index.mjs

@@ -1,7 +1,7 @@
 import React__default, { useRef, useId } from 'react';
 import { o as omit } from '../omit-es.js';
 import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
-import 'classnames';
+import classnames from 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
@@ -65,6 +65,8 @@ function useSelectFormField({ id, name, disabled, autofocus, description, inline
     return { fieldProps, descriptionIdentifier };
 }
 
+var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
+
 function SelectRebuilt(props) {
     var _a, _b;
     const selectRef = (_a = props.inputRef) !== null && _a !== void 0 ? _a : useRef(null);
@@ -95,8 +97,8 @@ function SelectRebuilt(props) {
         handleFocus }));
     return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autofocus, name: name, wrapperRef: wrapperRef, error: (_b = props.error) !== null && _b !== void 0 ? _b : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
         React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: inputStyle }), props.children),
-            React__default.createElement(FormFieldPostFix, { variation: "select" }))));
+            React__default.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }), props.children),
+            React__default.createElement(FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
 function useSelectId(props) {
     const generatedId = useId();
@@ -107,6 +109,10 @@ function SelectOption({ children, disabled, value }) {
     return (React__default.createElement("option", { disabled: disabled, value: value }, children));
 }
 
+function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }) {
+    return (React__default.createElement("optgroup", { label: label, disabled: disabled, className: UNSAFE_className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container }, children));
+}
+
 function isNewSelectProps(props) {
     return props.version === 2;
 }
@@ -118,5 +124,7 @@ function Select(props) {
         return React__default.createElement(Select$1, Object.assign({}, props));
     }
 }
+Select.Option = SelectOption;
+Select.OptionGroup = OptionGroup;
 
 export { SelectOption as Option, Select };

package/dist/index.cjs

@@ -130,7 +130,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');
@@ -180,6 +179,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

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

@@ -3545,15 +3545,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .F7CpurjKzBI- {
   position: relative;
-  z-index: 6;
-  z-index: var(--elevation-menu);
+  z-index: 1001;
+  z-index: var(--elevation-modal);
   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;
@@ -6024,6 +6021,174 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
   }
 
+/* stylelint-disable selector-pseudo-class-no-unknown */
+/* stylelint-disable selector-pseudo-element-no-unknown */
+/**
+ * Chrome 123+ customizable select styling for option groups
+ * Based on: https://developer.chrome.com/blog/a-customizable-select
+ *
+ * IMPORTANT: All custom styling is gated behind a feature query so that
+ * unsupported browsers fall back to the native select without any layout
+ * regressions in our FormField wrapper.
+ */
+@supports ((-webkit-appearance: base-select) or (appearance: base-select)) {
+    /* opt into customizing select */
+    .-hmXAsAfH9U-,
+    .-hmXAsAfH9U-::picker(select) {
+      -webkit-appearance: base-select;
+              appearance: base-select;
+
+      /* Dropdown styling */
+    }
+      .-hmXAsAfH9U-::picker(select), .-hmXAsAfH9U-::picker(select)::picker(select) {
+        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);
+        margin-top: 8px;
+        margin-top: var(--space-small);
+        padding: 0;
+        border: 1px solid hsl(200, 13%, 87%);
+        border: var(--border-base) solid var(--color-border);
+        border-radius: 8px;
+        border-radius: var(--radius-base);
+        background: rgba(255, 255, 255, 1);
+        background: var(--color-surface);
+      }
+
+    /* enable transitions in the drop down */
+    .-hmXAsAfH9U-::picker(select) {
+      transition:
+        opacity 200ms ease,
+        display 200ms allow-discrete,
+        overlay 200ms allow-discrete,
+        -webkit-transform 200ms ease-out;
+      transition:
+        opacity var(--timing-base) ease,
+        display var(--timing-base) allow-discrete,
+        overlay var(--timing-base) allow-discrete,
+        -webkit-transform var(--timing-base) ease-out;
+      transition:
+        opacity 200ms ease,
+        transform 200ms ease-out,
+        display 200ms allow-discrete,
+        overlay 200ms allow-discrete;
+      transition:
+        opacity var(--timing-base) ease,
+        transform var(--timing-base) ease-out,
+        display var(--timing-base) allow-discrete,
+        overlay var(--timing-base) allow-discrete;
+      transition:
+        opacity 200ms ease,
+        transform 200ms ease-out,
+        display 200ms allow-discrete,
+        overlay 200ms allow-discrete,
+        -webkit-transform 200ms ease-out;
+      transition:
+        opacity var(--timing-base) ease,
+        transform var(--timing-base) ease-out,
+        display var(--timing-base) allow-discrete,
+        overlay var(--timing-base) allow-discrete,
+        -webkit-transform var(--timing-base) ease-out;
+    }
+
+    .-hmXAsAfH9U-::picker-icon {
+      display: none;
+    }
+
+    .-hmXAsAfH9U-:not(:open)::picker(select) {
+      opacity: 0;
+      -webkit-transform: scale(0.95);
+              transform: scale(0.95);
+    }
+
+    .-hmXAsAfH9U-:open::picker(select) {
+      opacity: 1;
+      -webkit-transform: translateY(0) scale(1);
+              transform: translateY(0) scale(1);
+    }
+  .-hmXAsAfH9U- {
+
+    /* options */
+    option {
+      padding: 4px 0;
+      padding: var(--space-smaller) 0;
+      color: hsl(198, 35%, 21%);
+      color: var(--color-text);
+      text-indent: 8px;
+      text-indent: var(--space-small);
+      cursor: pointer;
+    }
+
+    option:hover,
+    option:focus,
+    option:focus-visible,
+    option:checked {
+      background-color: hsl(53, 21%, 93%);
+      background-color: var(--color-surface--hover);
+    }
+
+    /* optgroup headers */
+    optgroup {
+      padding: 8px 0 0 0;
+      padding: var(--space-small) 0 0 0;
+      color: hsl(197, 90%, 12%);
+      color: var(--color-heading);
+      font-size: 14px;
+      font-size: var(--typography--fontSize-base);
+      font-style: normal;
+      font-weight: 700;
+      text-indent: 8px;
+      text-indent: var(--space-small);
+      background-color: transparent;
+    }
+
+    /* Divider directly under the group label */
+    optgroup option:first-child {
+      border-top: 1px solid hsl(200, 13%, 87%);
+      border-top: var(--border-base) solid var(--color-border);
+    }
+
+    /* Disabled groups and their options */
+    optgroup[disabled] {
+      color: hsl(0, 0%, 72%);
+      color: var(--color-disabled);
+    }
+    optgroup[disabled] option,
+    option[disabled] {
+      color: hsl(0, 0%, 72%);
+      color: var(--color-disabled);
+      cursor: default;
+    }
+
+    optgroup[disabled] option:focus,
+    optgroup[disabled] option:focus-visible,
+    optgroup[disabled] option:checked,
+    optgroup[disabled] option:hover,
+    option[disabled]:focus,
+    option[disabled]:focus-visible,
+    option[disabled]:checked,
+    option[disabled]:hover {
+      background-color: transparent;
+    }
+
+    /* Animate the chevron rotation for the provided postfix class */
+  }
+    .-hmXAsAfH9U- + ._5ST4c1fXDYU- svg {
+      transition: -webkit-transform 100ms;
+      transition: -webkit-transform var(--timing-quick);
+      transition: transform 100ms;
+      transition: transform var(--timing-quick);
+      transition: transform 100ms, -webkit-transform 100ms;
+      transition: transform var(--timing-quick), -webkit-transform var(--timing-quick);
+      -webkit-transform-origin: 50% 50%;
+              transform-origin: 50% 50%;
+    }
+    /* Rotate the postfix chevron when the select is open */
+    .-hmXAsAfH9U-:open + ._5ST4c1fXDYU- svg {
+      -webkit-transform: rotate(180deg);
+              transform: rotate(180deg);
+    }
+}
+
 .wMM6V80Rt-w- {
   padding: 16px;
   padding: var(--space-base);

package/dist/useScrollToActive-cjs.js

@@ -11,7 +11,8 @@ 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 maxHeight = require('./maxHeight-cjs.js');
 
 var baseEach = _baseEach._baseEach,
     isArrayLike = isTypedArray.isArrayLike_1;
@@ -310,7 +311,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 +368,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 +574,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 } = 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, rects }) {
+                    const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
+                        maxHeight: PREFERRED_MAX_HEIGHT,
+                    });
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${maxHeight$1}px`,
+                        maxWidth: `${rects.reference.width}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 });
+    return {
+        setFloatingRef: refs.setFloating,
+        styles: {
+            float: floatingStyles,
+        },
+    };
 }
 
 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,8 @@ 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 { 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';
 
 var baseEach = _baseEach,
     isArrayLike = isArrayLike_1;
@@ -308,7 +309,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 +366,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 +572,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 } = useFloating({
+        placement: "bottom",
+        middleware: [
+            offset(ROUNDED_BORDER_ARROW_EDGE_OFFSET),
+            flip({ fallbackPlacements: ["top"] }),
+            size({
+                apply({ availableHeight, elements, rects }) {
+                    const maxHeight = calculateMaxHeight(availableHeight, {
+                        maxHeight: PREFERRED_MAX_HEIGHT,
+                    });
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${maxHeight}px`,
+                        maxWidth: `${rects.reference.width}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 });
+    return {
+        setFloatingRef: refs.setFloating,
+        styles: {
+            float: floatingStyles,
+        },
+    };
 }
 
 function useScrollToActive(index) {

package/dist/utils/meta/meta.json

@@ -166,6 +166,8 @@
     "SegmentedControlContext.Provider",
     "SegmentedControlProvider",
     "Select",
+    "Select.Option",
+    "Select.OptionGroup",
     "SideDrawer",
     "SideDrawer.Actions",
     "SideDrawer.BackButton",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.82.6",
+  "version": "6.84.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -547,5 +547,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "d42f49fcff1b4ff5e5b5a6ce9ef3e16cdaeab281"
+  "gitHead": "6800733d34b235bdbf4d4155d412df1d1efff94b"
 }