@bbl-digital/snorre 3.1.57 → 3.1.58

package/lib/core/Alert/styles.js

@@ -1,5 +1,4 @@
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css } from '@emotion/react';
 const styles = {
   default: theme => /*#__PURE__*/css("position:relative;display:flex;align-items:center;justify-content:space-between;font-size:14px;background-color:", theme.bgLight, ";border:1px solid ", theme.bgMedium, ";color:", theme.bgDark, ";padding:1em;&>button svg polygon{fill:", theme.bgDark, ";opacity:0.25;}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0FsZXJ0L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLTyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9BbGVydC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuY29uc3Qgc3R5bGVzID0ge1xuICBkZWZhdWx0OiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuYmdMaWdodH07XG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmJnTWVkaXVtfTtcbiAgICAgIGNvbG9yOiAke3RoZW1lLmJnRGFya307XG4gICAgICBwYWRkaW5nOiAxZW07XG5cbiAgICAgICYgPiBidXR0b24gc3ZnIHBvbHlnb24ge1xuICAgICAgICBmaWxsOiAke3RoZW1lLmJnRGFya307XG4gICAgICAgIG9wYWNpdHk6IDAuMjU7XG4gICAgICB9XG4gICAgYCxcbiAgc3VjY2VzczogKHRoZW1lOiBJQXBwVGhlbWUpID0+XG4gICAgY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5zdWNjZXNzTGlnaHR9O1xuICAgICAgY29sb3I6ICR7dGhlbWUuZGVmYXVsdFRleHR9O1xuICAgICAgYm9yZGVyLWNvbG9yOiAke3RoZW1lLnN1Y2Nlc3NCb3JkZXJ9O1xuXG4gICAgICAmID4gYnV0dG9uIHN2ZyBwb2x5Z29uIHtcbiAgICAgICAgZmlsbDogJHt0aGVtZS5iZ0Rhcmt9O1xuICAgICAgfVxuICAgIGAsXG4gIGRhbmdlcjogKHRoZW1lOiBJQXBwVGhlbWUpID0+XG4gICAgY3NzYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5hbGVydExpZ2h0fTtcbiAgICAgIGNvbG9yOiAke3RoZW1lLmRlZmF1bHRUZXh0fTtcbiAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5hbGVydEJvcmRlcn07XG5cbiAgICAgICYgPiBidXR0b24gc3ZnIHBvbHlnb24ge1xuICAgICAgICBmaWxsOiAke3RoZW1lLmRlZmF1bHRUZXh0fTtcbiAgICAgIH1cbiAgICBgLFxuICBpbmZvOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmluZm9MaWdodH07XG4gICAgICBjb2xvcjogJHt0aGVtZS5kZWZhdWx0VGV4dH07XG4gICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUuaW5mb0JvcmRlcn07XG5cbiAgICAgICYgPiBidXR0b24gc3ZnIHBvbHlnb24ge1xuICAgICAgICBmaWxsOiAke3RoZW1lLmRlZmF1bHRUZXh0fTtcbiAgICAgIH1cbiAgICBgLFxuICBwcmltYXJ5OiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuaWxsdXN0cmF0aW9uUHJpbWFyeTEwfTtcbiAgICBib3JkZXItY29sb3I6ICR7dGhlbWUuaWxsdXN0cmF0aW9uUHJpbWFyeTUwfTtcbiAgYCxcbiAgcm91bmRlZDogY3NzYFxuICAgIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gICAgcGFkZGluZzogMS41ZW07XG4gIGAsXG59XG5cbmV4cG9ydCBkZWZhdWx0IHN0eWxlc1xuXG5leHBvcnQgeyBzdHlsZXMgfVxuIl19 */"),

package/lib/core/AppLoader/AppLoader.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=AppLoader.stories.d.ts.map

package/lib/core/AppLoader/AppLoader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLoader.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/AppLoader/AppLoader.stories.tsx"],"names":[],"mappings":";AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA"}

package/lib/core/AppLoader/AppLoader.stories.js

@@ -0,0 +1,10 @@
+import AppLoader from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/AppLoader',
+  component: AppLoader
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(AppLoader, {}),
+  name: 'Default'
+};

package/lib/core/AppLoader/index.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const AppLoader = ({
   color
 }) => {
@@ -12,5 +11,4 @@ const AppLoader = ({
     children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})]
   });
 };
-
 export default AppLoader;

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

