@onewelcome/react-lib-components 6.7.1 → 7.1.0

package/dist/esm/Form/Select/MultiSelect/SelectedOptions.esm.js

@@ -1,2 +1,36 @@
-import e from"react";import{Tag as o}from"../../../Tag/Tag.esm.js";import a from"./SelectedOptions.module.esm.js";const r=({display:r,onRemove:t,disabled:s,...m},l)=>e.createElement("div",{...m,className:a["options"],ref:l},r.map((r=>e.createElement(o,{key:r.value,onClick:e=>{e.stopPropagation()},className:a["tag"],removeButton:!s&&!r.fixed?{onRemove:e=>{e.stopPropagation();t(r.value)},className:a["remove-btn"]}:void 0,backgroundColor:"var(--color-blue-grey100)",shape:"sharp"},r.label))));const t=e.forwardRef(r);export{t as SelectedOptions};
+import React from 'react';
+import { Tag } from '../../../Tag/Tag.esm.js';
+import classes from './SelectedOptions.module.scss.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const SelectedOptionsComponent = ({ display, onRemove, disabled, ...rest }, ref) => {
+    return (React.createElement("div", { ...rest, className: classes["options"], ref: ref }, display.map(item => (React.createElement(Tag, { key: item.value, onClick: (e) => {
+            e.stopPropagation();
+        }, className: classes["tag"], removeButton: !disabled && !item.fixed
+            ? {
+                onRemove: (e) => {
+                    e.stopPropagation();
+                    onRemove(item.value);
+                },
+                className: classes["remove-btn"]
+            }
+            : undefined, backgroundColor: "var(--color-blue-grey100)", shape: "sharp" }, item.label)))));
+};
+const SelectedOptions = React.forwardRef(SelectedOptionsComponent);
+
+export { SelectedOptions };
 //# sourceMappingURL=SelectedOptions.esm.js.map

package/dist/esm/Form/Select/MultiSelect/SelectedOptions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectedOptions.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/SelectedOptions.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\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef } from \"react\";\nimport { Tag } from \"../../../Tag/Tag\";\n\nimport classes from \"./SelectedOptions.module.scss\";\n\nexport type Display = {\n  value: string;\n  label: string;\n  fixed?: boolean;\n};\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  display: Display[];\n  onRemove: (value: string) => void;\n  disabled: boolean;\n}\n\nconst SelectedOptionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { display, onRemove, disabled, ...rest }: Props,\n  ref\n) => {\n  return (\n    <div {...rest} className={classes[\"options\"]} ref={ref}>\n      {display.map(item => (\n        <Tag\n          key={item.value}\n          onClick={(e: React.MouseEvent<HTMLDivElement>) => {\n            e.stopPropagation();\n          }}\n          className={classes[\"tag\"]}\n          removeButton={\n            !disabled && !item.fixed\n              ? {\n                  onRemove: (e: React.MouseEvent<HTMLButtonElement>) => {\n                    e.stopPropagation();\n                    onRemove(item.value);\n                  },\n                  className: classes[\"remove-btn\"]\n                }\n              : undefined\n          }\n          backgroundColor=\"var(--color-blue-grey100)\"\n          shape=\"sharp\"\n        >\n          {item.label}\n        </Tag>\n      ))}\n    </div>\n  );\n};\n\nexport const SelectedOptions = React.forwardRef(SelectedOptionsComponent);\n"],"names":["SelectedOptionsComponent","display","onRemove","disabled","rest","ref","React","createElement","className","classes","map","item","Tag","key","value","onClick","e","stopPropagation","removeButton","fixed","undefined","backgroundColor","shape","label","SelectedOptions","forwardRef"],"mappings":"kHAiCA,MAAMA,EAA4E,EAC9EC,UAASC,WAAUC,cAAaC,GAClCC,IAGEC,EAASC,cAAA,MAAA,IAAAH,EAAMI,UAAWC,EAAQ,WAAYJ,IAAKA,GAChDJ,EAAQS,KAAIC,GACXL,EAACC,cAAAK,GACCC,IAAKF,EAAKG,MACVC,QAAUC,IACRA,EAAEC,iBAAiB,EAErBT,UAAWC,EAAQ,OACnBS,cACGf,IAAaQ,EAAKQ,MACf,CACEjB,SAAWc,IACTA,EAAEC,kBACFf,EAASS,EAAKG,MAAM,EAEtBN,UAAWC,EAAQ,oBAErBW,EAENC,gBAAgB,4BAChBC,MAAM,SAELX,EAAKY,UAOH,MAAAC,EAAkBlB,EAAMmB,WAAWzB"}
+{"version":3,"file":"SelectedOptions.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/SelectedOptions.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\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef } from \"react\";\nimport { Tag } from \"../../../Tag/Tag\";\n\nimport classes from \"./SelectedOptions.module.scss\";\n\nexport type Display = {\n  value: string;\n  label: string;\n  fixed?: boolean;\n};\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  display: Display[];\n  onRemove: (value: string) => void;\n  disabled: boolean;\n}\n\nconst SelectedOptionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { display, onRemove, disabled, ...rest }: Props,\n  ref\n) => {\n  return (\n    <div {...rest} className={classes[\"options\"]} ref={ref}>\n      {display.map(item => (\n        <Tag\n          key={item.value}\n          onClick={(e: React.MouseEvent<HTMLDivElement>) => {\n            e.stopPropagation();\n          }}\n          className={classes[\"tag\"]}\n          removeButton={\n            !disabled && !item.fixed\n              ? {\n                  onRemove: (e: React.MouseEvent<HTMLButtonElement>) => {\n                    e.stopPropagation();\n                    onRemove(item.value);\n                  },\n                  className: classes[\"remove-btn\"]\n                }\n              : undefined\n          }\n          backgroundColor=\"var(--color-blue-grey100)\"\n          shape=\"sharp\"\n        >\n          {item.label}\n        </Tag>\n      ))}\n    </div>\n  );\n};\n\nexport const SelectedOptions = React.forwardRef(SelectedOptionsComponent);\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;AAcG;AAmBH,MAAM,wBAAwB,GAAoD,CAChF,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAS,EAC/C,GAAG,KACD;AACF,IAAA,QACE,KAAS,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAA,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,EACnD,EAAA,OAAO,CAAC,GAAG,CAAC,IAAI,KACf,KAAC,CAAA,aAAA,CAAA,GAAG,IACF,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,CAAC,CAAmC,KAAI;YAC/C,CAAC,CAAC,eAAe,EAAE,CAAC;AACtB,SAAC,EACD,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,EACzB,YAAY,EACV,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK;AACtB,cAAE;AACE,gBAAA,QAAQ,EAAE,CAAC,CAAsC,KAAI;oBACnD,CAAC,CAAC,eAAe,EAAE,CAAC;AACpB,oBAAA,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACtB;AACD,gBAAA,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC;AACjC,aAAA;AACH,cAAE,SAAS,EAEf,eAAe,EAAC,2BAA2B,EAC3C,KAAK,EAAC,OAAO,EAEZ,EAAA,IAAI,CAAC,KAAK,CACP,CACP,CAAC,CACE,EACN;AACJ,CAAC,CAAC;AAEW,MAAA,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAwB;;;;"}

