@jobber/components 4.85.4-CJS-to-ESM.2 → 4.85.4-CJS-to-ESM.5

package/dist/useScrollToActive-056749d8.js

@@ -0,0 +1,271 @@
+'use strict';
+
+var React = require('react');
+var sortBy = require('lodash/sortBy');
+var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
+var debounce = require('lodash/debounce');
+var Icon = require('./Icon-405a216c.js');
+var reactPopper = require('react-popper');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var sortBy__default = /*#__PURE__*/_interopDefaultLegacy(sortBy);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
+    const ref = React.useRef(null);
+    const chipOptions = children.map(chip => chip.props);
+    const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
+    const sortedVisibleChipOptions = sortBy__default["default"](visibleChipOptions, chip => selected.indexOf(chip.value));
+    const availableChipOptions = chipOptions.filter(chip => !selected.includes(chip.value));
+    const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
+    const actions = {
+        handleChipRemove: (value) => {
+            return () => {
+                liveAnnounce(`${value} Removed`);
+                onChange(selected.filter(val => val !== value));
+            };
+        },
+        handleChipAdd: (value) => onChange([...selected, value]),
+        handleCustomAdd: onCustomAdd,
+        handleChipClick: (value) => {
+            if (onClick === undefined)
+                return;
+            return (event) => onClick(event, value);
+        },
+        handleWrapperKeyDown: (event) => {
+            const target = event.target;
+            const isInputAndHasValue = target instanceof HTMLInputElement && target.value;
+            if (isInputAndHasValue)
+                return;
+            const nextElementToFocus = target.nextElementSibling;
+            const prevElementToFocus = target.previousElementSibling;
+            if (event.key === "ArrowLeft" &&
+                prevElementToFocus instanceof HTMLElement) {
+                prevElementToFocus.focus();
+            }
+            if (event.key === "ArrowRight" &&
+                nextElementToFocus instanceof HTMLElement) {
+                nextElementToFocus.focus();
+            }
+        },
+        handleChipKeyDown: (value) => {
+            return (event) => {
+                if (event.key === "Backspace" || event.key === "Delete") {
+                    const target = event.target;
+                    if (target instanceof HTMLElement) {
+                        const prevElement = target.previousElementSibling;
+                        const nextElement = target.nextElementSibling;
+                        if (prevElement instanceof HTMLElement) {
+                            prevElement.focus();
+                        }
+                        else if (nextElement instanceof HTMLElement) {
+                            nextElement.focus();
+                        }
+                    }
+                    actions.handleChipRemove(value)();
+                }
+            };
+        },
+    };
+    return Object.assign(Object.assign({}, actions), { ref,
+        sortedVisibleChipOptions,
+        availableChipOptions });
+}
+
+// eslint-disable-next-line max-statements
+function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCustomOptionSelect, onOptionSelect, onSearch, }) {
+    const menuId = React.useId();
+    const [allOptions, setAllOptions] = React.useState([]);
+    const [searchValue, setSearchValue] = React.useState("");
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const [shouldCancelBlur, setShouldCancelBlur] = React.useState(false);
+    const [shouldCancelEnter, setShouldCancelEnter] = React.useState(false);
+    const canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
+    const maxOptionIndex = allOptions.length - 1;
+    const { liveAnnounce } = useLiveAnnounce.useLiveAnnounce();
+    React.useEffect(() => {
+        setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
+    }, [options]);
+    const computed = {
+        menuId,
+        inputRef: React.useRef(null),
+        activeOption: allOptions[activeIndex],
+        hasAvailableOptions: allOptions.length > 0,
+        nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
+        previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
+    };
+    const actions = {
+        generateDescendantId: (index) => `${computed.menuId}-${index}`,
+        handleReset: () => {
+            setActiveIndex(activeIndex === 0 ? activeIndex : activeIndex - 1);
+            setSearchValue("");
+        },
+        handleOpenMenu: () => setMenuOpen(true),
+        handleCloseMenu: () => {
+            setMenuOpen(false);
+            setActiveIndex(0);
+        },
+        handleCancelBlur: () => setShouldCancelBlur(true),
+        handleEnableBlur: () => setShouldCancelBlur(false),
+        handleBlur: () => {
+            if (shouldCancelBlur)
+                return;
+            actions.handleReset();
+            actions.handleCloseMenu();
+        },
+        handleSearchChange: (event) => {
+            setActiveIndex(0);
+            setSearchValue(event.currentTarget.value);
+            setShouldCancelEnter(true);
+        },
+        handleSetActiveOnMouseOver: (index) => {
+            return () => setActiveIndex(index);
+        },
+        handleSelectOption: (selected) => {
+            var _a;
+            if (allOptions.length === 0)
+                return;
+            const setValue = selected.custom ? onCustomOptionSelect : onOptionSelect;
+            if (setValue) {
+                setValue(selected.value);
+                liveAnnounce(`${selected.label} Added`);
+                actions.handleReset();
+                (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        },
+        handleKeyDown: (event) => {
+            const callbacks = {
+                Enter: () => {
+                    if (shouldCancelEnter)
+                        return;
+                    actions.handleSelectOption(computed.activeOption);
+                },
+                Tab: () => actions.handleSelectOption(computed.activeOption),
+                ",": () => {
+                    if (searchValue.length === 0)
+                        return;
+                    actions.handleSelectOption(generateCustomOptionObject(searchValue));
+                },
+                ArrowDown: () => {
+                    if (isLoadingMore && activeIndex === maxOptionIndex)
+                        return;
+                    setActiveIndex(computed.nextOptionIndex);
+                },
+                ArrowUp: () => setActiveIndex(computed.previousOptionIndex),
+            };
+            if (searchValue.length === 0) {
+                callbacks.Backspace = () => {
+                    var _a;
+                    // If there's no text left to delete,
+                    // and delete is pressed again, focus on a chip instead.
+                    const target = (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+                    if (target instanceof HTMLElement) {
+                        target.focus();
+                    }
+                };
+            }
+            handleKeydownEvents(callbacks, event);
+        },
+        handleDebouncedSearch: debounce__default["default"](() => {
+            onSearch && onSearch(searchValue);
+            setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
+            setShouldCancelEnter(false);
+        }, 300),
+    };
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, actions), { activeIndex,
+        allOptions }), computed), { menuOpen,
+        searchValue,
+        shouldCancelBlur });
+}
+function generateOptions(options, searchValue, canAddCustomOption) {
+    const allOptions = options
+        .filter(option => option.label.toLowerCase().match(searchValue.trim().toLowerCase()))
+        .map(opt => (Object.assign(Object.assign({}, opt), { custom: false })));
+    const { shouldAddCustomOption, customOption } = generateCustomOption(allOptions, searchValue, canAddCustomOption);
+    shouldAddCustomOption && allOptions.push(customOption);
+    return allOptions;
+}
+function generateCustomOption(options, searchValue, canAddCustomOption) {
+    function shouldAddCustomOption() {
+        const isMatchingOption = options.some(option => option.label.toLowerCase() === searchValue.trim().toLowerCase());
+        return !!searchValue && !isMatchingOption;
+    }
+    return {
+        shouldAddCustomOption: canAddCustomOption && shouldAddCustomOption(),
+        customOption: generateCustomOptionObject(searchValue),
+    };
+}
+function generateCustomOptionObject(searchValue) {
+    return {
+        value: searchValue,
+        label: searchValue,
+        prefix: React__default["default"].createElement(Icon.Icon, { name: "add" }),
+        custom: true,
+    };
+}
+function handleKeydownEvents(callbacks, event) {
+    if (event.shiftKey)
+        return;
+    Object.entries(callbacks).forEach(([key, callback]) => {
+        if (event.key === key) {
+            event.preventDefault();
+            callback(event);
+        }
+    });
+}
+
+function useInView() {
+    const ref = React.useRef(null);
+    const [isInView, setIsInView] = React.useState(false);
+    if (window.IntersectionObserver) {
+        const observer = new IntersectionObserver(entries => {
+            setIsInView(entries[0].isIntersecting);
+        });
+        React.useEffect(() => {
+            ref.current && observer.observe(ref.current);
+            return () => {
+                if (!ref.current)
+                    return;
+                observer.unobserve(ref.current);
+            };
+        });
+    }
+    return { ref, isInView };
+}
+
+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 targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return Object.assign(Object.assign({}, popper), { setPositionedElementRef, targetWidth });
+}
+
+function useScrollToActive(index) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a, _b;
+        if (!window.HTMLElement.prototype.scrollIntoView)
+            return;
+        (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.children[index]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }, [index]);
+    return ref;
+}
+
+exports.useInView = useInView;
+exports.useInternalChipDismissible = useInternalChipDismissible;
+exports.useInternalChipDismissibleInput = useInternalChipDismissibleInput;
+exports.useRepositionMenu = useRepositionMenu;
+exports.useScrollToActive = useScrollToActive;

