@bbl-digital/snorre 4.2.74 → 4.2.75

package/lib/core/Autocomplete/hooks/useAutocomplete.js

@@ -1,212 +1,205 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _matchSorter = require("match-sorter");
-var _react = require("react");
-var _debounce = require("../../utils/debounce");
 /* eslint-disable react-hooks/exhaustive-deps */
-
-const useAutocomplete = props => {
-  const [showValues, setShowValues] = (0, _react.useState)(!!props.isOpen);
-  const [highlightedIndex, setHighlightedIndex] = (0, _react.useState)(null);
-  const [value, setValueChanged] = (0, _react.useState)(props.value || '');
-  const [inputDirty, setInputDirty] = (0, _react.useState)(false);
-  const debouncedValue = (0, _debounce.useDebounce)(value, props.debounceDelay || 0);
-  const [inputValues, setInputValues] = (0, _react.useState)(props.values);
-  const labelKey = props.labelFromValues || 'label';
-  const handleValueClick = value => {
-    props.onSelectItem?.(value);
-    if (props.fuzzy) setValueChanged(value[labelKey]);
-    setShowValues(false);
-  };
-  const clearSelectedItem = () => handleValueClick({
-    [labelKey]: '',
-    [props.keyFromValues || 'key']: ''
-  });
-  const onInputChange = e => {
-    setInputDirty(true);
-    if (renderedValues) setHighlightedIndex(0);
-    setValueChanged(e.target.value);
-    // Should not use onChange whenever we have fuzzy search on
-    if (props.fuzzy) {
-      setShowValues(Boolean(value));
-      return;
-    }
-    if (props.onChange) props.onChange(e);
-  };
-  const handleOnInputClick = () => {
-    if (renderedValues?.length) setHighlightedIndex(0);
-    setShowValues(true);
-  };
-  const onFuzzyBlur = e => {
-    if (e.target.value === props.value) return;
-
-    // If target value is the same as a value from the values array, we should set the value for the user
-    if (inputValues?.length) {
-      const valueInInputValues = inputValues.find(item => item[labelKey].length && item[labelKey].toLowerCase() === e.target.value.toLowerCase());
-      if (valueInInputValues) {
-        const val = valueInInputValues[labelKey];
-        setValueChanged(val);
-        handleValueClick(valueInInputValues);
-        return;
-      }
-    }
-  };
-  const onFuzzyFocus = () => {
-    setValueChanged('');
-    if (props.values?.length) setShowValues(true);
-  };
-  const renderedValues = (0, _react.useMemo)(() => {
-    if (!props.values?.length) return [];
-    if (props.fuzzy) {
-      const fuzzyOptions = {
-        keys: [labelKey]
-      };
-      return (0, _matchSorter.matchSorter)(props.values, value || '', fuzzyOptions);
-    }
-    return props.values;
-  }, [value]);
-  const handleEscape = () => {
-    setShowValues(false);
-    setHighlightedIndex(null);
-  };
-  const handleClear = () => {
-    clearSelectedItem();
-    handleEscape();
-  };
-  const handleEnter = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!showValues) return;
-    if (!inputValues?.length) {
-      // If there is no autocomplete value in the list, send object with just { value }
-      handleValueClick({
-        value
-      });
-    }
-    if (highlightedIndex === null || !renderedValues?.length) {
-      return;
-    }
-    const item = renderedValues[highlightedIndex];
-    handleValueClick(item);
-    setShowValues(false);
-  };
-  const handleUp = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!showValues) return;
-    if (highlightedIndex === null || !renderedValues?.length) {
-      return;
-    }
-    const newHighlightIndex = highlightedIndex - 1;
-    if (newHighlightIndex < 0) {
-      setHighlightedIndex(null);
-      setShowValues(false);
-      return;
-    }
-    setHighlightedIndex(newHighlightIndex);
-  };
-  const handleDown = e => {
-    if (!showValues) return;
-    e.preventDefault();
-    e.stopPropagation();
-    if (highlightedIndex === null || !renderedValues?.length) {
-      return;
-    }
-    const newHighlightIndex = highlightedIndex + 1;
-    if (newHighlightIndex === renderedValues.length) {
-      setHighlightedIndex(null);
-      setShowValues(false);
-      return;
-    }
-    setHighlightedIndex(newHighlightIndex);
-  };
-  const handleCustomOnKeyDown = e => {
-    const {
-      key
-    } = e;
-    if (key === 'Escape') {
-      handleEscape();
-      return;
-    }
-    props.onKeyDown?.(e);
-  };
-
-  // Makes it possible to navigate using keyboard shortcuts
-  const handleOnKeyDown = e => {
-    const {
-      key
-    } = e;
-    if (showValues && renderedValues?.length) {
-      setHighlightedIndex(0);
-    } else {
-      setHighlightedIndex(null);
-    }
-    switch (key) {
-      case 'Enter':
-        handleEnter(e);
-        break;
-      case 'ArrowUp':
-        handleUp(e);
-        break;
-      case 'ArrowDown':
-      case 'Tab':
-        handleDown(e);
-        break;
-      case 'Escape':
+import { matchSorter } from 'match-sorter';
+import { useEffect, useMemo, useState } from 'react';
+import { useDebounce } from '../../utils/debounce';
+const useAutocomplete = (props) => {
+    const [showValues, setShowValues] = useState(!!props.isOpen);
+    const [highlightedIndex, setHighlightedIndex] = useState(null);
+    const [value, setValueChanged] = useState(props.value || '');
+    const [inputDirty, setInputDirty] = useState(false);
+    const debouncedValue = useDebounce(value, props.debounceDelay || 0);
+    const [inputValues, setInputValues] = useState(props.values);
+    const labelKey = props.labelFromValues || 'label';
+    const handleValueClick = (value) => {
+        props.onSelectItem?.(value);
+        if (props.fuzzy)
+            setValueChanged(value[labelKey]);
+        setShowValues(false);
+    };
+    const clearSelectedItem = () => handleValueClick({
+        [labelKey]: '',
+        [props.keyFromValues || 'key']: '',
+    });
+    const onInputChange = (e) => {
+        setInputDirty(true);
+        if (renderedValues)
+            setHighlightedIndex(0);
+        setValueChanged(e.target.value);
+        // Should not use onChange whenever we have fuzzy search on
+        if (props.fuzzy) {
+            setShowValues(Boolean(value));
+            return;
+        }
+        if (props.onChange)
+            props.onChange(e);
+    };
+    const handleOnInputClick = () => {
+        if (renderedValues?.length)
+            setHighlightedIndex(0);
+        setShowValues(true);
+    };
+    const onFuzzyBlur = (e) => {
+        if (e.target.value === props.value)
+            return;
+        // If target value is the same as a value from the values array, we should set the value for the user
+        if (inputValues?.length) {
+            const valueInInputValues = inputValues.find((item) => item[labelKey].length &&
+                item[labelKey].toLowerCase() === e.target.value.toLowerCase());
+            if (valueInInputValues) {
+                const val = valueInInputValues[labelKey];
+                setValueChanged(val);
+                handleValueClick(valueInInputValues);
+                return;
+            }
+        }
+    };
+    const onFuzzyFocus = () => {
+        setValueChanged('');
+        if (props.values?.length)
+            setShowValues(true);
+    };
+    const renderedValues = useMemo(() => {
+        if (!props.values?.length)
+            return [];
+        if (props.fuzzy) {
+            const fuzzyOptions = { keys: [labelKey] };
+            return matchSorter(props.values, value || '', fuzzyOptions);
+        }
+        return props.values;
+    }, [value]);
+    const handleEscape = () => {
+        setShowValues(false);
+        setHighlightedIndex(null);
+    };
+    const handleClear = () => {
+        clearSelectedItem();
         handleEscape();
-        break;
-      default:
-        break;
-    }
-  };
-
-  // Handle debounce
-  (0, _react.useEffect)(() => {
-    const handleDebounceChange = value => {
-      if (props.onDebounceChange && inputDirty) {
-        props.onDebounceChange(value);
-      }
     };
-    handleDebounceChange(debouncedValue);
-  }, [debouncedValue]);
-
-  // Change local open state if props.isOpen changes
-  (0, _react.useEffect)(() => {
-    setShowValues(!!props.isOpen);
-  }, [props.isOpen]);
-
-  // Update local values state if props.values changes
-  (0, _react.useEffect)(() => {
-    setInputValues(props.values);
-  }, [props.values]);
-
-  // Update local value if props.value changes
-  (0, _react.useEffect)(() => {
-    const value = props.value || '';
-    setValueChanged(value);
-  }, [props.value]);
-  (0, _react.useEffect)(() => {
-    if (!props.openCustomValueInputOnKeyPress) return;
-    if (value.length) setShowValues(true);
-  }, [value]);
-  return {
-    setShowValues,
-    handleClear,
-    handleValueClick,
-    onInputChange,
-    handleOnKeyDown,
-    handleCustomOnKeyDown,
-    handleOnInputClick,
-    onFuzzyBlur,
-    onFuzzyFocus,
-    value,
-    highlightedIndex,
-    showValues,
-    renderedValues
-  };
+    const handleEnter = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!showValues)
+            return;
+        if (!inputValues?.length) {
+            // If there is no autocomplete value in the list, send object with just { value }
+            handleValueClick({ value });
+        }
+        if (highlightedIndex === null || !renderedValues?.length) {
+            return;
+        }
+        const item = renderedValues[highlightedIndex];
+        handleValueClick(item);
+        setShowValues(false);
+    };
+    const handleUp = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!showValues)
+            return;
+        if (highlightedIndex === null || !renderedValues?.length) {
+            return;
+        }
+        const newHighlightIndex = highlightedIndex - 1;
+        if (newHighlightIndex < 0) {
+            setHighlightedIndex(null);
+            setShowValues(false);
+            return;
+        }
+        setHighlightedIndex(newHighlightIndex);
+    };
+    const handleDown = (e) => {
+        if (!showValues)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (highlightedIndex === null || !renderedValues?.length) {
+            return;
+        }
+        const newHighlightIndex = highlightedIndex + 1;
+        if (newHighlightIndex === renderedValues.length) {
+            setHighlightedIndex(null);
+            setShowValues(false);
+            return;
+        }
+        setHighlightedIndex(newHighlightIndex);
+    };
+    const handleCustomOnKeyDown = (e) => {
+        const { key } = e;
+        if (key === 'Escape') {
+            handleEscape();
+            return;
+        }
+        props.onKeyDown?.(e);
+    };
+    // Makes it possible to navigate using keyboard shortcuts
+    const handleOnKeyDown = (e) => {
+        const { key } = e;
+        if (showValues && renderedValues?.length) {
+            setHighlightedIndex(0);
+        }
+        else {
+            setHighlightedIndex(null);
+        }
+        switch (key) {
+            case 'Enter':
+                handleEnter(e);
+                break;
+            case 'ArrowUp':
+                handleUp(e);
+                break;
+            case 'ArrowDown':
+            case 'Tab':
+                handleDown(e);
+                break;
+            case 'Escape':
+                handleEscape();
+                break;
+            default:
+                break;
+        }
+    };
+    // Handle debounce
+    useEffect(() => {
+        const handleDebounceChange = (value) => {
+            if (props.onDebounceChange && inputDirty) {
+                props.onDebounceChange(value);
+            }
+        };
+        handleDebounceChange(debouncedValue);
+    }, [debouncedValue]);
+    // Change local open state if props.isOpen changes
+    useEffect(() => {
+        setShowValues(!!props.isOpen);
+    }, [props.isOpen]);
+    // Update local values state if props.values changes
+    useEffect(() => {
+        setInputValues(props.values);
+    }, [props.values]);
+    // Update local value if props.value changes
+    useEffect(() => {
+        const value = props.value || '';
+        setValueChanged(value);
+    }, [props.value]);
+    useEffect(() => {
+        if (!props.openCustomValueInputOnKeyPress)
+            return;
+        if (value.length)
+            setShowValues(true);
+    }, [value]);
+    return {
+        setShowValues,
+        handleClear,
+        handleValueClick,
+        onInputChange,
+        handleOnKeyDown,
+        handleCustomOnKeyDown,
+        handleOnInputClick,
+        onFuzzyBlur,
+        onFuzzyFocus,
+        value,
+        highlightedIndex,
+        showValues,
+        renderedValues,
+    };
 };
