@onewelcome/react-lib-components 6.4.4 → 6.6.0

package/dist/esm/src/components/Form/Select/MultiSelect/MultiSelect.test.d.ts

@@ -1 +1,63 @@
-export {};
+import React from "react";
+import { MultiSelectProps } from "../Select.interfaces";
+export declare const createMultiSelect: (params?: ((defaultParams: MultiSelectProps) => MultiSelectProps) | undefined) => {
+    select: HTMLElement;
+    button: HTMLElement;
+    list: Element | null;
+    dropdownWrapper: Element | null;
+    container: HTMLElement;
+    baseElement: HTMLElement;
+    debug: (baseElement?: Element | DocumentFragment | (Element | DocumentFragment)[] | undefined, maxLength?: number | undefined, options?: import("pretty-format").PrettyFormatOptions | undefined) => void;
+    rerender: (ui: React.ReactNode) => void;
+    unmount: () => void;
+    asFragment: () => DocumentFragment;
+    getByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement;
+    getAllByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
+    queryByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement | null;
+    queryAllByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
+    findByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByPlaceholderText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement;
+    getAllByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
+    queryByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement | null;
+    queryAllByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement[];
+    findByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByAltText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByTitle: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByDisplayValue: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement;
+    getAllByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement[];
+    queryByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement | null;
+    queryAllByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined) => HTMLElement[];
+    findByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByRole: (role: import("@testing-library/react").ByRoleMatcher, options?: import("@testing-library/react").ByRoleOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+    getByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement;
+    getAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    queryByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+    queryAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+    findByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement>;
+    findAllByTestId: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined, waitForElementOptions?: import("@testing-library/react").waitForOptions | undefined) => Promise<HTMLElement[]>;
+};
+export declare const turnOnScrollToFunctionSupportInTest: () => void;

package/dist/esm/src/components/Form/Select/MultiSelect/MultiSelectKeyboardNavigation.test.d.ts

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

package/dist/esm/src/components/Form/Select/MultiSelect/SelectedOptions.d.ts

@@ -1,10 +1,11 @@
 import React, { ComponentPropsWithRef } from "react";
 export type Display = {
+    value: string;
     label: string;
     fixed?: boolean;
 };
 export interface Props extends ComponentPropsWithRef<"div"> {
-    display: Record<string, Display>;
+    display: Display[];
     onRemove: (value: string) => void;
     disabled: boolean;
 }

package/dist/esm/src/components/Form/Select/MultiSelect/useArrowNavigation.d.ts

@@ -0,0 +1,16 @@
+interface UseArrowNavigationParams {
+    expanded: boolean;
+    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    setFocusedSelectItem: React.Dispatch<React.SetStateAction<number>>;
+    childrenCount: number;
+    setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;
+    addBtnRef: React.RefObject<HTMLButtonElement>;
+    searchInputRef: React.RefObject<HTMLInputElement>;
+    customSelectButtonRef: React.RefObject<HTMLButtonElement>;
+    onClose: () => void;
+}
+/** @scope .*/
+export declare const useArrowNavigation: ({ expanded, setExpanded, setFocusedSelectItem, childrenCount, setShouldClick, addBtnRef, searchInputRef, customSelectButtonRef, onClose }: UseArrowNavigationParams) => {
+    onArrowNavigation: (event: React.KeyboardEvent) => void;
+};
+export {};

package/dist/esm/src/components/Form/Select/MultiSelect/useSearch.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { PartialInputProps, SearchProps } from "../Select.interfaces";
+interface Props {
+    selectId: string;
+    search?: SearchProps;
+    optionsCount: number;
+    /**
+     * @deprecated
+     */
+    searchPlaceholder?: string;
+    /**
+     * @deprecated
+     */
+    searchInputProps?: PartialInputProps & {
+        reset?: boolean;
+    };
+    searchInputClassName: string;
+    expanded: boolean;
+    setFocusedSelectItem: (idx: number) => void;
+    focusedSelectItem: number;
+    describedBy?: string;
+    getOptionId: (multiSelectId: string, optionIndex: number) => string;
+    getListboxId: (multiSelectId: string) => string;
+}
+/** @scope .*/
+export declare const useSearch: ({ selectId, search, optionsCount, searchPlaceholder, searchInputProps, searchInputClassName, expanded, setFocusedSelectItem, focusedSelectItem, describedBy, getOptionId, getListboxId }: Props) => {
+    renderSearch: () => React.JSX.Element;
+    resetSearchState: () => void;
+    searchVisible: boolean;
+    searchThreshold: number;
+    searchInputRef: React.RefObject<HTMLInputElement>;
+    filter: string;
+};
+export {};

