@jobber/components 6.58.5 → 6.59.0

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

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { IconNames } from "@jobber/design";
+import { IconColorNames, IconNames } from "@jobber/design";
 export interface MenuProps {
     /**
      * Custom menu activator. If this is not provided a default [… More] will be used.
@@ -34,6 +34,10 @@ export interface ActionProps {
      * Visual cue for the action label
      */
     readonly icon?: IconNames;
+    /**
+     * Color for the icon. Defaults to "icon".
+     */
+    readonly iconColor?: IconColorNames;
     /**
      * Visual style for the action button
      */

package/dist/Menu-cjs.js

@@ -149,14 +149,14 @@ function SectionHeader({ text }) {
     return (React.createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
         React.createElement(Typography.Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, text)));
 }
-function Action({ label, sectionLabel, icon, destructive, onClick, }) {
+function Action({ label, sectionLabel, icon, iconColor, destructive, onClick, }) {
     const actionButtonRef = React.useRef();
     const buttonClasses = classnames(styles.action, {
         [styles.destructive]: destructive,
     });
     return (React.createElement("button", { role: "menuitem", type: "button", className: buttonClasses, key: label, onClick: onClick, ref: actionButtonRef },
         icon && (React.createElement("div", null,
-            React.createElement(Icon.Icon, { color: destructive ? "destructive" : undefined, name: icon }))),
+            React.createElement(Icon.Icon, { color: destructive ? "destructive" : iconColor, name: icon }))),
         React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", textColor: "text" },
             sectionLabel && (React.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
             label)));

package/dist/Menu-es.js

@@ -147,14 +147,14 @@ function SectionHeader({ text }) {
     return (React__default.createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
         React__default.createElement(Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, text)));
 }
-function Action({ label, sectionLabel, icon, destructive, onClick, }) {
+function Action({ label, sectionLabel, icon, iconColor, destructive, onClick, }) {
     const actionButtonRef = useRef();
     const buttonClasses = classnames(styles.action, {
         [styles.destructive]: destructive,
     });
     return (React__default.createElement("button", { role: "menuitem", type: "button", className: buttonClasses, key: label, onClick: onClick, ref: actionButtonRef },
         icon && (React__default.createElement("div", null,
-            React__default.createElement(Icon, { color: destructive ? "destructive" : undefined, name: icon }))),
+            React__default.createElement(Icon, { color: destructive ? "destructive" : iconColor, name: icon }))),
         React__default.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: "text" },
             sectionLabel && (React__default.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
             label)));

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>>;