@onewelcome/react-lib-components 6.5.0 → 6.6.0

package/src/components/Form/Select/useSelectPositionList.ts

@@ -0,0 +1,113 @@
+/*
+ * 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.
+ */
+
+import { useEffect, useState } from "react";
+import { Position, UseSelectPositionListParams } from "./Select.interfaces";
+
+/** @scope .*/
+export const useSelectPositionList = ({
+  expanded,
+  optionListReference,
+  addBtnRef,
+  containerReference
+}: UseSelectPositionListParams) => {
+  const [optionsListMaxHeight, setOptionsListMaxHeight] = useState<{
+    wrapper?: string;
+    list?: string;
+  }>({
+    wrapper: undefined,
+    list: undefined
+  });
+  const [opacity, setOpacity] = useState(0); // We set opacity because otherwise if we calculate the max height you see the list full height for a split second and then it shortens.
+  const [listPosition, setListPosition] = useState<Partial<Position>>({});
+
+  useEffect(() => {
+    rePositionList();
+  }, [expanded]);
+
+  const rePositionList = () => {
+    if (!expanded || !optionListReference.current || !containerReference.current) {
+      return;
+    }
+
+    // Check whether there is more space above or below the select
+    // Check space between the bottom of select and top of viewport
+    const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;
+
+    // Check space between the top of the select and bottom of viewport
+    const spaceOnBottomOfSelect =
+      window.innerHeight - containerReference.current.getBoundingClientRect().top;
+
+    // Set position as if there's more space on the bottom
+    let position: Position = { top: "2.75rem", bottom: "initial" };
+
+    // Set the position of the select
+    if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
+      position = { top: "initial", bottom: "2.75rem" };
+    }
+
+    setListPosition(position);
+
+    // Calculate the potential max height of the options list
+    calculateOptionListMaxHeight(position);
+  };
+
+  const calculateOptionListMaxHeight = (position: Position) => {
+    // Calculate max height if there's more space below the select
+    const listHeight = optionListReference.current?.getBoundingClientRect().height;
+    const addNewButtonHeightWithMargin = addBtnRef.current
+      ? addBtnRef.current.getBoundingClientRect().height +
+        parseInt(getComputedStyle(addBtnRef.current).marginBottom)
+      : 0;
+    const transformOrigin = position.top !== "initial" ? "top" : "bottom";
+
+    if (!containerReference.current) {
+      console.error(
+        "The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand"
+      );
+      return;
+    }
+
+    const availableSpace =
+      transformOrigin === "top"
+        ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16
+        : containerReference.current.getBoundingClientRect().top - 16;
+
+    if (listHeight && availableSpace < listHeight + addNewButtonHeightWithMargin) {
+      const maxHeightObject = {
+        wrapper: `${availableSpace}px`,
+        list:
+          addNewButtonHeightWithMargin > 0
+            ? `${availableSpace - addNewButtonHeightWithMargin}px`
+            : "none"
+      };
+      setOptionsListMaxHeight(maxHeightObject);
+      setOpacity(100);
+      return;
+    }
+
+    setOptionsListMaxHeight({ wrapper: undefined, list: undefined });
+    setOpacity(100);
+  };
+
+  return {
+    optionsListMaxHeight,
+    opacity,
+    setOpacity,
+    listPosition,
+    setListPosition
+  };
+};

package/src/util/helper.tsx

@@ -217,3 +217,5 @@ export const deepMerge = <T extends {}>(obj1: ObjectType, obj2: ObjectType | fal
 
   return result as T;
 };
+
+export const escapeRegExp = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

package/dist/cjs/Form/Select/SelectService.cjs.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");const t=({expanded:e,setExpanded:t,isSearching:r,setIsSearching:n,setFocusedSelectItem:o,onOptionChangeHandler:i,childrenCount:c,setShouldClick:s,searchInputRef:a,addBtnRef:u,renderThreshold:l})=>{const d=d=>{var p;const f=["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Space","Escape","End","Home"];const g=["ArrowDown","ArrowUp","Enter","Escape","MetaLeft","MetaRight"];const h=(u===null||u===void 0?void 0:u.current)===document.activeElement;if(e)f.push("Tab");if(u)g.push("Tab");if(f.includes(d.code)&&!d.metaKey&&!r)d.preventDefault();if(r&&g.includes(d.code))d.preventDefault();if(r)switch(d.code){case"ArrowDown":case"Enter":n(false);o(0);return;case"ArrowUp":n(false);o(c-1);return;case"Escape":n(false);t(false);return;case"Tab":if(u===null||u===void 0?void 0:u.current){u.current.focus();return}n(false);t(false)}else switch(d.code){case"ArrowDown":if(!e){t(true);o(0);return}o((e=>e+1>c-1?0:e+1));return;case"ArrowUp":if(!e){t(true);o(c-1);return}o((e=>e-1<0?c-1:e-1));return;case"Space":if(!e){t(true);o(0);return}i(d.target);s(true);t(false);return;case"Enter":case"Home":o(0);return;case"Tab":if(c>=l&&e&&!h){n(true);(p=a.current)===null||p===void 0?void 0:p.focus();return}else if((u===null||u===void 0?void 0:u.current)&&e&&!h){u.current.focus();return}t(false);return;case"Escape":if(e)t(false);return;case"End":o(c-1);return;case"ArrowLeft":if(d.metaKey&&e){d.preventDefault();o(0)}return;case"ArrowRight":if(d.metaKey&&e){d.preventDefault();o(c-1)}return}};return{onArrowNavigation:d}};const r=({expanded:t,optionListReference:r,addBtnRef:n,containerReference:o})=>{const[i,c]=e.useState({wrapper:void 0,list:void 0});const[s,a]=e.useState(0);const[u,l]=e.useState({});e.useEffect((()=>{d()}),[t]);const d=()=>{if(!t||!r.current||!o.current)return;const e=o.current.getBoundingClientRect().bottom;const n=window.innerHeight-o.current.getBoundingClientRect().top;let i={top:"2.75rem",bottom:"initial"};if(e>n)i={top:"initial",bottom:"2.75rem"};l(i);p(i)};const p=e=>{var t;const i=(t=r.current)===null||t===void 0?void 0:t.getBoundingClientRect().height;const s=n.current?n.current.getBoundingClientRect().height+parseInt(getComputedStyle(n.current).marginBottom):0;const u=e.top!=="initial"?"top":"bottom";if(!o.current){console.error("The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand");return}const l=u==="top"?window.innerHeight-o.current.getBoundingClientRect().bottom-16:o.current.getBoundingClientRect().top-16;if(i&&l<i+s){const e={wrapper:`${l}px`,list:s>0?`${l-s}px`:"none"};c(e);a(100);return}c({wrapper:void 0,list:void 0});a(100)};return{optionsListMaxHeight:i,opacity:s,setOpacity:a,listPosition:u,setListPosition:l}};exports.useArrowNavigation=t;exports.useSelectPositionList=r;
-//# sourceMappingURL=SelectService.cjs.js.map