package/dist/esm/src/components/Form/Select/Select.interfaces.d.ts

@@ -14,6 +14,7 @@ export interface AddNewProps {
     label: string;
     onAddNew: (value: string) => void;
     btnProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    alwaysEnabled?: boolean;
 }
 export interface SelectProps<V extends string | readonly string[] | undefined> extends ComponentPropsWithRef<"select">, FormElement {
     children: ReactElement[];

package/dist/esm/src/components/Form/Select/SingleSelect/Option.d.ts

@@ -4,6 +4,7 @@ export interface Props extends ComponentPropsWithRef<"li"> {
     value: string;
     disabled?: boolean;
     isSelected?: boolean;
+    disableDefaultSelectedStyle?: boolean;
     selectOpened?: boolean;
     hasFocus?: boolean;
     shouldClick?: boolean;

package/dist/esm/src/components/Form/Select/SingleSelect/useArrowNavigation.d.ts

@@ -0,0 +1,5 @@
+import { UseArrowNavigationParams } from "../Select.interfaces";
+/** @scope .*/
+export declare const useArrowNavigation: ({ expanded, setExpanded, isSearching, setIsSearching, setFocusedSelectItem, onOptionChangeHandler, childrenCount, setShouldClick, searchInputRef, addBtnRef, renderThreshold }: UseArrowNavigationParams) => {
+    onArrowNavigation: (event: React.KeyboardEvent) => void;
+};

package/dist/esm/src/components/Form/Select/{useSearch.d.ts → SingleSelect/useSearch.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { PartialInputProps, SearchProps } from "./Select.interfaces";
+import { PartialInputProps, SearchProps } from "../Select.interfaces";
 interface Props {
     search?: SearchProps;
     optionsCount: number;
@@ -17,6 +17,7 @@ interface Props {
     expanded: boolean;
     setFocusedSelectItem: (idx: number) => void;
 }
+/** @scope .*/
 export declare const useSearch: ({ search, optionsCount, searchPlaceholder, searchInputProps, searchInputClassName, expanded, setFocusedSelectItem }: Props) => {
     renderSearch: () => React.JSX.Element;
     setIsSearching: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/esm/src/components/Form/Select/useAddNewBtn.d.ts

@@ -1,12 +1,19 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { AddNewProps } from "./Select.interfaces";
 interface Props {
+    id?: string;
     addNew?: AddNewProps;
     filter: string;
+    focusedSelectItem: number;
+    optionsCount: number;
+    searchInputRef: RefObject<HTMLInputElement>;
+    shouldClick?: boolean;
+    onClickCallback?: () => void;
 }
-export declare const useAddNewBtn: ({ addNew, filter }: Props) => {
+/** @scope .*/
+export declare const useAddNewBtn: ({ id, addNew, filter, focusedSelectItem, optionsCount, searchInputRef, shouldClick, onClickCallback }: Props) => {
     addNewBtnOptionsContainerClassName: string;
-    renderAddNew: () => React.JSX.Element | undefined;
+    renderAddNew: () => false | React.JSX.Element | undefined;
     addBtnRef: React.RefObject<HTMLButtonElement>;
 };
 export {};

package/dist/esm/src/components/Form/Select/useSelectPositionList.d.ts

@@ -0,0 +1,12 @@
+import { Position, UseSelectPositionListParams } from "./Select.interfaces";
+/** @scope .*/
+export declare const useSelectPositionList: ({ expanded, optionListReference, addBtnRef, containerReference }: UseSelectPositionListParams) => {
+    optionsListMaxHeight: {
+        wrapper?: string | undefined;
+        list?: string | undefined;
+    };
+    opacity: number;
+    setOpacity: import("react").Dispatch<import("react").SetStateAction<number>>;
+    listPosition: Partial<Position>;
+    setListPosition: import("react").Dispatch<import("react").SetStateAction<Partial<Position>>>;
+};

package/dist/esm/src/components/Notifications/Dialog/Dialog.d.ts

@@ -5,7 +5,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
     id?: string;
     open: boolean;
     children: React.ReactNode;
-    onClose: () => void;
+    onClose?: () => void;
     title: string;
     primaryAction: Action;
     secondaryAction?: Action;

package/dist/esm/src/util/helper.d.ts

@@ -14,4 +14,5 @@ type ObjectType = {
     [key: string]: any;
 };
 export declare const deepMerge: <T extends {}>(obj1: ObjectType, obj2: ObjectType | false) => T;
+export declare const escapeRegExp: (str: string) => string;
 export {};

package/dist/esm/src/util/helper.esm.js

@@ -1,2 +1,2 @@
-const t=(t=15,e)=>{let r=["1","2","3","4","5","6","7","8","9","0","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];let o="";for(let n=0;n<t&&o.length<t;n++){let t=typeof e==="string"&&(e===null||e===void 0?void 0:e[n])!==void 0&&!/\s/.test(e[n])?e[n]:"";o=o+t+r[Math.floor(Math.random()*r.length)]}return o.slice(0,t)};const e=(t,e,r=true)=>{if(r)return Object.keys(t).reduce(((r,o)=>{if(e.test(o))r[o]=t[o];return r}),{});else return Object.entries(t).filter((([t])=>!e.test(t))).reduce(((t,e)=>({...t,[e[0]]:e[1]})),{})};const r=(t,e)=>{let r;return function o(...n){const l=()=>{clearTimeout(r);t(...n)};clearTimeout(r);r=setTimeout(l,e)}};const o=(t,e)=>{let r=0;return function(){let o=Date.now();if(o-r>=e){t();r=o}}};const n=t=>t*parseFloat(getComputedStyle(document.documentElement).fontSize);const l=(t,e)=>{if(!e)return t;let r={...t};for(let o in e)if(Object.prototype.hasOwnProperty.call(e,o))if(typeof e[o]==="object"&&e[o]!==null&&Object.prototype.hasOwnProperty.call(t,o)&&!Array.isArray(e[o]))r[o]=l(t[o],e[o]);else r[o]=e[o];return r};export{r as debounce,l as deepMerge,e as filterProps,t as generateID,n as remToPx,o as throttle};
+const t=(t=15,e)=>{let r=["1","2","3","4","5","6","7","8","9","0","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];let o="";for(let n=0;n<t&&o.length<t;n++){let t=typeof e==="string"&&(e===null||e===void 0?void 0:e[n])!==void 0&&!/\s/.test(e[n])?e[n]:"";o=o+t+r[Math.floor(Math.random()*r.length)]}return o.slice(0,t)};const e=(t,e,r=true)=>{if(r)return Object.keys(t).reduce(((r,o)=>{if(e.test(o))r[o]=t[o];return r}),{});else return Object.entries(t).filter((([t])=>!e.test(t))).reduce(((t,e)=>({...t,[e[0]]:e[1]})),{})};const r=(t,e)=>{let r;return function o(...n){const l=()=>{clearTimeout(r);t(...n)};clearTimeout(r);r=setTimeout(l,e)}};const o=(t,e)=>{let r=0;return function(){let o=Date.now();if(o-r>=e){t();r=o}}};const n=t=>t*parseFloat(getComputedStyle(document.documentElement).fontSize);const l=(t,e)=>{if(!e)return t;let r={...t};for(let o in e)if(Object.prototype.hasOwnProperty.call(e,o))if(typeof e[o]==="object"&&e[o]!==null&&Object.prototype.hasOwnProperty.call(t,o)&&!Array.isArray(e[o]))r[o]=l(t[o],e[o]);else r[o]=e[o];return r};const c=t=>t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");export{r as debounce,l as deepMerge,c as escapeRegExp,e as filterProps,t as generateID,n as remToPx,o as throttle};
 //# sourceMappingURL=helper.esm.js.map

package/dist/esm/src/util/helper.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.esm.js","sources":["../../../../../../src/util/helper.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\ntype KeyValuePair = { [key: string]: unknown };\n\nexport const generateID = (length = 15, stringToWeaveIn?: string) => {\n  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */\n  let hashCharacters = [\n    \"1\",\n    \"2\",\n    \"3\",\n    \"4\",\n    \"5\",\n    \"6\",\n    \"7\",\n    \"8\",\n    \"9\",\n    \"0\",\n    \"A\",\n    \"B\",\n    \"C\",\n    \"D\",\n    \"E\",\n    \"F\",\n    \"G\",\n    \"H\",\n    \"I\",\n    \"J\",\n    \"K\",\n    \"L\",\n    \"M\",\n    \"N\",\n    \"O\",\n    \"P\",\n    \"Q\",\n    \"R\",\n    \"S\",\n    \"T\",\n    \"U\",\n    \"V\",\n    \"W\",\n    \"X\",\n    \"Y\",\n    \"Z\",\n    \"a\",\n    \"b\",\n    \"c\",\n    \"d\",\n    \"e\",\n    \"f\",\n    \"g\",\n    \"h\",\n    \"i\",\n    \"j\",\n    \"k\",\n    \"l\",\n    \"m\",\n    \"n\",\n    \"o\",\n    \"p\",\n    \"q\",\n    \"r\",\n    \"s\",\n    \"t\",\n    \"u\",\n    \"v\",\n    \"w\",\n    \"x\",\n    \"y\",\n    \"z\"\n  ];\n\n  let id = \"\";\n\n  /** Generate an id of x characters in length */\n  for (let i = 0; i < length && id.length < length; i++) {\n    let stringCharacter =\n      typeof stringToWeaveIn === \"string\" &&\n      stringToWeaveIn?.[i] !== undefined &&\n      !/\\s/.test(stringToWeaveIn[i])\n        ? stringToWeaveIn[i]\n        : \"\";\n    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];\n  }\n\n  return id.slice(0, length);\n};\n\nexport const filterProps = (props: any, regexPattern: RegExp, returnFiltered: boolean = true) => {\n  if (returnFiltered) {\n    return Object.keys(props).reduce((acc: KeyValuePair, key) => {\n      if (regexPattern.test(key)) {\n        acc[key] = props[key];\n      }\n\n      return acc;\n    }, {});\n  } else {\n    return Object.entries(props)\n      .filter(([key]) => !regexPattern.test(key))\n      .reduce(\n        (prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }),\n        {}\n      );\n  }\n};\n\nexport const debounce = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let timeout: undefined | ReturnType<typeof setTimeout>;\n\n  return function executedFunction(...args: unknown[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      fn(...args);\n    };\n\n    clearTimeout(timeout);\n\n    timeout = setTimeout(later, delay);\n  };\n};\n\nexport const throttle = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let lastTime = 0;\n\n  return function () {\n    let now = Date.now();\n\n    if (now - lastTime >= delay) {\n      fn();\n      lastTime = now;\n    }\n  };\n};\n\nexport const isEqual = (x: any, y: any): boolean => {\n  const typesCoincide = x && y && typeof x === \"object\" && typeof y === \"object\";\n  return typesCoincide\n    ? Object.keys(x).length === Object.keys(y).length &&\n        Object.keys(x).every(key => isEqual(x[key], y[key]))\n    : x === y;\n};\n\nexport const areArraysDifferent = (\n  arr1: Record<string, any>[],\n  arr2: Record<string, any>[],\n  key: string\n) => {\n  if (arr1.length !== arr2.length) {\n    return true;\n  } else {\n    const firstFilteredArray = arr1.filter(arr1Item =>\n      arr2.some((arr2Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n    const secondFilteredArray = arr2.filter(arr2Item =>\n      arr1.some((arr1Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n\n    return !!firstFilteredArray.length || !!secondFilteredArray.length;\n  }\n};\n\nexport const getValueByPath = (obj: { [key: string]: any }, path: string): any => {\n  return path.split(\".\").reduce((res, prop) => {\n    return res[prop];\n  }, obj);\n};\n\n/** Source: https://stackoverflow.com/a/42769683/5084110 */\nexport const remToPx = (rem: number): number => {\n  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);\n};\n\nexport const isJsonString = (str: any) => {\n  try {\n    JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  return true;\n};\n\ntype ObjectType = { [key: string]: any };\n\nexport const deepMerge = <T extends {}>(obj1: ObjectType, obj2: ObjectType | false): T => {\n  if (!obj2) return obj1 as T;\n\n  let result: ObjectType = { ...obj1 };\n\n  for (let key in obj2) {\n    if (Object.prototype.hasOwnProperty.call(obj2, key)) {\n      if (\n        typeof obj2[key] === \"object\" &&\n        obj2[key] !== null &&\n        Object.prototype.hasOwnProperty.call(obj1, key) &&\n        !Array.isArray(obj2[key])\n      ) {\n        result[key] = deepMerge(obj1[key], obj2[key]);\n      } else {\n        result[key] = obj2[key];\n      }\n    }\n  }\n\n  return result as T;\n};\n"],"names":["generateID","length","stringToWeaveIn","hashCharacters","id","i","stringCharacter","undefined","test","Math","floor","random","slice","filterProps","props","regexPattern","returnFiltered","Object","keys","reduce","acc","key","entries","filter","prevObj","currKeyValPair","debounce","fn","delay","timeout","executedFunction","args","later","clearTimeout","setTimeout","throttle","lastTime","now","Date","remToPx","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","deepMerge","obj1","obj2","result","prototype","hasOwnProperty","call","Array","isArray"],"mappings":"AAkBa,MAAAA,EAAa,CAACC,EAAS,GAAIC,KAEtC,IAAIC,EAAiB,CACnB,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KAGF,IAAIC,EAAK,GAGT,IAAK,IAAIC,EAAI,EAAGA,EAAIJ,GAAUG,EAAGH,OAASA,EAAQI,IAAK,CACrD,IAAIC,SACKJ,IAAoB,WAC3BA,UAAAA,SAAe,OAAA,EAAfA,EAAkBG,WAAOE,IACxB,KAAKC,KAAKN,EAAgBG,IACvBH,EAAgBG,GAChB,GACND,EAAKA,EAAKE,EAAkBH,EAAeM,KAAKC,MAAMD,KAAKE,SAAWR,EAAeF,QACtF,CAED,OAAOG,EAAGQ,MAAM,EAAGX,EAAO,EAGrB,MAAMY,EAAc,CAACC,EAAYC,EAAsBC,EAA0B,QACtF,GAAIA,EACF,OAAOC,OAAOC,KAAKJ,GAAOK,QAAO,CAACC,EAAmBC,KACnD,GAAIN,EAAaP,KAAKa,GACpBD,EAAIC,GAAOP,EAAMO,GAGnB,OAAOD,CAAG,GACT,CAAE,QAEL,OAAOH,OAAOK,QAAQR,GACnBS,QAAO,EAAEF,MAAUN,EAAaP,KAAKa,KACrCF,QACC,CAACK,EAASC,KAAc,IAAWD,EAAS,CAACC,EAAe,IAAKA,EAAe,MAChF,CAAE,EAEP,QAGUC,EAAW,CAACC,EAAqCC,KAC5D,IAAIC,EAEJ,OAAO,SAASC,KAAoBC,GAClC,MAAMC,EAAQ,KACZC,aAAaJ,GACbF,KAAMI,EAAK,EAGbE,aAAaJ,GAEbA,EAAUK,WAAWF,EAAOJ,EAC9B,CAAC,QAGUO,EAAW,CAACR,EAAqCC,KAC5D,IAAIQ,EAAW,EAEf,OAAO,WACL,IAAIC,EAAMC,KAAKD,MAEf,GAAIA,EAAMD,GAAYR,EAAO,CAC3BD,IACAS,EAAWC,CACZ,CACH,CAAC,EAqCU,MAAAE,EAAWC,GACfA,EAAMC,WAAWC,iBAAiBC,SAASC,iBAAiBC,gBAcxDC,EAAY,CAAeC,EAAkBC,KACxD,IAAKA,EAAM,OAAOD,EAElB,IAAIE,EAAqB,IAAKF,GAE9B,IAAK,IAAI1B,KAAO2B,EACd,GAAI/B,OAAOiC,UAAUC,eAAeC,KAAKJ,EAAM3B,GAC7C,UACS2B,EAAK3B,KAAS,UACrB2B,EAAK3B,KAAS,MACdJ,OAAOiC,UAAUC,eAAeC,KAAKL,EAAM1B,KAC1CgC,MAAMC,QAAQN,EAAK3B,IAEpB4B,EAAO5B,GAAOyB,EAAUC,EAAK1B,GAAM2B,EAAK3B,SAExC4B,EAAO5B,GAAO2B,EAAK3B,GAKzB,OAAO4B,CAAW"}
+{"version":3,"file":"helper.esm.js","sources":["../../../../../../src/util/helper.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\ntype KeyValuePair = { [key: string]: unknown };\n\nexport const generateID = (length = 15, stringToWeaveIn?: string) => {\n  /** We will make sure to mesh the generate id and name property together to basically create a unique ID */\n  let hashCharacters = [\n    \"1\",\n    \"2\",\n    \"3\",\n    \"4\",\n    \"5\",\n    \"6\",\n    \"7\",\n    \"8\",\n    \"9\",\n    \"0\",\n    \"A\",\n    \"B\",\n    \"C\",\n    \"D\",\n    \"E\",\n    \"F\",\n    \"G\",\n    \"H\",\n    \"I\",\n    \"J\",\n    \"K\",\n    \"L\",\n    \"M\",\n    \"N\",\n    \"O\",\n    \"P\",\n    \"Q\",\n    \"R\",\n    \"S\",\n    \"T\",\n    \"U\",\n    \"V\",\n    \"W\",\n    \"X\",\n    \"Y\",\n    \"Z\",\n    \"a\",\n    \"b\",\n    \"c\",\n    \"d\",\n    \"e\",\n    \"f\",\n    \"g\",\n    \"h\",\n    \"i\",\n    \"j\",\n    \"k\",\n    \"l\",\n    \"m\",\n    \"n\",\n    \"o\",\n    \"p\",\n    \"q\",\n    \"r\",\n    \"s\",\n    \"t\",\n    \"u\",\n    \"v\",\n    \"w\",\n    \"x\",\n    \"y\",\n    \"z\"\n  ];\n\n  let id = \"\";\n\n  /** Generate an id of x characters in length */\n  for (let i = 0; i < length && id.length < length; i++) {\n    let stringCharacter =\n      typeof stringToWeaveIn === \"string\" &&\n      stringToWeaveIn?.[i] !== undefined &&\n      !/\\s/.test(stringToWeaveIn[i])\n        ? stringToWeaveIn[i]\n        : \"\";\n    id = id + stringCharacter + hashCharacters[Math.floor(Math.random() * hashCharacters.length)];\n  }\n\n  return id.slice(0, length);\n};\n\nexport const filterProps = (props: any, regexPattern: RegExp, returnFiltered: boolean = true) => {\n  if (returnFiltered) {\n    return Object.keys(props).reduce((acc: KeyValuePair, key) => {\n      if (regexPattern.test(key)) {\n        acc[key] = props[key];\n      }\n\n      return acc;\n    }, {});\n  } else {\n    return Object.entries(props)\n      .filter(([key]) => !regexPattern.test(key))\n      .reduce(\n        (prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }),\n        {}\n      );\n  }\n};\n\nexport const debounce = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let timeout: undefined | ReturnType<typeof setTimeout>;\n\n  return function executedFunction(...args: unknown[]) {\n    const later = () => {\n      clearTimeout(timeout);\n      fn(...args);\n    };\n\n    clearTimeout(timeout);\n\n    timeout = setTimeout(later, delay);\n  };\n};\n\nexport const throttle = (fn: (...args: unknown[]) => unknown, delay: number) => {\n  let lastTime = 0;\n\n  return function () {\n    let now = Date.now();\n\n    if (now - lastTime >= delay) {\n      fn();\n      lastTime = now;\n    }\n  };\n};\n\nexport const isEqual = (x: any, y: any): boolean => {\n  const typesCoincide = x && y && typeof x === \"object\" && typeof y === \"object\";\n  return typesCoincide\n    ? Object.keys(x).length === Object.keys(y).length &&\n        Object.keys(x).every(key => isEqual(x[key], y[key]))\n    : x === y;\n};\n\nexport const areArraysDifferent = (\n  arr1: Record<string, any>[],\n  arr2: Record<string, any>[],\n  key: string\n) => {\n  if (arr1.length !== arr2.length) {\n    return true;\n  } else {\n    const firstFilteredArray = arr1.filter(arr1Item =>\n      arr2.some((arr2Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n    const secondFilteredArray = arr2.filter(arr2Item =>\n      arr1.some((arr1Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))\n    );\n\n    return !!firstFilteredArray.length || !!secondFilteredArray.length;\n  }\n};\n\nexport const getValueByPath = (obj: { [key: string]: any }, path: string): any => {\n  return path.split(\".\").reduce((res, prop) => {\n    return res[prop];\n  }, obj);\n};\n\n/** Source: https://stackoverflow.com/a/42769683/5084110 */\nexport const remToPx = (rem: number): number => {\n  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);\n};\n\nexport const isJsonString = (str: any) => {\n  try {\n    JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  return true;\n};\n\ntype ObjectType = { [key: string]: any };\n\nexport const deepMerge = <T extends {}>(obj1: ObjectType, obj2: ObjectType | false): T => {\n  if (!obj2) return obj1 as T;\n\n  let result: ObjectType = { ...obj1 };\n\n  for (let key in obj2) {\n    if (Object.prototype.hasOwnProperty.call(obj2, key)) {\n      if (\n        typeof obj2[key] === \"object\" &&\n        obj2[key] !== null &&\n        Object.prototype.hasOwnProperty.call(obj1, key) &&\n        !Array.isArray(obj2[key])\n      ) {\n        result[key] = deepMerge(obj1[key], obj2[key]);\n      } else {\n        result[key] = obj2[key];\n      }\n    }\n  }\n\n  return result as T;\n};\n\nexport const escapeRegExp = (str: string) => str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n"],"names":["generateID","length","stringToWeaveIn","hashCharacters","id","i","stringCharacter","undefined","test","Math","floor","random","slice","filterProps","props","regexPattern","returnFiltered","Object","keys","reduce","acc","key","entries","filter","prevObj","currKeyValPair","debounce","fn","delay","timeout","executedFunction","args","later","clearTimeout","setTimeout","throttle","lastTime","now","Date","remToPx","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","deepMerge","obj1","obj2","result","prototype","hasOwnProperty","call","Array","isArray","escapeRegExp","str","replace"],"mappings":"AAkBa,MAAAA,EAAa,CAACC,EAAS,GAAIC,KAEtC,IAAIC,EAAiB,CACnB,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,KAGF,IAAIC,EAAK,GAGT,IAAK,IAAIC,EAAI,EAAGA,EAAIJ,GAAUG,EAAGH,OAASA,EAAQI,IAAK,CACrD,IAAIC,SACKJ,IAAoB,WAC3BA,UAAAA,SAAe,OAAA,EAAfA,EAAkBG,WAAOE,IACxB,KAAKC,KAAKN,EAAgBG,IACvBH,EAAgBG,GAChB,GACND,EAAKA,EAAKE,EAAkBH,EAAeM,KAAKC,MAAMD,KAAKE,SAAWR,EAAeF,QACtF,CAED,OAAOG,EAAGQ,MAAM,EAAGX,EAAO,EAGrB,MAAMY,EAAc,CAACC,EAAYC,EAAsBC,EAA0B,QACtF,GAAIA,EACF,OAAOC,OAAOC,KAAKJ,GAAOK,QAAO,CAACC,EAAmBC,KACnD,GAAIN,EAAaP,KAAKa,GACpBD,EAAIC,GAAOP,EAAMO,GAGnB,OAAOD,CAAG,GACT,CAAE,QAEL,OAAOH,OAAOK,QAAQR,GACnBS,QAAO,EAAEF,MAAUN,EAAaP,KAAKa,KACrCF,QACC,CAACK,EAASC,KAAc,IAAWD,EAAS,CAACC,EAAe,IAAKA,EAAe,MAChF,CAAE,EAEP,QAGUC,EAAW,CAACC,EAAqCC,KAC5D,IAAIC,EAEJ,OAAO,SAASC,KAAoBC,GAClC,MAAMC,EAAQ,KACZC,aAAaJ,GACbF,KAAMI,EAAK,EAGbE,aAAaJ,GAEbA,EAAUK,WAAWF,EAAOJ,EAC9B,CAAC,QAGUO,EAAW,CAACR,EAAqCC,KAC5D,IAAIQ,EAAW,EAEf,OAAO,WACL,IAAIC,EAAMC,KAAKD,MAEf,GAAIA,EAAMD,GAAYR,EAAO,CAC3BD,IACAS,EAAWC,CACZ,CACH,CAAC,EAqCU,MAAAE,EAAWC,GACfA,EAAMC,WAAWC,iBAAiBC,SAASC,iBAAiBC,gBAcxDC,EAAY,CAAeC,EAAkBC,KACxD,IAAKA,EAAM,OAAOD,EAElB,IAAIE,EAAqB,IAAKF,GAE9B,IAAK,IAAI1B,KAAO2B,EACd,GAAI/B,OAAOiC,UAAUC,eAAeC,KAAKJ,EAAM3B,GAC7C,UACS2B,EAAK3B,KAAS,UACrB2B,EAAK3B,KAAS,MACdJ,OAAOiC,UAAUC,eAAeC,KAAKL,EAAM1B,KAC1CgC,MAAMC,QAAQN,EAAK3B,IAEpB4B,EAAO5B,GAAOyB,EAAUC,EAAK1B,GAAM2B,EAAK3B,SAExC4B,EAAO5B,GAAO2B,EAAK3B,GAKzB,OAAO4B,CAAW,EAGP,MAAAM,EAAgBC,GAAgBA,EAAIC,QAAQ,sBAAuB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "6.4.4",
+  "version": "6.6.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -82,14 +82,14 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/mdx": "^2.0.12",
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "babel-loader": "^9.1.3",
-    "chromatic": "^10.9.6",
+    "chromatic": "^11.2.0",
     "css-loader": "^6.10.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

package/src/components/Form/FileUpload/FileItem/FileItem.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
-import classes from "./FileItem.modules.scss";
+import classes from "./FileItem.module.scss";
 import { Typography } from "../../../Typography/Typography";
 import { Icon, Icons } from "../../../Icon/Icon";
 import { ProgressBar } from "../../../ProgressBar/ProgressBar";

package/src/components/Form/Select/MultiSelect/MultiOption.tsx

@@ -14,18 +14,51 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction } from "react";
+import React, { ForwardRefRenderFunction, RefObject, createRef, useEffect } from "react";
 import { Props as SelectOptionProps, Option as SelectOption } from "../SingleSelect/Option";
 
+import classes from "./MultiSelect.module.scss";
+
 export interface Props extends SelectOptionProps {
   fixed?: boolean;
 }
 
 const MultiOptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
-  { fixed: _fixed, ...rest }: Props,
+  { fixed: _fixed, hasFocus, className, ...rest }: Props,
   ref
 ) => {
-  return <SelectOption ref={ref} {...rest} />;
+  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
+
+  const additionalClasses = [];
+  className && additionalClasses.push(className);
+  hasFocus && additionalClasses.push(classes["focus"]);
+
+  const scrollToSelectedElement = (element: HTMLLIElement) => {
+    const listbox = element.parentElement;
+    const listboxWrapper = element.parentElement?.parentElement;
+    const isListboxWrapperScrollable = !!listboxWrapper?.style.maxHeight;
+    if (isListboxWrapperScrollable) {
+      listboxWrapper?.scrollTo(0, element.offsetTop - (listboxWrapper?.offsetHeight ?? 1) / 2);
+    }
+    listbox?.scrollTo(0, element.offsetTop - (listbox?.offsetHeight ?? 1) / 2);
+  };
+
+  useEffect(() => {
+    if (innerOptionRef.current && hasFocus) {
+      scrollToSelectedElement(innerOptionRef.current);
+    }
+  }, [hasFocus, innerOptionRef]);
+
+  return (
+    <SelectOption
+      ref={innerOptionRef}
+      isSelected={hasFocus}
+      disableDefaultSelectedStyle
+      className={additionalClasses.join(" ")}
+      aria-disabled={false}
+      {...rest}
+    />
+  );
 };
 
 export const MultiOption = React.forwardRef(MultiOptionComponent);

package/src/components/Form/Select/MultiSelect/MultiSelect.module.scss

@@ -90,6 +90,7 @@ $listItemHeight: 2.5rem;
       display: flex;
       align-items: center;
       padding: 0.1875rem 0;
+      gap: 0.375rem;
     }
   }
 
@@ -143,9 +144,21 @@ $listItemHeight: 2.5rem;
         opacity: 0.05;
       }
 
-      &:focus {
-        outline: var(--input-border-width-focus) solid var(--color-primary300);
-        outline-offset: -var(--input-border-width-focus);
+      &:focus,
+      &.focus {
+        outline: none;
+
+        &::before {
+          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0.125rem;
+          height: 100%;
+          width: calc(100% - 0.25rem);
+          opacity: 1;
+          z-index: calc(variables.$popover-z-index + 1);
+        }
       }
 
       &:hover:after,
@@ -166,20 +179,6 @@ $listItemHeight: 2.5rem;
   }
 }
 
-.selected-option {
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    border-top-right-radius: 0.125rem;
-    border-bottom-right-radius: 0.125rem;
-    border-left: 0.25rem solid var(--color-primary);
-  }
-  color: var(--color-primary);
-}
-
 .status {
   padding: 0.3125rem;
   display: flex;
@@ -210,11 +209,22 @@ $listItemHeight: 2.5rem;
 }
 
 .select-search {
-  position: relative;
-  width: 100%;
+  flex: 1;
   box-sizing: border-box;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--default);
+  font-family: var(--font-family);
+  line-height: 1.3333;
+  margin: 0;
+  padding: 0;
+
+  &:focus-visible,
+  &:focus {
+    outline: none;
+  }
 }
 
 .disabled {