@bbl-digital/snorre 3.0.3 → 3.0.7

package/lib/core/Autocomplete/index.js

@@ -1,192 +1,49 @@
 /** @jsxImportSource @emotion/react */
-import React, { createRef, useState } from 'react';
-import { styles, ErrorMessage } from './styles';
+import React, { createRef } from 'react';
+import { styles, ErrorMessage, Clear } from './styles';
 import { useEffect } from 'react';
-import { useDebounce } from '../utils/debounce';
 import IconErrorOutline from '../../icons/General/IconErrorOutline';
 import Spinner from '../Spinner';
-import useHandleOptionsHeight from './utils/useHandleOptionsHeight';
+import useHandleDimentions from './hooks/useHandleDimentions';
 import Link from '../Link';
+import IconClose from '../../icons/General/IconClose';
+import useAutocomplete from './hooks/useAutocomplete';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 const Autocomplete = /*#__PURE__*/React.forwardRef(({
-  onDebounceChange,
-  debounceDelay,
   height,
   css,
   ...props
 }, ref) => {
-  const {
-    optionsHeight,
-    optionsRef
-  } = useHandleOptionsHeight();
   const valuesRef = /*#__PURE__*/createRef();
-  const [showValues, setShowValues] = useState(!!props.isOpen);
-  const [highlightedIndex, setHighlightedIndex] = useState(null);
-  const [value, setValueChanged] = useState(props.value ? props.value : '');
-  const [inputDirty, setInputDirty] = useState(false);
-  const debouncedValue = useDebounce(value, debounceDelay ? debounceDelay : 0);
-
-  const onInputChange = e => {
-    setInputDirty(true);
-    setValueChanged(e.target.value);
-    if (props.values) setHighlightedIndex(0);
-    if (props.onChange) props.onChange(e);
-  };
-
-  const handleOnInputClick = () => {
-    if (props.values?.length) setHighlightedIndex(0);
-    setShowValues(true);
-  };
-
-  const handleValueClick = value => {
-    setShowValues(false);
-    props.onSelectItem?.(value);
-  };
-
-  const handleEnter = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!showValues) return;
-
-    if (!props.values?.length) {
-      // If there is no autocomplete value in the list, send object with just { value }
-      props.onSelectItem?.({
-        value
-      });
-    }
-
-    if (highlightedIndex === null || !props.values?.length) {
-      return;
-    }
-
-    const item = props.values[highlightedIndex];
-    props.onSelectItem?.(item);
-    setShowValues(false);
-  };
-
-  const handleUp = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!showValues) return;
-
-    if (highlightedIndex === null || !props.values?.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 || !props.values?.length) {
-      return;
-    }
-
-    const newHighlightIndex = highlightedIndex + 1;
-
-    if (newHighlightIndex === props.values.length) {
-      setHighlightedIndex(null);
-      setShowValues(false);
-      return;
-    }
-
-    setHighlightedIndex(newHighlightIndex);
-  };
-
-  const handleEscape = () => {
-    setShowValues(false);
-    setHighlightedIndex(null);
-  };
-
-  const handleCustomOnKeyDown = e => {
-    const {
-      key
-    } = e;
-
-    if (key === 'Escape') {
-      handleEscape();
-      return;
-    }
-
-    props.onKeyDown?.(e);
-  };
-
-  const handleOnKeyDown = e => {
-    const {
-      key
-    } = e;
-
-    if (showValues && props.values?.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 (onDebounceChange && inputDirty) {
-        onDebounceChange(value);
-      }
-    };
-
-    handleDebounceChange(debouncedValue); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue]);
-  useEffect(() => {
-    setShowValues(!!props.isOpen);
-  }, [props.isOpen]);
-  useEffect(() => {
-    const value = props.value ? props.value : '';
-    setValueChanged(value);
-  }, [props.value]);
-  useEffect(() => {
-    if (!props.openCustomValueInputOnKeyPress) return;
-    if (value.length) setShowValues(true); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+  const {
+    height: optionsHeight,
+    dimentionsRef: optionsRef
+  } = useHandleDimentions();
+  const {
+    width: inputWrapperWidth,
+    dimentionsRef: inputWrapperRef
+  } = useHandleDimentions();
+  const {
+    value,
+    highlightedIndex,
+    showValues,
+    renderedValues,
+    setShowValues,
+    handleClear,
+    handleOnInputClick,
+    handleCustomOnKeyDown,
+    handleOnKeyDown,
+    handleValueClick,
+    onInputChange,
+    onFuzzyBlur,
+    onFuzzyFocus
+  } = useAutocomplete(props);
   useEffect(() => {
     const handleClickOutside = e => {
       const node = valuesRef.current;
-
-      if (node && node.contains(e.target)) {
-        return;
-      }
-
+      if (node && node.contains(e.target)) return;
       setShowValues(false);
     };
 
@@ -198,10 +55,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
 
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showValues, valuesRef]);
   return _jsxs(_Fragment, {
     children: [_jsxs("label", {
+      ref: inputWrapperRef,
       css: theme => [styles.default(theme), (props.invalid || props.invalidMessage) && styles.invalid(theme), props.validation && styles.validation, props.onLabelClick && styles.clickableLabel, height && styles.height(height), css && css],
       onClick: props.onLabelClick ? e => e.preventDefault() : undefined,
       children: [_jsxs("span", {
@@ -224,8 +82,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
             value: value,
             disabled: props.disabled,
             autoFocus: props.focus,
-            onBlur: props.onBlur,
-            onFocus: props.onFocus,
+            onBlur: props.fuzzy ? onFuzzyBlur : props.onBlur,
+            onFocus: props.fuzzy ? onFuzzyFocus : props.onFocus,
             onChange: onInputChange,
             onKeyDown: props.onKeyDown ? handleCustomOnKeyDown : handleOnKeyDown,
             onClick: handleOnInputClick,
@@ -234,6 +92,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
             autoComplete: "off",
             css: theme => [props.disabled && styles.disabled(theme)],
             children: React.Children.map(props.children, child => child || null)
+          }), props.clear && _jsx(Clear, {
+            nostyle: true,
+            onClick: handleClear,
+            children: _jsx(IconClose, {
+              size: 14
+            })
           }), props.loading && _jsx(Spinner, {
             size: 14
           }), props.actions && _jsx("div", {
@@ -253,17 +117,19 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
           children: props.invalidMessage
         })]
       })]
-    }), (props.values?.length || props.renderCustomValueInput) && !props.loading && showValues && _jsxs("div", {
+    }), (Boolean(props.values?.length) || props.renderCustomValueInput) && !props.loading && showValues && _jsxs("div", {
       ref: valuesRef,
-      css: () => [!props.renderCustomValueInput && styles.listWrapper, props.dynamicallyPlaceInput && Boolean(optionsHeight) && styles.listWrapperTopPosition(optionsHeight), props.dynamicallyPlaceInput && Boolean(optionsHeight) && props.invalidMessage && styles.listWrapperTopPosition(optionsHeight + 30), props.inputValuesMaxWidth && styles.listWrapperMaxWidth(props.inputValuesMaxWidth)],
-      children: [props.values?.length && _jsx("ul", {
+      css: () => [!props.renderCustomValueInput && styles.listWrapper(inputWrapperWidth), props.dynamicallyPlaceInput && Boolean(optionsHeight) && styles.listWrapperTopPosition(optionsHeight), props.dynamicallyPlaceInput && Boolean(optionsHeight) && props.invalidMessage && styles.listWrapperTopPosition(optionsHeight + 30), props.inputValuesMaxWidth && styles.listWrapperMaxWidth(props.inputValuesMaxWidth)],
+      children: [Boolean(renderedValues?.length) && _jsx("ul", {
         css: theme => [styles.list(theme)],
-        children: props.values.map((item, index) => _jsx("li", {
-          tabIndex: 0,
-          css: index === highlightedIndex ? styles.highlightedItem : null,
-          onClick: () => handleValueClick(item),
-          children: props.labelFromValues ? item[props.labelFromValues] : item.label
-        }, props.keyFromValues ? item[props.keyFromValues] : item.key))
+        children: renderedValues.map((item, index) => {
+          return _jsx("li", {
+            tabIndex: 0,
+            css: index === highlightedIndex ? styles.highlightedItem : null,
+            onClick: () => handleValueClick(item),
+            children: props.labelFromValues ? item[props.labelFromValues] : item.label
+          }, props.keyFromValues ? item[props.keyFromValues] : item.key);
+        })
       }), props.renderCustomValueInput && _jsx("div", {
         children: props.renderCustomValueInput
       })]

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

@@ -9,7 +9,7 @@ declare const styles: {
     validation: import("@emotion/react").SerializedStyles;
     list: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
     highlightedItem: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
-    listWrapper: import("@emotion/react").SerializedStyles;
+    listWrapper: (width: number) => import("@emotion/react").SerializedStyles;
     listWrapperMaxWidth: (width: number) => import("@emotion/react").SerializedStyles;
     listWrapperTopPosition: (top: number) => import("@emotion/react").SerializedStyles;
     invalid: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
@@ -18,6 +18,23 @@ declare const styles: {
     disabled: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
 };
 export declare const ErrorMessage: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+export declare const Clear: import("@emotion/styled").StyledComponent<import("../private/ButtonOrLink").Props & {
+    success?: boolean | undefined;
+    danger?: boolean | undefined;
+    highlight?: boolean | undefined;
+    outline?: boolean | undefined;
+    nostyle?: boolean | undefined;
+    focusable?: boolean | undefined;
+    border?: string | undefined;
+    css?: import("@emotion/react").SerializedStyles | undefined;
+    loading?: boolean | undefined;
+    back?: boolean | undefined;
+    small?: boolean | undefined;
+    transparentBg?: boolean | undefined;
+    tabIndex?: number | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export default styles;
 export { styles };
 //# sourceMappingURL=styles.d.ts.map

package/lib/core/Autocomplete/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,QAAA,MAAM,MAAM;qBACO,SAAS;;;0BA2DJ,SAAS;;;;kBAuCjB,SAAS;6BAsBE,SAAS;;iCAQL,MAAM;kCAGL,MAAM;qBAGnB,SAAS;4BAYF,SAAS;qBA4BhB,MAAM;sBAKL,SAAS;CAM5B,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,SAAS,8CAM5C,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAIjD,QAAA,MAAM,MAAM;qBACO,SAAS;;;0BA2DJ,SAAS;;;;kBAuCjB,SAAS;6BAyBE,SAAS;yBAGb,MAAM;iCAOE,MAAM;kCAGL,MAAM;qBAGnB,SAAS;4BAYF,SAAS;qBA4BhB,MAAM;sBAKL,SAAS;CAM5B,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,SAAS,8CAM5C,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;UAcjB,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}