@onewelcome/react-lib-components 6.4.4 → 6.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (145) hide show
  1. package/dist/cjs/Form/FileUpload/FileItem/FileItem.cjs.js +1 -1
  2. package/dist/cjs/Form/FileUpload/FileItem/FileItem.cjs.js.map +1 -1
  3. package/dist/cjs/Form/FileUpload/FileItem/FileItem.module.cjs.js +2 -0
  4. package/dist/cjs/Form/FileUpload/FileItem/FileItem.module.cjs.js.map +1 -0
  5. package/dist/cjs/Form/Select/MultiSelect/MultiOption.cjs.js +1 -1
  6. package/dist/cjs/Form/Select/MultiSelect/MultiOption.cjs.js.map +1 -1
  7. package/dist/cjs/Form/Select/MultiSelect/MultiSelect.cjs.js +1 -1
  8. package/dist/cjs/Form/Select/MultiSelect/MultiSelect.cjs.js.map +1 -1
  9. package/dist/cjs/Form/Select/MultiSelect/MultiSelect.module.cjs.js +1 -1
  10. package/dist/cjs/Form/Select/MultiSelect/SelectButton.cjs.js +1 -1
  11. package/dist/cjs/Form/Select/MultiSelect/SelectButton.cjs.js.map +1 -1
  12. package/dist/cjs/Form/Select/MultiSelect/SelectButton.module.cjs.js +1 -1
  13. package/dist/cjs/Form/Select/MultiSelect/SelectedOptions.cjs.js +1 -1
  14. package/dist/cjs/Form/Select/MultiSelect/SelectedOptions.cjs.js.map +1 -1
  15. package/dist/cjs/Form/Select/MultiSelect/useArrowNavigation.cjs.js +2 -0
  16. package/dist/cjs/Form/Select/MultiSelect/useArrowNavigation.cjs.js.map +1 -0
  17. package/dist/cjs/Form/Select/MultiSelect/useSearch.cjs.js +2 -0
  18. package/dist/cjs/Form/Select/MultiSelect/useSearch.cjs.js.map +1 -0
  19. package/dist/cjs/Form/Select/SingleSelect/Option.cjs.js +1 -1
  20. package/dist/cjs/Form/Select/SingleSelect/Option.cjs.js.map +1 -1
  21. package/dist/cjs/Form/Select/SingleSelect/Select.cjs.js +1 -1
  22. package/dist/cjs/Form/Select/SingleSelect/Select.cjs.js.map +1 -1
  23. package/dist/cjs/Form/Select/SingleSelect/Select.module.cjs.js +1 -1
  24. package/dist/cjs/Form/Select/SingleSelect/useArrowNavigation.cjs.js +2 -0
  25. package/dist/cjs/Form/Select/SingleSelect/useArrowNavigation.cjs.js.map +1 -0
  26. package/dist/cjs/Form/Select/SingleSelect/useSearch.cjs.js +2 -0
  27. package/dist/cjs/Form/Select/SingleSelect/useSearch.cjs.js.map +1 -0
  28. package/dist/cjs/Form/Select/useAddNewBtn.cjs.js +1 -1
  29. package/dist/cjs/Form/Select/useAddNewBtn.cjs.js.map +1 -1
  30. package/dist/cjs/Form/Select/useAddNewBtn.module.cjs.js +1 -1
  31. package/dist/cjs/Form/Select/useSelectPositionList.cjs.js +2 -0
  32. package/dist/cjs/Form/Select/useSelectPositionList.cjs.js.map +1 -0
  33. package/dist/cjs/Notifications/BaseModal/BaseModalActions/BaseModalActions.cjs.js +1 -1
  34. package/dist/cjs/Notifications/BaseModal/BaseModalActions/BaseModalActions.cjs.js.map +1 -1
  35. package/dist/cjs/Notifications/Dialog/Dialog.cjs.js.map +1 -1
  36. package/dist/cjs/Notifications/Dialog/DialogTitle/DialogTitle.cjs.js +1 -1
  37. package/dist/cjs/Notifications/Dialog/DialogTitle/DialogTitle.cjs.js.map +1 -1
  38. package/dist/cjs/Tooltip/Tooltip.module.cjs.js +1 -1
  39. package/dist/cjs/src/components/Form/Select/MultiSelect/MultiSelect.test.d.ts +63 -1
  40. package/dist/cjs/src/components/Form/Select/MultiSelect/MultiSelectKeyboardNavigation.test.d.ts +1 -0
  41. package/dist/cjs/src/components/Form/Select/MultiSelect/SelectedOptions.d.ts +2 -1
  42. package/dist/cjs/src/components/Form/Select/MultiSelect/useArrowNavigation.d.ts +16 -0
  43. package/dist/cjs/src/components/Form/Select/MultiSelect/useSearch.d.ts +34 -0
  44. package/dist/cjs/src/components/Form/Select/Select.interfaces.d.ts +1 -0
  45. package/dist/cjs/src/components/Form/Select/SingleSelect/Option.d.ts +1 -0
  46. package/dist/cjs/src/components/Form/Select/SingleSelect/useArrowNavigation.d.ts +5 -0
  47. package/dist/cjs/src/components/Form/Select/{useSearch.d.ts → SingleSelect/useSearch.d.ts} +2 -1
  48. package/dist/cjs/src/components/Form/Select/useAddNewBtn.d.ts +10 -3
  49. package/dist/cjs/src/components/Form/Select/useSelectPositionList.d.ts +12 -0
  50. package/dist/cjs/src/components/Notifications/Dialog/Dialog.d.ts +1 -1
  51. package/dist/cjs/src/util/helper.cjs.js +1 -1
  52. package/dist/cjs/src/util/helper.cjs.js.map +1 -1
  53. package/dist/cjs/src/util/helper.d.ts +1 -0
  54. package/dist/esm/Form/FileUpload/FileItem/FileItem.esm.js +1 -1
  55. package/dist/esm/Form/FileUpload/FileItem/FileItem.esm.js.map +1 -1
  56. package/dist/esm/Form/FileUpload/FileItem/FileItem.module.esm.js +2 -0
  57. package/dist/esm/Form/FileUpload/FileItem/FileItem.module.esm.js.map +1 -0
  58. package/dist/esm/Form/Select/MultiSelect/MultiOption.esm.js +1 -1
  59. package/dist/esm/Form/Select/MultiSelect/MultiOption.esm.js.map +1 -1
  60. package/dist/esm/Form/Select/MultiSelect/MultiSelect.esm.js +1 -1
  61. package/dist/esm/Form/Select/MultiSelect/MultiSelect.esm.js.map +1 -1
  62. package/dist/esm/Form/Select/MultiSelect/MultiSelect.module.esm.js +1 -1
  63. package/dist/esm/Form/Select/MultiSelect/SelectButton.esm.js +1 -1
  64. package/dist/esm/Form/Select/MultiSelect/SelectButton.esm.js.map +1 -1
  65. package/dist/esm/Form/Select/MultiSelect/SelectButton.module.esm.js +1 -1
  66. package/dist/esm/Form/Select/MultiSelect/SelectedOptions.esm.js +1 -1
  67. package/dist/esm/Form/Select/MultiSelect/SelectedOptions.esm.js.map +1 -1
  68. package/dist/esm/Form/Select/MultiSelect/useArrowNavigation.esm.js +2 -0
  69. package/dist/esm/Form/Select/MultiSelect/useArrowNavigation.esm.js.map +1 -0
  70. package/dist/esm/Form/Select/MultiSelect/useSearch.esm.js +2 -0
  71. package/dist/esm/Form/Select/MultiSelect/useSearch.esm.js.map +1 -0
  72. package/dist/esm/Form/Select/SingleSelect/Option.esm.js +1 -1
  73. package/dist/esm/Form/Select/SingleSelect/Option.esm.js.map +1 -1
  74. package/dist/esm/Form/Select/SingleSelect/Select.esm.js +1 -1
  75. package/dist/esm/Form/Select/SingleSelect/Select.esm.js.map +1 -1
  76. package/dist/esm/Form/Select/SingleSelect/Select.module.esm.js +1 -1
  77. package/dist/esm/Form/Select/SingleSelect/useArrowNavigation.esm.js +2 -0
  78. package/dist/esm/Form/Select/SingleSelect/useArrowNavigation.esm.js.map +1 -0
  79. package/dist/esm/Form/Select/SingleSelect/useSearch.esm.js +2 -0
  80. package/dist/esm/Form/Select/SingleSelect/useSearch.esm.js.map +1 -0
  81. package/dist/esm/Form/Select/useAddNewBtn.esm.js +1 -1
  82. package/dist/esm/Form/Select/useAddNewBtn.esm.js.map +1 -1
  83. package/dist/esm/Form/Select/useAddNewBtn.module.esm.js +1 -1
  84. package/dist/esm/Form/Select/useSelectPositionList.esm.js +2 -0
  85. package/dist/esm/Form/Select/useSelectPositionList.esm.js.map +1 -0
  86. package/dist/esm/Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js +1 -1
  87. package/dist/esm/Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js.map +1 -1
  88. package/dist/esm/Notifications/Dialog/Dialog.esm.js.map +1 -1
  89. package/dist/esm/Notifications/Dialog/DialogTitle/DialogTitle.esm.js +1 -1
  90. package/dist/esm/Notifications/Dialog/DialogTitle/DialogTitle.esm.js.map +1 -1
  91. package/dist/esm/Tooltip/Tooltip.module.esm.js +1 -1
  92. package/dist/esm/src/components/Form/Select/MultiSelect/MultiSelect.test.d.ts +63 -1
  93. package/dist/esm/src/components/Form/Select/MultiSelect/MultiSelectKeyboardNavigation.test.d.ts +1 -0
  94. package/dist/esm/src/components/Form/Select/MultiSelect/SelectedOptions.d.ts +2 -1
  95. package/dist/esm/src/components/Form/Select/MultiSelect/useArrowNavigation.d.ts +16 -0
  96. package/dist/esm/src/components/Form/Select/MultiSelect/useSearch.d.ts +34 -0
  97. package/dist/esm/src/components/Form/Select/Select.interfaces.d.ts +1 -0
  98. package/dist/esm/src/components/Form/Select/SingleSelect/Option.d.ts +1 -0
  99. package/dist/esm/src/components/Form/Select/SingleSelect/useArrowNavigation.d.ts +5 -0
  100. package/dist/esm/src/components/Form/Select/{useSearch.d.ts → SingleSelect/useSearch.d.ts} +2 -1
  101. package/dist/esm/src/components/Form/Select/useAddNewBtn.d.ts +10 -3
  102. package/dist/esm/src/components/Form/Select/useSelectPositionList.d.ts +12 -0
  103. package/dist/esm/src/components/Notifications/Dialog/Dialog.d.ts +1 -1
  104. package/dist/esm/src/util/helper.d.ts +1 -0
  105. package/dist/esm/src/util/helper.esm.js +1 -1
  106. package/dist/esm/src/util/helper.esm.js.map +1 -1
  107. package/package.json +6 -6
  108. package/src/components/Form/FileUpload/FileItem/FileItem.tsx +1 -1
  109. package/src/components/Form/Select/MultiSelect/MultiOption.tsx +36 -3
  110. package/src/components/Form/Select/MultiSelect/MultiSelect.module.scss +29 -19
  111. package/src/components/Form/Select/MultiSelect/MultiSelect.tsx +85 -62
  112. package/src/components/Form/Select/MultiSelect/SelectButton.module.scss +1 -1
  113. package/src/components/Form/Select/MultiSelect/SelectButton.tsx +1 -1
  114. package/src/components/Form/Select/MultiSelect/SelectedOptions.tsx +5 -4
  115. package/src/components/Form/Select/MultiSelect/useArrowNavigation.ts +128 -0
  116. package/src/components/Form/Select/MultiSelect/useSearch.tsx +126 -0
  117. package/src/components/Form/Select/Select.interfaces.ts +1 -0
  118. package/src/components/Form/Select/SingleSelect/Option.tsx +15 -4
  119. package/src/components/Form/Select/SingleSelect/Select.module.scss +13 -2
  120. package/src/components/Form/Select/SingleSelect/Select.tsx +7 -3
  121. package/src/components/Form/Select/{SelectService.ts → SingleSelect/useArrowNavigation.ts} +1 -101
  122. package/src/components/Form/Select/{useSearch.tsx → SingleSelect/useSearch.tsx} +3 -2
  123. package/src/components/Form/Select/useAddNewBtn.module.scss +18 -4
  124. package/src/components/Form/Select/useAddNewBtn.tsx +42 -8
  125. package/src/components/Form/Select/useSelectPositionList.ts +113 -0
  126. package/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.tsx +1 -1
  127. package/src/components/Notifications/Dialog/Dialog.tsx +1 -1
  128. package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.tsx +5 -3
  129. package/src/components/Tooltip/Tooltip.module.scss +1 -1
  130. package/src/util/helper.tsx +2 -0
  131. package/dist/cjs/Form/FileUpload/FileItem/FileItem.modules.cjs.js +0 -2
  132. package/dist/cjs/Form/FileUpload/FileItem/FileItem.modules.cjs.js.map +0 -1
  133. package/dist/cjs/Form/Select/SelectService.cjs.js +0 -2
  134. package/dist/cjs/Form/Select/SelectService.cjs.js.map +0 -1
  135. package/dist/cjs/Form/Select/useSearch.cjs.js +0 -2
  136. package/dist/cjs/Form/Select/useSearch.cjs.js.map +0 -1
  137. package/dist/cjs/src/components/Form/Select/SelectService.d.ts +0 -17
  138. package/dist/esm/Form/FileUpload/FileItem/FileItem.modules.esm.js +0 -2
  139. package/dist/esm/Form/FileUpload/FileItem/FileItem.modules.esm.js.map +0 -1
  140. package/dist/esm/Form/Select/SelectService.esm.js +0 -2
  141. package/dist/esm/Form/Select/SelectService.esm.js.map +0 -1
  142. package/dist/esm/Form/Select/useSearch.esm.js +0 -2
  143. package/dist/esm/Form/Select/useSearch.esm.js.map +0 -1
  144. package/dist/esm/src/components/Form/Select/SelectService.d.ts +0 -17
  145. /package/src/components/Form/FileUpload/FileItem/{FileItem.modules.scss → FileItem.module.scss} +0 -0
