@jobber/components 6.17.2 → 6.17.3-MIKEfix-d-ae9bfc6.2

package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissibleInput.d.ts

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, KeyboardEvent } from "react";
 import { ChipDismissibleInputOptionProps, ChipDismissibleInputProps } from "../InternalChipDismissibleTypes";
+import { ChipProps } from "../../Chip";
 export declare function useInternalChipDismissibleInput({ options, isLoadingMore, onCustomOptionSelect, onOptionSelect, onSearch, }: ChipDismissibleInputProps): {
     menuOpen: boolean;
     searchValue: string;
@@ -23,5 +24,5 @@ export declare function useInternalChipDismissibleInput({ options, isLoadingMore
     handleSetActiveOnMouseOver: (index: number) => () => void;
     handleSelectOption: (selected: ChipDismissibleInputOptionProps) => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-    handleDebouncedSearch: import("lodash").DebouncedFunc<() => void>;
+    handleDebouncedSearch: import("lodash").DebouncedFunc<(newSearchValue: string, newOptions?: ChipProps[]) => void>;
 };

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -20,6 +20,7 @@ require('../../Icon-cjs.js');
 require('@jobber/design');
 require('react-popper');
 require('classnames');
+require('../../useSafeLayoutEffect-cjs.js');
 require('../../Text-cjs.js');
 require('../../Typography-cjs.js');
 require('../../Button-cjs.js');
@@ -33,7 +34,6 @@ require('../../useChildComponent-cjs.js');
 require('../../Tooltip-cjs.js');
 require('react-dom');
 require('framer-motion');
-require('../../useSafeLayoutEffect-cjs.js');
 require('../../useIsMounted-cjs.js');
 require('../../tslib.es6-cjs.js');
 

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -18,6 +18,7 @@ import '../../Icon-es.js';
 import '@jobber/design';
 import 'react-popper';
 import 'classnames';
+import '../../useSafeLayoutEffect-es.js';
 import '../../Text-es.js';
 import '../../Typography-es.js';
 import '../../Button-es.js';
@@ -31,6 +32,5 @@ import '../../useChildComponent-es.js';
 import '../../Tooltip-es.js';
 import 'react-dom';
 import 'framer-motion';
-import '../../useSafeLayoutEffect-es.js';
 import '../../useIsMounted-es.js';
 import '../../tslib.es6-es.js';

package/dist/Chips/index.cjs

@@ -23,6 +23,7 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('react-popper');
 require('classnames');
+require('../useSafeLayoutEffect-cjs.js');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
@@ -36,7 +37,6 @@ require('../useChildComponent-cjs.js');
 require('../Tooltip-cjs.js');
 require('react-dom');
 require('framer-motion');
-require('../useSafeLayoutEffect-cjs.js');
 require('../useIsMounted-cjs.js');
 require('../_polyfill-node.process-cjs.js');
 

package/dist/Chips/index.mjs

@@ -21,6 +21,7 @@ import '../Icon-es.js';
 import '@jobber/design';
 import 'react-popper';
 import 'classnames';
+import '../useSafeLayoutEffect-es.js';
 import '../Text-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';
@@ -34,7 +35,6 @@ import '../useChildComponent-es.js';
 import '../Tooltip-es.js';
 import 'react-dom';
 import 'framer-motion';
-import '../useSafeLayoutEffect-es.js';
 import '../useIsMounted-es.js';
 import '../_polyfill-node.process-es.js';
 

package/dist/InternalChipDismissible-cjs.js

@@ -7,6 +7,7 @@ require('@jobber/design');
 require('react-popper');
 var debounce = require('./debounce-cjs.js');
 var classnames = require('classnames');
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
 var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
 var Spinner = require('./Spinner-cjs.js');
@@ -22,19 +23,18 @@ function InternalChip({ label, active = false, disabled = false, invalid = false
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuList":"J8USVG1tjPs-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
 
 function InternalChipDismissibleInput(props) {
-    const { activator = React.createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
+    const { activator = React.createElement(Button.Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
     const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useScrollToActive.useInternalChipDismissibleInput(props);
     const menuRef = useScrollToActive.useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useScrollToActive.useInView();
     const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useScrollToActive.useRepositionMenu(attachTo);
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+        update === null || update === void 0 ? void 0 : update();
+    }, [allOptions, menuOpen, update, options]);
     React.useEffect(() => {
-        if (menuOpen && update)
-            update();
-    }, [allOptions]);
-    React.useEffect(() => {
-        handleDebouncedSearch();
+        handleDebouncedSearch(searchValue, options);
         return handleDebouncedSearch.cancel;
-    }, [searchValue]);
+    }, [searchValue, options]);
     React.useEffect(() => {
         isInView && onLoadMore && onLoadMore(searchValue);
     }, [isInView]);

package/dist/InternalChipDismissible-es.js

@@ -5,6 +5,7 @@ import '@jobber/design';
 import 'react-popper';
 import { d as debounce } from './debounce-es.js';
 import classnames from 'classnames';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { S as Spinner } from './Spinner-es.js';
@@ -20,19 +21,18 @@ function InternalChip({ label, active = false, disabled = false, invalid = false
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuList":"J8USVG1tjPs-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};
 
 function InternalChipDismissibleInput(props) {
-    const { activator = React.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
+    const { activator = React.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, options, } = props;
     const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
     const menuRef = useScrollToActive(activeIndex);
     const { ref: visibleChildRef, isInView } = useInView();
     const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useRepositionMenu(attachTo);
+    useSafeLayoutEffect_1(() => {
+        update === null || update === void 0 ? void 0 : update();
+    }, [allOptions, menuOpen, update, options]);
     useEffect(() => {
-        if (menuOpen && update)
-            update();
-    }, [allOptions]);
-    useEffect(() => {
-        handleDebouncedSearch();
+        handleDebouncedSearch(searchValue, options);
         return handleDebouncedSearch.cancel;
-    }, [searchValue]);
+    }, [searchValue, options]);
     useEffect(() => {
         isInView && onLoadMore && onLoadMore(searchValue);
     }, [isInView]);

package/dist/useScrollToActive-cjs.js

@@ -374,6 +374,12 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
         nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
         previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
     };
+    function handleSearch(newSearchValue, newOptions = []) {
+        onSearch && onSearch(newSearchValue);
+        setAllOptions(generateOptions(newOptions, newSearchValue, canAddCustomOption));
+        setShouldCancelEnter(false);
+    }
+    const handleDebouncedSearch = debounce.debounce(handleSearch, 300);
     const actions = {
         generateDescendantId: (index) => `${computed.menuId}-${index}`,
         handleReset: () => {
@@ -446,11 +452,7 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
             }
             handleKeydownEvents(callbacks, event);
         },
-        handleDebouncedSearch: debounce.debounce(() => {
-            onSearch && onSearch(searchValue);
-            setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
-            setShouldCancelEnter(false);
-        }, 300),
+        handleDebouncedSearch,
     };
     return Object.assign(Object.assign(Object.assign(Object.assign({}, actions), { activeIndex,
         allOptions }), computed), { menuOpen,

package/dist/useScrollToActive-es.js

@@ -372,6 +372,12 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
         nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
         previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
     };
+    function handleSearch(newSearchValue, newOptions = []) {
+        onSearch && onSearch(newSearchValue);
+        setAllOptions(generateOptions(newOptions, newSearchValue, canAddCustomOption));
+        setShouldCancelEnter(false);
+    }
+    const handleDebouncedSearch = debounce(handleSearch, 300);
     const actions = {
         generateDescendantId: (index) => `${computed.menuId}-${index}`,
         handleReset: () => {
@@ -444,11 +450,7 @@ function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCus
             }
             handleKeydownEvents(callbacks, event);
         },
-        handleDebouncedSearch: debounce(() => {
-            onSearch && onSearch(searchValue);
-            setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
-            setShouldCancelEnter(false);
-        }, 300),
+        handleDebouncedSearch,
     };
     return Object.assign(Object.assign(Object.assign(Object.assign({}, actions), { activeIndex,
         allOptions }), computed), { menuOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.17.2",
+  "version": "6.17.3-MIKEfix-d-ae9bfc6.2+ae9bfc6d",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "963a62ee4ff159a59110941fcebda0100a3a31a5"
+  "gitHead": "ae9bfc6d0046773a38cf39e361070c6ea3c2a48d"
 }