package/dist/cjs/Form/Select/SelectService.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectService.cjs.js","sources":["../../../../../../src/components/Form/Select/SelectService.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\nimport React, { useEffect, useState } from \"react\";\nimport {\n  Position,\n  UseArrowNavigationParams,\n  UseSelectPositionListParams\n} from \"./Select.interfaces\";\n\n/** @scope .*/\nexport const useArrowNavigation = ({\n  expanded,\n  setExpanded,\n  isSearching,\n  setIsSearching,\n  setFocusedSelectItem,\n  onOptionChangeHandler,\n  childrenCount,\n  setShouldClick,\n  searchInputRef,\n  addBtnRef,\n  renderThreshold\n}: UseArrowNavigationParams) => {\n  const onArrowNavigation = (event: React.KeyboardEvent) => {\n    const codesToPreventDefault = [\n      \"ArrowDown\",\n      \"ArrowUp\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Space\",\n      \"Escape\",\n      \"End\",\n      \"Home\"\n    ];\n\n    const codesToPreventDefaultWhenSearching = [\n      \"ArrowDown\",\n      \"ArrowUp\",\n      \"Enter\",\n      \"Escape\",\n      \"MetaLeft\",\n      \"MetaRight\"\n    ];\n\n    const isAddBtnFocused = addBtnRef?.current === document.activeElement;\n\n    if (expanded) {\n      codesToPreventDefault.push(\"Tab\");\n    }\n\n    if (addBtnRef) {\n      codesToPreventDefaultWhenSearching.push(\"Tab\");\n    }\n\n    if (codesToPreventDefault.includes(event.code) && !event.metaKey && !isSearching) {\n      event.preventDefault();\n    }\n\n    if (isSearching && codesToPreventDefaultWhenSearching.includes(event.code)) {\n      event.preventDefault();\n    }\n\n    if (isSearching) {\n      switch (event.code) {\n        case \"ArrowDown\":\n        case \"Enter\":\n          setIsSearching(false);\n          setFocusedSelectItem(0);\n          return;\n        case \"ArrowUp\":\n          setIsSearching(false);\n          setFocusedSelectItem(childrenCount - 1);\n          return;\n        case \"Escape\":\n          setIsSearching(false);\n          setExpanded(false);\n          return;\n        case \"Tab\":\n          if (addBtnRef?.current) {\n            addBtnRef.current.focus();\n            return;\n          }\n          setIsSearching(false);\n          setExpanded(false);\n      }\n    } else {\n      switch (event.code) {\n        case \"ArrowDown\":\n          if (!expanded) {\n            setExpanded(true);\n            setFocusedSelectItem(0);\n            return;\n          }\n          setFocusedSelectItem(prevState => {\n            return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;\n          });\n          return;\n        case \"ArrowUp\":\n          if (!expanded) {\n            setExpanded(true);\n            setFocusedSelectItem(childrenCount - 1);\n            return;\n          }\n\n          setFocusedSelectItem(prevState => {\n            return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;\n          });\n          return;\n        case \"Space\":\n          if (!expanded) {\n            setExpanded(true);\n            setFocusedSelectItem(0);\n            return;\n          }\n\n          onOptionChangeHandler(event.target as HTMLElement);\n          setShouldClick(true);\n          setExpanded(false);\n\n          return;\n        case \"Enter\":\n        case \"Home\":\n          setFocusedSelectItem(0);\n\n          return;\n        case \"Tab\":\n          if (childrenCount >= renderThreshold && expanded && !isAddBtnFocused) {\n            setIsSearching(true);\n            searchInputRef.current?.focus();\n            return;\n          } else if (addBtnRef?.current && expanded && !isAddBtnFocused) {\n            addBtnRef.current.focus();\n            return;\n          }\n          setExpanded(false);\n\n          return;\n        case \"Escape\":\n          if (expanded) {\n            setExpanded(false);\n          }\n          return;\n        case \"End\":\n          setFocusedSelectItem(childrenCount - 1);\n          return;\n        case \"ArrowLeft\":\n          if (event.metaKey && expanded) {\n            event.preventDefault();\n            setFocusedSelectItem(0);\n          }\n          return;\n        case \"ArrowRight\":\n          if (event.metaKey && expanded) {\n            event.preventDefault();\n            setFocusedSelectItem(childrenCount - 1);\n          }\n          return;\n      }\n    }\n  };\n\n  return { onArrowNavigation };\n};\n\n/** @scope .*/\nexport const useSelectPositionList = ({\n  expanded,\n  optionListReference,\n  addBtnRef,\n  containerReference\n}: UseSelectPositionListParams) => {\n  const [optionsListMaxHeight, setOptionsListMaxHeight] = useState<{\n    wrapper?: string;\n    list?: string;\n  }>({\n    wrapper: undefined,\n    list: undefined\n  });\n  const [opacity, setOpacity] = useState(0); // We set opacity because otherwise if we calculate the max height you see the list full height for a split second and then it shortens.\n  const [listPosition, setListPosition] = useState<Partial<Position>>({});\n\n  useEffect(() => {\n    rePositionList();\n  }, [expanded]);\n\n  const rePositionList = () => {\n    if (!expanded || !optionListReference.current || !containerReference.current) {\n      return;\n    }\n\n    // Check whether there is more space above or below the select\n    // Check space between the bottom of select and top of viewport\n    const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;\n\n    // Check space between the top of the select and bottom of viewport\n    const spaceOnBottomOfSelect =\n      window.innerHeight - containerReference.current.getBoundingClientRect().top;\n\n    // Set position as if there's more space on the bottom\n    let position: Position = { top: \"2.75rem\", bottom: \"initial\" };\n\n    // Set the position of the select\n    if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {\n      position = { top: \"initial\", bottom: \"2.75rem\" };\n    }\n\n    setListPosition(position);\n\n    // Calculate the potential max height of the options list\n    calculateOptionListMaxHeight(position);\n  };\n\n  const calculateOptionListMaxHeight = (position: Position) => {\n    // Calculate max height if there's more space below the select\n    const listHeight = optionListReference.current?.getBoundingClientRect().height;\n    const addNewButtonHeightWithMargin = addBtnRef.current\n      ? addBtnRef.current.getBoundingClientRect().height +\n        parseInt(getComputedStyle(addBtnRef.current).marginBottom)\n      : 0;\n    const transformOrigin = position.top !== \"initial\" ? \"top\" : \"bottom\";\n\n    if (!containerReference.current) {\n      console.error(\n        \"The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand\"\n      );\n      return;\n    }\n\n    const availableSpace =\n      transformOrigin === \"top\"\n        ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16\n        : containerReference.current.getBoundingClientRect().top - 16;\n\n    if (listHeight && availableSpace < listHeight + addNewButtonHeightWithMargin) {\n      const maxHeightObject = {\n        wrapper: `${availableSpace}px`,\n        list:\n          addNewButtonHeightWithMargin > 0\n            ? `${availableSpace - addNewButtonHeightWithMargin}px`\n            : \"none\"\n      };\n      setOptionsListMaxHeight(maxHeightObject);\n      setOpacity(100);\n      return;\n    }\n\n    setOptionsListMaxHeight({ wrapper: undefined, list: undefined });\n    setOpacity(100);\n  };\n\n  return {\n    optionsListMaxHeight,\n    opacity,\n    setOpacity,\n    listPosition,\n    setListPosition\n  };\n};\n"],"names":["useArrowNavigation","expanded","setExpanded","isSearching","setIsSearching","setFocusedSelectItem","onOptionChangeHandler","childrenCount","setShouldClick","searchInputRef","addBtnRef","renderThreshold","onArrowNavigation","event","codesToPreventDefault","codesToPreventDefaultWhenSearching","isAddBtnFocused","current","document","activeElement","push","includes","code","metaKey","preventDefault","focus","prevState","target","_a","useSelectPositionList","optionListReference","containerReference","optionsListMaxHeight","setOptionsListMaxHeight","useState","wrapper","undefined","list","opacity","setOpacity","listPosition","setListPosition","useEffect","rePositionList","spaceOnTopOfSelect","getBoundingClientRect","bottom","spaceOnBottomOfSelect","window","innerHeight","top","position","calculateOptionListMaxHeight","listHeight","height","addNewButtonHeightWithMargin","parseInt","getComputedStyle","marginBottom","transformOrigin","console","error","availableSpace","maxHeightObject"],"mappings":"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"}