@@ -1 +0,0 @@
1
- {"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":"gDAwBO,MAAMA,EAAqB,EAChCC,WACAC,cACAC,cACAC,iBACAC,uBACAC,wBACAC,gBACAC,iBACAC,iBACAC,YACAC,sBAEA,MAAMC,EAAqBC,UACzB,MAAMC,EAAwB,CAC5B,YACA,UACA,YACA,aACA,QACA,SACA,MACA,QAGF,MAAMC,EAAqC,CACzC,YACA,UACA,QACA,SACA,WACA,aAGF,MAAMC,GAAkBN,UAAAA,SAAS,OAAA,EAATA,EAAWO,WAAYC,SAASC,cAExD,GAAIlB,EACFa,EAAsBM,KAAK,OAG7B,GAAIV,EACFK,EAAmCK,KAAK,OAG1C,GAAIN,EAAsBO,SAASR,EAAMS,QAAUT,EAAMU,UAAYpB,EACnEU,EAAMW,iBAGR,GAAIrB,GAAeY,EAAmCM,SAASR,EAAMS,MACnET,EAAMW,iBAGR,GAAIrB,EACF,OAAQU,EAAMS,MACZ,IAAK,YACL,IAAK,QACHlB,EAAe,OACfC,EAAqB,GACrB,OACF,IAAK,UACHD,EAAe,OACfC,EAAqBE,EAAgB,GACrC,OACF,IAAK,SACHH,EAAe,OACfF,EAAY,OACZ,OACF,IAAK,MACH,GAAIQ,UAAAA,SAAS,OAAA,EAATA,EAAWO,QAAS,CACtBP,EAAUO,QAAQQ,QAClB,MACD,CACDrB,EAAe,OACfF,EAAY,YAGhB,OAAQW,EAAMS,MACZ,IAAK,YACH,IAAKrB,EAAU,CACbC,EAAY,MACZG,EAAqB,GACrB,MACD,CACDA,GAAqBqB,GACZA,EAAY,EAAInB,EAAgB,EAAI,EAAImB,EAAY,IAE7D,OACF,IAAK,UACH,IAAKzB,EAAU,CACbC,EAAY,MACZG,EAAqBE,EAAgB,GACrC,MACD,CAEDF,GAAqBqB,GACZA,EAAY,EAAI,EAAInB,EAAgB,EAAImB,EAAY,IAE7D,OACF,IAAK,QACH,IAAKzB,EAAU,CACbC,EAAY,MACZG,EAAqB,GACrB,MACD,CAEDC,EAAsBO,EAAMc,QAC5BnB,EAAe,MACfN,EAAY,OAEZ,OACF,IAAK,QACL,IAAK,OACHG,EAAqB,GAErB,OACF,IAAK,MACH,GAAIE,GAAiBI,GAAmBV,IAAae,EAAiB,CACpEZ,EAAe,OACfwB,EAAAnB,EAAeQ,WAAS,MAAAW,SAAA,OAAA,EAAAA,EAAAH,QACxB,MACD,MAAM,IAAIf,IAAA,MAAAA,kBAAAA,EAAWO,UAAWhB,IAAae,EAAiB,CAC7DN,EAAUO,QAAQQ,QAClB,MACD,CACDvB,EAAY,OAEZ,OACF,IAAK,SACH,GAAID,EACFC,EAAY,OAEd,OACF,IAAK,MACHG,EAAqBE,EAAgB,GACrC,OACF,IAAK,YACH,GAAIM,EAAMU,SAAWtB,EAAU,CAC7BY,EAAMW,iBACNnB,EAAqB,EACtB,CACD,OACF,IAAK,aACH,GAAIQ,EAAMU,SAAWtB,EAAU,CAC7BY,EAAMW,iBACNnB,EAAqBE,EAAgB,EACtC,CACD,OAEL,EAGH,MAAO,CAAEK,oBAAmB,EAIvB,MAAMiB,EAAwB,EACnC5B,WACA6B,sBACApB,YACAqB,yBAEA,MAAOC,EAAsBC,GAA2BC,EAGrD,CACDC,aAASC,EACTC,UAAMD,IAER,MAAOE,EAASC,GAAcL,EAAS,GACvC,MAAOM,EAAcC,GAAmBP,EAA4B,CAAE,GAEtEQ,GAAU,KACRC,GAAgB,GACf,CAAC1C,IAEJ,MAAM0C,EAAiB,KACrB,IAAK1C,IAAa6B,EAAoBb,UAAYc,EAAmBd,QACnE,OAKF,MAAM2B,EAAqBb,EAAmBd,QAAQ4B,wBAAwBC,OAG9E,MAAMC,EACJC,OAAOC,YAAclB,EAAmBd,QAAQ4B,wBAAwBK,IAG1E,IAAIC,EAAqB,CAAED,IAAK,UAAWJ,OAAQ,WAGnD,GAAIF,EAAqBG,EACvBI,EAAW,CAAED,IAAK,UAAWJ,OAAQ,WAGvCL,EAAgBU,GAGhBC,EAA6BD,EAAS,EAGxC,MAAMC,EAAgCD,UAEpC,MAAME,GAAazB,EAAAE,EAAoBb,WAAS,MAAAW,SAAA,OAAA,EAAAA,EAAAiB,wBAAwBS,OACxE,MAAMC,EAA+B7C,EAAUO,QAC3CP,EAAUO,QAAQ4B,wBAAwBS,OAC1CE,SAASC,iBAAiB/C,EAAUO,SAASyC,cAC7C,EACJ,MAAMC,EAAkBR,EAASD,MAAQ,UAAY,MAAQ,SAE7D,IAAKnB,EAAmBd,QAAS,CAC/B2C,QAAQC,MACN,6LAEF,MACD,CAED,MAAMC,EACJH,IAAoB,MAChBX,OAAOC,YAAclB,EAAmBd,QAAQ4B,wBAAwBC,OAAS,GACjFf,EAAmBd,QAAQ4B,wBAAwBK,IAAM,GAE/D,GAAIG,GAAcS,EAAiBT,EAAaE,EAA8B,CAC5E,MAAMQ,EAAkB,CACtB5B,QAAS,GAAG2B,MACZzB,KACEkB,EAA+B,EAC3B,GAAGO,EAAiBP,MACpB,QAERtB,EAAwB8B,GACxBxB,EAAW,KACX,MACD,CAEDN,EAAwB,CAAEE,aAASC,EAAWC,UAAMD,IACpDG,EAAW,IAAI,EAGjB,MAAO,CACLP,uBACAM,UACAC,aACAC,eACAC,kBACD"}
@@ -1,2 +0,0 @@
1
- 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};
2
- //# sourceMappingURL=useSearch.esm.js.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,17 +0,0 @@
1
- import React from "react";
2
- import { Position, UseArrowNavigationParams, UseSelectPositionListParams } from "./Select.interfaces";
3
- /** @scope .*/
4
- export declare const useArrowNavigation: ({ expanded, setExpanded, isSearching, setIsSearching, setFocusedSelectItem, onOptionChangeHandler, childrenCount, setShouldClick, searchInputRef, addBtnRef, renderThreshold }: UseArrowNavigationParams) => {
5
- onArrowNavigation: (event: React.KeyboardEvent) => void;
6
- };
7
- /** @scope .*/
8
- export declare const useSelectPositionList: ({ expanded, optionListReference, addBtnRef, containerReference }: UseSelectPositionListParams) => {
9
- optionsListMaxHeight: {
10
- wrapper?: string | undefined;
11
- list?: string | undefined;
12
- };
13
- opacity: number;
14
- setOpacity: React.Dispatch<React.SetStateAction<number>>;
15
- listPosition: Partial<Position>;
16
- setListPosition: React.Dispatch<React.SetStateAction<Partial<Position>>>;
17
- };