package/dist/esm/Form/Select/MultiSelect/SelectedOptions.module.scss.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*!\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 */.SelectedOptions-module_options__VYJq-{cursor:pointer;display:flex;flex-wrap:wrap;gap:.375rem;position:relative}.SelectedOptions-module_tag__13q5Q{cursor:text}.SelectedOptions-module_tag__13q5Q .SelectedOptions-module_remove-btn__U99-Y{cursor:pointer}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlbGVjdGVkT3B0aW9ucy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLHVDQUtFLGNBQWUsQ0FIZixZQUFhLENBRWIsY0FBZSxDQURmLFdBQWEsQ0FGYixpQkFLRixDQUVBLG1DQUNFLFdBQ0YsQ0FDQSw2RUFDRSxjQUNGIiwiZmlsZSI6IlNlbGVjdGVkT3B0aW9ucy5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4ub3B0aW9ucyB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAwLjM3NXJlbTtcbiAgZmxleC13cmFwOiB3cmFwO1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG5cbi50YWcge1xuICBjdXJzb3I6IHRleHQ7XG59XG4udGFnIC5yZW1vdmUtYnRuIHtcbiAgY3Vyc29yOiBwb2ludGVyO1xufSJdfQ== */";
+var classes = {"options":"SelectedOptions-module_options__VYJq-","tag":"SelectedOptions-module_tag__13q5Q","remove-btn":"SelectedOptions-module_remove-btn__U99-Y"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=SelectedOptions.module.scss.esm.js.map

package/dist/esm/Form/Select/MultiSelect/SelectedOptions.module.scss.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedOptions.module.scss.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/Form/Select/MultiSelect/useArrowNavigation.esm.js

@@ -1,2 +1,99 @@
-const e=({expanded:e,setExpanded:t,setFocusedSelectItem:r,childrenCount:a,setShouldClick:c,addBtnRef:n,searchInputRef:o,customSelectButtonRef:s,onClose:u})=>{const i=i=>{const f=["ArrowDown","ArrowUp","Escape","End","Home"];const d=!!(n===null||n===void 0?void 0:n.current);const p=a+(d?1:0);const l=i.target===o.current;const b=i.target===s.current;const k=b||l;if(e){f.push("Tab");f.push("Enter")}if(!e)f.push("Space");if(f.includes(i.code)&&!i.metaKey)i.preventDefault();switch(i.code){case"ArrowDown":if(!e){t(true);r(0);break}r((e=>e+1>p-1?0:e+1));break;case"ArrowUp":if(!e){t(true);r(p-1);break}r((e=>e-1<0?p-1:e-1));break;case"Enter":if(e)c(true);else r(0);if(k)t(!e);break;case"Space":if(!e){t(true);r(0)}break;case"Home":r(0);break;case"Escape":if(e){t(false);u()}break;case"End":r(a-1);break;case"ArrowLeft":if(i.metaKey&&e){i.preventDefault();r(0)}break;case"ArrowRight":if(i.metaKey&&e){i.preventDefault();r(a-1)}break}};return{onArrowNavigation:i}};export{e as useArrowNavigation};
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+/** @scope .*/
+const useArrowNavigation = ({ expanded, setExpanded, setFocusedSelectItem, childrenCount, setShouldClick, addBtnRef, searchInputRef, customSelectButtonRef, onClose }) => {
+    const onArrowNavigation = (event) => {
+        const codesToPreventDefault = ["ArrowDown", "ArrowUp", "Escape", "End", "Home"];
+        const hasAddBtn = !!(addBtnRef === null || addBtnRef === void 0 ? void 0 : addBtnRef.current);
+        const childrenCountWithAddButton = childrenCount + (hasAddBtn ? 1 : 0);
+        const isSearchEvent = event.target === searchInputRef.current;
+        const isSelectButtonEvent = event.target === customSelectButtonRef.current;
+        const isSearchOrSelectButtonEvent = isSelectButtonEvent || isSearchEvent;
+        if (expanded) {
+            codesToPreventDefault.push("Tab");
+            codesToPreventDefault.push("Enter");
+        }
+        if (!expanded) {
+            codesToPreventDefault.push("Space");
+        }
+        if (codesToPreventDefault.includes(event.code) && !event.metaKey) {
+            event.preventDefault();
+        }
+        switch (event.code) {
+            case "ArrowDown":
+                if (!expanded) {
+                    setExpanded(true);
+                    setFocusedSelectItem(0);
+                    break;
+                }
+                setFocusedSelectItem(prevState => prevState + 1 > childrenCountWithAddButton - 1 ? 0 : prevState + 1);
+                break;
+            case "ArrowUp":
+                if (!expanded) {
+                    setExpanded(true);
+                    setFocusedSelectItem(childrenCountWithAddButton - 1);
+                    break;
+                }
+                setFocusedSelectItem(prevState => prevState - 1 < 0 ? childrenCountWithAddButton - 1 : prevState - 1);
+                break;
+            case "Enter":
+                if (expanded) {
+                    setShouldClick(true);
+                }
+                else {
+                    setFocusedSelectItem(0);
+                }
+                if (isSearchOrSelectButtonEvent) {
+                    setExpanded(!expanded);
+                }
+                break;
+            case "Space":
+                if (!expanded) {
+                    setExpanded(true);
+                    setFocusedSelectItem(0);
+                }
+                break;
+            case "Home":
+                setFocusedSelectItem(0);
+                break;
+            case "Escape":
+                if (expanded) {
+                    setExpanded(false);
+                    onClose();
+                }
+                break;
+            case "End":
+                setFocusedSelectItem(childrenCount - 1);
+                break;
+            case "ArrowLeft":
+                if (event.metaKey && expanded) {
+                    event.preventDefault();
+                    setFocusedSelectItem(0);
+                }
+                break;
+            case "ArrowRight":
+                if (event.metaKey && expanded) {
+                    event.preventDefault();
+                    setFocusedSelectItem(childrenCount - 1);
+                }
+                break;
+        }
+    };
+    return { onArrowNavigation };
+};
+
+export { useArrowNavigation };
 //# sourceMappingURL=useArrowNavigation.esm.js.map

package/dist/esm/Form/Select/MultiSelect/useArrowNavigation.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useArrowNavigation.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/useArrowNavigation.ts"],"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\ninterface UseArrowNavigationParams {\n  expanded: boolean;\n  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;\n  setFocusedSelectItem: React.Dispatch<React.SetStateAction<number>>;\n  childrenCount: number;\n  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;\n  addBtnRef: React.RefObject<HTMLButtonElement>;\n  searchInputRef: React.RefObject<HTMLInputElement>;\n  customSelectButtonRef: React.RefObject<HTMLButtonElement>;\n  onClose: () => void;\n}\n\n/** @scope .*/\nexport const useArrowNavigation = ({\n  expanded,\n  setExpanded,\n  setFocusedSelectItem,\n  childrenCount,\n  setShouldClick,\n  addBtnRef,\n  searchInputRef,\n  customSelectButtonRef,\n  onClose\n}: UseArrowNavigationParams) => {\n  const onArrowNavigation = (event: React.KeyboardEvent) => {\n    const codesToPreventDefault = [\"ArrowDown\", \"ArrowUp\", \"Escape\", \"End\", \"Home\"];\n    const hasAddBtn = !!addBtnRef?.current;\n    const childrenCountWithAddButton = childrenCount + (hasAddBtn ? 1 : 0);\n    const isSearchEvent = event.target === searchInputRef.current;\n    const isSelectButtonEvent = event.target === customSelectButtonRef.current;\n    const isSearchOrSelectButtonEvent = isSelectButtonEvent || isSearchEvent;\n\n    if (expanded) {\n      codesToPreventDefault.push(\"Tab\");\n      codesToPreventDefault.push(\"Enter\");\n    }\n\n    if (!expanded) {\n      codesToPreventDefault.push(\"Space\");\n    }\n\n    if (codesToPreventDefault.includes(event.code) && !event.metaKey) {\n      event.preventDefault();\n    }\n\n    switch (event.code) {\n      case \"ArrowDown\":\n        if (!expanded) {\n          setExpanded(true);\n          setFocusedSelectItem(0);\n          break;\n        }\n        setFocusedSelectItem(prevState =>\n          prevState + 1 > childrenCountWithAddButton - 1 ? 0 : prevState + 1\n        );\n        break;\n      case \"ArrowUp\":\n        if (!expanded) {\n          setExpanded(true);\n          setFocusedSelectItem(childrenCountWithAddButton - 1);\n          break;\n        }\n\n        setFocusedSelectItem(prevState =>\n          prevState - 1 < 0 ? childrenCountWithAddButton - 1 : prevState - 1\n        );\n        break;\n      case \"Enter\":\n        if (expanded) {\n          setShouldClick(true);\n        } else {\n          setFocusedSelectItem(0);\n        }\n        if (isSearchOrSelectButtonEvent) {\n          setExpanded(!expanded);\n        }\n        break;\n      case \"Space\":\n        if (!expanded) {\n          setExpanded(true);\n          setFocusedSelectItem(0);\n        }\n        break;\n      case \"Home\":\n        setFocusedSelectItem(0);\n        break;\n      case \"Escape\":\n        if (expanded) {\n          setExpanded(false);\n          onClose();\n        }\n        break;\n      case \"End\":\n        setFocusedSelectItem(childrenCount - 1);\n        break;\n      case \"ArrowLeft\":\n        if (event.metaKey && expanded) {\n          event.preventDefault();\n          setFocusedSelectItem(0);\n        }\n        break;\n      case \"ArrowRight\":\n        if (event.metaKey && expanded) {\n          event.preventDefault();\n          setFocusedSelectItem(childrenCount - 1);\n        }\n        break;\n    }\n  };\n\n  return { onArrowNavigation };\n};\n"],"names":["useArrowNavigation","expanded","setExpanded","setFocusedSelectItem","childrenCount","setShouldClick","addBtnRef","searchInputRef","customSelectButtonRef","onClose","onArrowNavigation","event","codesToPreventDefault","hasAddBtn","current","childrenCountWithAddButton","isSearchEvent","target","isSelectButtonEvent","isSearchOrSelectButtonEvent","push","includes","code","metaKey","preventDefault","prevState"],"mappings":"AA6Ba,MAAAA,EAAqB,EAChCC,WACAC,cACAC,uBACAC,gBACAC,iBACAC,YACAC,iBACAC,wBACAC,cAEA,MAAMC,EAAqBC,IACzB,MAAMC,EAAwB,CAAC,YAAa,UAAW,SAAU,MAAO,QACxE,MAAMC,KAAcP,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAWQ,SAC/B,MAAMC,EAA6BX,GAAiBS,EAAY,EAAI,GACpE,MAAMG,EAAgBL,EAAMM,SAAWV,EAAeO,QACtD,MAAMI,EAAsBP,EAAMM,SAAWT,EAAsBM,QACnE,MAAMK,EAA8BD,GAAuBF,EAE3D,GAAIf,EAAU,CACZW,EAAsBQ,KAAK,OAC3BR,EAAsBQ,KAAK,QAC5B,CAED,IAAKnB,EACHW,EAAsBQ,KAAK,SAG7B,GAAIR,EAAsBS,SAASV,EAAMW,QAAUX,EAAMY,QACvDZ,EAAMa,iBAGR,OAAQb,EAAMW,MACZ,IAAK,YACH,IAAKrB,EAAU,CACbC,EAAY,MACZC,EAAqB,GACrB,KACD,CACDA,GAAqBsB,GACnBA,EAAY,EAAIV,EAA6B,EAAI,EAAIU,EAAY,IAEnE,MACF,IAAK,UACH,IAAKxB,EAAU,CACbC,EAAY,MACZC,EAAqBY,EAA6B,GAClD,KACD,CAEDZ,GAAqBsB,GACnBA,EAAY,EAAI,EAAIV,EAA6B,EAAIU,EAAY,IAEnE,MACF,IAAK,QACH,GAAIxB,EACFI,EAAe,WAEfF,EAAqB,GAEvB,GAAIgB,EACFjB,GAAaD,GAEf,MACF,IAAK,QACH,IAAKA,EAAU,CACbC,EAAY,MACZC,EAAqB,EACtB,CACD,MACF,IAAK,OACHA,EAAqB,GACrB,MACF,IAAK,SACH,GAAIF,EAAU,CACZC,EAAY,OACZO,GACD,CACD,MACF,IAAK,MACHN,EAAqBC,EAAgB,GACrC,MACF,IAAK,YACH,GAAIO,EAAMY,SAAWtB,EAAU,CAC7BU,EAAMa,iBACNrB,EAAqB,EACtB,CACD,MACF,IAAK,aACH,GAAIQ,EAAMY,SAAWtB,EAAU,CAC7BU,EAAMa,iBACNrB,EAAqBC,EAAgB,EACtC,CACD,MACH,EAGH,MAAO,CAAEM,oBAAmB"}
+{"version":3,"file":"useArrowNavigation.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/useArrowNavigation.ts"],"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\ninterface UseArrowNavigationParams {\n  expanded: boolean;\n  setExpanded: React.Dispatch<React.SetStateAction<boolean>>;\n  setFocusedSelectItem: React.Dispatch<React.SetStateAction<number>>;\n  childrenCount: number;\n  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;\n  addBtnRef: React.RefObject<HTMLButtonElement>;\n  searchInputRef: React.RefObject<HTMLInputElement>;\n  customSelectButtonRef: React.RefObject<HTMLButtonElement>;\n  onClose: () => void;\n}\n\n/** @scope .*/\nexport const useArrowNavigation = ({\n  expanded,\n  setExpanded,\n  setFocusedSelectItem,\n  childrenCount,\n  setShouldClick,\n  addBtnRef,\n  searchInputRef,\n  customSelectButtonRef,\n  onClose\n}: UseArrowNavigationParams) => {\n  const onArrowNavigation = (event: React.KeyboardEvent) => {\n    const codesToPreventDefault = [\"ArrowDown\", \"ArrowUp\", \"Escape\", \"End\", \"Home\"];\n    const hasAddBtn = !!addBtnRef?.current;\n    const childrenCountWithAddButton = childrenCount + (hasAddBtn ? 1 : 0);\n    const isSearchEvent = event.target === searchInputRef.current;\n    const isSelectButtonEvent = event.target === customSelectButtonRef.current;\n    const isSearchOrSelectButtonEvent = isSelectButtonEvent || isSearchEvent;\n\n    if (expanded) {\n      codesToPreventDefault.push(\"Tab\");\n      codesToPreventDefault.push(\"Enter\");\n    }\n\n    if (!expanded) {\n      codesToPreventDefault.push(\"Space\");\n    }\n\n    if (codesToPreventDefault.includes(event.code) && !event.metaKey) {\n      event.preventDefault();\n    }\n\n    switch (event.code) {\n      case \"ArrowDown\":\n        if (!expanded) {\n          setExpanded(true);\n          setFocusedSelectItem(0);\n          break;\n        }\n        setFocusedSelectItem(prevState =>\n          prevState + 1 > childrenCountWithAddButton - 1 ? 0 : prevState + 1\n        );\n        break;\n      case \"ArrowUp\":\n        if (!expanded) {\n          setExpanded(true);\n          setFocusedSelectItem(childrenCountWithAddButton - 1);\n          break;\n        }\n\n        setFocusedSelectItem(prevState =>\n          prevState - 1 < 0 ? childrenCountWithAddButton - 1 : prevState - 1\n        );\n        break;\n      case \"Enter\":\n        if (expanded) {\n          setShouldClick(true);\n        } else {\n          setFocusedSelectItem(0);\n        }\n        if (isSearchOrSelectButtonEvent) {\n          setExpanded(!expanded);\n        }\n        break;\n      case \"Space\":\n        if (!expanded) {\n          setExpanded(true);\n          setFocusedSelectItem(0);\n        }\n        break;\n      case \"Home\":\n        setFocusedSelectItem(0);\n        break;\n      case \"Escape\":\n        if (expanded) {\n          setExpanded(false);\n          onClose();\n        }\n        break;\n      case \"End\":\n        setFocusedSelectItem(childrenCount - 1);\n        break;\n      case \"ArrowLeft\":\n        if (event.metaKey && expanded) {\n          event.preventDefault();\n          setFocusedSelectItem(0);\n        }\n        break;\n      case \"ArrowRight\":\n        if (event.metaKey && expanded) {\n          event.preventDefault();\n          setFocusedSelectItem(childrenCount - 1);\n        }\n        break;\n    }\n  };\n\n  return { onArrowNavigation };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Form/Select/MultiSelect/useSearch.esm.js

@@ -1,2 +1,63 @@
-import e,{useState as o,useRef as r,useEffect as t}from"react";const l=({selectId:l,search:n,optionsCount:a,searchPlaceholder:s,searchInputProps:d,searchInputClassName:i,expanded:c,setFocusedSelectItem:u,focusedSelectItem:v,describedBy:p,getOptionId:h,getListboxId:f})=>{var m,I;const[b,x]=o("");const C=0;const P=r(null);const y=(m=n===null||n===void 0?void 0:n.renderThreshold)!==null&&m!==void 0?m:C;const S=a>=y;const g=()=>{if(n===null||n===void 0?void 0:n.enabled)return S;if(n)return n.enabled;return a>C};const N=()=>{var o,r,t;return e.createElement("input",{...(r=(o=n===null||n===void 0?void 0:n.searchInputProps)!==null&&o!==void 0?o:d)!==null&&r!==void 0?r:{},ref:P,value:b,onChange:e=>x(e.currentTarget.value),className:[i,d===null||d===void 0?void 0:d.className].join(" "),style:{display:c?"block":"none"},type:"text",name:"search-option",placeholder:(t=n===null||n===void 0?void 0:n.searchPlaceholder)!==null&&t!==void 0?t:s,role:"combobox",autoComplete:"off",autoCorrect:"off",spellCheck:false,"aria-controls":f(l),"aria-describedby":p,"aria-autocomplete":"none","aria-expanded":c,"aria-activedescendant":h(l,v),"aria-haspopup":true})};const T=()=>{x("");u(0)};const k=g();t((()=>{var e;if(((e=n===null||n===void 0?void 0:n.searchInputProps)===null||e===void 0?void 0:e.reset)||(d===null||d===void 0?void 0:d.reset))T()}),[d===null||d===void 0?void 0:d.reset,(I=n===null||n===void 0?void 0:n.searchInputProps)===null||I===void 0?void 0:I.reset]);return{renderSearch:N,resetSearchState:T,searchVisible:k,searchThreshold:y,searchInputRef:P,filter:b}};export{l as useSearch};
+import React, { useState, useRef, useEffect } from 'react';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+/** @scope .*/
+const useSearch = ({ selectId, search, optionsCount, searchInputClassName, expanded, setFocusedSelectItem, focusedSelectItem, describedBy, getOptionId, getListboxId }) => {
+    var _a, _b;
+    const [filter, setFilter] = useState("");
+    const DEFAULT_RENDER_THRESHOLD = 0;
+    const searchInputRef = useRef(null);
+    const threshold = (_a = search === null || search === void 0 ? void 0 : search.renderThreshold) !== null && _a !== void 0 ? _a : DEFAULT_RENDER_THRESHOLD;
+    const hasEnoughChildren = optionsCount >= threshold;
+    const shouldRenderSearch = () => {
+        if (search === null || search === void 0 ? void 0 : search.enabled) {
+            return hasEnoughChildren;
+        }
+        if (search) {
+            return search.enabled;
+        }
+        return optionsCount > DEFAULT_RENDER_THRESHOLD;
+    };
+    const renderSearch = () => {
+        var _a, _b;
+        return (React.createElement("input", { ...((_a = search === null || search === void 0 ? void 0 : search.searchInputProps) !== null && _a !== void 0 ? _a : {}), ref: searchInputRef, value: filter, onChange: event => setFilter(event.currentTarget.value), className: [searchInputClassName, (_b = search === null || search === void 0 ? void 0 : search.searchInputProps) === null || _b === void 0 ? void 0 : _b.className].join(" "), style: {
+                display: expanded ? "block" : "none"
+            }, type: "text", name: "search-option", placeholder: search === null || search === void 0 ? void 0 : search.searchPlaceholder, role: "combobox", autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-controls": getListboxId(selectId), "aria-describedby": describedBy, "aria-autocomplete": "none", "aria-expanded": expanded, "aria-activedescendant": getOptionId(selectId, focusedSelectItem), "aria-haspopup": true }));
+    };
+    const resetSearchState = () => {
+        setFilter("");
+        setFocusedSelectItem(0);
+    };
+    const visible = shouldRenderSearch();
+    useEffect(() => {
+        var _a;
+        if ((_a = search === null || search === void 0 ? void 0 : search.searchInputProps) === null || _a === void 0 ? void 0 : _a.reset) {
+            resetSearchState();
+        }
+    }, [(_b = search === null || search === void 0 ? void 0 : search.searchInputProps) === null || _b === void 0 ? void 0 : _b.reset]);
+    return {
+        renderSearch,
+        resetSearchState,
+        searchVisible: visible,
+        searchThreshold: threshold,
+        searchInputRef,
+        filter
+    };
+};
+
+export { useSearch };
 //# sourceMappingURL=useSearch.esm.js.map

package/dist/esm/Form/Select/MultiSelect/useSearch.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSearch.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/useSearch.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\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { PartialInputProps, SearchProps } from \"../Select.interfaces\";\n\ninterface Props {\n  selectId: string;\n  search?: SearchProps;\n  optionsCount: number;\n  /**\n   * @deprecated\n   */\n  searchPlaceholder?: string;\n  /**\n   * @deprecated\n   */\n  searchInputProps?: PartialInputProps & { reset?: boolean };\n  searchInputClassName: string;\n  expanded: boolean;\n  setFocusedSelectItem: (idx: number) => void;\n  focusedSelectItem: number;\n  describedBy?: string;\n  getOptionId: (multiSelectId: string, optionIndex: number) => string;\n  getListboxId: (multiSelectId: string) => string;\n}\n\n/** @scope .*/\nexport const useSearch = ({\n  selectId,\n  search,\n  optionsCount,\n  searchPlaceholder,\n  searchInputProps,\n  searchInputClassName,\n  expanded,\n  setFocusedSelectItem,\n  focusedSelectItem,\n  describedBy,\n  getOptionId,\n  getListboxId\n}: Props) => {\n  const [filter, setFilter] = useState(\"\");\n\n  const DEFAULT_RENDER_THRESHOLD = 0;\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;\n  const hasEnoughChildren = optionsCount >= threshold;\n\n  const shouldRenderSearch = () => {\n    if (search?.enabled) {\n      return hasEnoughChildren;\n    }\n\n    if (search) {\n      return search.enabled as boolean;\n    }\n\n    return optionsCount > DEFAULT_RENDER_THRESHOLD;\n  };\n\n  const renderSearch = () => {\n    return (\n      <input\n        {...((search?.searchInputProps as any) ?? searchInputProps ?? {})}\n        ref={searchInputRef}\n        value={filter}\n        onChange={event => setFilter(event.currentTarget.value)}\n        className={[searchInputClassName, searchInputProps?.className].join(\" \")}\n        style={{\n          display: expanded ? \"block\" : \"none\"\n        }}\n        type=\"text\"\n        name=\"search-option\"\n        placeholder={search?.searchPlaceholder ?? searchPlaceholder}\n        role=\"combobox\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        aria-controls={getListboxId(selectId)}\n        aria-describedby={describedBy}\n        aria-autocomplete=\"none\"\n        aria-expanded={expanded}\n        aria-activedescendant={getOptionId(selectId, focusedSelectItem)}\n        aria-haspopup={true}\n      />\n    );\n  };\n\n  const resetSearchState = () => {\n    setFilter(\"\");\n    setFocusedSelectItem(0);\n  };\n\n  const visible = shouldRenderSearch();\n\n  useEffect(() => {\n    if (search?.searchInputProps?.reset || searchInputProps?.reset) {\n      resetSearchState();\n    }\n  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);\n\n  return {\n    renderSearch,\n    resetSearchState,\n    searchVisible: visible,\n    searchThreshold: threshold,\n    searchInputRef,\n    filter\n  };\n};\n"],"names":["useSearch","selectId","search","optionsCount","searchPlaceholder","searchInputProps","searchInputClassName","expanded","setFocusedSelectItem","focusedSelectItem","describedBy","getOptionId","getListboxId","filter","setFilter","useState","DEFAULT_RENDER_THRESHOLD","searchInputRef","useRef","threshold","_a","renderThreshold","hasEnoughChildren","shouldRenderSearch","enabled","renderSearch","React","createElement","_b","ref","value","onChange","event","currentTarget","className","join","style","display","type","name","placeholder","_c","role","autoComplete","autoCorrect","spellCheck","resetSearchState","visible","useEffect","reset","searchVisible","searchThreshold"],"mappings":"+DAyCO,MAAMA,EAAY,EACvBC,WACAC,SACAC,eACAC,oBACAC,mBACAC,uBACAC,WACAC,uBACAC,oBACAC,cACAC,cACAC,2BAEA,MAAOC,EAAQC,GAAaC,EAAS,IAErC,MAAMC,EAA2B,EAEjC,MAAMC,EAAiBC,EAAyB,MAEhD,MAAMC,GAAYC,EAAAlB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQmB,mBAAmB,MAAAD,SAAA,EAAAA,EAAAJ,EAC7C,MAAMM,EAAoBnB,GAAgBgB,EAE1C,MAAMI,EAAqB,KACzB,GAAIrB,UAAAA,SAAM,OAAA,EAANA,EAAQsB,QACV,OAAOF,EAGT,GAAIpB,EACF,OAAOA,EAAOsB,QAGhB,OAAOrB,EAAea,CAAwB,EAGhD,MAAMS,EAAe,eACnB,OACEC,EAAAC,cAAA,QAAA,KACOC,GAACR,EAAAlB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQG,oBAA4B,MAAAe,SAAA,EAAAA,EAAAf,KAAoB,MAAAuB,SAAA,EAAAA,EAAA,GAC9DC,IAAKZ,EACLa,MAAOjB,EACPkB,SAAUC,GAASlB,EAAUkB,EAAMC,cAAcH,OACjDI,UAAW,CAAC5B,EAAsBD,IAAgB,MAAhBA,SAAgB,OAAA,EAAhBA,EAAkB6B,WAAWC,KAAK,KACpEC,MAAO,CACLC,QAAS9B,EAAW,QAAU,QAEhC+B,KAAK,OACLC,KAAK,gBACLC,aAAaC,EAAAvC,IAAM,MAANA,SAAM,OAAA,EAANA,EAAQE,qBAAiB,MAAAqC,SAAA,EAAAA,EAAIrC,EAC1CsC,KAAK,WACLC,aAAa,MACbC,YAAY,MACZC,WAAY,MACG,gBAAAjC,EAAaX,GAAS,mBACnBS,EAAW,oBACX,OAAM,gBACTH,EAAQ,wBACAI,EAAYV,EAAUQ,GAC9B,gBAAA,MAEjB,EAGJ,MAAMqC,EAAmB,KACvBhC,EAAU,IACVN,EAAqB,EAAE,EAGzB,MAAMuC,EAAUxB,IAEhByB,GAAU,WACR,OAAI9C,IAAM,MAANA,SAAA,OAAA,EAAAA,EAAQG,oBAAgB,MAAAe,SAAA,OAAA,EAAAA,EAAE6B,SAAS5C,UAAAA,SAAgB,OAAA,EAAhBA,EAAkB4C,OACvDH,GACD,GACA,CAACzC,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkB4C,OAAOrB,EAAA1B,IAAA,MAAAA,kBAAAA,EAAQG,oBAAkB,MAAAuB,SAAA,OAAA,EAAAA,EAAAqB,QAEvD,MAAO,CACLxB,eACAqB,mBACAI,cAAeH,EACfI,gBAAiBhC,EACjBF,iBACAJ,SACD"}
+{"version":3,"file":"useSearch.esm.js","sources":["../../../../../../../src/components/Form/Select/MultiSelect/useSearch.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\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { SearchProps } from \"../Select.interfaces\";\n\ninterface Props {\n  selectId: string;\n  search?: SearchProps;\n  optionsCount: number;\n  searchInputClassName: string;\n  expanded: boolean;\n  setFocusedSelectItem: (idx: number) => void;\n  focusedSelectItem: number;\n  describedBy?: string;\n  getOptionId: (multiSelectId: string, optionIndex: number) => string;\n  getListboxId: (multiSelectId: string) => string;\n}\n\n/** @scope .*/\nexport const useSearch = ({\n  selectId,\n  search,\n  optionsCount,\n  searchInputClassName,\n  expanded,\n  setFocusedSelectItem,\n  focusedSelectItem,\n  describedBy,\n  getOptionId,\n  getListboxId\n}: Props) => {\n  const [filter, setFilter] = useState(\"\");\n\n  const DEFAULT_RENDER_THRESHOLD = 0;\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;\n  const hasEnoughChildren = optionsCount >= threshold;\n\n  const shouldRenderSearch = () => {\n    if (search?.enabled) {\n      return hasEnoughChildren;\n    }\n\n    if (search) {\n      return search.enabled as boolean;\n    }\n\n    return optionsCount > DEFAULT_RENDER_THRESHOLD;\n  };\n\n  const renderSearch = () => {\n    return (\n      <input\n        {...((search?.searchInputProps as any) ?? {})}\n        ref={searchInputRef}\n        value={filter}\n        onChange={event => setFilter(event.currentTarget.value)}\n        className={[searchInputClassName, search?.searchInputProps?.className].join(\" \")}\n        style={{\n          display: expanded ? \"block\" : \"none\"\n        }}\n        type=\"text\"\n        name=\"search-option\"\n        placeholder={search?.searchPlaceholder}\n        role=\"combobox\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        aria-controls={getListboxId(selectId)}\n        aria-describedby={describedBy}\n        aria-autocomplete=\"none\"\n        aria-expanded={expanded}\n        aria-activedescendant={getOptionId(selectId, focusedSelectItem)}\n        aria-haspopup={true}\n      />\n    );\n  };\n\n  const resetSearchState = () => {\n    setFilter(\"\");\n    setFocusedSelectItem(0);\n  };\n\n  const visible = shouldRenderSearch();\n\n  useEffect(() => {\n    if (search?.searchInputProps?.reset) {\n      resetSearchState();\n    }\n  }, [search?.searchInputProps?.reset]);\n\n  return {\n    renderSearch,\n    resetSearchState,\n    searchVisible: visible,\n    searchThreshold: threshold,\n    searchInputRef,\n    filter\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Form/Select/SingleSelect/Option.esm.js

@@ -1,2 +1,51 @@
-import e,{useRef as t,createRef as o,useEffect as c}from"react";import l from"./Select.module.esm.js";import{generateID as s}from"../../../src/util/helper.esm.js";const n=({id:n,children:r,className:i,isSelected:d=false,disableDefaultSelectedStyle:a,shouldClick:u,hasFocus:p,selectOpened:f,isSearching:m,childIndex:h,onOptionSelect:v,onFocusChange:S,disabled:b,value:g,isAddBtnFocused:j,...k},x)=>{const C=t(s(20));const D=n!==null&&n!==void 0?n:C.current;let F=x||o();const w=[];i&&w.push(i);d&&!a&&w.push(l["selected-option"]);b&&w.push(l["disabled"]);c((()=>{if(d&&F.current&&u)F.current.click()}),[d,u]);c((()=>{if(F.current&&p&&f&&!m&&!j){S&&h&&S(h);F.current.focus()}}),[p,F,f,m]);const y=()=>v===null||v===void 0?void 0:v(F);return e.createElement("li",{...k,id:D,ref:F,"data-value":g,className:w.join(" "),onClick:y,onKeyDown:e=>{if(e.code==="Enter"){e.stopPropagation();e.preventDefault();y()}},"aria-selected":d,role:"option",tabIndex:b?-1:0},r)};const r=e.forwardRef(n);export{r as Option};
+import React, { useRef, createRef, useEffect } from 'react';
+import classes from './Select.module.scss.esm.js';
+import { generateID } from '../../../src/util/helper.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const OptionComponent = ({ id, children, className, isSelected = false, disableDefaultSelectedStyle, shouldClick, hasFocus, selectOpened, isSearching, childIndex, onOptionSelect, onFocusChange, disabled, value, isAddBtnFocused, ...rest }, ref) => {
+    const defaultOptionId = useRef(generateID(20));
+    const optionId = id !== null && id !== void 0 ? id : defaultOptionId.current;
+    let innerOptionRef = ref || createRef();
+    const additionalClasses = [];
+    className && additionalClasses.push(className);
+    isSelected && !disableDefaultSelectedStyle && additionalClasses.push(classes["selected-option"]);
+    disabled && additionalClasses.push(classes["disabled"]);
+    useEffect(() => {
+        if (isSelected && innerOptionRef.current && shouldClick) {
+            innerOptionRef.current.click();
+        }
+    }, [isSelected, shouldClick]);
+    useEffect(() => {
+        if (innerOptionRef.current && hasFocus && selectOpened && !isSearching && !isAddBtnFocused) {
+            onFocusChange && childIndex && onFocusChange(childIndex);
+            innerOptionRef.current.focus();
+        }
+    }, [hasFocus, innerOptionRef, selectOpened, isSearching]);
+    const onSelectHandler = () => onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(innerOptionRef);
+    return (React.createElement("li", { ...rest, id: optionId, ref: innerOptionRef, "data-value": value, className: additionalClasses.join(" "), onClick: onSelectHandler, onKeyDown: event => {
+            if (event.code === "Enter") {
+                event.stopPropagation();
+                event.preventDefault();
+                onSelectHandler();
+            }
+        }, "aria-selected": isSelected, role: "option", tabIndex: disabled ? -1 : 0 }, children));
+};
+const Option = React.forwardRef(OptionComponent);
+
+export { Option };
 //# sourceMappingURL=Option.esm.js.map

package/dist/esm/Form/Select/SingleSelect/Option.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.esm.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/Option.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\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  createRef,\n  RefObject,\n  useEffect,\n  ReactNode,\n  useRef\n} from \"react\";\nimport classes from \"./Select.module.scss\";\nimport { generateID } from \"../../../../util/helper\";\n\nexport interface Props extends ComponentPropsWithRef<\"li\"> {\n  children: ReactNode;\n  value: string;\n  disabled?: boolean;\n  isSelected?: boolean;\n  disableDefaultSelectedStyle?: boolean;\n  selectOpened?: boolean;\n  hasFocus?: boolean;\n  shouldClick?: boolean;\n  isSearching?: boolean;\n  label?: string;\n  childIndex?: number;\n  onOptionSelect?: (ref: React.RefObject<HTMLLIElement>) => void;\n  onFocusChange?: (childIndex: number) => void;\n  isAddBtnFocused?: boolean;\n}\n\nconst OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (\n  {\n    id,\n    children,\n    className,\n    isSelected = false,\n    disableDefaultSelectedStyle,\n    shouldClick,\n    hasFocus,\n    selectOpened,\n    isSearching,\n    childIndex,\n    onOptionSelect,\n    onFocusChange,\n    disabled,\n    value,\n    isAddBtnFocused,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const defaultOptionId = useRef(generateID(20));\n  const optionId = id ?? defaultOptionId.current;\n  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();\n\n  const additionalClasses = [];\n  className && additionalClasses.push(className);\n  isSelected && !disableDefaultSelectedStyle && additionalClasses.push(classes[\"selected-option\"]);\n  disabled && additionalClasses.push(classes[\"disabled\"]);\n\n  useEffect(() => {\n    if (isSelected && innerOptionRef.current && shouldClick) {\n      innerOptionRef.current.click();\n    }\n  }, [isSelected, shouldClick]);\n\n  useEffect(() => {\n    if (innerOptionRef.current && hasFocus && selectOpened && !isSearching && !isAddBtnFocused) {\n      onFocusChange && childIndex && onFocusChange(childIndex);\n      innerOptionRef.current.focus();\n    }\n  }, [hasFocus, innerOptionRef, selectOpened, isSearching]);\n\n  const onSelectHandler = () => onOptionSelect?.(innerOptionRef);\n\n  return (\n    <li\n      {...rest}\n      id={optionId}\n      ref={innerOptionRef}\n      data-value={value}\n      className={additionalClasses.join(\" \")}\n      onClick={onSelectHandler}\n      onKeyDown={event => {\n        if (event.code === \"Enter\") {\n          event.stopPropagation();\n          event.preventDefault();\n\n          onSelectHandler();\n        }\n      }}\n      aria-selected={isSelected}\n      role=\"option\"\n      tabIndex={disabled ? -1 : 0}\n    >\n      {children}\n    </li>\n  );\n};\n\nexport const Option = React.forwardRef(OptionComponent);\n"],"names":["OptionComponent","id","children","className","isSelected","disableDefaultSelectedStyle","shouldClick","hasFocus","selectOpened","isSearching","childIndex","onOptionSelect","onFocusChange","disabled","value","isAddBtnFocused","rest","ref","defaultOptionId","useRef","generateID","optionId","current","innerOptionRef","createRef","additionalClasses","push","classes","useEffect","click","focus","onSelectHandler","React","createElement","join","onClick","onKeyDown","event","code","stopPropagation","preventDefault","role","tabIndex","Option","forwardRef"],"mappings":"mKA6CA,MAAMA,EAAkE,EAEpEC,KACAC,WACAC,YACAC,aAAa,MACbC,8BACAC,cACAC,WACAC,eACAC,cACAC,aACAC,iBACAC,gBACAC,WACAC,QACAC,qBACGC,GAELC,KAEA,MAAMC,EAAkBC,EAAOC,EAAW,KAC1C,MAAMC,EAAWpB,IAAA,MAAAA,SAAA,EAAAA,EAAMiB,EAAgBI,QACvC,IAAIC,EAAkBN,GAAoCO,IAE1D,MAAMC,EAAoB,GAC1BtB,GAAasB,EAAkBC,KAAKvB,GACpCC,IAAeC,GAA+BoB,EAAkBC,KAAKC,EAAQ,oBAC7Ed,GAAYY,EAAkBC,KAAKC,EAAQ,aAE3CC,GAAU,KACR,GAAIxB,GAAcmB,EAAeD,SAAWhB,EAC1CiB,EAAeD,QAAQO,OACxB,GACA,CAACzB,EAAYE,IAEhBsB,GAAU,KACR,GAAIL,EAAeD,SAAWf,GAAYC,IAAiBC,IAAgBM,EAAiB,CAC1FH,GAAiBF,GAAcE,EAAcF,GAC7Ca,EAAeD,QAAQQ,OACxB,IACA,CAACvB,EAAUgB,EAAgBf,EAAcC,IAE5C,MAAMsB,EAAkB,IAAMpB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAiBY,GAE/C,OACES,EAAAC,cAAA,KAAA,IACMjB,EACJf,GAAIoB,EACJJ,IAAKM,EAAc,aACPT,EACZX,UAAWsB,EAAkBS,KAAK,KAClCC,QAASJ,EACTK,UAAWC,IACT,GAAIA,EAAMC,OAAS,QAAS,CAC1BD,EAAME,kBACNF,EAAMG,iBAENT,GACD,GACF,gBACc3B,EACfqC,KAAK,SACLC,SAAU7B,GAAY,EAAI,GAEzBX,EAEH,EAGS,MAAAyC,EAASX,EAAMY,WAAW5C"}
+{"version":3,"file":"Option.esm.js","sources":["../../../../../../../src/components/Form/Select/SingleSelect/Option.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\nimport React, {\n  ForwardRefRenderFunction,\n  ComponentPropsWithRef,\n  createRef,\n  RefObject,\n  useEffect,\n  ReactNode,\n  useRef\n} from \"react\";\nimport classes from \"./Select.module.scss\";\nimport { generateID } from \"../../../../util/helper\";\n\nexport interface Props extends ComponentPropsWithRef<\"li\"> {\n  children: ReactNode;\n  value: string;\n  disabled?: boolean;\n  isSelected?: boolean;\n  disableDefaultSelectedStyle?: boolean;\n  selectOpened?: boolean;\n  hasFocus?: boolean;\n  shouldClick?: boolean;\n  isSearching?: boolean;\n  label?: string;\n  childIndex?: number;\n  onOptionSelect?: (ref: React.RefObject<HTMLLIElement>) => void;\n  onFocusChange?: (childIndex: number) => void;\n  isAddBtnFocused?: boolean;\n}\n\nconst OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (\n  {\n    id,\n    children,\n    className,\n    isSelected = false,\n    disableDefaultSelectedStyle,\n    shouldClick,\n    hasFocus,\n    selectOpened,\n    isSearching,\n    childIndex,\n    onOptionSelect,\n    onFocusChange,\n    disabled,\n    value,\n    isAddBtnFocused,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const defaultOptionId = useRef(generateID(20));\n  const optionId = id ?? defaultOptionId.current;\n  let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();\n\n  const additionalClasses = [];\n  className && additionalClasses.push(className);\n  isSelected && !disableDefaultSelectedStyle && additionalClasses.push(classes[\"selected-option\"]);\n  disabled && additionalClasses.push(classes[\"disabled\"]);\n\n  useEffect(() => {\n    if (isSelected && innerOptionRef.current && shouldClick) {\n      innerOptionRef.current.click();\n    }\n  }, [isSelected, shouldClick]);\n\n  useEffect(() => {\n    if (innerOptionRef.current && hasFocus && selectOpened && !isSearching && !isAddBtnFocused) {\n      onFocusChange && childIndex && onFocusChange(childIndex);\n      innerOptionRef.current.focus();\n    }\n  }, [hasFocus, innerOptionRef, selectOpened, isSearching]);\n\n  const onSelectHandler = () => onOptionSelect?.(innerOptionRef);\n\n  return (\n    <li\n      {...rest}\n      id={optionId}\n      ref={innerOptionRef}\n      data-value={value}\n      className={additionalClasses.join(\" \")}\n      onClick={onSelectHandler}\n      onKeyDown={event => {\n        if (event.code === \"Enter\") {\n          event.stopPropagation();\n          event.preventDefault();\n\n          onSelectHandler();\n        }\n      }}\n      aria-selected={isSelected}\n      role=\"option\"\n      tabIndex={disabled ? -1 : 0}\n    >\n      {children}\n    </li>\n  );\n};\n\nexport const Option = React.forwardRef(OptionComponent);\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;AAcG;AA+BH,MAAM,eAAe,GAAmD,CACtE,EACE,EAAE,EACF,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,2BAA2B,EAC3B,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,UAAU,EACV,cAAc,EACd,aAAa,EACb,QAAQ,EACR,KAAK,EACL,eAAe,EACf,GAAG,IAAI,EACD,EACR,GAAG,KACD;IACF,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,EAAE,KAAF,IAAA,IAAA,EAAE,KAAF,KAAA,CAAA,GAAA,EAAE,GAAI,eAAe,CAAC,OAAO,CAAC;AAC/C,IAAA,IAAI,cAAc,GAAI,GAAgC,IAAI,SAAS,EAAiB,CAAC;IAErF,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,IAAA,SAAS,IAAI,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAC/C,IAAA,UAAU,IAAI,CAAC,2BAA2B,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACjG,QAAQ,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IAExD,SAAS,CAAC,MAAK;QACb,IAAI,UAAU,IAAI,cAAc,CAAC,OAAO,IAAI,WAAW,EAAE;AACvD,YAAA,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAChC;AACH,KAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,cAAc,CAAC,OAAO,IAAI,QAAQ,IAAI,YAAY,IAAI,CAAC,WAAW,IAAI,CAAC,eAAe,EAAE;AAC1F,YAAA,aAAa,IAAI,UAAU,IAAI,aAAa,CAAC,UAAU,CAAC,CAAC;AACzD,YAAA,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAChC;KACF,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;AAE1D,IAAA,MAAM,eAAe,GAAG,MAAM,cAAc,KAAd,IAAA,IAAA,cAAc,KAAd,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,cAAc,CAAG,cAAc,CAAC,CAAC;AAE/D,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GACM,IAAI,EACR,EAAE,EAAE,QAAQ,EACZ,GAAG,EAAE,cAAc,EAAA,YAAA,EACP,KAAK,EACjB,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,EACtC,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,KAAK,IAAG;AACjB,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;gBAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,KAAK,CAAC,cAAc,EAAE,CAAC;AAEvB,gBAAA,eAAe,EAAE,CAAC;aACnB;SACF,EAAA,eAAA,EACc,UAAU,EACzB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAE1B,EAAA,QAAQ,CACN,EACL;AACJ,CAAC,CAAC;AAEW,MAAA,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe;;;;"}

package/dist/esm/Form/Select/SingleSelect/Select.esm.js

@@ -1,2 +1,175 @@
-import e from"./Select.module.esm.js";import s,{useState as t,useRef as n,createRef as r,useEffect as a,Fragment as o}from"react";import{useBodyClick as c}from"../../../src/hooks/useBodyClick.esm.js";import{useDetermineStatusIcon as l}from"../../../src/hooks/useDetermineStatusIcon.esm.js";import i from"../../../src/readyclasses.module.esm.js";import{filterProps as d}from"../../../src/util/helper.esm.js";import{Icon as u,Icons as m}from"../../../Icon/Icon.esm.js";import{useSelectPositionList as p}from"../useSelectPositionList.esm.js";import{useAddNewBtn as h}from"../useAddNewBtn.esm.js";import{useSearch as f}from"./useSearch.esm.js";import{useArrowNavigation as v}from"./useArrowNavigation.esm.js";const b=({children:b,name:C,disabled:E=false,labeledBy:N,placeholder:y,describedBy:g,searchPlaceholder:S="Search item",searchInputProps:w,selectButtonProps:I,className:x,error:j=false,success:B=false,value:R,clearLabel:L="Clear selection",noResultsLabel:P="No results found",onChange:k,addNew:A,search:$,...F},O)=>{const[H,D]=t(false);const[T,K]=t("");const M=n(null);const U=n(null);const[V,q]=t(-1);const[z,G]=t(false);const[J,Q]=t(false);const W=s.Children.count(b);const{filter:X,isSearching:Y,renderSearch:Z,searchInputRef:_,setIsSearching:ee,searchThreshold:se,searchVisible:te}=f({expanded:H,search:$,searchInputClassName:e["select-search"],optionsCount:W,setFocusedSelectItem:q,searchInputProps:w,searchPlaceholder:S});const{addBtnRef:ne,addNewBtnOptionsContainerClassName:re,renderAddNew:ae}=h({addNew:A,filter:X,focusedSelectItem:V,optionsCount:W,searchInputRef:_});const oe=O||r();const ce=e=>{if(oe.current&&e){oe.current.value=e.getAttribute("data-value");oe.current.dispatchEvent(new Event("change",{bubbles:true}))}D(false)};const le=n(null);const{onArrowNavigation:ie}=v({expanded:H,setExpanded:D,isSearching:Y,setIsSearching:ee,setFocusedSelectItem:q,onOptionChangeHandler:ce,childrenCount:W,setShouldClick:G,searchInputRef:_,addBtnRef:ne,renderThreshold:se});const{listPosition:de,opacity:ue,optionsListMaxHeight:me,setListPosition:pe,setOpacity:he}=p({expanded:H,optionListReference:U,containerReference:M,addBtnRef:ne});const fe=e=>{s.Children.forEach(b,(s=>{if(s.props.value===e)K(s.props.children)}))};const ve=()=>{if(Y||X!==""){const n=s.Children.toArray(b).filter((e=>e.props.children.toLowerCase().match(X.toLowerCase())!==null));const r=t(n);if(r.length===0)return s.createElement("li",{className:e["no-results"]},P);return t(n)}return t(b);function t(e){return s.Children.map(e,((e,t)=>s.cloneElement(e,{onFocusChange:e=>{q(e)},onOptionSelect:e=>{ce(e.current);G(false)},isSelected:e.props.value===R,isSearching:Y,selectOpened:H,childIndex:t,hasFocus:V===t,shouldClick:z,isAddBtnFocused:ne.current===document.activeElement})))}};const be=()=>H?s.createElement(u,{className:e["chevron-icon"],icon:m.ChevronUp}):s.createElement(u,{className:e["chevron-icon"],icon:m.ChevronDown});const Ce=l({success:B,error:j});const Ee=e=>{k===null||k===void 0?void 0:k(e)};a((()=>{if(H){q(0);Q(true)}if(!H&&le.current&&J){le.current.focus();Q(false)}}),[H,le.current,J]);a((()=>{fe(R)}),[R]);c((e=>!e.target.closest(".custom-select")&&H),(()=>{D(false);pe({top:0,bottom:"initial"});he(0)}),H);const Ne=[];H&&Ne.push(e.expanded);j&&Ne.push(e.error);E&&Ne.push(e.disabled);x&&Ne.push(x);B&&Ne.push(e.success);return s.createElement(o,null,s.createElement("select",{...d(F,/^data-/,false),tabIndex:-1,"aria-hidden":"true",ref:oe,name:C,onChange:Ee,className:i["sr-only"]},s.createElement("option",{value:""}),s.Children.map(b,(e=>s.createElement("option",{value:e.props.value})))),s.createElement("div",{...d(F,/^data-/),ref:M,onKeyDown:ie,className:`custom-select ${e.select} ${Ne.join(" ")} ${x!==null&&x!==void 0?x:""}`},te&&Z(),s.createElement("button",{...I,onClick:()=>{D(!H)},ref:le,type:"button",name:C,className:`${e["custom-select"]} ${Ne.join(" ")} `,style:{display:H&&te?"none":"initial"},disabled:E,"aria-disabled":E,"aria-invalid":j,"aria-expanded":H,"aria-haspopup":"listbox","aria-labelledby":N,"aria-describedby":g},s.createElement("div",{"data-display":true,className:e["selected"]},!R&&y&&s.createElement("span",{className:e["placeholder"]},y),(R===null||R===void 0?void 0:R.length)>0&&s.createElement("span",{"data-display-inner":true},T)),s.createElement("div",{className:e["status"]},Ce||be())),s.createElement("div",{ref:U,className:`list-wrapper ${e["list-wrapper"]}`,style:{display:H?"block":"none",opacity:ue,maxHeight:me.wrapper,pointerEvents:H?"auto":"none",...de}},s.createElement("ul",{className:re,role:"listbox",style:{maxHeight:me.list}},ve()),ae())))};const C=s.forwardRef(b);export{C as Select};
+import classes from './Select.module.scss.esm.js';
+import React, { useState, useRef, createRef, useEffect, Fragment } from 'react';
+import { useBodyClick } from '../../../src/hooks/useBodyClick.esm.js';
+import { useDetermineStatusIcon } from '../../../src/hooks/useDetermineStatusIcon.esm.js';
+import readyclasses from '../../../src/readyclasses.module.scss.esm.js';
+import { filterProps } from '../../../src/util/helper.esm.js';
+import { Icon, Icons } from '../../../Icon/Icon.esm.js';
+import { useSelectPositionList } from '../useSelectPositionList.esm.js';
+import { useAddNewBtn } from '../useAddNewBtn.esm.js';
+import { useSearch } from './useSearch.esm.js';
+import { useArrowNavigation } from './useArrowNavigation.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const SelectComponent = ({ children, name, disabled = false, labeledBy, placeholder, describedBy, selectButtonProps, className, error = false, success = false, value, clearLabel = "Clear selection", noResultsLabel = "No results found", onChange, addNew, search, ...rest }, ref) => {
+    const [expanded, setExpanded] = useState(false);
+    const [display, setDisplay] = useState("");
+    const containerReference = useRef(null);
+    const optionListReference = useRef(null);
+    const [focusedSelectItem, setFocusedSelectItem] = useState(-1);
+    const [shouldClick, setShouldClick] = useState(false);
+    /** We need this, because whenever we use the arrow keys to select the select item, and we focus the currently selected item it fires the "click" listener in Option component. Instead, we only want this to fire if we press "enter" or "spacebar" so we set this to true whenever that is the case, and back to false when it has been executed. */
+    const [shouldFocusButtonAfterClose, setShouldFocusButtonAfterClose] = useState(false);
+    const optionsCount = React.Children.count(children);
+    const { filter, isSearching, renderSearch, searchInputRef, setIsSearching, searchThreshold, searchVisible } = useSearch({
+        expanded,
+        search,
+        searchInputClassName: classes["select-search"],
+        optionsCount,
+        setFocusedSelectItem
+    });
+    const { addBtnRef, addNewBtnOptionsContainerClassName, renderAddNew } = useAddNewBtn({
+        addNew,
+        filter,
+        focusedSelectItem,
+        optionsCount,
+        searchInputRef
+    });
+    const nativeSelect = ref || createRef();
+    const onOptionChangeHandler = (optionElement) => {
+        if (nativeSelect.current && optionElement) {
+            nativeSelect.current.value = optionElement.getAttribute("data-value");
+            nativeSelect.current.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+        setExpanded(false);
+    };
+    const customSelectButtonRef = useRef(null);
+    const { onArrowNavigation } = useArrowNavigation({
+        expanded,
+        setExpanded,
+        isSearching,
+        setIsSearching,
+        setFocusedSelectItem,
+        onOptionChangeHandler,
+        childrenCount: optionsCount,
+        setShouldClick,
+        searchInputRef,
+        addBtnRef,
+        renderThreshold: searchThreshold
+    });
+    const { listPosition, opacity, optionsListMaxHeight, setListPosition, setOpacity } = useSelectPositionList({ expanded, optionListReference, containerReference, addBtnRef });
+    const syncDisplayValue = (val) => {
+        React.Children.forEach(children, child => {
+            if (child.props.value === val) {
+                setDisplay(child.props.children);
+            }
+        });
+    };
+    /**
+     * @description We have to modify the children (Option component) to have an additional props that allows us to keep track of which one is selected and focused at all times and if a filter is active.
+     * The `children` prop can be either a single object (1 child) or an array of multiple children.
+     */
+    const renderOptions = () => {
+        if (isSearching || filter !== "") {
+            const filteredChildren = React.Children.toArray(children).filter(child => child.props.children.toLowerCase().match(filter.toLowerCase()) !== null);
+            const internalChildren = _internalRenderChildren(filteredChildren);
+            if (internalChildren.length === 0) {
+                return React.createElement("li", { className: classes["no-results"] }, noResultsLabel);
+            }
+            return _internalRenderChildren(filteredChildren);
+        }
+        return _internalRenderChildren(children);
+        function _internalRenderChildren(internalChildren) {
+            return React.Children.map(internalChildren, (child, index) => {
+                return React.cloneElement(child, {
+                    onFocusChange: (childIndex) => {
+                        setFocusedSelectItem(childIndex);
+                    },
+                    onOptionSelect: (optionRef) => {
+                        onOptionChangeHandler(optionRef.current);
+                        setShouldClick(false);
+                    },
+                    isSelected: child.props.value === value,
+                    isSearching: isSearching,
+                    selectOpened: expanded,
+                    childIndex: index,
+                    hasFocus: focusedSelectItem === index,
+                    shouldClick: shouldClick,
+                    isAddBtnFocused: addBtnRef.current === document.activeElement
+                });
+            });
+        }
+    };
+    const renderChevronIcon = () => {
+        return expanded ? (React.createElement(Icon, { className: classes["chevron-icon"], icon: Icons.ChevronUp })) : (React.createElement(Icon, { className: classes["chevron-icon"], icon: Icons.ChevronDown }));
+    };
+    const icon = useDetermineStatusIcon({ success, error });
+    const nativeOnChangeHandler = (event) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    useEffect(() => {
+        if (expanded) {
+            setFocusedSelectItem(0);
+            setShouldFocusButtonAfterClose(true);
+        }
+        if (!expanded && customSelectButtonRef.current && shouldFocusButtonAfterClose) {
+            customSelectButtonRef.current.focus();
+            setShouldFocusButtonAfterClose(false);
+        }
+    }, [expanded, customSelectButtonRef.current, shouldFocusButtonAfterClose]);
+    useEffect(() => {
+        syncDisplayValue(value);
+    }, [value]);
+    useBodyClick((event) => !event.target.closest(".custom-select") && expanded, () => {
+        setExpanded(false);
+        setListPosition({ top: 0, bottom: "initial" });
+        setOpacity(0);
+    }, expanded);
+    const additionalClasses = [];
+    expanded && additionalClasses.push(classes.expanded);
+    error && additionalClasses.push(classes.error);
+    disabled && additionalClasses.push(classes.disabled);
+    className && additionalClasses.push(className);
+    success && additionalClasses.push(classes.success);
+    /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */
+    return (React.createElement(Fragment, null,
+        React.createElement("select", { ...filterProps(rest, /^data-/, false), tabIndex: -1, "aria-hidden": "true", ref: nativeSelect, name: name, onChange: nativeOnChangeHandler, className: readyclasses["sr-only"] },
+            React.createElement("option", { value: "" }),
+            React.Children.map(children, child => (React.createElement("option", { value: child.props.value })))),
+        React.createElement("div", { ...filterProps(rest, /^data-/), ref: containerReference, onKeyDown: onArrowNavigation, className: `custom-select ${classes.select} ${additionalClasses.join(" ")} ${className !== null && className !== void 0 ? className : ""}` },
+            searchVisible && renderSearch(),
+            React.createElement("button", { ...selectButtonProps, onClick: () => {
+                    setExpanded(!expanded);
+                }, ref: customSelectButtonRef, type: "button", name: name, className: `${classes["custom-select"]} ${additionalClasses.join(" ")} `, style: { display: expanded && searchVisible ? "none" : "initial" }, disabled: disabled, "aria-disabled": disabled, "aria-invalid": error, "aria-expanded": expanded, "aria-haspopup": "listbox", "aria-labelledby": labeledBy, "aria-describedby": describedBy },
+                React.createElement("div", { "data-display": true, className: classes["selected"] },
+                    !value && placeholder && React.createElement("span", { className: classes["placeholder"] }, placeholder),
+                    (value === null || value === void 0 ? void 0 : value.length) > 0 && React.createElement("span", { "data-display-inner": true }, display)),
+                React.createElement("div", { className: classes["status"] }, icon || renderChevronIcon())),
+            React.createElement("div", { ref: optionListReference, className: `list-wrapper ${classes["list-wrapper"]}`, style: {
+                    display: expanded ? "block" : "none",
+                    opacity: opacity,
+                    maxHeight: optionsListMaxHeight.wrapper,
+                    pointerEvents: expanded ? "auto" : "none",
+                    ...listPosition
+                } },
+                React.createElement("ul", { className: addNewBtnOptionsContainerClassName, role: "listbox", style: { maxHeight: optionsListMaxHeight.list } }, renderOptions()),
+                renderAddNew()))));
+};
+const Select = React.forwardRef(SelectComponent);
+
+export { Select };
 //# sourceMappingURL=Select.esm.js.map