package/dist/cjs/Form/Select/useSearch.cjs.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});var e=require("react");var r=require("../Input/Input.cjs.js");function o(e){return e&&typeof e==="object"&&"default"in e?e:{default:e}}var s=o(e);const l=({search:o,optionsCount:l,searchPlaceholder:n,searchInputProps:t,searchInputClassName:u,expanded:a,setFocusedSelectItem:d})=>{var i,c;const[v,p]=e.useState("");const[h,f]=e.useState(false);const I=10;const P=e.useRef(null);const m=(i=o===null||o===void 0?void 0:o.renderThreshold)!==null&&i!==void 0?i:I;const S=l>=m;const b=e=>{p(e.currentTarget.value)};const y=()=>{if(o===null||o===void 0?void 0:o.enabled)return S;if(o)return o.enabled;return l>I};const N=()=>{var e,l,d,i,c,v,p;return s["default"].createElement(r.Input,{...(l=(e=o===null||o===void 0?void 0:o.searchInputProps)!==null&&e!==void 0?e:t)!==null&&l!==void 0?l:{},ref:P,onFocus:()=>f(true),onBlur:()=>f(false),onChange:b,className:u,wrapperProps:{className:(c=(i=(d=o===null||o===void 0?void 0:o.searchInputProps)===null||d===void 0?void 0:d.wrapperProps)===null||i===void 0?void 0:i.className)!==null&&c!==void 0?c:(v=t===null||t===void 0?void 0:t.wrapperProps)===null||v===void 0?void 0:v.className},style:{display:a?"block":"none"},type:"text",name:"search-option",placeholder:(p=o===null||o===void 0?void 0:o.searchPlaceholder)!==null&&p!==void 0?p:n})};const g=()=>{p("");f(false);d(-1)};const j=y();e.useEffect((()=>{var e;(((e=o===null||o===void 0?void 0:o.searchInputProps)===null||e===void 0?void 0:e.reset)||(t===null||t===void 0?void 0:t.reset))&&g()}),[t===null||t===void 0?void 0:t.reset,(c=o===null||o===void 0?void 0:o.searchInputProps)===null||c===void 0?void 0:c.reset]);e.useEffect((()=>{const e=!j&&!h;if(e)g()}),[h,j]);return{renderSearch:N,setIsSearching:f,searchVisible:j,searchThreshold:m,searchInputRef:P,filter:v,isSearching:h}};exports.useSearch=l;
-//# sourceMappingURL=useSearch.cjs.js.map

