@jobber/components 6.14.1-aidenfix--e9ec00c.0 → 6.15.0

package/dist/Autocomplete-cjs.js

@@ -3,107 +3,23 @@
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
+var useIsMounted = require('./useIsMounted-cjs.js');
 var ReactDOM = require('react-dom');
-var reactPopper = require('react-popper');
-var useOnKeyDown = require('./useOnKeyDown-cjs.js');
 var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
-var useIsMounted = require('./useIsMounted-cjs.js');
+var reactPopper = require('react-popper');
+var Heading = require('./Heading-cjs.js');
 var Text = require('./Text-cjs.js');
 var Icon = require('./Icon-cjs.js');
-var Heading = require('./Heading-cjs.js');
+var useOnKeyDown = require('./useOnKeyDown-cjs.js');
 var InputText_index = require('./InputText/index.cjs');
 var debounce = require('./debounce-cjs.js');
+var FormField = require('./FormField-cjs.js');
 
-var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","heading":"PWZL-94hH7k-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};
+var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","heading":"PWZL-94hH7k-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};
 
-var IndexChange;
-(function (IndexChange) {
-    IndexChange[IndexChange["Previous"] = -1] = "Previous";
-    IndexChange[IndexChange["Next"] = 1] = "Next";
-})(IndexChange || (IndexChange = {}));
-// Adding useIsMounted is what tipped this to 13 statements.
-// Any additions beyond useIsMounted should probably see this component refactored a bit
-// eslint-disable-next-line max-statements
-function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
-    const [highlightedIndex, setHighlightedIndex] = React.useState(0);
-    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
-    const detectSeparatorCondition = (option) => option.description || option.details;
-    const detectGroups = (option) => option.options;
-    const addSeparators = options.some(detectSeparatorCondition);
-    const initialHighlight = options.some(detectGroups) ? 1 : 0;
-    setupKeyListeners();
-    React.useEffect(() => setHighlightedIndex(initialHighlight), [options]);
-    const mounted = useIsMounted.useIsMounted_2();
-    const menu = (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }), "data-elevation": "elevated" }, attributes.popper), options.map((option, index) => {
-        const optionClass = classnames(styles.option, {
-            [styles.active]: index === highlightedIndex,
-            [styles.separator]: addSeparators,
-        });
-        if (isGroup(option)) {
-            return (React.createElement("div", { key: option.label, className: styles.heading },
-                React.createElement(Heading.Heading, { level: 5 }, option.label)));
-        }
-        return (React.createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
-            React.createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React.createElement(Icon.Icon, { name: "checkmark", size: "small" }))),
-            React.createElement("div", { className: styles.text },
-                React.createElement("div", { className: styles.label },
-                    React.createElement(Text.Text, null, option.label),
-                    option.description !== undefined && (React.createElement(Text.Text, { variation: "subdued" }, option.description))),
-                option.details !== undefined && (React.createElement("div", { className: styles.details },
-                    React.createElement(Text.Text, null, option.details))))));
-    })));
-    return mounted.current ? ReactDOM.createPortal(menu, document.body) : menu;
-    function setupKeyListeners() {
-        React.useEffect(() => {
-            var _a, _b;
-            (_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.children[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
-                behavior: "smooth",
-                block: "nearest",
-                inline: "start",
-            });
-        }, [highlightedIndex]);
-        useOnKeyDown.useOnKeyDown_2((event) => {
-            const indexChange = arrowKeyPress(event, IndexChange.Next);
-            if (indexChange) {
-                setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
-            }
-        }, "ArrowDown");
-        useOnKeyDown.useOnKeyDown_2((event) => {
-            const indexChange = arrowKeyPress(event, IndexChange.Previous);
-            if (indexChange) {
-                setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
-            }
-        }, "ArrowUp");
-        useOnKeyDown.useOnKeyDown_2((event) => {
-            if (!visible)
-                return;
-            if (isGroup(options[highlightedIndex]))
-                return;
-            event.preventDefault();
-            onOptionSelect(options[highlightedIndex]);
-        }, "Enter");
-    }
-    function arrowKeyPress(event, direction) {
-        if (!visible)
-            return;
-        event.preventDefault();
-        const requestedIndex = options[highlightedIndex + direction];
-        return requestedIndex && isGroup(requestedIndex)
-            ? direction + direction
-            : direction;
-    }
-}
-function isOptionSelected(selectedOption, option) {
-    return selectedOption && selectedOption.value === option.value;
-}
-function isGroup(option) {
-    if (option.options)
-        return true;
-    return false;
-}
 function useRepositionMenu(attachTo, visible = false) {
     var _a;
-    const [menuRef, setMenuRef] = React.useState();
+    const [menuRef, setMenuRef] = React.useState(null);
     const popper = reactPopper.usePopper(attachTo.current, menuRef, {
         modifiers: [
             { name: "offset", options: { offset: [0, 8] } },
@@ -118,6 +34,207 @@ function useRepositionMenu(attachTo, visible = false) {
     return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
 }
 
+function BaseAutocompleteMenuWrapperInternal({ setMenuRef, popperStyles, attributes, targetWidth, visible, children, }) {
+    return (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }), "data-elevation": "elevated" }, attributes.popper), children));
+}
+/**
+ * Provides a wrapper for the Autocomplete menu that handles positioning and visibility.
+ * @param attachTo - The element that the menu should be attached to.
+ */
+function useAutocompleteMenu({ attachTo, }) {
+    const [menuRef, setMenuRef] = React.useState(null);
+    const AutocompleteMenuWrapper = React.useCallback(({ children, visible, }) => {
+        const menuPopperProps = useRepositionMenu(attachTo, visible);
+        React.useEffect(() => {
+            setMenuRef(menuPopperProps.menuRef);
+        }, [menuPopperProps.menuRef]);
+        return (React.createElement(BaseAutocompleteMenuWrapper, { attributes: menuPopperProps.attributes, popperStyles: menuPopperProps.styles, setMenuRef: menuPopperProps.setMenuRef, targetWidth: menuPopperProps.targetWidth, visible: visible }, children));
+    }, [attachTo]);
+    return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
+}
+function BaseAutocompleteMenuWrapper(props) {
+    const mounted = useIsMounted.useIsMounted_2();
+    const menu = React.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
+    return mounted.current ? ReactDOM.createPortal(menu, document.body) : menu;
+}
+
+function isOptionSelected(selectedOption, option) {
+    return Boolean(selectedOption && selectedOption.value === option.value);
+}
+/**
+ * Helper function to determine if the option is a group. This is used to
+ * determine if the option contains a list of options for rendering Section
+ * Labels in the Autocomplete component.
+ */
+function isOptionGroup(option) {
+    return "options" in option;
+}
+
+/**
+ * The rendering of the default MenuOption
+ */
+function MenuOption({ isHighlighted, option, onOptionSelect, isSelected, addSeparators, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    if (isOptionGroup(option)) {
+        return (React.createElement(MenuGroupOptions, { UNSAFE_className: UNSAFE_className.groupOption, option: option, UNSAFE_style: UNSAFE_style.groupOption }));
+    }
+    return (React.createElement(BaseMenuOption, { UNSAFE_className: UNSAFE_className.option, UNSAFE_style: UNSAFE_style.option, option: option, isHighlighted: isHighlighted, onOptionSelect: onOptionSelect, addSeparators: addSeparators },
+        React.createElement(MenuOptionContent, { option: option, isSelected: isSelected, UNSAFE_className: UNSAFE_className.content, UNSAFE_style: UNSAFE_style.content })));
+}
+function MenuOptionContent({ option, isSelected, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    const iconClassName = classnames(styles.icon, UNSAFE_className.icon);
+    const textClassName = classnames(styles.text, UNSAFE_className.text);
+    const labelClassName = classnames(styles.label, UNSAFE_className.label);
+    const detailsClassName = classnames(styles.details, UNSAFE_className.details);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: iconClassName, style: UNSAFE_style.icon }, isSelected && React.createElement(Icon.Icon, { name: "checkmark", size: "small" })),
+        React.createElement("div", { className: textClassName, style: UNSAFE_style.text },
+            React.createElement("div", { className: labelClassName, style: UNSAFE_style.label },
+                React.createElement(Text.Text, null, option.label),
+                option.description !== undefined && (React.createElement(Text.Text, { variation: "subdued" }, option.description))),
+            option.details !== undefined && (React.createElement("div", { className: detailsClassName, style: UNSAFE_style.details },
+                React.createElement(Text.Text, null, option.details))))));
+}
+/**
+ * The rendering of the default MenuGroupOption
+ */
+function MenuGroupOptions({ option, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    return (React.createElement(BaseMenuGroupOption, { UNSAFE_className: UNSAFE_className.heading, UNSAFE_style: UNSAFE_style.heading },
+        React.createElement(Heading.Heading, { level: 5 }, option.label)));
+}
+function BaseMenuGroupOption({ children, UNSAFE_className = "", UNSAFE_style = {}, }) {
+    const headingClassName = classnames(styles.heading, UNSAFE_className);
+    return (React.createElement("div", { className: headingClassName, style: UNSAFE_style }, children));
+}
+/**
+ * Renders the base option component. The component takes children and renders them inside a button.
+ */
+function BaseMenuOption({ option, isHighlighted, onOptionSelect, addSeparators, children, UNSAFE_className = "", UNSAFE_style = {}, }) {
+    const optionClass = classnames(styles.option, {
+        [styles.active]: isHighlighted,
+        [styles.separator]: addSeparators,
+    }, UNSAFE_className);
+    return (React.createElement("button", { role: "option", type: "button", className: optionClass, onMouseDown: onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect.bind(undefined, option), style: UNSAFE_style }, children));
+}
+
+exports.KeyboardAction = void 0;
+(function (KeyboardAction) {
+    KeyboardAction[KeyboardAction["Previous"] = -1] = "Previous";
+    KeyboardAction[KeyboardAction["Next"] = 1] = "Next";
+    KeyboardAction[KeyboardAction["Select"] = 0] = "Select";
+})(exports.KeyboardAction || (exports.KeyboardAction = {}));
+/**
+ * Hook to handle custom keyboard navigation for the Autocomplete component.
+ * Use this hook if you are using components in the menu that aren't MenuOption or BaseMenuOption.
+ */
+function useCustomKeyboardNavigation({ onRequestHighlightChange, }) {
+    useOnKeyDown.useOnKeyDown_2((event) => {
+        onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Next);
+    }, "ArrowDown");
+    useOnKeyDown.useOnKeyDown_2((event) => {
+        onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Previous);
+    }, "ArrowUp");
+    useOnKeyDown.useOnKeyDown_2((event) => {
+        onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, exports.KeyboardAction.Select);
+    }, "Enter");
+}
+/**
+ * Hook to handle keyboard navigation for the Menu in the Autocomplete component.
+ * If using components in the menu that aren't MenuOption or BaseMenuOption, you should use the `useCustomKeyboardNavigation` hook.
+ */
+function useKeyboardNavigation({ options, onOptionSelect, menuRef, visible, }) {
+    const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+    const initialHighlight = options.some(isOptionGroup) ? 1 : 0;
+    React.useEffect(() => setHighlightedIndex(initialHighlight), [options]);
+    React.useEffect(() => {
+        var _a, _b;
+        (_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.children[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }, [highlightedIndex]);
+    const onRequestHighlightChange = React.useCallback((event, direction) => {
+        if (!visible)
+            return;
+        const indexChange = getRequestedIndexChange({
+            event,
+            options,
+            direction,
+            highlightedIndex,
+        });
+        switch (direction) {
+            case exports.KeyboardAction.Previous:
+                setHighlightedIndex(prev => Math.max(0, prev + indexChange));
+                break;
+            case exports.KeyboardAction.Next:
+                setHighlightedIndex(prev => Math.min(options.length - 1, prev + indexChange));
+                break;
+            case exports.KeyboardAction.Select:
+                if (isOptionGroup(options[highlightedIndex]))
+                    return;
+                onOptionSelect(options[highlightedIndex]);
+                break;
+        }
+    }, [highlightedIndex, options, onOptionSelect, visible]);
+    useCustomKeyboardNavigation({ onRequestHighlightChange });
+    return { highlightedIndex };
+}
+/**
+ * Function to get the requested index change based on the current highlighted index and the direction of the keyboard action.
+ * Accounts for groups in the options array.
+ */
+function getRequestedIndexChange({ event, options, direction, highlightedIndex, }) {
+    event.preventDefault();
+    const requestedIndex = options[highlightedIndex + direction];
+    return requestedIndex && isOptionGroup(requestedIndex)
+        ? direction + direction
+        : direction;
+}
+
+/**
+ * Renders the default Menu for the Autocomplete component.
+ */
+function DefaultMenu({ options, selectedOption, onOptionSelect, attachTo, visible, }) {
+    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
+    const detectSeparatorCondition = (option) => option.description || option.details;
+    const addSeparators = options.some(detectSeparatorCondition);
+    const { highlightedIndex } = useKeyboardNavigation({
+        onOptionSelect,
+        options,
+        visible,
+        menuRef,
+    });
+    return (React.createElement(BaseAutocompleteMenuWrapper, { setMenuRef, popperStyles, attributes, targetWidth, visible }, options === null || options === void 0 ? void 0 : options.map((option, index) => {
+        return (React.createElement(MenuOption, { key: index, option: option, isHighlighted: index === highlightedIndex, onOptionSelect: onOptionSelect, isSelected: isOptionSelected(selectedOption, option), addSeparators: addSeparators }));
+    })));
+}
+
+function Menu({ options, selectedOption, onOptionSelect, inputFocused, attachTo, inputRef, customRenderMenu, }) {
+    if (customRenderMenu) {
+        return (React.createElement(CustomMenu, { attachTo: attachTo, inputFocused: inputFocused, inputRef: inputRef, customRenderMenu: customRenderMenu, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption }));
+    }
+    if (!inputFocused || !options.length)
+        return null;
+    return (React.createElement(DefaultMenu, { attachTo: attachTo, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption, visible: inputFocused }));
+}
+/**
+ * Renders the custom Menu for the Autocomplete component.
+ * Provides the menuRef and MenuWrapper to the customRenderMenu function.
+ */
+function CustomMenu({ options, selectedOption, onOptionSelect, customRenderMenu, attachTo, inputFocused, inputRef, }) {
+    const { MenuWrapper, menuRef } = useAutocompleteMenu({ attachTo });
+    const menuContent = customRenderMenu({
+        options,
+        menuRef,
+        onOptionSelect,
+        selectedOption,
+        inputFocused,
+        MenuWrapper,
+        inputRef,
+    });
+    return menuContent;
+}
+
 /**
  * A hook to easily manage debounced functions, including their cleanup.
  * @param func The function to debounce.
@@ -149,15 +266,17 @@ function useDebounce(func, wait, options) {
 }
 
 // Max statements increased to make room for the debounce functions
-/* eslint max-statements: ["error", 14] */
+// eslint-disable-next-line max-statements
 function AutocompleteInternal(_a, ref) {
     var _b;
-    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations"]);
-    const [options, setOptions] = React.useState(initialOptions);
-    const [menuVisible, setMenuVisible] = React.useState(false);
+    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations", "customRenderMenu"]);
+    const initialOptionsMemo = React.useMemo(() => mapToOptions(initialOptions), [initialOptions]);
+    const [options, setOptions] = React.useState(initialOptionsMemo);
+    const [inputFocused, setInputFocused] = React.useState(false);
     const [inputText, setInputText] = React.useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
     const autocompleteRef = React.useRef(null);
     const delayedSearch = useDebounce(updateSearch, debounceRate);
+    const inputRef = React.useRef(null);
     React.useEffect(() => {
         delayedSearch();
     }, [inputText]);
@@ -166,8 +285,8 @@ function AutocompleteInternal(_a, ref) {
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
     return (React.createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
-        React.createElement(InputText_index.InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
-        menuVisible && (React.createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+        React.createElement(InputText_index.InputText, Object.assign({ ref: FormField.mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        React.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
     function updateInput(newText) {
         setInputText(newText);
         if (newText === "") {
@@ -177,14 +296,15 @@ function AutocompleteInternal(_a, ref) {
     function updateSearch() {
         return tslib_es6.__awaiter(this, void 0, void 0, function* () {
             const updatedOptions = yield getOptions(inputText);
-            const filteredOptions = updatedOptions.filter((option) => "options" in option && option.options ? option.options.length > 0 : true);
+            const filteredOptions = updatedOptions.filter(option => isOptionGroup(option) ? option.options.length > 0 : true);
             setOptions(mapToOptions(filteredOptions));
         });
     }
     function handleMenuChange(chosenOption) {
+        var _a;
         onChange(chosenOption);
-        updateInput(chosenOption.label);
-        setMenuVisible(false);
+        updateInput((_a = chosenOption === null || chosenOption === void 0 ? void 0 : chosenOption.label) !== null && _a !== void 0 ? _a : "");
+        setInputFocused(false);
     }
     function handleInputChange(newText) {
         updateInput(newText);
@@ -193,7 +313,7 @@ function AutocompleteInternal(_a, ref) {
         }
     }
     function handleInputBlur() {
-        setMenuVisible(false);
+        setInputFocused(false);
         if (value == undefined || value.label !== inputText) {
             setInputText("");
             onChange(undefined);
@@ -201,21 +321,34 @@ function AutocompleteInternal(_a, ref) {
         onBlur && onBlur();
     }
     function handleInputFocus() {
-        setMenuVisible(true);
+        setInputFocused(true);
         if (onFocus) {
             onFocus();
         }
     }
 }
 function mapToOptions(items) {
-    return items.reduce(function (result, item) {
-        result = result.concat([item]);
-        if (item.options) {
+    const retVal = items.reduce((result, item) => {
+        result.push(item);
+        if (isOptionGroup(item) && item.options) {
             result = result.concat(item.options);
         }
         return result;
     }, []);
+    return retVal;
 }
+// Casts the Generics to the forward ref so autocomplete works as expected for consumers
 const Autocomplete = React.forwardRef(AutocompleteInternal);
 
 exports.Autocomplete = Autocomplete;
+exports.BaseAutocompleteMenuWrapper = BaseAutocompleteMenuWrapper;
+exports.BaseMenuGroupOption = BaseMenuGroupOption;
+exports.BaseMenuOption = BaseMenuOption;
+exports.MenuOption = MenuOption;
+exports.getRequestedIndexChange = getRequestedIndexChange;
+exports.isOptionGroup = isOptionGroup;
+exports.isOptionSelected = isOptionSelected;
+exports.useAutocompleteMenu = useAutocompleteMenu;
+exports.useCustomKeyboardNavigation = useCustomKeyboardNavigation;
+exports.useKeyboardNavigation = useKeyboardNavigation;
+exports.useRepositionMenu = useRepositionMenu;