@onewelcome/react-lib-components 6.5.0 → 6.7.0

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>>>;
-};