@jobber/components 6.58.4 → 6.58.6

package/dist/Autocomplete/index.cjs

@@ -3,38 +3,48 @@
 var Autocomplete = require('../Autocomplete-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
-require('classnames');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
+require('../Modal/index.cjs');
 require('react-dom');
-require('react-popper');
+require('classnames');
+require('framer-motion');
+require('../useRefocusOnActivator-cjs.js');
+require('../useOnKeyDown-cjs.js');
+require('../useFocusTrap-cjs.js');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
-require('../Text-cjs.js');
+require('../Button-cjs.js');
+require('react-router-dom');
 require('../Icon-cjs.js');
 require('@jobber/design');
-require('../useOnKeyDown-cjs.js');
+require('../ButtonDismiss-cjs.js');
+require('../noop-cjs.js');
+require('../_commonjsHelpers-cjs.js');
+require('../floating-ui.react-cjs.js');
+require('../AtlantisPortalContent-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
+require('../identity-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFor-cjs.js');
+require('../keysIn-cjs.js');
+require('../_isIterateeCall-cjs.js');
+require('../_setToString-cjs.js');
+require('../useIsMounted-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
+require('react-popper');
+require('../Text-cjs.js');
 require('../InputText/index.cjs');
 require('../FormField-cjs.js');
-require('framer-motion');
-require('../Button-cjs.js');
-require('react-router-dom');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('react-hook-form');
 require('../omit-cjs.js');
-require('../_commonjsHelpers-cjs.js');
 require('../_baseGet-cjs.js');
-require('../isTypedArray-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../identity-cjs.js');
 require('../_getTag-cjs.js');
 require('../isSymbol-cjs.js');
-require('../keysIn-cjs.js');
-require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
-require('../_setToString-cjs.js');
 require('../useDebounce-cjs.js');
 require('../debounce-cjs.js');
 

package/dist/Autocomplete/index.mjs

@@ -1,37 +1,47 @@
 export { A as Autocomplete, d as BaseAutocompleteMenuWrapper, a as BaseMenuGroupOption, B as BaseMenuOption, K as KeyboardAction, M as MenuOption, g as getRequestedIndexChange, f as isOptionGroup, i as isOptionSelected, e as useAutocompleteMenu, b as useCustomKeyboardNavigation, u as useKeyboardNavigation, c as useRepositionMenu } from '../Autocomplete-es.js';
 import '../tslib.es6-es.js';
 import 'react';
-import 'classnames';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
+import '../Modal/index.mjs';
 import 'react-dom';
-import 'react-popper';
+import 'classnames';
+import 'framer-motion';
+import '../useRefocusOnActivator-es.js';
+import '../useOnKeyDown-es.js';
+import '../useFocusTrap-es.js';
 import '../Heading-es.js';
 import '../Typography-es.js';
-import '../Text-es.js';
+import '../Button-es.js';
+import 'react-router-dom';
 import '../Icon-es.js';
 import '@jobber/design';
-import '../useOnKeyDown-es.js';
+import '../ButtonDismiss-es.js';
+import '../noop-es.js';
+import '../_commonjsHelpers-es.js';
+import '../floating-ui.react-es.js';
+import '../AtlantisPortalContent-es.js';
+import '../AtlantisThemeContext-es.js';
+import '../identity-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFor-es.js';
+import '../keysIn-es.js';
+import '../_isIterateeCall-es.js';
+import '../_setToString-es.js';
+import '../useIsMounted-es.js';
+import '../useSafeLayoutEffect-es.js';
+import 'react-popper';
+import '../Text-es.js';
 import '../InputText/index.mjs';
 import '../FormField-es.js';
-import 'framer-motion';
-import '../Button-es.js';
-import 'react-router-dom';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-hook-form';
 import '../omit-es.js';
-import '../_commonjsHelpers-es.js';
 import '../_baseGet-es.js';
-import '../isTypedArray-es.js';
-import '../isObjectLike-es.js';
-import '../identity-es.js';
 import '../_getTag-es.js';
 import '../isSymbol-es.js';
-import '../keysIn-es.js';
-import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
-import '../_setToString-es.js';
 import '../useDebounce-es.js';
 import '../debounce-es.js';

package/dist/Autocomplete-cjs.js

@@ -2,6 +2,7 @@
 
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
+var Modal_index = require('./Modal/index.cjs');
 var classnames = require('classnames');
 var useIsMounted = require('./useIsMounted-cjs.js');
 var ReactDOM = require('react-dom');
@@ -210,6 +211,24 @@ function DefaultMenu({ options, selectedOption, onOptionSelect, attachTo, visibl
 }
 
 function Menu({ options, selectedOption, onOptionSelect, inputFocused, attachTo, inputRef, customRenderMenu, }) {
+    const { open: isWithinOpenModal } = Modal_index.useModalContext();
+    /**
+     * Experimental/temporary workaround for Autocompletes within Modals. This is only necessary
+     * when an Autocomplete uses `customRenderMenu` and is rendered within the composable version
+     * of Modal (aka Modal.Provider).
+     *
+     * If `customRenderMenu` contains clickable elements such as Buttons, the consumer must ALSO
+     * replace any `onClick` handlers with `onMouseDown` handlers on those Buttons.
+     *
+     * The check below prevents Autocomplete from rendering the `customRenderMenu` when it's not visible
+     * (when the input isn't focused). This prevents Modals (FloatingUI) from marking the Autocomplete's
+     * menu as data-floating-ui-inert and aria-hidden="true". As a result, this prevents the bug where clicking
+     * within its menu would cause FloatingUI to close the parent Modal because it determined the click was
+     * outside of the Modal.
+     */
+    const specialModalWorkaround = isWithinOpenModal && customRenderMenu;
+    if (specialModalWorkaround && !inputFocused)
+        return null;
     if (customRenderMenu) {
         return (React.createElement(CustomMenu, { attachTo: attachTo, inputFocused: inputFocused, inputRef: inputRef, customRenderMenu: customRenderMenu, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption }));
     }

package/dist/Autocomplete-es.js

@@ -1,5 +1,6 @@
 import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
 import React__default, { useState, useCallback, useEffect, forwardRef, useMemo, useRef } from 'react';
+import { useModalContext } from './Modal/index.mjs';
 import classnames from 'classnames';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
 import { createPortal } from 'react-dom';
@@ -208,6 +209,24 @@ function DefaultMenu({ options, selectedOption, onOptionSelect, attachTo, visibl
 }
 
 function Menu({ options, selectedOption, onOptionSelect, inputFocused, attachTo, inputRef, customRenderMenu, }) {
+    const { open: isWithinOpenModal } = useModalContext();
+    /**
+     * Experimental/temporary workaround for Autocompletes within Modals. This is only necessary
+     * when an Autocomplete uses `customRenderMenu` and is rendered within the composable version
+     * of Modal (aka Modal.Provider).
+     *
+     * If `customRenderMenu` contains clickable elements such as Buttons, the consumer must ALSO
+     * replace any `onClick` handlers with `onMouseDown` handlers on those Buttons.
+     *
+     * The check below prevents Autocomplete from rendering the `customRenderMenu` when it's not visible
+     * (when the input isn't focused). This prevents Modals (FloatingUI) from marking the Autocomplete's
+     * menu as data-floating-ui-inert and aria-hidden="true". As a result, this prevents the bug where clicking
+     * within its menu would cause FloatingUI to close the parent Modal because it determined the click was
+     * outside of the Modal.
+     */
+    const specialModalWorkaround = isWithinOpenModal && customRenderMenu;
+    if (specialModalWorkaround && !inputFocused)
+        return null;
     if (customRenderMenu) {
         return (React__default.createElement(CustomMenu, { attachTo: attachTo, inputFocused: inputFocused, inputRef: inputRef, customRenderMenu: customRenderMenu, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption }));
     }

package/dist/FormField-cjs.js

@@ -33,7 +33,7 @@ function useShowClear({ clearable, multiline, focused, hasValue, readonly, disab
     }
 }
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -49,7 +49,6 @@ function AffixLabel({ label, variation = "prefix", labelRef, }) {
 function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
     const affixIconClass = classnames(styles$1.affixIcon, {
         [styles$1.suffix]: variation === "suffix",
-        [styles$1.hasAction]: onClick,
     });
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)

package/dist/FormField-es.js

@@ -31,7 +31,7 @@ function useShowClear({ clearable, multiline, focused, hasValue, readonly, disab
     }
 }
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -47,7 +47,6 @@ function AffixLabel({ label, variation = "prefix", labelRef, }) {
 function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
     const affixIconClass = classnames(styles$1.affixIcon, {
         [styles$1.suffix]: variation === "suffix",
-        [styles$1.hasAction]: onClick,
     });
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)

package/dist/Modal/useModal.d.ts

@@ -15,9 +15,9 @@ export declare function useModal({ open, activatorRef: refProp, onRequestClose,
         y: number;
         placement: import("@floating-ui/utils").Placement;
         strategy: import("@floating-ui/utils").Strategy;
-        update: () => void;
         middlewareData: import("@floating-ui/core").MiddlewareData;
         isPositioned: boolean;
+        update: () => void;
         floatingStyles: React.CSSProperties;
         open: boolean;
         onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;

package/dist/Tooltip/useTooltipPositioning.d.ts

@@ -3,7 +3,7 @@ interface ToolTipPositionOptions {
     readonly preferredPlacement?: Placement;
 }
 export declare function useTooltipPositioning({ preferredPlacement, }: ToolTipPositionOptions): {
-    placement: "bottom" | "left" | "right" | "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+    placement: "bottom" | "left" | "right" | "top" | "auto" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | "auto-start" | "auto-end";
     shadowRef: import("react").RefObject<HTMLSpanElement>;
     setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
     setTooltipRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;