@bbl-digital/snorre 3.0.6 → 3.0.7

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IProps, IValuesProps } from '../index.d';
+import { IProps, IValuesProps } from '../index.interfaces';
 declare const useAutocomplete: (props: IProps) => {
     setShowValues: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     handleClear: () => void;
@@ -11,6 +11,7 @@ declare const useAutocomplete: (props: IProps) => {
     handleCustomOnKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleOnInputClick: () => void;
     onFuzzyBlur: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
+    onFuzzyFocus: () => void;
     value: string;
     highlightedIndex: number | null;
     showValues: boolean;

package/lib/core/Autocomplete/hooks/useAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/hooks/useAutocomplete.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAEjD,QAAA,MAAM,eAAe,UAAW,MAAM;;;;;;uBAuBV,MAAM,WAAW,CAAC,gBAAgB,CAAC;yBAmJjC,mBAAmB,CAAC,gBAAgB,CAAC;+BAZ/B,mBAAmB,CAAC,gBAAgB,CAAC;;qBAtH/C,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;;;;;CA+MpE,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"useAutocomplete.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/hooks/useAutocomplete.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAE1D,QAAA,MAAM,eAAe,UAAW,MAAM;;;;;;uBAuBV,MAAM,WAAW,CAAC,gBAAgB,CAAC;yBAwJjC,mBAAmB,CAAC,gBAAgB,CAAC;+BAZ/B,mBAAmB,CAAC,gBAAgB,CAAC;;qBA3H/C,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;;;;;;CAqNpE,CAAA;AAED,eAAe,eAAe,CAAA"}

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

@@ -57,6 +57,11 @@ const useAutocomplete = props => {
     }
   };
 