package/dist/cjs/Form/Select/useSearch.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSearch.cjs.js","sources":["../../../../../../src/components/Form/Select/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\";\nimport { Input } from \"../Input/Input\";\n\ninterface Props {\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}\n\nexport const useSearch = ({\n  search,\n  optionsCount,\n  searchPlaceholder,\n  searchInputProps,\n  searchInputClassName,\n  expanded,\n  setFocusedSelectItem\n}: Props) => {\n  const [filter, setFilter] = useState(\"\");\n  const [isSearching, setIsSearching] = useState(false);\n\n  const DEFAULT_RENDER_THRESHOLD = 10;\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;\n  const hasEnoughChildren = optionsCount >= threshold;\n\n  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setFilter(event.currentTarget.value);\n  };\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    <Input\n      {...(search?.searchInputProps ?? searchInputProps ?? {})}\n      ref={searchInputRef}\n      onFocus={() => setIsSearching(true)}\n      onBlur={() => setIsSearching(false)}\n      onChange={filterResults}\n      className={searchInputClassName}\n      wrapperProps={{\n        className:\n          search?.searchInputProps?.wrapperProps?.className ??\n          searchInputProps?.wrapperProps?.className\n      }}\n      style={{\n        display: expanded ? \"block\" : \"none\"\n      }}\n      type=\"text\"\n      name=\"search-option\"\n      placeholder={search?.searchPlaceholder ?? searchPlaceholder}\n    />\n  );\n\n  const resetSearchState = () => {\n    setFilter(\"\");\n    setIsSearching(false);\n    setFocusedSelectItem(-1);\n  };\n\n  const visible = shouldRenderSearch();\n\n  useEffect(() => {\n    (search?.searchInputProps?.reset || searchInputProps?.reset) && resetSearchState();\n  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);\n\n  useEffect(() => {\n    const searchDeactivated =\n      !visible &&\n      !isSearching; /*solves issue in MultiSelect when we filtered result and selected result causes list to be shorter than threshold so still we have a filter applied but can't change it due to `visible` variable has false  */\n    if (searchDeactivated) {\n      resetSearchState();\n    }\n  }, [isSearching, visible]);\n\n  return {\n    renderSearch,\n    setIsSearching,\n    searchVisible: visible,\n    searchThreshold: threshold,\n    searchInputRef,\n    filter,\n    isSearching\n  };\n};\n"],"names":["useSearch","search","optionsCount","searchPlaceholder","searchInputProps","searchInputClassName","expanded","setFocusedSelectItem","filter","setFilter","useState","isSearching","setIsSearching","DEFAULT_RENDER_THRESHOLD","searchInputRef","useRef","threshold","_a","renderThreshold","hasEnoughChildren","filterResults","event","currentTarget","value","shouldRenderSearch","enabled","renderSearch","React","createElement","Input","_b","ref","onFocus","onBlur","onChange","className","wrapperProps","_e","_d","_c","_f","style","display","type","name","placeholder","_g","resetSearchState","visible","useEffect","reset","searchDeactivated","searchVisible","searchThreshold"],"mappings":"8NAoCaA,EAAY,EACvBC,SACAC,eACAC,oBACAC,mBACAC,uBACAC,WACAC,mCAEA,MAAOC,EAAQC,GAAaC,EAAQA,SAAC,IACrC,MAAOC,EAAaC,GAAkBF,EAAQA,SAAC,OAE/C,MAAMG,EAA2B,GAEjC,MAAMC,EAAiBC,SAAyB,MAEhD,MAAMC,GAAYC,EAAAhB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQiB,mBAAmB,MAAAD,SAAA,EAAAA,EAAAJ,EAC7C,MAAMM,EAAoBjB,GAAgBc,EAE1C,MAAMI,EAAiBC,IACrBZ,EAAUY,EAAMC,cAAcC,MAAM,EAGtC,MAAMC,EAAqB,KACzB,GAAIvB,UAAAA,SAAM,OAAA,EAANA,EAAQwB,QACV,OAAON,EAGT,GAAIlB,EACF,OAAOA,EAAOwB,QAGhB,OAAOvB,EAAeW,CAAwB,EAGhD,MAAMa,EAAe,uBAAM,OACzBC,EAAC,WAAAC,cAAAC,QACK,QAACZ,EAAAhB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQG,oBAAgB,MAAAa,SAAA,EAAAA,EAAIb,KAAgB,MAAA0B,SAAA,EAAAA,EAAI,CAAA,EACrDC,IAAKjB,EACLkB,QAAS,IAAMpB,EAAe,MAC9BqB,OAAQ,IAAMrB,EAAe,OAC7BsB,SAAUd,EACVe,UAAW9B,EACX+B,aAAc,CACZD,WACEE,GAAAC,GAAAC,EAAAtC,UAAAA,SAAM,OAAA,EAANA,EAAQG,oBAAgB,MAAAmC,SAAA,OAAA,EAAAA,EAAEH,gBAAc,MAAAE,SAAA,OAAA,EAAAA,EAAAH,aACxC,MAAAE,SAAA,EAAAA,GAAAG,EAAApC,IAAgB,MAAhBA,SAAgB,OAAA,EAAhBA,EAAkBgC,gBAAY,MAAAI,SAAA,OAAA,EAAAA,EAAEL,WAEpCM,MAAO,CACLC,QAASpC,EAAW,QAAU,QAEhCqC,KAAK,OACLC,KAAK,gBACLC,aAAaC,EAAA7C,IAAA,MAAAA,kBAAAA,EAAQE,qBAAqB,MAAA2C,SAAA,EAAAA,EAAA3C,GAE7C,EAED,MAAM4C,EAAmB,KACvBtC,EAAU,IACVG,EAAe,OACfL,GAAsB,EAAE,EAG1B,MAAMyC,EAAUxB,IAEhByB,EAAAA,WAAU,cACPhC,EAAAhB,IAAA,MAAAA,kBAAAA,EAAQG,oBAAgB,MAAAa,SAAA,OAAA,EAAAA,EAAEiC,SAAS9C,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAkB8C,SAAUH,GAAkB,GACjF,CAAC3C,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkB8C,OAAOpB,EAAA7B,IAAA,MAAAA,kBAAAA,EAAQG,oBAAkB,MAAA0B,SAAA,OAAA,EAAAA,EAAAoB,QAEvDD,EAAAA,WAAU,KACR,MAAME,GACHH,IACArC,EACH,GAAIwC,EACFJ,GACD,GACA,CAACpC,EAAaqC,IAEjB,MAAO,CACLtB,eACAd,iBACAwC,cAAeJ,EACfK,gBAAiBrC,EACjBF,iBACAN,SACAG,cACD"}