@@ -1,6 +1,6 @@
 import { IAppTheme } from '../../app-shell/theme';
 declare const styles: {
-    default: (theme: IAppTheme, color: string | undefined) => import("@emotion/react").SerializedStyles;
+    default: (theme: IAppTheme, color: string | undefined) => import("@emotion/utils").SerializedStyles;
 };
 export default styles;
 export { styles };

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

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./index.interfaces").IProps>;
+};
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithError: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithLoading: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithSecondaryLabel: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithActions: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithTags: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithButtonForLabelText: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithValuesAndTags: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithValues: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithCustomObjectsValues: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithNormalValuesAndFuzzy: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithCustomValueInput: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithCustomValueInputAndTags: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithCustomValueInputAndTagsWithCustomValueHeight: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithCustomOpen: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithAlmostAllProps: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Autocomplete.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":";;;;;AAOA,wBAGC;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAYrB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAKvB,CAAA;AAED,eAAO,MAAM,kBAAkB;;;CAc9B,CAAA;AAED,eAAO,MAAM,WAAW;;;CAevB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAsBpB,CAAA;AAED,eAAO,MAAM,sBAAsB;;;CAUlC,CAAA;AAED,eAAO,MAAM,iBAAiB;;;CAwC7B,CAAA;AAED,eAAO,MAAM,UAAU;;;CAuBtB,CAAA;AAED,eAAO,MAAM,uBAAuB;;;CA0BnC,CAAA;AAED,eAAO,MAAM,wBAAwB;;;CAgDpC,CAAA;AAED,eAAO,MAAM,oBAAoB;;;CAUhC,CAAA;AAED,eAAO,MAAM,2BAA2B;;;CAuBvC,CAAA;AAED,eAAO,MAAM,gDAAgD;;;CAwB5D,CAAA;AAED,eAAO,MAAM,cAAc;;;CAW1B,CAAA;AAED,eAAO,MAAM,kBAAkB;;;CAuC9B,CAAA"}

package/lib/core/Autocomplete/Autocomplete.stories.js