+  const onFuzzyFocus = () => {
+    setValueChanged('');
+    if (props.values?.length) setShowValues(true);
+  };
+
   const renderedValues = useMemo(() => {
     if (!props.values?.length) return [];
 
@@ -226,6 +231,7 @@ const useAutocomplete = props => {
     handleCustomOnKeyDown,
     handleOnInputClick,
     onFuzzyBlur,
+    onFuzzyFocus,
     value,
     highlightedIndex,
     showValues,

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const useHandleDimentions: () => {
+    height: number;
+    width: number;
+    dimentionsRef: import("react").RefObject<any>;
+};
+export default useHandleDimentions;
+//# sourceMappingURL=useHandleDimentions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHandleDimentions.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Autocomplete/hooks/useHandleDimentions.ts"],"names":[],"mappings":";AAEA,QAAA,MAAM,mBAAmB;;;;CAaxB,CAAA;AAED,eAAe,mBAAmB,CAAA"}

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

@@ -0,0 +1,19 @@
+import { createRef, useEffect, useState } from 'react';
+
+const useHandleDimentions = () => {
+  const [height, setHeight] = useState(0);
+  const [width, setWidth] = useState(0);
+  const dimentionsRef = /*#__PURE__*/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
+  };
+};
+
+export default useHandleDimentions;

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

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import React, { ForwardedRef } from 'react';
-import { IProps } from './index.d';
+import { IProps } from './index.interfaces';
 export declare type Ref = ForwardedRef<HTMLInputElement>;
 declare const Autocomplete: React.FC<IProps>;
 export default Autocomplete;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAa,YAAY,EAAE,MAAM,OAAO,CAAA;AAQtD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,oBAAY,GAAG,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAA;AAEhD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA+KjC,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAa,YAAY,EAAE,MAAM,OAAO,CAAA;AAQtD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAG3C,oBAAY,GAAG,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAA;AAEhD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAqLjC,CAAA;AAEF,eAAe,YAAY,CAAA"}

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

@@ -0,0 +1,80 @@
+import { SerializedStyles } from '@emotion/react';
+import { ReactNode } from 'react';
+export interface IValuesProps {
+    key: string;
+    label: string;
+    [x: string]: string;
+}
+export interface IProps {
+    /** Input label */
+    label?: string;
+    /** Secondary label placed on the top right of the autocomplete */
+    labelSecondary?: ReactNode;
+    /** Autofocus */
+    focus?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Default value. */
+    value?: string;
+    /** Disabled. */
+    disabled?: boolean;
+    /** Callback fired when blur. */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback fired when focus. */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback fired when the value changes. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, reason?: string) => void;
+    /** Children. */
+    children?: ReactNode;
+    /** Include if input field should include debound effect after typing. Specifices delay in ms */
+    debounceDelay?: number;
+    /** Sends up the value from a option click */
+    onSelectItem?: (value: {
+        [x: string]: any;
+    }) => void;
+    /** Callback when using debounce. */
+    onDebounceChange?: (value: string) => void;
+    /** A button instead of standard label, requires to set a label */
+    onLabelClick?: (e: React.MouseEvent) => void;
+    /** Custom on key down handler */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Specify override styling */
+    css?: SerializedStyles;
+    /** Input name */
+    name?: string;
+    /** Validation on input */
+    validation?: boolean;
+    /** Invalid message */
+    invalidMessage?: string;
+    /** Activates invalid styling for custom external validation */
+    invalid?: boolean;
+    /** Set the height of the input, border comes in addition to height */
+    height?: string;
+    /** Sets a spinner on the input */
+    loading?: boolean;
+    /** Sets actions on the end of the input field */
+    actions: ReactNode;
+    /** Renders options shown under input */
+    renderOptions?: ReactNode[] | ReactNode;
+    /** Places values dynamically to the input field, defaults to being placed under the input field */
+    dynamicallyPlaceInput?: boolean;
+    /** Renders a custom input list */
+    renderCustomValueInput?: ReactNode;
+    /** Open custom value input when starting to write  */
+    openCustomValueInputOnKeyPress?: boolean;
+    /** Values to list out */
+    values?: IValuesProps[];
+    /** Gets specific value as label from values property */
+    labelFromValues?: string;
+    /** Gets specific value as key from values property */
+    keyFromValues?: string;
+    /** Max width of the input values */
+    inputValuesMaxWidth?: number;
+    /** Custom open for showing values  */
+    isOpen?: boolean;
+    /** Has fuzzy search */
+    fuzzy?: boolean;
+    /** Has clear button */
+    clear?: boolean;
+}
+//# sourceMappingURL=index.interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.interfaces.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/index.interfaces.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+export {};

package/lib/core/Autocomplete/index.js

@@ -4,7 +4,7 @@ import { styles, ErrorMessage, Clear } from './styles';
 import { useEffect } from 'react';
 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';
@@ -18,9 +18,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const valuesRef = /*#__PURE__*/createRef();
   const {
-    optionsHeight,
-    optionsRef
-  } = useHandleOptionsHeight();
+    height: optionsHeight,
+    dimentionsRef: optionsRef
+  } = useHandleDimentions();
+  const {
+    width: inputWrapperWidth,
+    dimentionsRef: inputWrapperRef
+  } = useHandleDimentions();
   const {
     value,
     highlightedIndex,
@@ -33,7 +37,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
     handleOnKeyDown,
     handleValueClick,
     onInputChange,
-    onFuzzyBlur
+    onFuzzyBlur,
+    onFuzzyFocus
   } = useAutocomplete(props);
   useEffect(() => {
     const handleClickOutside = e => {
@@ -54,6 +59,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
   }, [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", {
@@ -77,7 +83,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
             disabled: props.disabled,
             autoFocus: props.focus,
             onBlur: props.fuzzy ? onFuzzyBlur : props.onBlur,
-            onFocus: props.onFocus,
+            onFocus: props.fuzzy ? onFuzzyFocus : props.onFocus,
             onChange: onInputChange,
             onKeyDown: props.onKeyDown ? handleCustomOnKeyDown : handleOnKeyDown,
             onClick: handleOnInputClick,
@@ -113,7 +119,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
       })]
     }), (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)],
+      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: renderedValues.map((item, index) => {

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;

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":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAIjD,QAAA,MAAM,MAAM;qBACO,SAAS;;;0BA2DJ,SAAS;;;;kBAuCjB,SAAS;6BAyBE,SAAS;;iCAQL,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"}
+{"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"}