package/dist/cjs/src/components/Form/Select/SelectService.d.ts

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

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

@@ -1,2 +0,0 @@
-import{useState as e,useEffect as t}from"react";const r=({expanded:e,setExpanded:t,isSearching:r,setIsSearching:n,setFocusedSelectItem:o,onOptionChangeHandler:i,childrenCount:c,setShouldClick:s,searchInputRef:a,addBtnRef:u,renderThreshold:l})=>{const d=d=>{var p;const f=["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Space","Escape","End","Home"];const g=["ArrowDown","ArrowUp","Enter","Escape","MetaLeft","MetaRight"];const h=(u===null||u===void 0?void 0:u.current)===document.activeElement;if(e)f.push("Tab");if(u)g.push("Tab");if(f.includes(d.code)&&!d.metaKey&&!r)d.preventDefault();if(r&&g.includes(d.code))d.preventDefault();if(r)switch(d.code){case"ArrowDown":case"Enter":n(false);o(0);return;case"ArrowUp":n(false);o(c-1);return;case"Escape":n(false);t(false);return;case"Tab":if(u===null||u===void 0?void 0:u.current){u.current.focus();return}n(false);t(false)}else switch(d.code){case"ArrowDown":if(!e){t(true);o(0);return}o((e=>e+1>c-1?0:e+1));return;case"ArrowUp":if(!e){t(true);o(c-1);return}o((e=>e-1<0?c-1:e-1));return;case"Space":if(!e){t(true);o(0);return}i(d.target);s(true);t(false);return;case"Enter":case"Home":o(0);return;case"Tab":if(c>=l&&e&&!h){n(true);(p=a.current)===null||p===void 0?void 0:p.focus();return}else if((u===null||u===void 0?void 0:u.current)&&e&&!h){u.current.focus();return}t(false);return;case"Escape":if(e)t(false);return;case"End":o(c-1);return;case"ArrowLeft":if(d.metaKey&&e){d.preventDefault();o(0)}return;case"ArrowRight":if(d.metaKey&&e){d.preventDefault();o(c-1)}return}};return{onArrowNavigation:d}};const n=({expanded:r,optionListReference:n,addBtnRef:o,containerReference:i})=>{const[c,s]=e({wrapper:void 0,list:void 0});const[a,u]=e(0);const[l,d]=e({});t((()=>{p()}),[r]);const p=()=>{if(!r||!n.current||!i.current)return;const e=i.current.getBoundingClientRect().bottom;const t=window.innerHeight-i.current.getBoundingClientRect().top;let o={top:"2.75rem",bottom:"initial"};if(e>t)o={top:"initial",bottom:"2.75rem"};d(o);f(o)};const f=e=>{var t;const r=(t=n.current)===null||t===void 0?void 0:t.getBoundingClientRect().height;const c=o.current?o.current.getBoundingClientRect().height+parseInt(getComputedStyle(o.current).marginBottom):0;const a=e.top!=="initial"?"top":"bottom";if(!i.current){console.error("The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand");return}const l=a==="top"?window.innerHeight-i.current.getBoundingClientRect().bottom-16:i.current.getBoundingClientRect().top-16;if(r&&l<r+c){const e={wrapper:`${l}px`,list:c>0?`${l-c}px`:"none"};s(e);u(100);return}s({wrapper:void 0,list:void 0});u(100)};return{optionsListMaxHeight:c,opacity:a,setOpacity:u,listPosition:l,setListPosition:d}};export{r as useArrowNavigation,n as useSelectPositionList};
-//# sourceMappingURL=SelectService.esm.js.map