@@ -0,0 +1,327 @@
+import { action } from '@storybook/addon-actions';
+import Autocomplete from '.';
+import Tag from '../Tag';
+import Card from '../Card';
+import Text from '../Text';
+import Button from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/Autocomplete',
+  component: Autocomplete
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text"
+  }),
+  name: 'Default'
+};
+export const WithError = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    validation: true,
+    invalid: true,
+    invalidMessage: "Something went wrong"
+  }),
+  name: 'With error'
+};
+export const WithLoading = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    loading: true
+  }),
+  name: 'With loading'
+};
+export const WithSecondaryLabel = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    labelSecondary: /*#__PURE__*/_jsx(Text, {
+      small: true,
+      italic: true,
+      children: "Secondary label"
+    })
+  }),
+  name: 'With secondary label'
+};
+export const WithActions = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    loading: true,
+    actions: /*#__PURE__*/_jsx(Text, {
+      small: true,
+      primary: true,
+      children: "Hello"
+    })
+  }),
+  name: 'With actions'
+};
+export const WithTags = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    renderOptions: /*#__PURE__*/_jsxs("div", {
+      style: {
+        margin: '5px 0',
+        display: 'flex',
+        gap: '0.25em'
+      },
+      children: [/*#__PURE__*/_jsx(Tag, {
+        strictClose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      })]
+    })
+  }),
+  name: 'With tags'
+};
+export const WithButtonForLabelText = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    onLabelClick: () => console.log('clicked'),
+    label: "Label",
+    placeholder: "Placeholder text"
+  }),
+  name: 'With button for label text'
+};
+export const WithValuesAndTags = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    validation: true,
+    invalid: true,
+    onSelectItem: action('onChange'),
+    invalidMessage: "Something went wrong",
+    renderOptions: /*#__PURE__*/_jsxs("div", {
+      style: {
+        margin: '5px 0',
+        display: 'flex',
+        gap: '0.25em'
+      },
+      children: [/*#__PURE__*/_jsx(Tag, {
+        strictClose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      })]
+    }),
+    values: [{
+      label: 'Here',
+      key: '1'
+    }, {
+      label: 'Here two',
+      key: '2'
+    }, {
+      label: 'Here three',
+      key: '3'
+    }]
+  }),
+  name: 'With values and tags'
+};
+export const WithValues = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    values: [{
+      label: 'Here',
+      key: '1'
+    }, {
+      label: 'Here two',
+      key: '2'
+    }, {
+      label: 'Here three',
+      key: '3'
+    }]
+  }),
+  name: 'With values'
+};
+export const WithCustomObjectsValues = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    labelFromValues: "option",
+    keyFromValues: "id",
+    onSelectItem: action('onChange'),
+    values: [{
+      id: '1',
+      option: 'One'
+    }, {
+      id: '2',
+      option: 'Two'
+    }, {
+      id: '3',
+      option: 'Three'
+    }]
+  }),
+  name: 'With custom objects values'
+};
+export const WithNormalValuesAndFuzzy = {
+  render: () => /*#__PURE__*/_jsx("div", {
+    style: {
+      height: '12em'
+    },
+    children: /*#__PURE__*/_jsx(Autocomplete, {
+      fuzzy: true,
+      chevron: true,
+      value: "Hello",
+      placeholder: "Placeholder",
+      onSelectItem: console.log,
+      values: [{
+        key: '1',
+        label: 'Hello'
+      }, {
+        key: '2',
+        label: 'I am '
+      }, {
+        key: '3',
+        label: 'I am north'
+      }, {
+        key: '4',
+        label: 'I am south'
+      }, {
+        key: '5',
+        label: 'I am east'
+      }, {
+        key: '6',
+        label: 'I am west'
+      }, {
+        key: '7',
+        label: 'Testtext'
+      }]
+    })
+  }),
+  name: 'With normal values and fuzzy'
+};
+export const WithCustomValueInput = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    renderCustomValueInput: /*#__PURE__*/_jsx(Card, {
+      withhover: true,
+      children: "Hover me!"
+    })
+  }),
+  name: 'With custom value input'
+};
+export const WithCustomValueInputAndTags = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    renderCustomValueInput: /*#__PURE__*/_jsx(Card, {
+      withhover: true,
+      children: "Hover me!"
+    }),
+    renderOptions: /*#__PURE__*/_jsxs("div", {
+      style: {
+        margin: '5px 0',
+        display: 'flex',
+        gap: '0.25em'
+      },
+      children: [/*#__PURE__*/_jsx(Tag, {
+        strictClose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      })]
+    })
+  }),
+  name: 'With custom value input and tags'
+};
+export const WithCustomValueInputAndTagsWithCustomValueHeight = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    dynamicallyPlaceInput: true,
+    label: "Label",
+    placeholder: "Placeholder text",
+    renderCustomValueInput: /*#__PURE__*/_jsx(Card, {
+      withhover: true,
+      children: "Hover me!"
+    }),
+    renderOptions: /*#__PURE__*/_jsxs("div", {
+      style: {
+        margin: '5px 0',
+        display: 'flex',
+        gap: '0.25em'
+      },
+      children: [/*#__PURE__*/_jsx(Tag, {
+        strictClose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      })]
+    })
+  }),
+  name: 'With custom value input and tags with custom value height'
+};
+export const WithCustomOpen = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    label: "Label",
+    placeholder: "Placeholder text",
+    isOpen: true,
+    renderCustomValueInput: /*#__PURE__*/_jsx(Card, {
+      withhover: true,
+      children: "Hover me!"
+    })
+  }),
+  name: 'With custom open'
+};
+export const WithAlmostAllProps = {
+  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+    dynamicallyPlaceInput: true,
+    label: "Label",
+    placeholder: "Placeholder text",
+    onSelectItem: v => console.log('action', v),
+    onKeyDown: e => console.log('keydown', e),
+    openCustomValueInputOnKeyPress: true,
+    renderCustomValueInput: /*#__PURE__*/_jsxs(Card, {
+      children: ["Hover me!", /*#__PURE__*/_jsx(Button, {
+        children: "This is here to click on"
+      })]
+    }),
+    renderOptions: /*#__PURE__*/_jsxs("div", {
+      style: {
+        margin: '5px 0',
+        display: 'flex',
+        gap: '0.25em'
+      },
+      children: [/*#__PURE__*/_jsx(Tag, {
+        strictClose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      }), /*#__PURE__*/_jsx(Tag, {
+        withclose: true,
+        children: "Here"
+      })]
+    }),
+    validation: true,
+    invalid: true,
+    invalidMessage: "Something went wrong",
+    actions: /*#__PURE__*/_jsx(Text, {
+      small: true,
+      primary: true,
+      children: "Hello"
+    })
+  }),
+  name: 'With almost all props'
+};

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

@@ -2,7 +2,6 @@
 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);
@@ -11,42 +10,36 @@ const useAutocomplete = props => {
   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
-
+    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 (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);
@@ -55,163 +48,136 @@ const useAutocomplete = props => {
       }
     }
   };
-
   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();
   };
-
   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
-
+  };
 
+  // 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
-
+  };
 
+  // Handle debounce
   useEffect(() => {
     const handleDebounceChange = value => {
       if (props.onDebounceChange && inputDirty) {
         props.onDebounceChange(value);
       }
     };
-
     handleDebounceChange(debouncedValue);
-  }, [debouncedValue]); // Change local open state if props.isOpen changes
+  }, [debouncedValue]);
 
+  // Change local open state if props.isOpen changes
   useEffect(() => {
     setShowValues(!!props.isOpen);
-  }, [props.isOpen]); // Update local values state if props.values changes
+  }, [props.isOpen]);
 
+  // Update local values state if props.values changes
   useEffect(() => {
     setInputValues(props.values);
-  }, [props.values]); // Update local value if props.value changes
+  }, [props.values]);
 
+  // Update local value if props.value changes
   useEffect(() => {
     const value = props.value || '';
     setValueChanged(value);
@@ -236,5 +202,4 @@ const useAutocomplete = props => {
     renderedValues
   };
 };
-
 export default useAutocomplete;