-var _default = exports.default = useAutocomplete;
+export default useAutocomplete;

package/lib/core/Autocomplete/hooks/useHandleDimentions.d.ts

@@ -4,4 +4,3 @@ declare const useHandleDimentions: () => {
     dimentionsRef: import("react").RefObject<any>;
 };
 export default useHandleDimentions;
-//# sourceMappingURL=useHandleDimentions.d.ts.map

package/lib/core/Autocomplete/hooks/useHandleDimentions.js

@@ -1,24 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
+import { createRef, useEffect, useState } from 'react';
 const useHandleDimentions = () => {
-  const [height, setHeight] = (0, _react.useState)(0);
-  const [width, setWidth] = (0, _react.useState)(0);
-  const dimentionsRef = /*#__PURE__*/(0, _react.createRef)();
-  (0, _react.useEffect)(() => {
-    const rect = dimentionsRef.current?.getBoundingClientRect();
-    setHeight(rect?.height || 0);
-    setWidth(rect?.width || 0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dimentionsRef.current]);
-  return {
-    height,
-    width,
-    dimentionsRef
-  };
+    const [height, setHeight] = useState(0);
+    const [width, setWidth] = useState(0);
+    const dimentionsRef = createRef();
+    useEffect(() => {
+        const rect = dimentionsRef.current?.getBoundingClientRect();
+        setHeight(rect?.height || 0);
+        setWidth(rect?.width || 0);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dimentionsRef.current]);
+    return { height, width, dimentionsRef };
 };
-var _default = exports.default = useHandleDimentions;
+export default useHandleDimentions;

package/lib/core/Autocomplete/index.d.ts

@@ -4,4 +4,3 @@ import { IProps } from './index.interfaces';
 export type Ref = ForwardedRef<HTMLInputElement>;
 declare const Autocomplete: React.FC<IProps>;
 export default Autocomplete;
-//# sourceMappingURL=index.d.ts.map

package/lib/core/Autocomplete/index.interfaces.d.ts

@@ -80,4 +80,3 @@ export interface IProps {
     /** Has chevron button */
     chevron?: boolean;
 }
-//# sourceMappingURL=index.interfaces.d.ts.map

package/lib/core/Autocomplete/index.interfaces.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+export {};