@jobber/components 6.85.2 → 6.86.0

package/dist/Autocomplete-es.js

@@ -1,344 +0,0 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
-import React__default, { useCallback, useEffect, useState, forwardRef, useMemo, useRef } from 'react';
-import { u as useDebounce_2 } from './useDebounce-es.js';
-import classnames from 'classnames';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
-import { u as useFloating, o as offset, f as flip, e as size, b as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
-import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
-import { c as calculateMaxHeight } from './maxHeight-es.js';
-import { H as Heading } from './Heading-es.js';
-import { T as Text } from './Text-es.js';
-import { I as Icon } from './Icon-es.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
-import { InputText } from './InputText/index.mjs';
-import { m as mergeRefs } from './FormField-es.js';
-
-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-"};
-
-const AUTOCOMPLETE_MAX_HEIGHT = 300;
-
-function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
-    const { refs, floatingStyles, update } = useFloating(Object.assign({ placement: "bottom", middleware: [
-            offset(8),
-            flip({ fallbackPlacements: ["top"] }),
-            size({
-                apply({ availableHeight, elements }) {
-                    const maxHeight = calculateMaxHeight(availableHeight, {
-                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
-                    });
-                    Object.assign(elements.floating.style, {
-                        maxHeight: `${maxHeight}px`,
-                    });
-                },
-            }),
-        ], elements: {
-            reference: attachTo,
-        } }, (!cssManagedVisibility
-        ? {
-            whileElementsMounted: autoUpdate,
-        }
-        : {})));
-    // While DefaultMenu leverages conditional rendering, CustomMenu is hidden with CSS
-    // We need to apply the correct update method to each case
-    useSafeLayoutEffect_1(() => {
-        if (cssManagedVisibility && visible && attachTo && refs.floating.current) {
-            const cleanup = autoUpdate(attachTo, refs.floating.current, update);
-            return cleanup;
-        }
-        return undefined;
-    }, [
-        cssManagedVisibility,
-        visible,
-        attachTo,
-        refs.floating.current,
-        update,
-        autoUpdate,
-    ]);
-    const targetWidth = attachTo === null || attachTo === void 0 ? void 0 : attachTo.clientWidth;
-    return {
-        menuRef: refs.floating.current,
-        setMenuRef: refs.setFloating,
-        targetWidth,
-        styles: {
-            float: floatingStyles,
-        },
-    };
-}
-
-function BaseAutocompleteMenuWrapperInternal({ setMenuRef, floatStyles, targetWidth, visible, children, }) {
-    return (React__default.createElement("div", { className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, floatStyles.float), { width: targetWidth }), "data-elevation": "elevated" }, 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__default.useState(null);
-    const AutocompleteMenuWrapper = useCallback(({ children, visible, }) => {
-        const menuFloatProps = useRepositionMenu(attachTo, visible, true);
-        useEffect(() => {
-            setMenuRef(menuFloatProps.menuRef);
-        }, [menuFloatProps.menuRef]);
-        return (React__default.createElement(BaseAutocompleteMenuWrapper, { floatStyles: menuFloatProps.styles, setMenuRef: menuFloatProps.setMenuRef, targetWidth: menuFloatProps.targetWidth, visible: visible }, children));
-    }, [attachTo]);
-    return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
-}
-function BaseAutocompleteMenuWrapper(props) {
-    const mounted = useIsMounted_2();
-    const menu = React__default.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
-    return mounted.current ? React__default.createElement(FloatingPortal, null, menu) : 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__default.createElement(MenuGroupOptions, { UNSAFE_className: UNSAFE_className.groupOption, option: option, UNSAFE_style: UNSAFE_style.groupOption }));
-    }
-    return (React__default.createElement(BaseMenuOption, { UNSAFE_className: UNSAFE_className.option, UNSAFE_style: UNSAFE_style.option, option: option, isHighlighted: isHighlighted, onOptionSelect: onOptionSelect, addSeparators: addSeparators },
-        React__default.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__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: iconClassName, style: UNSAFE_style.icon }, isSelected && React__default.createElement(Icon, { name: "checkmark", size: "small" })),
-        React__default.createElement("div", { className: textClassName, style: UNSAFE_style.text },
-            React__default.createElement("div", { className: labelClassName, style: UNSAFE_style.label },
-                React__default.createElement(Text, null, option.label),
-                option.description !== undefined && (React__default.createElement(Text, { variation: "subdued" }, option.description))),
-            option.details !== undefined && (React__default.createElement("div", { className: detailsClassName, style: UNSAFE_style.details },
-                React__default.createElement(Text, null, option.details))))));
-}
-/**
- * The rendering of the default MenuGroupOption
- */
-function MenuGroupOptions({ option, UNSAFE_className = {}, UNSAFE_style = {}, }) {
-    return (React__default.createElement(BaseMenuGroupOption, { UNSAFE_className: UNSAFE_className.heading, UNSAFE_style: UNSAFE_style.heading },
-        React__default.createElement(Heading, { level: 5 }, option.label)));
-}
-function BaseMenuGroupOption({ children, UNSAFE_className = "", UNSAFE_style = {}, }) {
-    const headingClassName = classnames(styles.heading, UNSAFE_className);
-    return (React__default.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__default.createElement("button", { role: "option", type: "button", className: optionClass, onMouseDown: onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect.bind(undefined, option), style: UNSAFE_style }, children));
-}
-
-var KeyboardAction;
-(function (KeyboardAction) {
-    KeyboardAction[KeyboardAction["Previous"] = -1] = "Previous";
-    KeyboardAction[KeyboardAction["Next"] = 1] = "Next";
-    KeyboardAction[KeyboardAction["Select"] = 0] = "Select";
-})(KeyboardAction || (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_2((event) => {
-        onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Next);
-    }, "ArrowDown");
-    useOnKeyDown_2((event) => {
-        onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Previous);
-    }, "ArrowUp");
-    useOnKeyDown_2((event) => {
-        onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, 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] = useState(0);
-    const initialHighlight = options.some(isOptionGroup) ? 1 : 0;
-    useEffect(() => setHighlightedIndex(initialHighlight), [options]);
-    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 = useCallback((event, direction) => {
-        if (!visible)
-            return;
-        const indexChange = getRequestedIndexChange({
-            event,
-            options,
-            direction,
-            highlightedIndex,
-        });
-        switch (direction) {
-            case KeyboardAction.Previous:
-                setHighlightedIndex(prev => Math.max(0, prev + indexChange));
-                break;
-            case KeyboardAction.Next:
-                setHighlightedIndex(prev => Math.min(options.length - 1, prev + indexChange));
-                break;
-            case 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: floatStyles, targetWidth, } = useRepositionMenu(attachTo, visible, false);
-    const detectSeparatorCondition = (option) => option.description || option.details;
-    const addSeparators = options.some(detectSeparatorCondition);
-    const { highlightedIndex } = useKeyboardNavigation({
-        onOptionSelect,
-        options,
-        visible,
-        menuRef,
-    });
-    return (React__default.createElement(BaseAutocompleteMenuWrapper, { setMenuRef, floatStyles, targetWidth, visible }, options === null || options === void 0 ? void 0 : options.map((option, index) => {
-        return (React__default.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__default.createElement(CustomMenu, { attachTo: attachTo, inputFocused: inputFocused, inputRef: inputRef, customRenderMenu: customRenderMenu, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption }));
-    }
-    if (!inputFocused || !options.length)
-        return null;
-    return (React__default.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;
-}
-
-// Max statements increased to make room for the debounce functions
-// 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, customRenderMenu } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations", "customRenderMenu"]);
-    const initialOptionsMemo = useMemo(() => mapToOptions(initialOptions), [initialOptions]);
-    const [options, setOptions] = useState(initialOptionsMemo);
-    const [inputFocused, setInputFocused] = useState(false);
-    const [inputText, setInputText] = useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
-    const [autocompleteRef, setAutocompleteRef] = useState(null);
-    const delayedSearch = useDebounce_2(updateSearch, debounceRate);
-    const inputRef = useRef(null);
-    useEffect(() => {
-        delayedSearch();
-    }, [inputText]);
-    useEffect(() => {
-        var _a;
-        updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
-    }, [value]);
-    return (React__default.createElement("div", { className: styles.autocomplete, ref: setAutocompleteRef },
-        React__default.createElement(InputText, Object.assign({ ref: mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
-        React__default.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
-    function updateInput(newText) {
-        setInputText(newText);
-        if (newText === "") {
-            setOptions(mapToOptions(initialOptions));
-        }
-    }
-    function updateSearch() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const updatedOptions = yield getOptions(inputText);
-            const filteredOptions = updatedOptions.filter(option => isOptionGroup(option) ? option.options.length > 0 : true);
-            setOptions(mapToOptions(filteredOptions));
-        });
-    }
-    function handleMenuChange(chosenOption) {
-        var _a;
-        onChange(chosenOption);
-        updateInput((_a = chosenOption === null || chosenOption === void 0 ? void 0 : chosenOption.label) !== null && _a !== void 0 ? _a : "");
-        setInputFocused(false);
-    }
-    function handleInputChange(newText) {
-        updateInput(newText);
-        if (allowFreeForm) {
-            onChange({ label: newText });
-        }
-    }
-    function handleInputBlur() {
-        setInputFocused(false);
-        if (value == undefined || value.label !== inputText) {
-            setInputText("");
-            onChange(undefined);
-        }
-        onBlur && onBlur();
-    }
-    function handleInputFocus() {
-        setInputFocused(true);
-        if (onFocus) {
-            onFocus();
-        }
-    }
-}
-function mapToOptions(items) {
-    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 = forwardRef(AutocompleteInternal);
-
-export { Autocomplete as A, BaseMenuOption as B, KeyboardAction as K, MenuOption as M, BaseMenuGroupOption as a, useCustomKeyboardNavigation as b, useRepositionMenu as c, BaseAutocompleteMenuWrapper as d, useAutocompleteMenu as e, isOptionGroup as f, getRequestedIndexChange as g, isOptionSelected as i, useKeyboardNavigation as u };