@jobber/components 6.83.0 → 6.85.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/Flex/Flex.types.d.ts

@@ -1,6 +1,6 @@
 export type ColumnKeys = "shrink" | "grow";
 export type Direction = "row" | "column";
-export declare const spacing: readonly ["none", "smallest", "smaller", "small", "base", "large"];
+export declare const spacing: readonly ["none", "minuscule", "smallest", "smaller", "small", "slim", "base", "large", "larger", "largest", "extravagant"];
 type ValuesOfSpacing<T extends typeof spacing> = T[number];
 export type Spacing = ValuesOfSpacing<typeof spacing>;
 export {};

package/dist/Flex-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var classnames = require('classnames');
 
-var styles = {"flexible":"pEdV7Oo29SE-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};
+var styles = {"flexible":"pEdV7Oo29SE-","minusculeGap":"Zm7CagsL-WU-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","slimGap":"odJ-gd44AYY-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","largerGap":"l-DqnL94mmw-","largestGap":"_4bEByMh7pHI-","extravagantGap":"pdH9lzFTcIc-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};
 
 function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
     return (React.createElement("div", { className: classnames(styles.flexible, {

package/dist/Flex-es.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import classnames from 'classnames';
 
-var styles = {"flexible":"pEdV7Oo29SE-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};
+var styles = {"flexible":"pEdV7Oo29SE-","minusculeGap":"Zm7CagsL-WU-","smallestGap":"ftl4BEGpmyA-","smallerGap":"ikaEWOhu3ZI-","smallGap":"V9xi4msiJlM-","slimGap":"odJ-gd44AYY-","baseGap":"Jzbdj1Ja38E-","largeGap":"cLrQOLCo-z8-","largerGap":"l-DqnL94mmw-","largestGap":"_4bEByMh7pHI-","extravagantGap":"pdH9lzFTcIc-","noneGap":"VZokN5bjMl0-","startAlign":"_9CW5WRJdMFo-","centerAlign":"zVzX2gVWEGw-","endAlign":"cnhrFSJxBCo-","spinning":"WKqP-JY0YEw-"};
 
 function Flex({ align = "center", children, direction = "row", gap = "base", template, }) {
     return (React__default.createElement("div", { className: classnames(styles.flexible, {

package/dist/Grid/Grid.d.ts

@@ -2,11 +2,18 @@ import type { ReactNode } from "react";
 import React from "react";
 import alignments from "./GridAlign.module.css";
 import { GridCell } from "./GridCell";
-interface GridProps {
+import type { GapSpacing } from "../sharedHelpers/types";
+export interface GridProps {
     /**
-     * Add spacing between elements.
+     * Add spacing between elements. Can be a boolean for default spacing,
+     * or a semantic token for custom spacing.
+     * @default true
+     *
+     * @deprecated The boolean type for the 'gap' prop is deprecated and will be removed in a future version.
+     * Please use a GapSpacing token (e.g., 'small', 'base', 'large') for fixed spacing.
+     * Using 'true' applies default responsive spacing. Using 'false' results in no gap.
      */
-    readonly gap?: boolean;
+    readonly gap?: boolean | GapSpacing;
     /**
      * Adjust the alignment of columns. We only support a few select properties
      * from `align-items` due to the nature of the other properties acting the
@@ -23,4 +30,3 @@ export declare function Grid({ alignItems, gap, children, }: GridProps): React.J
 export declare namespace Grid {
     var Cell: typeof GridCell;
 }
-export {};

package/dist/Grid/index.cjs

@@ -4,6 +4,7 @@ var Grid = require('../Grid-cjs.js');
 require('react');
 require('classnames');
 require('../GridCell-cjs.js');
+require('../getMappedAtlantisSpaceToken-cjs.js');
 
 
 

package/dist/Grid/index.mjs

@@ -2,3 +2,4 @@ export { G as GRID_TEST_ID, a as Grid } from '../Grid-es.js';
 import 'react';
 import 'classnames';
 import '../GridCell-es.js';
+import '../getMappedAtlantisSpaceToken-es.js';

package/dist/Grid-cjs.js

@@ -3,17 +3,29 @@
 var React = require('react');
 var classnames = require('classnames');
 var GridCell = require('./GridCell-cjs.js');
+var getMappedAtlantisSpaceToken = require('./getMappedAtlantisSpaceToken-cjs.js');
 
 var styles = {"grid":"_0X4jj5NERa4-","gap":"d3vl57tdCWA-","spinning":"Y--XfgJk5Fw-"};
 
 var alignments = {"center":"V-24AGDyie4-","start":"H0zdYNTapmM-","end":"O5VtcGWRV3M-","stretch":"wVv5gaWrouI-","spinning":"DcsVgHCowbg-"};
 
 const GRID_TEST_ID = "ATL-Grid";
+function getGapStyles(gap) {
+    if (typeof gap === "boolean") {
+        if (gap === true) {
+            return { className: styles.gap };
+        }
+        return {};
+    }
+    const gapValue = getMappedAtlantisSpaceToken.getMappedAtlantisSpaceToken(gap);
+    if (gapValue) {
+        return { style: { gap: gapValue } };
+    }
+    return {};
+}
 function Grid({ alignItems = "start", gap = true, children, }) {
-    const classnames$1 = classnames(styles.grid, alignments[alignItems], {
-        [styles.gap]: gap,
-    });
-    return (React.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames$1 }, children));
+    const { className: gapClass, style: gapStyle } = getGapStyles(gap);
+    return (React.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames(styles.grid, alignments[alignItems], gapClass), style: gapStyle }, children));
 }
 Grid.Cell = GridCell.GridCell;
 

package/dist/Grid-es.js

@@ -1,17 +1,29 @@
 import React__default from 'react';
 import classnames from 'classnames';
 import { a as GridCell } from './GridCell-es.js';
+import { g as getMappedAtlantisSpaceToken } from './getMappedAtlantisSpaceToken-es.js';
 
 var styles = {"grid":"_0X4jj5NERa4-","gap":"d3vl57tdCWA-","spinning":"Y--XfgJk5Fw-"};
 
 var alignments = {"center":"V-24AGDyie4-","start":"H0zdYNTapmM-","end":"O5VtcGWRV3M-","stretch":"wVv5gaWrouI-","spinning":"DcsVgHCowbg-"};
 
 const GRID_TEST_ID = "ATL-Grid";
+function getGapStyles(gap) {
+    if (typeof gap === "boolean") {
+        if (gap === true) {
+            return { className: styles.gap };
+        }
+        return {};
+    }
+    const gapValue = getMappedAtlantisSpaceToken(gap);
+    if (gapValue) {
+        return { style: { gap: gapValue } };
+    }
+    return {};
+}
 function Grid({ alignItems = "start", gap = true, children, }) {
-    const classnames$1 = classnames(styles.grid, alignments[alignItems], {
-        [styles.gap]: gap,
-    });
-    return (React__default.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames$1 }, children));
+    const { className: gapClass, style: gapStyle } = getGapStyles(gap);
+    return (React__default.createElement("div", { "data-testid": GRID_TEST_ID, className: classnames(styles.grid, alignments[alignItems], gapClass), style: gapStyle }, children));
 }
 Grid.Cell = GridCell;
 

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/getMappedAtlantisSpaceToken-cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const spaceTokens = {
+    none: "0px",
     minuscule: "var(--space-minuscule)",
     slim: "var(--space-slim)",
     smallest: "var(--space-smallest)",

package/dist/getMappedAtlantisSpaceToken-es.js

@@ -1,4 +1,5 @@
 const spaceTokens = {
+    none: "0px",
     minuscule: "var(--space-minuscule)",
     slim: "var(--space-slim)",
     smallest: "var(--space-smallest)",

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/sharedHelpers/types.d.ts

@@ -13,5 +13,5 @@ export interface CommonAtlantisProps {
 /** Represents a day of the week as a number where 0 = Sunday, 1 = Monday, etc. */
 export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type CommonAllowedElements = "section" | "p" | "article" | "ul" | "li" | "div" | "span" | "dl" | "dd" | "dt";
-export type Spaces = "minuscule" | "slim" | "smallest" | "smaller" | "small" | "base" | "large" | "larger" | "largest" | "extravagant";
+export type Spaces = "none" | "minuscule" | "slim" | "smallest" | "smaller" | "small" | "base" | "large" | "larger" | "largest" | "extravagant";
 export type GapSpacing = Spaces | (string & NonNullable<unknown>);

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;
@@ -4095,6 +4092,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       flex: 1;
 }
 
+.Zm7CagsL-WU- {
+  gap: 1px;
+  gap: var(--space-minuscule);
+}
+
 .ftl4BEGpmyA- {
   gap: 2px;
   gap: var(--space-smallest);
@@ -4110,6 +4112,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   gap: var(--space-small);
 }
 
+.odJ-gd44AYY- {
+  gap: 12px;
+  gap: var(--space-slim);
+}
+
 .Jzbdj1Ja38E- {
   gap: 16px;
   gap: var(--space-base);
@@ -4120,6 +4127,21 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   gap: var(--space-large);
 }
 
+.l-DqnL94mmw- {
+  gap: 32px;
+  gap: var(--space-larger);
+}
+
+._4bEByMh7pHI- {
+  gap: 48px;
+  gap: var(--space-largest);
+}
+
+.pdH9lzFTcIc- {
+  gap: 64px;
+  gap: var(--space-extravagant);
+}
+
 .VZokN5bjMl0- {
   gap: 0;
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.83.0",
+  "version": "6.85.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -547,5 +547,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "199760ca563702adca0a1e359c2a7b67406c39df"
+  "gitHead": "d1e41d8cd060ab3c9bdc2a4419228cf8e3fe3242"
 }