package/dist/esm/Form/Select/SelectService.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectService.esm.js","sources":["../../../../../../src/components/Form/Select/SelectService.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\nimport React, { useEffect, useState } from \"react\";\nimport {\n  Position,\n  UseArrowNavigationParams,\n  UseSelectPositionListParams\n} from \"./Select.interfaces\";\n\n/** @scope .*/\nexport const useArrowNavigation = ({\n  expanded,\n  setExpanded,\n  isSearching,\n  setIsSearching,\n  setFocusedSelectItem,\n  onOptionChangeHandler,\n  childrenCount,\n  setShouldClick,\n  searchInputRef,\n  addBtnRef,\n  renderThreshold\n}: UseArrowNavigationParams) => {\n  const onArrowNavigation = (event: React.KeyboardEvent) => {\n    const codesToPreventDefault = [\n      \"ArrowDown\",\n      \"ArrowUp\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Space\",\n      \"Escape\",\n      \"End\",\n      \"Home\"\n    ];\n\n    const codesToPreventDefaultWhenSearching = [\n      \"ArrowDown\",\n      \"ArrowUp\",\n      \"Enter\",\n      \"Escape\",\n      \"MetaLeft\",\n      \"MetaRight\"\n    ];\n\n    const isAddBtnFocused = addBtnRef?.current === document.activeElement;\n\n    if (expanded) {\n      codesToPreventDefault.push(\"Tab\");\n    }\n\n    if (addBtnRef) {\n      codesToPreventDefaultWhenSearching.push(\"Tab\");\n    }\n\n    if (codesToPreventDefault.includes(event.code) && !event.metaKey && !isSearching) {\n      event.preventDefault();\n    }\n\n    if (isSearching && codesToPreventDefaultWhenSearching.includes(event.code)) {\n      event.preventDefault();\n    }\n\n    if (isSearching) {\n      switch (event.code) {\n        case \"ArrowDown\":\n        case \"Enter\":\n          setIsSearching(false);\n          setFocusedSelectItem(0);\n          return;\n        case \"ArrowUp\":\n          setIsSearching(false);\n          setFocusedSelectItem(childrenCount - 1);\n          return;\n        case \"Escape\":\n          setIsSearching(false);\n          setExpanded(false);\n          return;\n        case \"Tab\":\n          if (addBtnRef?.current) {\n            addBtnRef.current.focus();\n            return;\n          }\n          setIsSearching(false);\n          setExpanded(false);\n      }\n    } else {\n      switch (event.code) {\n        case \"ArrowDown\":\n          if (!expanded) {\n            setExpanded(true);\n            setFocusedSelectItem(0);\n            return;\n          }\n          setFocusedSelectItem(prevState => {\n            return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;\n          });\n          return;\n        case \"ArrowUp\":\n          if (!expanded) {\n            setExpanded(true);\n            setFocusedSelectItem(childrenCount - 1);\n            return;\n          }\n\n          setFocusedSelectItem(prevState => {\n            return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;\n          });\n          return;\n        case \"Space\":\n          if (!expanded) {\n            setExpanded(true);\n            setFocusedSelectItem(0);\n            return;\n          }\n\n          onOptionChangeHandler(event.target as HTMLElement);\n          setShouldClick(true);\n          setExpanded(false);\n\n          return;\n        case \"Enter\":\n        case \"Home\":\n          setFocusedSelectItem(0);\n\n          return;\n        case \"Tab\":\n          if (childrenCount >= renderThreshold && expanded && !isAddBtnFocused) {\n            setIsSearching(true);\n            searchInputRef.current?.focus();\n            return;\n          } else if (addBtnRef?.current && expanded && !isAddBtnFocused) {\n            addBtnRef.current.focus();\n            return;\n          }\n          setExpanded(false);\n\n          return;\n        case \"Escape\":\n          if (expanded) {\n            setExpanded(false);\n          }\n          return;\n        case \"End\":\n          setFocusedSelectItem(childrenCount - 1);\n          return;\n        case \"ArrowLeft\":\n          if (event.metaKey && expanded) {\n            event.preventDefault();\n            setFocusedSelectItem(0);\n          }\n          return;\n        case \"ArrowRight\":\n          if (event.metaKey && expanded) {\n            event.preventDefault();\n            setFocusedSelectItem(childrenCount - 1);\n          }\n          return;\n      }\n    }\n  };\n\n  return { onArrowNavigation };\n};\n\n/** @scope .*/\nexport const useSelectPositionList = ({\n  expanded,\n  optionListReference,\n  addBtnRef,\n  containerReference\n}: UseSelectPositionListParams) => {\n  const [optionsListMaxHeight, setOptionsListMaxHeight] = useState<{\n    wrapper?: string;\n    list?: string;\n  }>({\n    wrapper: undefined,\n    list: undefined\n  });\n  const [opacity, setOpacity] = useState(0); // We set opacity because otherwise if we calculate the max height you see the list full height for a split second and then it shortens.\n  const [listPosition, setListPosition] = useState<Partial<Position>>({});\n\n  useEffect(() => {\n    rePositionList();\n  }, [expanded]);\n\n  const rePositionList = () => {\n    if (!expanded || !optionListReference.current || !containerReference.current) {\n      return;\n    }\n\n    // Check whether there is more space above or below the select\n    // Check space between the bottom of select and top of viewport\n    const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;\n\n    // Check space between the top of the select and bottom of viewport\n    const spaceOnBottomOfSelect =\n      window.innerHeight - containerReference.current.getBoundingClientRect().top;\n\n    // Set position as if there's more space on the bottom\n    let position: Position = { top: \"2.75rem\", bottom: \"initial\" };\n\n    // Set the position of the select\n    if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {\n      position = { top: \"initial\", bottom: \"2.75rem\" };\n    }\n\n    setListPosition(position);\n\n    // Calculate the potential max height of the options list\n    calculateOptionListMaxHeight(position);\n  };\n\n  const calculateOptionListMaxHeight = (position: Position) => {\n    // Calculate max height if there's more space below the select\n    const listHeight = optionListReference.current?.getBoundingClientRect().height;\n    const addNewButtonHeightWithMargin = addBtnRef.current\n      ? addBtnRef.current.getBoundingClientRect().height +\n        parseInt(getComputedStyle(addBtnRef.current).marginBottom)\n      : 0;\n    const transformOrigin = position.top !== \"initial\" ? \"top\" : \"bottom\";\n\n    if (!containerReference.current) {\n      console.error(\n        \"The containerReference is empty for some reason in the SelectService.ts for the Select component in react-lib-components. We are trying to calculate the option list max height on expand\"\n      );\n      return;\n    }\n\n    const availableSpace =\n      transformOrigin === \"top\"\n        ? window.innerHeight - containerReference.current.getBoundingClientRect().bottom - 16\n        : containerReference.current.getBoundingClientRect().top - 16;\n\n    if (listHeight && availableSpace < listHeight + addNewButtonHeightWithMargin) {\n      const maxHeightObject = {\n        wrapper: `${availableSpace}px`,\n        list:\n          addNewButtonHeightWithMargin > 0\n            ? `${availableSpace - addNewButtonHeightWithMargin}px`\n            : \"none\"\n      };\n      setOptionsListMaxHeight(maxHeightObject);\n      setOpacity(100);\n      return;\n    }\n\n    setOptionsListMaxHeight({ wrapper: undefined, list: undefined });\n    setOpacity(100);\n  };\n\n  return {\n    optionsListMaxHeight,\n    opacity,\n    setOpacity,\n    listPosition,\n    setListPosition\n  };\n};\n"],"names":["useArrowNavigation","expanded","setExpanded","isSearching","setIsSearching","setFocusedSelectItem","onOptionChangeHandler","childrenCount","setShouldClick","searchInputRef","addBtnRef","renderThreshold","onArrowNavigation","event","codesToPreventDefault","codesToPreventDefaultWhenSearching","isAddBtnFocused","current","document","activeElement","push","includes","code","metaKey","preventDefault","focus","prevState","target","_a","useSelectPositionList","optionListReference","containerReference","optionsListMaxHeight","setOptionsListMaxHeight","useState","wrapper","undefined","list","opacity","setOpacity","listPosition","setListPosition","useEffect","rePositionList","spaceOnTopOfSelect","getBoundingClientRect","bottom","spaceOnBottomOfSelect","window","innerHeight","top","position","calculateOptionListMaxHeight","listHeight","height","addNewButtonHeightWithMargin","parseInt","getComputedStyle","marginBottom","transformOrigin","console","error","availableSpace","maxHeightObject"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-import e,{useState as o,useRef as r,useEffect as l}from"react";import{Input as n}from"../Input/Input.esm.js";const s=({search:s,optionsCount:t,searchPlaceholder:i,searchInputProps:a,searchInputClassName:d,expanded:c,setFocusedSelectItem:u})=>{var v,p;const[h,m]=o("");const[f,I]=o(false);const P=10;const N=r(null);const b=(v=s===null||s===void 0?void 0:s.renderThreshold)!==null&&v!==void 0?v:P;const g=t>=b;const S=e=>{m(e.currentTarget.value)};const w=()=>{if(s===null||s===void 0?void 0:s.enabled)return g;if(s)return s.enabled;return t>P};const x=()=>{var o,r,l,t,u,v,p;return e.createElement(n,{...(r=(o=s===null||s===void 0?void 0:s.searchInputProps)!==null&&o!==void 0?o:a)!==null&&r!==void 0?r:{},ref:N,onFocus:()=>I(true),onBlur:()=>I(false),onChange:S,className:d,wrapperProps:{className:(u=(t=(l=s===null||s===void 0?void 0:s.searchInputProps)===null||l===void 0?void 0:l.wrapperProps)===null||t===void 0?void 0:t.className)!==null&&u!==void 0?u:(v=a===null||a===void 0?void 0:a.wrapperProps)===null||v===void 0?void 0:v.className},style:{display:c?"block":"none"},type:"text",name:"search-option",placeholder:(p=s===null||s===void 0?void 0:s.searchPlaceholder)!==null&&p!==void 0?p:i})};const y=()=>{m("");I(false);u(-1)};const C=w();l((()=>{var e;(((e=s===null||s===void 0?void 0:s.searchInputProps)===null||e===void 0?void 0:e.reset)||(a===null||a===void 0?void 0:a.reset))&&y()}),[a===null||a===void 0?void 0:a.reset,(p=s===null||s===void 0?void 0:s.searchInputProps)===null||p===void 0?void 0:p.reset]);l((()=>{const e=!C&&!f;if(e)y()}),[f,C]);return{renderSearch:x,setIsSearching:I,searchVisible:C,searchThreshold:b,searchInputRef:N,filter:h,isSearching:f}};export{s as useSearch};
-//# sourceMappingURL=useSearch.esm.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useSearch.esm.js","sources":["../../../../../../src/components/Form/Select/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\";\nimport { Input } from \"../Input/Input\";\n\ninterface Props {\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}\n\nexport const useSearch = ({\n  search,\n  optionsCount,\n  searchPlaceholder,\n  searchInputProps,\n  searchInputClassName,\n  expanded,\n  setFocusedSelectItem\n}: Props) => {\n  const [filter, setFilter] = useState(\"\");\n  const [isSearching, setIsSearching] = useState(false);\n\n  const DEFAULT_RENDER_THRESHOLD = 10;\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const threshold = search?.renderThreshold ?? DEFAULT_RENDER_THRESHOLD;\n  const hasEnoughChildren = optionsCount >= threshold;\n\n  const filterResults = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setFilter(event.currentTarget.value);\n  };\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    <Input\n      {...(search?.searchInputProps ?? searchInputProps ?? {})}\n      ref={searchInputRef}\n      onFocus={() => setIsSearching(true)}\n      onBlur={() => setIsSearching(false)}\n      onChange={filterResults}\n      className={searchInputClassName}\n      wrapperProps={{\n        className:\n          search?.searchInputProps?.wrapperProps?.className ??\n          searchInputProps?.wrapperProps?.className\n      }}\n      style={{\n        display: expanded ? \"block\" : \"none\"\n      }}\n      type=\"text\"\n      name=\"search-option\"\n      placeholder={search?.searchPlaceholder ?? searchPlaceholder}\n    />\n  );\n\n  const resetSearchState = () => {\n    setFilter(\"\");\n    setIsSearching(false);\n    setFocusedSelectItem(-1);\n  };\n\n  const visible = shouldRenderSearch();\n\n  useEffect(() => {\n    (search?.searchInputProps?.reset || searchInputProps?.reset) && resetSearchState();\n  }, [searchInputProps?.reset, search?.searchInputProps?.reset]);\n\n  useEffect(() => {\n    const searchDeactivated =\n      !visible &&\n      !isSearching; /*solves issue in MultiSelect when we filtered result and selected result causes list to be shorter than threshold so still we have a filter applied but can't change it due to `visible` variable has false  */\n    if (searchDeactivated) {\n      resetSearchState();\n    }\n  }, [isSearching, visible]);\n\n  return {\n    renderSearch,\n    setIsSearching,\n    searchVisible: visible,\n    searchThreshold: threshold,\n    searchInputRef,\n    filter,\n    isSearching\n  };\n};\n"],"names":["useSearch","search","optionsCount","searchPlaceholder","searchInputProps","searchInputClassName","expanded","setFocusedSelectItem","filter","setFilter","useState","isSearching","setIsSearching","DEFAULT_RENDER_THRESHOLD","searchInputRef","useRef","threshold","_a","renderThreshold","hasEnoughChildren","filterResults","event","currentTarget","value","shouldRenderSearch","enabled","renderSearch","React","createElement","Input","_b","ref","onFocus","onBlur","onChange","className","wrapperProps","_e","_d","_c","_f","style","display","type","name","placeholder","_g","resetSearchState","visible","useEffect","reset","searchDeactivated","searchVisible","searchThreshold"],"mappings":"mHAoCaA,EAAY,EACvBC,SACAC,eACAC,oBACAC,mBACAC,uBACAC,WACAC,mCAEA,MAAOC,EAAQC,GAAaC,EAAS,IACrC,MAAOC,EAAaC,GAAkBF,EAAS,OAE/C,MAAMG,EAA2B,GAEjC,MAAMC,EAAiBC,EAAyB,MAEhD,MAAMC,GAAYC,EAAAhB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQiB,mBAAmB,MAAAD,SAAA,EAAAA,EAAAJ,EAC7C,MAAMM,EAAoBjB,GAAgBc,EAE1C,MAAMI,EAAiBC,IACrBZ,EAAUY,EAAMC,cAAcC,MAAM,EAGtC,MAAMC,EAAqB,KACzB,GAAIvB,UAAAA,SAAM,OAAA,EAANA,EAAQwB,QACV,OAAON,EAGT,GAAIlB,EACF,OAAOA,EAAOwB,QAGhB,OAAOvB,EAAeW,CAAwB,EAGhD,MAAMa,EAAe,uBAAM,OACzBC,EAACC,cAAAC,EACK,QAACZ,EAAAhB,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAQG,oBAAgB,MAAAa,SAAA,EAAAA,EAAIb,KAAgB,MAAA0B,SAAA,EAAAA,EAAI,CAAA,EACrDC,IAAKjB,EACLkB,QAAS,IAAMpB,EAAe,MAC9BqB,OAAQ,IAAMrB,EAAe,OAC7BsB,SAAUd,EACVe,UAAW9B,EACX+B,aAAc,CACZD,WACEE,GAAAC,GAAAC,EAAAtC,UAAAA,SAAM,OAAA,EAANA,EAAQG,oBAAgB,MAAAmC,SAAA,OAAA,EAAAA,EAAEH,gBAAc,MAAAE,SAAA,OAAA,EAAAA,EAAAH,aACxC,MAAAE,SAAA,EAAAA,GAAAG,EAAApC,IAAgB,MAAhBA,SAAgB,OAAA,EAAhBA,EAAkBgC,gBAAY,MAAAI,SAAA,OAAA,EAAAA,EAAEL,WAEpCM,MAAO,CACLC,QAASpC,EAAW,QAAU,QAEhCqC,KAAK,OACLC,KAAK,gBACLC,aAAaC,EAAA7C,IAAA,MAAAA,kBAAAA,EAAQE,qBAAqB,MAAA2C,SAAA,EAAAA,EAAA3C,GAE7C,EAED,MAAM4C,EAAmB,KACvBtC,EAAU,IACVG,EAAe,OACfL,GAAsB,EAAE,EAG1B,MAAMyC,EAAUxB,IAEhByB,GAAU,cACPhC,EAAAhB,IAAA,MAAAA,kBAAAA,EAAQG,oBAAgB,MAAAa,SAAA,OAAA,EAAAA,EAAEiC,SAAS9C,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAkB8C,SAAUH,GAAkB,GACjF,CAAC3C,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkB8C,OAAOpB,EAAA7B,IAAA,MAAAA,kBAAAA,EAAQG,oBAAkB,MAAA0B,SAAA,OAAA,EAAAA,EAAAoB,QAEvDD,GAAU,KACR,MAAME,GACHH,IACArC,EACH,GAAIwC,EACFJ,GACD,GACA,CAACpC,EAAaqC,IAEjB,MAAO,CACLtB,eACAd,iBACAwC,cAAeJ,EACfK,gBAAiBrC,EACjBF,iBACAN,SACAG,cACD"}

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

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