package/dist/useScrollToActive-ace6c5ba.js

@@ -0,0 +1,259 @@
+import React, { useRef, useId, useState, useEffect } from 'react';
+import sortBy from 'lodash/sortBy';
+import { useLiveAnnounce } from '@jobber/hooks/useLiveAnnounce';
+import debounce from 'lodash/debounce';
+import { I as Icon } from './Icon-22723fe6.js';
+import { usePopper } from 'react-popper';
+
+function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
+    const ref = useRef(null);
+    const chipOptions = children.map(chip => chip.props);
+    const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
+    const sortedVisibleChipOptions = sortBy(visibleChipOptions, chip => selected.indexOf(chip.value));
+    const availableChipOptions = chipOptions.filter(chip => !selected.includes(chip.value));
+    const { liveAnnounce } = useLiveAnnounce();
+    const actions = {
+        handleChipRemove: (value) => {
+            return () => {
+                liveAnnounce(`${value} Removed`);
+                onChange(selected.filter(val => val !== value));
+            };
+        },
+        handleChipAdd: (value) => onChange([...selected, value]),
+        handleCustomAdd: onCustomAdd,
+        handleChipClick: (value) => {
+            if (onClick === undefined)
+                return;
+            return (event) => onClick(event, value);
+        },
+        handleWrapperKeyDown: (event) => {
+            const target = event.target;
+            const isInputAndHasValue = target instanceof HTMLInputElement && target.value;
+            if (isInputAndHasValue)
+                return;
+            const nextElementToFocus = target.nextElementSibling;
+            const prevElementToFocus = target.previousElementSibling;
+            if (event.key === "ArrowLeft" &&
+                prevElementToFocus instanceof HTMLElement) {
+                prevElementToFocus.focus();
+            }
+            if (event.key === "ArrowRight" &&
+                nextElementToFocus instanceof HTMLElement) {
+                nextElementToFocus.focus();
+            }
+        },
+        handleChipKeyDown: (value) => {
+            return (event) => {
+                if (event.key === "Backspace" || event.key === "Delete") {
+                    const target = event.target;
+                    if (target instanceof HTMLElement) {
+                        const prevElement = target.previousElementSibling;
+                        const nextElement = target.nextElementSibling;
+                        if (prevElement instanceof HTMLElement) {
+                            prevElement.focus();
+                        }
+                        else if (nextElement instanceof HTMLElement) {
+                            nextElement.focus();
+                        }
+                    }
+                    actions.handleChipRemove(value)();
+                }
+            };
+        },
+    };
+    return Object.assign(Object.assign({}, actions), { ref,
+        sortedVisibleChipOptions,
+        availableChipOptions });
+}
+
+// eslint-disable-next-line max-statements
+function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCustomOptionSelect, onOptionSelect, onSearch, }) {
+    const menuId = useId();
+    const [allOptions, setAllOptions] = useState([]);
+    const [searchValue, setSearchValue] = useState("");
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [shouldCancelBlur, setShouldCancelBlur] = useState(false);
+    const [shouldCancelEnter, setShouldCancelEnter] = useState(false);
+    const canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
+    const maxOptionIndex = allOptions.length - 1;
+    const { liveAnnounce } = useLiveAnnounce();
+    useEffect(() => {
+        setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
+    }, [options]);
+    const computed = {
+        menuId,
+        inputRef: useRef(null),
+        activeOption: allOptions[activeIndex],
+        hasAvailableOptions: allOptions.length > 0,
+        nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
+        previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
+    };
+    const actions = {
+        generateDescendantId: (index) => `${computed.menuId}-${index}`,
+        handleReset: () => {
+            setActiveIndex(activeIndex === 0 ? activeIndex : activeIndex - 1);
+            setSearchValue("");
+        },
+        handleOpenMenu: () => setMenuOpen(true),
+        handleCloseMenu: () => {
+            setMenuOpen(false);
+            setActiveIndex(0);
+        },
+        handleCancelBlur: () => setShouldCancelBlur(true),
+        handleEnableBlur: () => setShouldCancelBlur(false),
+        handleBlur: () => {
+            if (shouldCancelBlur)
+                return;
+            actions.handleReset();
+            actions.handleCloseMenu();
+        },
+        handleSearchChange: (event) => {
+            setActiveIndex(0);
+            setSearchValue(event.currentTarget.value);
+            setShouldCancelEnter(true);
+        },
+        handleSetActiveOnMouseOver: (index) => {
+            return () => setActiveIndex(index);
+        },
+        handleSelectOption: (selected) => {
+            var _a;
+            if (allOptions.length === 0)
+                return;
+            const setValue = selected.custom ? onCustomOptionSelect : onOptionSelect;
+            if (setValue) {
+                setValue(selected.value);
+                liveAnnounce(`${selected.label} Added`);
+                actions.handleReset();
+                (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        },
+        handleKeyDown: (event) => {
+            const callbacks = {
+                Enter: () => {
+                    if (shouldCancelEnter)
+                        return;
+                    actions.handleSelectOption(computed.activeOption);
+                },
+                Tab: () => actions.handleSelectOption(computed.activeOption),
+                ",": () => {
+                    if (searchValue.length === 0)
+                        return;
+                    actions.handleSelectOption(generateCustomOptionObject(searchValue));
+                },
+                ArrowDown: () => {
+                    if (isLoadingMore && activeIndex === maxOptionIndex)
+                        return;
+                    setActiveIndex(computed.nextOptionIndex);
+                },
+                ArrowUp: () => setActiveIndex(computed.previousOptionIndex),
+            };
+            if (searchValue.length === 0) {
+                callbacks.Backspace = () => {
+                    var _a;
+                    // If there's no text left to delete,
+                    // and delete is pressed again, focus on a chip instead.
+                    const target = (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+                    if (target instanceof HTMLElement) {
+                        target.focus();
+                    }
+                };
+            }
+            handleKeydownEvents(callbacks, event);
+        },
+        handleDebouncedSearch: debounce(() => {
+            onSearch && onSearch(searchValue);
+            setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
+            setShouldCancelEnter(false);
+        }, 300),
+    };
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, actions), { activeIndex,
+        allOptions }), computed), { menuOpen,
+        searchValue,
+        shouldCancelBlur });
+}
+function generateOptions(options, searchValue, canAddCustomOption) {
+    const allOptions = options
+        .filter(option => option.label.toLowerCase().match(searchValue.trim().toLowerCase()))
+        .map(opt => (Object.assign(Object.assign({}, opt), { custom: false })));
+    const { shouldAddCustomOption, customOption } = generateCustomOption(allOptions, searchValue, canAddCustomOption);
+    shouldAddCustomOption && allOptions.push(customOption);
+    return allOptions;
+}
+function generateCustomOption(options, searchValue, canAddCustomOption) {
+    function shouldAddCustomOption() {
+        const isMatchingOption = options.some(option => option.label.toLowerCase() === searchValue.trim().toLowerCase());
+        return !!searchValue && !isMatchingOption;
+    }
+    return {
+        shouldAddCustomOption: canAddCustomOption && shouldAddCustomOption(),
+        customOption: generateCustomOptionObject(searchValue),
+    };
+}
+function generateCustomOptionObject(searchValue) {
+    return {
+        value: searchValue,
+        label: searchValue,
+        prefix: React.createElement(Icon, { name: "add" }),
+        custom: true,
+    };
+}
+function handleKeydownEvents(callbacks, event) {
+    if (event.shiftKey)
+        return;
+    Object.entries(callbacks).forEach(([key, callback]) => {
+        if (event.key === key) {
+            event.preventDefault();
+            callback(event);
+        }
+    });
+}
+
+function useInView() {
+    const ref = useRef(null);
+    const [isInView, setIsInView] = useState(false);
+    if (window.IntersectionObserver) {
+        const observer = new IntersectionObserver(entries => {
+            setIsInView(entries[0].isIntersecting);
+        });
+        useEffect(() => {
+            ref.current && observer.observe(ref.current);
+            return () => {
+                if (!ref.current)
+                    return;
+                observer.unobserve(ref.current);
+            };
+        });
+    }
+    return { ref, isInView };
+}
+
+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 targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    return Object.assign(Object.assign({}, popper), { setPositionedElementRef, targetWidth });
+}
+
+function useScrollToActive(index) {
+    const ref = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (!window.HTMLElement.prototype.scrollIntoView)
+            return;
+        (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.children[index]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }, [index]);
+    return ref;
+}
+
+export { useScrollToActive as a, useInView as b, useRepositionMenu as c, useInternalChipDismissible as d, useInternalChipDismissibleInput as u };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@jobber/components",
-  "version": "4.85.4-CJS-to-ESM.2+8ce5e6ae",
+  "version": "4.85.4-CJS-to-ESM.5+b856b500",
   "license": "MIT",
-  "main": "dist/index.esm.js",
+  "main": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.esm.js"
+      "import": "./dist/index.mjs"
     }
   },
   "scripts": {
@@ -21,10 +21,10 @@
     "postpack": "npm run entryPoints:clean"
   },
   "files": [
-    "dist",
-    "README.md",
-    "LICENSE",
-    "package.json"
+    "*.js",
+    "*.mjs",
+    "*.d.ts",
+    "dist/*"
   ],
   "dependencies": {
     "@jobber/design": "^0.55.1",
@@ -88,5 +88,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "8ce5e6ae9e18bfee65d99288f41f59b9ff9d2397"
+  "gitHead": "b856b500f99af2c9336762fbd581264d058525d0"
 }