@hitachivantara/uikit-react-core 5.66.12 → 5.66.14

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 (263) hide show
  1. package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs +1 -2
  2. package/dist/cjs/AvatarGroup/AvatarGroup.cjs +1 -2
  3. package/dist/cjs/BaseDropdown/BaseDropdown.cjs +2 -4
  4. package/dist/cjs/Box/Box.cjs +13 -14
  5. package/dist/cjs/Button/Button.cjs +3 -6
  6. package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs +2 -4
  7. package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs +1 -2
  8. package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.cjs +4 -8
  9. package/dist/cjs/Calendar/utils.cjs +4 -8
  10. package/dist/cjs/Carousel/Carousel.cjs +26 -11
  11. package/dist/cjs/Carousel/CarouselControls.cjs +9 -2
  12. package/dist/cjs/ColorPicker/Fields/Fields.cjs +4 -8
  13. package/dist/cjs/DatePicker/DatePicker.cjs +6 -12
  14. package/dist/cjs/Dialog/Dialog.cjs +2 -4
  15. package/dist/cjs/Drawer/Drawer.cjs +1 -2
  16. package/dist/cjs/DropDownMenu/DropDownMenu.cjs +2 -4
  17. package/dist/cjs/Dropdown/Dropdown.cjs +1 -2
  18. package/dist/cjs/Dropdown/List/List.cjs +2 -4
  19. package/dist/cjs/Dropdown/utils.cjs +1 -2
  20. package/dist/cjs/FileUploader/DropZone/DropZone.cjs +3 -6
  21. package/dist/cjs/FileUploader/FileList/FileList.cjs +1 -2
  22. package/dist/cjs/FilterGroup/FilterContent/FilterContent.cjs +2 -4
  23. package/dist/cjs/Focus/Focus.cjs +7 -14
  24. package/dist/cjs/Forms/FormElement/utils/FormUtils.cjs +6 -4
  25. package/dist/cjs/GlobalActions/GlobalActions.styles.cjs +1 -2
  26. package/dist/cjs/Grid/Grid.cjs +7 -4
  27. package/dist/cjs/Header/Navigation/useSelectionPath.cjs +1 -2
  28. package/dist/cjs/Input/Input.cjs +2 -4
  29. package/dist/cjs/Link/Link.cjs +1 -2
  30. package/dist/cjs/List/List.cjs +12 -15
  31. package/dist/cjs/List/utils.cjs +1 -2
  32. package/dist/cjs/ListContainer/ListContainer.cjs +1 -2
  33. package/dist/cjs/ListContainer/ListContext/ListContext.cjs +1 -2
  34. package/dist/cjs/ListContainer/ListItem/ListItem.cjs +3 -6
  35. package/dist/cjs/LoadingContainer/LoadingContainer.cjs +2 -1
  36. package/dist/cjs/Pagination/Select.cjs +1 -2
  37. package/dist/cjs/QueryBuilder/Rule/Attribute/Attribute.cjs +1 -2
  38. package/dist/cjs/QueryBuilder/Rule/Value/NumericValue/NumericValue.cjs +2 -2
  39. package/dist/cjs/QueryBuilder/utils/reducer.cjs +1 -2
  40. package/dist/cjs/ScrollTo/Horizontal/ScrollToHorizontal.cjs +2 -2
  41. package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs +2 -2
  42. package/dist/cjs/Select/Select.cjs +2 -2
  43. package/dist/cjs/Skeleton/Skeleton.cjs +1 -2
  44. package/dist/cjs/Slider/Slider.cjs +1 -2
  45. package/dist/cjs/Slider/SliderInput/SliderInput.cjs +1 -2
  46. package/dist/cjs/Slider/utils.cjs +4 -8
  47. package/dist/cjs/Stack/Stack.cjs +1 -2
  48. package/dist/cjs/Table/TableContext.cjs +1 -2
  49. package/dist/cjs/Table/TableSectionContext.cjs +1 -2
  50. package/dist/cjs/Table/hooks/useBulkActions.cjs +1 -2
  51. package/dist/cjs/Table/hooks/useRowExpand.cjs +5 -1
  52. package/dist/cjs/Table/utils/fallbacks.cjs +1 -2
  53. package/dist/cjs/Tag/Tag.cjs +2 -4
  54. package/dist/cjs/TagsInput/TagsInput.cjs +2 -3
  55. package/dist/cjs/TextArea/TextArea.cjs +1 -2
  56. package/dist/cjs/TimeAgo/TimeAgo.cjs +1 -2
  57. package/dist/cjs/TimeAgo/useTimeout.cjs +1 -2
  58. package/dist/cjs/TimePicker/Placeholder.cjs +3 -6
  59. package/dist/cjs/TimePicker/TimePicker.cjs +3 -6
  60. package/dist/cjs/TreeView/TreeItem/TreeItem.cjs +2 -1
  61. package/dist/cjs/TreeView/TreeItem/useHvTreeItem.cjs +3 -6
  62. package/dist/cjs/TreeView/internals/DescendantProvider.cjs +1 -2
  63. package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewExpansion.cjs +1 -2
  64. package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewFocus.cjs +1 -2
  65. package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewKeyboardNavigation.cjs +1 -2
  66. package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewNodes.cjs +1 -2
  67. package/dist/cjs/TreeView/internals/hooks/plugins/useTreeViewSelection.cjs +1 -2
  68. package/dist/cjs/TreeView/internals/hooks/useInstanceEventHandler.cjs +1 -2
  69. package/dist/cjs/TreeView/internals/hooks/useTreeView.cjs +1 -2
  70. package/dist/cjs/TreeView/internals/hooks/useTreeViewInstanceEvents.cjs +1 -2
  71. package/dist/cjs/TreeView/internals/hooks/useTreeViewModels.cjs +1 -2
  72. package/dist/cjs/Typography/utils.cjs +1 -2
  73. package/dist/cjs/VerticalNavigation/Header/Header.cjs +1 -2
  74. package/dist/cjs/VerticalNavigation/Navigation/Navigation.cjs +2 -4
  75. package/dist/cjs/VerticalNavigation/TreeView/TreeView.cjs +3 -6
  76. package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs +4 -8
  77. package/dist/cjs/hooks/useForkRef.cjs +1 -2
  78. package/dist/cjs/hooks/useUniqueId.cjs +2 -4
  79. package/dist/cjs/providers/Provider.cjs +2 -4
  80. package/dist/cjs/utils/classes.cjs +6 -3
  81. package/dist/cjs/utils/deepMerge.cjs +2 -1
  82. package/dist/cjs/utils/helpers.cjs +1 -2
  83. package/dist/cjs/utils/theme.cjs +1 -2
  84. package/dist/cjs/utils/useSavedState.cjs +1 -2
  85. package/dist/esm/ActionsGeneric/ActionsGeneric.js +1 -2
  86. package/dist/esm/ActionsGeneric/ActionsGeneric.js.map +1 -1
  87. package/dist/esm/AvatarGroup/AvatarGroup.js +1 -2
  88. package/dist/esm/AvatarGroup/AvatarGroup.js.map +1 -1
  89. package/dist/esm/BaseDropdown/BaseDropdown.js +2 -4
  90. package/dist/esm/BaseDropdown/BaseDropdown.js.map +1 -1
  91. package/dist/esm/Box/Box.js +13 -14
  92. package/dist/esm/Box/Box.js.map +1 -1
  93. package/dist/esm/Button/Button.js +3 -6
  94. package/dist/esm/Button/Button.js.map +1 -1
  95. package/dist/esm/Button/Button.styles.js.map +1 -1
  96. package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js +2 -4
  97. package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js.map +1 -1
  98. package/dist/esm/Calendar/SingleCalendar/CalendarCell.js +1 -2
  99. package/dist/esm/Calendar/SingleCalendar/CalendarCell.js.map +1 -1
  100. package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js +4 -8
  101. package/dist/esm/Calendar/SingleCalendar/SingleCalendar.js.map +1 -1
  102. package/dist/esm/Calendar/utils.js +4 -8
  103. package/dist/esm/Calendar/utils.js.map +1 -1
  104. package/dist/esm/Card/Card.js.map +1 -1
  105. package/dist/esm/Carousel/Carousel.js +26 -11
  106. package/dist/esm/Carousel/Carousel.js.map +1 -1
  107. package/dist/esm/Carousel/CarouselControls.js +9 -2
  108. package/dist/esm/Carousel/CarouselControls.js.map +1 -1
  109. package/dist/esm/ColorPicker/Fields/Fields.js +3 -6
  110. package/dist/esm/ColorPicker/Fields/Fields.js.map +1 -1
  111. package/dist/esm/DatePicker/DatePicker.js +6 -12
  112. package/dist/esm/DatePicker/DatePicker.js.map +1 -1
  113. package/dist/esm/Dialog/Dialog.js +2 -4
  114. package/dist/esm/Dialog/Dialog.js.map +1 -1
  115. package/dist/esm/Drawer/Drawer.js +1 -2
  116. package/dist/esm/Drawer/Drawer.js.map +1 -1
  117. package/dist/esm/DropDownMenu/DropDownMenu.js +2 -4
  118. package/dist/esm/DropDownMenu/DropDownMenu.js.map +1 -1
  119. package/dist/esm/Dropdown/Dropdown.js +1 -2
  120. package/dist/esm/Dropdown/Dropdown.js.map +1 -1
  121. package/dist/esm/Dropdown/List/List.js +2 -4
  122. package/dist/esm/Dropdown/List/List.js.map +1 -1
  123. package/dist/esm/Dropdown/utils.js +1 -2
  124. package/dist/esm/Dropdown/utils.js.map +1 -1
  125. package/dist/esm/FileUploader/DropZone/DropZone.js +3 -6
  126. package/dist/esm/FileUploader/DropZone/DropZone.js.map +1 -1
  127. package/dist/esm/FileUploader/FileList/FileList.js +1 -2
  128. package/dist/esm/FileUploader/FileList/FileList.js.map +1 -1
  129. package/dist/esm/FilterGroup/FilterContent/FilterContent.js +2 -4
  130. package/dist/esm/FilterGroup/FilterContent/FilterContent.js.map +1 -1
  131. package/dist/esm/Focus/Focus.js +7 -14
  132. package/dist/esm/Focus/Focus.js.map +1 -1
  133. package/dist/esm/Forms/FormElement/FormElement.js.map +1 -1
  134. package/dist/esm/Forms/FormElement/context/FormElementContext.js.map +1 -1
  135. package/dist/esm/Forms/FormElement/context/FormElementDescriptorsContext.js.map +1 -1
  136. package/dist/esm/Forms/FormElement/utils/FormUtils.js +6 -4
  137. package/dist/esm/Forms/FormElement/utils/FormUtils.js.map +1 -1
  138. package/dist/esm/GlobalActions/GlobalActions.styles.js +1 -2
  139. package/dist/esm/GlobalActions/GlobalActions.styles.js.map +1 -1
  140. package/dist/esm/Grid/Grid.js +7 -4
  141. package/dist/esm/Grid/Grid.js.map +1 -1
  142. package/dist/esm/Header/Navigation/useSelectionPath.js +1 -2
  143. package/dist/esm/Header/Navigation/useSelectionPath.js.map +1 -1
  144. package/dist/esm/Input/Input.js +2 -4
  145. package/dist/esm/Input/Input.js.map +1 -1
  146. package/dist/esm/Link/Link.js +1 -2
  147. package/dist/esm/Link/Link.js.map +1 -1
  148. package/dist/esm/List/List.js +12 -15
  149. package/dist/esm/List/List.js.map +1 -1
  150. package/dist/esm/List/utils.js +1 -2
  151. package/dist/esm/List/utils.js.map +1 -1
  152. package/dist/esm/ListContainer/ListContainer.js +4 -5
  153. package/dist/esm/ListContainer/ListContainer.js.map +1 -1
  154. package/dist/esm/ListContainer/ListContext/ListContext.js +1 -2
  155. package/dist/esm/ListContainer/ListContext/ListContext.js.map +1 -1
  156. package/dist/esm/ListContainer/ListItem/ListItem.js +5 -8
  157. package/dist/esm/ListContainer/ListItem/ListItem.js.map +1 -1
  158. package/dist/esm/Loading/Loading.js.map +1 -1
  159. package/dist/esm/LoadingContainer/LoadingContainer.js +2 -1
  160. package/dist/esm/LoadingContainer/LoadingContainer.js.map +1 -1
  161. package/dist/esm/MultiButton/MultiButton.js.map +1 -1
  162. package/dist/esm/Pagination/Select.js +1 -2
  163. package/dist/esm/Pagination/Select.js.map +1 -1
  164. package/dist/esm/QueryBuilder/Rule/Attribute/Attribute.js +1 -2
  165. package/dist/esm/QueryBuilder/Rule/Attribute/Attribute.js.map +1 -1
  166. package/dist/esm/QueryBuilder/Rule/Operator/Operator.js.map +1 -1
  167. package/dist/esm/QueryBuilder/Rule/Value/NumericValue/NumericValue.js +2 -2
  168. package/dist/esm/QueryBuilder/Rule/Value/NumericValue/NumericValue.js.map +1 -1
  169. package/dist/esm/QueryBuilder/utils/index.js.map +1 -1
  170. package/dist/esm/QueryBuilder/utils/reducer.js +1 -2
  171. package/dist/esm/QueryBuilder/utils/reducer.js.map +1 -1
  172. package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js +2 -2
  173. package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -1
  174. package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js +2 -2
  175. package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js.map +1 -1
  176. package/dist/esm/Section/Section.js.map +1 -1
  177. package/dist/esm/Select/Select.js +2 -2
  178. package/dist/esm/Select/Select.js.map +1 -1
  179. package/dist/esm/SimpleGrid/SimpleGrid.styles.js.map +1 -1
  180. package/dist/esm/Skeleton/Skeleton.js +1 -2
  181. package/dist/esm/Skeleton/Skeleton.js.map +1 -1
  182. package/dist/esm/Slider/Slider.js +1 -2
  183. package/dist/esm/Slider/Slider.js.map +1 -1
  184. package/dist/esm/Slider/SliderInput/SliderInput.js +1 -2
  185. package/dist/esm/Slider/SliderInput/SliderInput.js.map +1 -1
  186. package/dist/esm/Slider/utils.js +4 -8
  187. package/dist/esm/Slider/utils.js.map +1 -1
  188. package/dist/esm/Snackbar/Snackbar.js.map +1 -1
  189. package/dist/esm/Stack/Stack.js +1 -2
  190. package/dist/esm/Stack/Stack.js.map +1 -1
  191. package/dist/esm/Table/TableCell/TableCell.js.map +1 -1
  192. package/dist/esm/Table/TableContext.js +1 -2
  193. package/dist/esm/Table/TableContext.js.map +1 -1
  194. package/dist/esm/Table/TableHeader/TableHeader.js.map +1 -1
  195. package/dist/esm/Table/TableRow/TableRow.js.map +1 -1
  196. package/dist/esm/Table/TableSectionContext.js +1 -2
  197. package/dist/esm/Table/TableSectionContext.js.map +1 -1
  198. package/dist/esm/Table/hooks/useBulkActions.js +1 -2
  199. package/dist/esm/Table/hooks/useBulkActions.js.map +1 -1
  200. package/dist/esm/Table/hooks/useHeaderGroups.js.map +1 -1
  201. package/dist/esm/Table/hooks/usePagination.js.map +1 -1
  202. package/dist/esm/Table/hooks/useResizeColumns.js.map +1 -1
  203. package/dist/esm/Table/hooks/useRowExpand.js +5 -1
  204. package/dist/esm/Table/hooks/useRowExpand.js.map +1 -1
  205. package/dist/esm/Table/hooks/useRowSelection.js.map +1 -1
  206. package/dist/esm/Table/hooks/useSortBy.js.map +1 -1
  207. package/dist/esm/Table/hooks/useSticky.js.map +1 -1
  208. package/dist/esm/Table/hooks/useTableStyles.js.map +1 -1
  209. package/dist/esm/Table/utils/fallbacks.js +1 -2
  210. package/dist/esm/Table/utils/fallbacks.js.map +1 -1
  211. package/dist/esm/Tag/Tag.js +2 -4
  212. package/dist/esm/Tag/Tag.js.map +1 -1
  213. package/dist/esm/TagsInput/TagsInput.js +2 -3
  214. package/dist/esm/TagsInput/TagsInput.js.map +1 -1
  215. package/dist/esm/TextArea/TextArea.js +1 -2
  216. package/dist/esm/TextArea/TextArea.js.map +1 -1
  217. package/dist/esm/TimeAgo/TimeAgo.js +1 -2
  218. package/dist/esm/TimeAgo/TimeAgo.js.map +1 -1
  219. package/dist/esm/TimeAgo/useTimeout.js +1 -2
  220. package/dist/esm/TimeAgo/useTimeout.js.map +1 -1
  221. package/dist/esm/TimePicker/Placeholder.js +3 -6
  222. package/dist/esm/TimePicker/Placeholder.js.map +1 -1
  223. package/dist/esm/TimePicker/TimePicker.js +3 -6
  224. package/dist/esm/TimePicker/TimePicker.js.map +1 -1
  225. package/dist/esm/TreeView/TreeItem/TreeItem.js +2 -1
  226. package/dist/esm/TreeView/TreeItem/TreeItem.js.map +1 -1
  227. package/dist/esm/TreeView/TreeItem/useHvTreeItem.js +2 -4
  228. package/dist/esm/TreeView/TreeItem/useHvTreeItem.js.map +1 -1
  229. package/dist/esm/Typography/utils.js +1 -2
  230. package/dist/esm/Typography/utils.js.map +1 -1
  231. package/dist/esm/VerticalNavigation/Header/Header.js +1 -2
  232. package/dist/esm/VerticalNavigation/Header/Header.js.map +1 -1
  233. package/dist/esm/VerticalNavigation/Navigation/Navigation.js +2 -4
  234. package/dist/esm/VerticalNavigation/Navigation/Navigation.js.map +1 -1
  235. package/dist/esm/VerticalNavigation/NavigationSlider/utils/NavigationSlider.utils.js.map +1 -1
  236. package/dist/esm/VerticalNavigation/TreeView/TreeView.js +3 -6
  237. package/dist/esm/VerticalNavigation/TreeView/TreeView.js.map +1 -1
  238. package/dist/esm/VerticalNavigation/TreeView/TreeViewContext.js.map +1 -1
  239. package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js +4 -8
  240. package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map +1 -1
  241. package/dist/esm/VerticalNavigation/VerticalNavigation.js.map +1 -1
  242. package/dist/esm/VerticalNavigation/VerticalNavigationContext.js.map +1 -1
  243. package/dist/esm/hocs/withTooltip.js.map +1 -1
  244. package/dist/esm/hooks/useComputation.js.map +1 -1
  245. package/dist/esm/hooks/useCss.js.map +1 -1
  246. package/dist/esm/hooks/useForkRef.js.map +1 -1
  247. package/dist/esm/hooks/useUniqueId.js +1 -2
  248. package/dist/esm/hooks/useUniqueId.js.map +1 -1
  249. package/dist/esm/providers/Provider.js +2 -4
  250. package/dist/esm/providers/Provider.js.map +1 -1
  251. package/dist/esm/types/generic.js.map +1 -1
  252. package/dist/esm/utils/classes.js +6 -3
  253. package/dist/esm/utils/classes.js.map +1 -1
  254. package/dist/esm/utils/deepMerge.js +2 -1
  255. package/dist/esm/utils/deepMerge.js.map +1 -1
  256. package/dist/esm/utils/helpers.js +1 -2
  257. package/dist/esm/utils/helpers.js.map +1 -1
  258. package/dist/esm/utils/theme.js +1 -2
  259. package/dist/esm/utils/theme.js.map +1 -1
  260. package/dist/esm/utils/useSavedState.js +1 -2
  261. package/dist/esm/utils/useSavedState.js.map +1 -1
  262. package/dist/types/index.d.ts +299 -365
  263. package/package.json +4 -4
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n isInvalid,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListValue } from \"../List\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { getSelected, getSelectionLabel } from \"./utils\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps\n extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n Pick<\n HvBaseDropdownProps,\n | \"placement\"\n | \"popperProps\"\n | \"disablePortal\"\n | \"variableWidth\"\n | \"expanded\"\n | \"defaultExpanded\"\n > {\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvDropdownClasses;\n /**\n * The placeholder value when nothing is selected.\n */\n placeholder?: string;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvDropdownStatus;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: any;\n /**\n * Identifies the element that provides an error message for the dropdown.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n /**\n * The list to be rendered by the dropdown.\n */\n values?: HvListValue[];\n /**\n * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n */\n multiSelect?: boolean;\n /**\n * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n */\n showSearch?: boolean;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabels;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Callback called when the user cancels the changes.\n *\n * Called when the cancel button is used and when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onCancel?: (event: Event) => void;\n /**\n * Callback called when dropdown changes the expanded state.\n *\n * @param {object} event The event source of the callback.\n * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * Callback called when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * @ignore\n */\n onFocus?: React.FocusEventHandler<any>;\n /**\n * @ignore\n */\n onBlur?: React.FocusEventHandler<any>;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n /**\n * Extra props passed to the dropdown.\n */\n baseDropdownProps?: Partial<HvBaseDropdownProps>;\n /**\n * Extra props passed to the list.\n */\n listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n /** Label for overwrite the default header behavior. */\n select: undefined as string | undefined,\n /** Label used for the All checkbox action. */\n selectAll: \"All\",\n /** Cancel button label. */\n cancelLabel: \"Cancel\",\n /** Apply button label. */\n applyLabel: \"Apply\",\n /** The label used in the middle of the multiSelection count. */\n searchPlaceholder: \"Search\",\n /** The label used in search. */\n multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n placeholder = \"Select...\",\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n onCancel,\n onToggle,\n onClickOutside,\n\n onFocus,\n onBlur,\n\n values,\n multiSelect = false,\n showSearch = false,\n expanded,\n defaultExpanded = false,\n notifyChangesOnFirstRender = false,\n labels: labelsProp,\n hasTooltips = false,\n disablePortal = false,\n singleSelectionToggle = true,\n placement,\n variableWidth = false,\n popperProps = {},\n height,\n maxHeight,\n virtualized = false,\n baseDropdownProps = {},\n listProps = {},\n ...others\n } = useDefaultProps(\"HvDropdown\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isOpen, setIsOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n const [selectionLabel, setSelectionLabel] = useState(\n getSelectionLabel(labels, placeholder, multiSelect, values),\n );\n\n const [internalValues, setInternalValues] = useState(values);\n\n // Hack - Keeping track of internal values for validation purposes since useState is async\n const internalValuesRef = useRef(values);\n\n useEffect(() => {\n setInternalValues(values);\n internalValuesRef.current = values;\n }, [values]);\n\n useEffect(() => {\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, values),\n );\n }, [labels, multiSelect, placeholder, values]);\n\n if (import.meta.env.DEV && virtualized && !height) {\n // eslint-disable-next-line no-console\n console.error(\n \"Dropdown/List in virtualized mode requires a height. Please define it.\",\n );\n }\n\n const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n const {\n ref: refProp,\n dropdownHeaderRef: dropdownHeaderRefProp,\n ...otherBaseDropdownProps\n } = baseDropdownProps;\n const headerForkedRef = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderRef,\n );\n\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n onToggle?.(event, open);\n\n setIsOpen(open);\n\n if (!open) {\n // also run built-in validation when closing without changes\n // as the user \"touched\" the input\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required) {\n const hasSelection =\n getSelected(internalValuesRef.current).length > 0;\n\n if (!hasSelection) {\n return \"invalid\";\n }\n }\n\n return \"valid\";\n });\n }\n };\n\n /** Applies the selected values to the state */\n const handleSelection: HvDropdownListProps[\"onChange\"] = (\n listValues,\n commitChanges,\n toggle,\n notifyChanges = true,\n ) => {\n const selected = getSelected(listValues);\n\n if (commitChanges) {\n setInternalValues(listValues);\n internalValuesRef.current = listValues;\n\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, listValues),\n );\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && selected.length === 0) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n }\n if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n if (toggle) {\n handleToggle(undefined as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n }\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n onCancel?.(evt as any);\n\n handleToggle(evt as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n };\n\n const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n onClickOutside?.(evt);\n onCancel?.(evt);\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef,\n ) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n return;\n }\n const listItems =\n containerRef != null\n ? [...containerRef.getElementsByTagName(\"li\")]\n : [];\n listItems.every((listItem) => {\n if (listItem.tabIndex >= 0) {\n listItem.focus();\n return false;\n }\n return true;\n });\n };\n\n const buildHeaderLabel = () => {\n const hasSelection = getSelected(internalValues).length > 0;\n return labels?.select || !multiSelect ? (\n <HvTypography\n component=\"div\"\n variant=\"body\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n [classes.placeholderClosed]: !(isOpen || hasSelection),\n })}\n >\n {selectionLabel.selected}\n </HvTypography>\n ) : (\n <HvTypography\n component=\"div\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n <b>{selectionLabel.selected}</b>\n {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n </HvTypography>\n );\n };\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n },\n className,\n )}\n {...others}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n ref={dropdownForkedRef}\n id={setId(id, \"dropdown\")}\n classes={{\n root: cx(classes.dropdown, {\n [classes.readOnly]: readOnly,\n }),\n arrow: classes.arrow,\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n expanded={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n disablePortal={disablePortal}\n placement={placement}\n popperProps={popperProps}\n placeholder={buildHeaderLabel()}\n onToggle={handleToggle}\n onClickOutside={handleClickOutside}\n onContainerCreation={setFocusToContent}\n role=\"combobox\"\n variableWidth={variableWidth}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() || undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n onFocus={onFocus}\n onBlur={onBlur}\n dropdownHeaderRef={headerForkedRef}\n {...otherBaseDropdownProps}\n >\n <HvDropdownList\n id={setId(elementId, \"values\")}\n classes={{\n rootList: classes.rootList,\n dropdownListContainer: classes.dropdownListContainer,\n }}\n values={internalValues}\n multiSelect={multiSelect}\n showSearch={showSearch}\n onChange={handleSelection}\n onCancel={handleCancel}\n labels={labels}\n notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n hasTooltips={hasTooltips}\n singleSelectionToggle={singleSelectionToggle}\n aria-label={ariaLabel}\n aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n height={height}\n maxHeight={maxHeight}\n virtualized={virtualized}\n {...listProps}\n />\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n isInvalid,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListValue } from \"../List\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { getSelected, getSelectionLabel } from \"./utils\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps\n extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n Pick<\n HvBaseDropdownProps,\n | \"placement\"\n | \"popperProps\"\n | \"disablePortal\"\n | \"variableWidth\"\n | \"expanded\"\n | \"defaultExpanded\"\n > {\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvDropdownClasses;\n /**\n * The placeholder value when nothing is selected.\n */\n placeholder?: string;\n /**\n * The status of the form element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvDropdownStatus;\n /**\n * The error message to show when the validation status is \"invalid\".\n *\n * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n */\n statusMessage?: any;\n /**\n * Identifies the element that provides an error message for the dropdown.\n *\n * Will only be used when the validation status is invalid.\n */\n \"aria-errormessage\"?: string;\n /**\n * The callback fired when the value changes.\n */\n onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n /**\n * The list to be rendered by the dropdown.\n */\n values?: HvListValue[];\n /**\n * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n */\n multiSelect?: boolean;\n /**\n * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n */\n showSearch?: boolean;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabels;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Callback called when the user cancels the changes.\n *\n * Called when the cancel button is used and when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onCancel?: (event: Event) => void;\n /**\n * Callback called when dropdown changes the expanded state.\n *\n * @param {object} event The event source of the callback.\n * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * Callback called when the user clicks outside the open container.\n *\n * @param {object} event The event source of the callback.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * @ignore\n */\n onFocus?: React.FocusEventHandler<any>;\n /**\n * @ignore\n */\n onBlur?: React.FocusEventHandler<any>;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n /**\n * Extra props passed to the dropdown.\n */\n baseDropdownProps?: Partial<HvBaseDropdownProps>;\n /**\n * Extra props passed to the list.\n */\n listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n /** Label for overwrite the default header behavior. */\n select: undefined as string | undefined,\n /** Label used for the All checkbox action. */\n selectAll: \"All\",\n /** Cancel button label. */\n cancelLabel: \"Cancel\",\n /** Apply button label. */\n applyLabel: \"Apply\",\n /** The label used in the middle of the multiSelection count. */\n searchPlaceholder: \"Search\",\n /** The label used in search. */\n multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required = false,\n disabled = false,\n readOnly = false,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n placeholder = \"Select...\",\n\n onChange,\n\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n onCancel,\n onToggle,\n onClickOutside,\n\n onFocus,\n onBlur,\n\n values,\n multiSelect = false,\n showSearch = false,\n expanded,\n defaultExpanded = false,\n notifyChangesOnFirstRender = false,\n labels: labelsProp,\n hasTooltips = false,\n disablePortal = false,\n singleSelectionToggle = true,\n placement,\n variableWidth = false,\n popperProps = {},\n height,\n maxHeight,\n virtualized = false,\n baseDropdownProps = {},\n listProps = {},\n ...others\n } = useDefaultProps(\"HvDropdown\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [isOpen, setIsOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n const [selectionLabel, setSelectionLabel] = useState(\n getSelectionLabel(labels, placeholder, multiSelect, values),\n );\n\n const [internalValues, setInternalValues] = useState(values);\n\n // Hack - Keeping track of internal values for validation purposes since useState is async\n const internalValuesRef = useRef(values);\n\n useEffect(() => {\n setInternalValues(values);\n internalValuesRef.current = values;\n }, [values]);\n\n useEffect(() => {\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, values),\n );\n }, [labels, multiSelect, placeholder, values]);\n\n if (import.meta.env.DEV && virtualized && !height) {\n // eslint-disable-next-line no-console\n console.error(\n \"Dropdown/List in virtualized mode requires a height. Please define it.\",\n );\n }\n\n const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n const {\n ref: refProp,\n dropdownHeaderRef: dropdownHeaderRefProp,\n ...otherBaseDropdownProps\n } = baseDropdownProps;\n const headerForkedRef = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderRef,\n );\n\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n onToggle?.(event, open);\n\n setIsOpen(open);\n\n if (!open) {\n // also run built-in validation when closing without changes\n // as the user \"touched\" the input\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required) {\n const hasSelection =\n getSelected(internalValuesRef.current).length > 0;\n\n if (!hasSelection) {\n return \"invalid\";\n }\n }\n\n return \"valid\";\n });\n }\n };\n\n /** Applies the selected values to the state */\n const handleSelection: HvDropdownListProps[\"onChange\"] = (\n listValues,\n commitChanges,\n toggle,\n notifyChanges = true,\n ) => {\n const selected = getSelected(listValues);\n\n if (commitChanges) {\n setInternalValues(listValues);\n internalValuesRef.current = listValues;\n\n setSelectionLabel(\n getSelectionLabel(labels, placeholder, multiSelect, listValues),\n );\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && selected.length === 0) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n }\n if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n if (toggle) {\n handleToggle(undefined as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n }\n };\n\n /**\n * Handles the `Cancel` action. Both single and ranged modes are handled here.\n */\n const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n onCancel?.(evt as any);\n\n handleToggle(evt as any, false);\n\n // focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n dropdownHeaderRef.current?.focus({ preventScroll: true });\n };\n\n const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n onClickOutside?.(evt);\n onCancel?.(evt);\n };\n\n const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n containerRef,\n ) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n return;\n }\n const listItems =\n containerRef != null\n ? [...containerRef.getElementsByTagName(\"li\")]\n : [];\n listItems.every((listItem) => {\n if (listItem.tabIndex >= 0) {\n listItem.focus();\n return false;\n }\n return true;\n });\n };\n\n const buildHeaderLabel = () => {\n const hasSelection = getSelected(internalValues).length > 0;\n return labels?.select || !multiSelect ? (\n <HvTypography\n component=\"div\"\n variant=\"body\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n [classes.placeholderClosed]: !(isOpen || hasSelection),\n })}\n >\n {selectionLabel.selected}\n </HvTypography>\n ) : (\n <HvTypography\n component=\"div\"\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n <b>{selectionLabel.selected}</b>\n {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n </HvTypography>\n );\n };\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n status={validationState}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n },\n className,\n )}\n {...others}\n >\n {(hasLabel || hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n ref={dropdownForkedRef}\n id={setId(id, \"dropdown\")}\n classes={{\n root: cx(classes.dropdown, {\n [classes.readOnly]: readOnly,\n }),\n arrow: classes.arrow,\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n headerOpen: classes.dropdownHeaderOpen,\n }}\n expanded={isOpen}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n disablePortal={disablePortal}\n placement={placement}\n popperProps={popperProps}\n placeholder={buildHeaderLabel()}\n onToggle={handleToggle}\n onClickOutside={handleClickOutside}\n onContainerCreation={setFocusToContent}\n role=\"combobox\"\n variableWidth={variableWidth}\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() || undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n onFocus={onFocus}\n onBlur={onBlur}\n dropdownHeaderRef={headerForkedRef}\n {...otherBaseDropdownProps}\n >\n <HvDropdownList\n id={setId(elementId, \"values\")}\n classes={{\n rootList: classes.rootList,\n dropdownListContainer: classes.dropdownListContainer,\n }}\n values={internalValues}\n multiSelect={multiSelect}\n showSearch={showSearch}\n onChange={handleSelection}\n onCancel={handleCancel}\n labels={labels}\n notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n hasTooltips={hasTooltips}\n singleSelectionToggle={singleSelectionToggle}\n aria-label={ariaLabel}\n aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n height={height}\n maxHeight={maxHeight}\n virtualized={virtualized}\n {...listProps}\n />\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":[],"mappings":"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"}
@@ -49,8 +49,7 @@ const HvDropdownList = (props) => {
49
49
  selectionConjunction: labels?.multiSelectionConjunction
50
50
  };
51
51
  const updateSelectAll = (listValues) => {
52
- if (!listValues)
53
- return;
52
+ if (!listValues) return;
54
53
  const nbrSelected = getSelected(listValues).length;
55
54
  const hasSelection = nbrSelected > 0;
56
55
  const allSelect = nbrSelected === listValues.length;
@@ -58,8 +57,7 @@ const HvDropdownList = (props) => {
58
57
  setAllSelected(hasSelection && allSelect);
59
58
  };
60
59
  useEffect(() => {
61
- if (!valuesExist(values))
62
- return;
60
+ if (!valuesExist(values)) return;
63
61
  setList(clone(values));
64
62
  updateSelectAll(values);
65
63
  if (notifyChangesOnFirstRender) {
@@ -1 +1 @@
1
- {"version":3,"file":"List.js","sources":["../../../../src/Dropdown/List/List.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { useBaseDropdownContext } from \"../../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\nimport { HvButton } from \"../../Button\";\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps, HvListValue } from \"../../List\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport type { HvDropdownLabels } from \"../Dropdown\";\nimport { getSelected } from \"../utils\";\nimport { staticClasses, useClasses } from \"./List.styles\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvDropdownListClasses;\n /**\n * The list to be rendered.\n */\n values?: HvListValue[];\n /**\n * If true renders a multi select list.\n */\n multiSelect?: boolean;\n /**\n * If true renders the search component.\n */\n showSearch?: boolean;\n /**\n * A function to be executed whenever a item is selected in the list\n * or the Apply button is activated (when `multiSelect` is `true`).\n */\n onChange: (\n /** An array containing the selected values */\n listValues: HvListValue[],\n /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n commitChanges: boolean,\n /** If `true` the dropdown should toggle it's current state */\n toggle: boolean,\n /** If `true` the dropdown will call onChange */\n notifyChanges: boolean,\n ) => void;\n /**\n * A function to be executed whenever the Cancel button is activated.\n */\n onCancel: (event: React.MouseEvent) => void;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabels;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n values != null && values?.length > 0;\n\n/** Filter selected ordered element `id`s (or `label`) */\nconst getSelectedIds = (list: HvListValue[]) =>\n getSelected(list).map((item) => item.id || item.label);\n\nexport const HvDropdownList = (props: HvDropdownListProps) => {\n const {\n id,\n classes: classesProp,\n values = [],\n multiSelect = false,\n showSearch = false,\n onChange,\n onCancel,\n labels,\n notifyChangesOnFirstRender = false,\n hasTooltips = false,\n singleSelectionToggle,\n height: dropdownHeight,\n maxHeight,\n virtualized = false,\n ...others\n } = useDefaultProps(\"HvDropdownList\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const [searchStr, setSearchStr] = useState<string>(\"\");\n const [list, setList] = useState<HvListValue[]>(clone(values));\n const [allSelected, setAllSelected] = useState<boolean>(false);\n const [anySelected, setAnySelected] = useState<boolean>(false);\n const { width, height } = useBaseDropdownContext();\n\n const hasChanges = useMemo(() => {\n return String(getSelectedIds(values)) !== String(getSelectedIds(list));\n }, [list, values]);\n\n const newLabels = {\n selectAll: labels?.selectAll,\n selectionConjunction: labels?.multiSelectionConjunction,\n };\n\n /**\n * Update states associated with select all.\n */\n const updateSelectAll = (listValues: HvListValue[]) => {\n if (!listValues) return;\n const nbrSelected = getSelected(listValues).length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === listValues.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n };\n\n /**\n * After the first render, call onChange if notifyChangesOnFirstRender.\n */\n useEffect(() => {\n if (!valuesExist(values)) return;\n setList(clone(values));\n updateSelectAll(values);\n if (notifyChangesOnFirstRender) {\n onChange?.(values, false, false, true);\n }\n }, [values, notifyChangesOnFirstRender, onChange]);\n\n /**\n * Sets the filtered values to the state.\n *\n * @param {String} str - The value that is being looked.\n */\n const handleSearch = (str: string) => {\n const results = list\n ? list.filter(\n ({\n searchValue,\n label,\n value,\n }: {\n searchValue?: any;\n label?: any;\n value?: any;\n }) => {\n let stringValue = \"\";\n if (\n typeof searchValue === \"string\" ||\n searchValue instanceof String\n ) {\n stringValue = searchValue.toLowerCase();\n } else if (typeof label === \"string\" || label instanceof String) {\n stringValue = label.toLowerCase();\n } else if (typeof value === \"string\" || value instanceof String) {\n stringValue = value.toLowerCase();\n }\n\n return stringValue.indexOf(str.toLowerCase()) >= 0;\n },\n )\n : null;\n\n if (results != null) {\n const newList = list.map((elem) => {\n const isResult = results.find((result) => result.label === elem.label);\n return { ...elem, isHidden: !isResult };\n });\n\n setList(newList);\n setSearchStr(str);\n }\n return str;\n };\n\n /**\n * Create search element.\n *\n * @returns {*}\n */\n const renderSearch = () => (\n <div className={classes.searchContainer}>\n <HvInput\n id={setId(id, \"search\")}\n type=\"search\"\n value={searchStr}\n placeholder={labels?.searchPlaceholder}\n aria-label={labels?.searchPlaceholder}\n onChange={(event, str) => handleSearch(str)}\n />\n </div>\n );\n\n /**\n * Select all the values inside the dropdown.\n *\n */\n const handleSelectAll = () => {\n const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n setList(newList);\n updateSelectAll(newList);\n };\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const renderSelectAll = () => {\n const selectAll = labels?.selectAll;\n const multiSelectionConjunction = labels?.multiSelectionConjunction;\n const nbrSelected = getSelected(list).length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${list.length}`}\n </>\n ) : (\n <>\n <b>{selectAll}</b>\n {` (${list.length})`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select-all\")}\n label={defaultLabel}\n onChange={() => handleSelectAll()}\n classes={{\n container: classes.selection,\n }}\n className={classes.selectAll}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n </div>\n );\n };\n\n /**\n * When selecting the state list is updated with the corresponding selection.\n *\n * @param listValues - elements selected.\n */\n const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n if (!multiSelect) {\n onChange(cleanHidden(listValues), true, true, true);\n } else {\n updateSelectAll(listValues);\n setList(clone(listValues));\n }\n };\n\n /**\n * Render action buttons.\n */\n const renderActions = () => {\n const applyLabel = labels?.applyLabel;\n const cancelLabel = labels?.cancelLabel;\n return (\n <HvActionBar id={setId(id, \"actions\")}>\n <HvButton\n id={setId(id, \"actions-apply\")}\n disabled={!hasChanges}\n onClick={() => onChange(cleanHidden(list), true, true, true)}\n variant=\"primaryGhost\"\n >\n {applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"actions-cancel\")}\n onClick={onCancel}\n variant=\"primaryGhost\"\n >\n {cancelLabel}\n </HvButton>\n </HvActionBar>\n );\n };\n\n const showList = valuesExist(values);\n\n return (\n <div className={classes.rootList}>\n <div className={classes.listBorderDown} />\n <div className={classes.listContainer}>\n {showSearch && renderSearch()}\n {showList && multiSelect && renderSelectAll()}\n {showList && (\n <HvList\n id={setId(id, \"list\")}\n classes={{\n root: cx(\n classes.dropdownListContainer,\n css({\n maxWidth: width,\n maxHeight:\n maxHeight ??\n `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n overflow: \"auto\",\n padding: 4,\n margin: -4,\n }),\n dropdownHeight &&\n css({\n height: dropdownHeight,\n }),\n virtualized &&\n css({\n maxWidth: \"inherit\",\n maxHeight: \"inherit\",\n overflow: \"inherit\",\n padding: 0,\n }),\n ),\n }}\n values={list}\n multiSelect={multiSelect}\n useSelector={multiSelect}\n showSelectAll={false}\n onChange={onSelection}\n labels={newLabels}\n hasTooltips={hasTooltips}\n selectable\n condensed\n singleSelectionToggle={singleSelectionToggle}\n height={dropdownHeight}\n virtualized={virtualized}\n {...others}\n />\n )}\n </div>\n {showList && multiSelect ? renderActions() : null}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"List.js","sources":["../../../../src/Dropdown/List/List.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { useBaseDropdownContext } from \"../../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\nimport { HvButton } from \"../../Button\";\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps, HvListValue } from \"../../List\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport type { HvDropdownLabels } from \"../Dropdown\";\nimport { getSelected } from \"../utils\";\nimport { staticClasses, useClasses } from \"./List.styles\";\n\nexport { staticClasses as dropdownListClasses };\n\nexport type HvDropdownListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownListProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvDropdownListClasses;\n /**\n * The list to be rendered.\n */\n values?: HvListValue[];\n /**\n * If true renders a multi select list.\n */\n multiSelect?: boolean;\n /**\n * If true renders the search component.\n */\n showSearch?: boolean;\n /**\n * A function to be executed whenever a item is selected in the list\n * or the Apply button is activated (when `multiSelect` is `true`).\n */\n onChange: (\n /** An array containing the selected values */\n listValues: HvListValue[],\n /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */\n commitChanges: boolean,\n /** If `true` the dropdown should toggle it's current state */\n toggle: boolean,\n /** If `true` the dropdown will call onChange */\n notifyChanges: boolean,\n ) => void;\n /**\n * A function to be executed whenever the Cancel button is activated.\n */\n onCancel: (event: React.MouseEvent) => void;\n /**\n * An object containing all the labels for the dropdown.\n */\n labels?: HvDropdownLabels;\n /**\n * If 'true' the dropdown will notify on the first render.\n */\n notifyChangesOnFirstRender?: boolean;\n /**\n * If `true` the dropdown will show tooltips when user mouseenter text in list\n */\n hasTooltips?: boolean;\n /**\n * If `true`, selection can be toggled when single selection.\n */\n singleSelectionToggle?: boolean;\n /**\n * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n */\n height?: number;\n /**\n * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class.\n */\n maxHeight?: number;\n /**\n * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n */\n virtualized?: boolean;\n}\n\n/**\n * The values property was being deeply cloned. That created a significant performance\n * hit when the values contained complex properties' values, like React Nodes.\n *\n * For minimizing the impact of removing the clone, a shallow clone of the array and its\n * objects is performed instead. That should have the same effect in the majority of the\n * cases, where the properties' values are primitive.\n */\nconst clone = (values: HvListValue[]) => values.map((value) => ({ ...value }));\n\n/**\n * Set all hidden's to false.\n */\nconst cleanHidden = (lst: HvListValue[]) =>\n lst.map((item) => ({ ...item, isHidden: false }));\n\nconst valuesExist = (values: HvListValue[]) =>\n values != null && values?.length > 0;\n\n/** Filter selected ordered element `id`s (or `label`) */\nconst getSelectedIds = (list: HvListValue[]) =>\n getSelected(list).map((item) => item.id || item.label);\n\nexport const HvDropdownList = (props: HvDropdownListProps) => {\n const {\n id,\n classes: classesProp,\n values = [],\n multiSelect = false,\n showSearch = false,\n onChange,\n onCancel,\n labels,\n notifyChangesOnFirstRender = false,\n hasTooltips = false,\n singleSelectionToggle,\n height: dropdownHeight,\n maxHeight,\n virtualized = false,\n ...others\n } = useDefaultProps(\"HvDropdownList\", props);\n const { classes, cx, css } = useClasses(classesProp);\n\n const [searchStr, setSearchStr] = useState<string>(\"\");\n const [list, setList] = useState<HvListValue[]>(clone(values));\n const [allSelected, setAllSelected] = useState<boolean>(false);\n const [anySelected, setAnySelected] = useState<boolean>(false);\n const { width, height } = useBaseDropdownContext();\n\n const hasChanges = useMemo(() => {\n return String(getSelectedIds(values)) !== String(getSelectedIds(list));\n }, [list, values]);\n\n const newLabels = {\n selectAll: labels?.selectAll,\n selectionConjunction: labels?.multiSelectionConjunction,\n };\n\n /**\n * Update states associated with select all.\n */\n const updateSelectAll = (listValues: HvListValue[]) => {\n if (!listValues) return;\n const nbrSelected = getSelected(listValues).length;\n const hasSelection = nbrSelected > 0;\n const allSelect = nbrSelected === listValues.length;\n\n setAnySelected(hasSelection);\n setAllSelected(hasSelection && allSelect);\n };\n\n /**\n * After the first render, call onChange if notifyChangesOnFirstRender.\n */\n useEffect(() => {\n if (!valuesExist(values)) return;\n setList(clone(values));\n updateSelectAll(values);\n if (notifyChangesOnFirstRender) {\n onChange?.(values, false, false, true);\n }\n }, [values, notifyChangesOnFirstRender, onChange]);\n\n /**\n * Sets the filtered values to the state.\n *\n * @param {String} str - The value that is being looked.\n */\n const handleSearch = (str: string) => {\n const results = list\n ? list.filter(\n ({\n searchValue,\n label,\n value,\n }: {\n searchValue?: any;\n label?: any;\n value?: any;\n }) => {\n let stringValue = \"\";\n if (\n typeof searchValue === \"string\" ||\n searchValue instanceof String\n ) {\n stringValue = searchValue.toLowerCase();\n } else if (typeof label === \"string\" || label instanceof String) {\n stringValue = label.toLowerCase();\n } else if (typeof value === \"string\" || value instanceof String) {\n stringValue = value.toLowerCase();\n }\n\n return stringValue.indexOf(str.toLowerCase()) >= 0;\n },\n )\n : null;\n\n if (results != null) {\n const newList = list.map((elem) => {\n const isResult = results.find((result) => result.label === elem.label);\n return { ...elem, isHidden: !isResult };\n });\n\n setList(newList);\n setSearchStr(str);\n }\n return str;\n };\n\n /**\n * Create search element.\n *\n * @returns {*}\n */\n const renderSearch = () => (\n <div className={classes.searchContainer}>\n <HvInput\n id={setId(id, \"search\")}\n type=\"search\"\n value={searchStr}\n placeholder={labels?.searchPlaceholder}\n aria-label={labels?.searchPlaceholder}\n onChange={(event, str) => handleSearch(str)}\n />\n </div>\n );\n\n /**\n * Select all the values inside the dropdown.\n *\n */\n const handleSelectAll = () => {\n const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));\n setList(newList);\n updateSelectAll(newList);\n };\n\n /**\n * Create selecteAll component.\n *\n * @returns {*}\n */\n const renderSelectAll = () => {\n const selectAll = labels?.selectAll;\n const multiSelectionConjunction = labels?.multiSelectionConjunction;\n const nbrSelected = getSelected(list).length;\n\n const defaultLabel = (\n <HvTypography component=\"span\">\n {nbrSelected > 0 ? (\n <>\n <b>{nbrSelected}</b>\n {` ${multiSelectionConjunction} ${list.length}`}\n </>\n ) : (\n <>\n <b>{selectAll}</b>\n {` (${list.length})`}\n </>\n )}\n </HvTypography>\n );\n\n return (\n <div className={classes.selectAllContainer}>\n <HvCheckBox\n id={setId(id, \"select-all\")}\n label={defaultLabel}\n onChange={() => handleSelectAll()}\n classes={{\n container: classes.selection,\n }}\n className={classes.selectAll}\n indeterminate={anySelected && !allSelected}\n checked={allSelected}\n />\n </div>\n );\n };\n\n /**\n * When selecting the state list is updated with the corresponding selection.\n *\n * @param listValues - elements selected.\n */\n const onSelection: HvListProps[\"onChange\"] = (listValues) => {\n if (!multiSelect) {\n onChange(cleanHidden(listValues), true, true, true);\n } else {\n updateSelectAll(listValues);\n setList(clone(listValues));\n }\n };\n\n /**\n * Render action buttons.\n */\n const renderActions = () => {\n const applyLabel = labels?.applyLabel;\n const cancelLabel = labels?.cancelLabel;\n return (\n <HvActionBar id={setId(id, \"actions\")}>\n <HvButton\n id={setId(id, \"actions-apply\")}\n disabled={!hasChanges}\n onClick={() => onChange(cleanHidden(list), true, true, true)}\n variant=\"primaryGhost\"\n >\n {applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"actions-cancel\")}\n onClick={onCancel}\n variant=\"primaryGhost\"\n >\n {cancelLabel}\n </HvButton>\n </HvActionBar>\n );\n };\n\n const showList = valuesExist(values);\n\n return (\n <div className={classes.rootList}>\n <div className={classes.listBorderDown} />\n <div className={classes.listContainer}>\n {showSearch && renderSearch()}\n {showList && multiSelect && renderSelectAll()}\n {showList && (\n <HvList\n id={setId(id, \"list\")}\n classes={{\n root: cx(\n classes.dropdownListContainer,\n css({\n maxWidth: width,\n maxHeight:\n maxHeight ??\n `calc(${height}px - 32px - ${theme.space.xs} - ${theme.space.sm})`,\n overflow: \"auto\",\n padding: 4,\n margin: -4,\n }),\n dropdownHeight &&\n css({\n height: dropdownHeight,\n }),\n virtualized &&\n css({\n maxWidth: \"inherit\",\n maxHeight: \"inherit\",\n overflow: \"inherit\",\n padding: 0,\n }),\n ),\n }}\n values={list}\n multiSelect={multiSelect}\n useSelector={multiSelect}\n showSelectAll={false}\n onChange={onSelection}\n labels={newLabels}\n hasTooltips={hasTooltips}\n selectable\n condensed\n singleSelectionToggle={singleSelectionToggle}\n height={dropdownHeight}\n virtualized={virtualized}\n {...others}\n />\n )}\n </div>\n {showList && multiSelect ? renderActions() : null}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -2,8 +2,7 @@ const getSelected = (list = []) => list.filter((elem) => elem.selected);
2
2
  const getSelectionLabel = (labels, placeholder, multiSelect, list = []) => {
3
3
  const { select } = labels || {};
4
4
  const selected = getSelected(list);
5
- if (select)
6
- return { selected: select };
5
+ if (select) return { selected: select };
7
6
  if (multiSelect) {
8
7
  return {
9
8
  selected: selected.length,
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sources":["../../../src/Dropdown/utils.tsx"],"sourcesContent":["import { HvListValue } from \"../List\";\nimport type { HvDropdownLabels } from \"./Dropdown\";\n\n/** Filter selected elements. */\nconst getSelected = (list: HvListValue[] = []) =>\n list.filter((elem) => elem.selected);\n\n/** Checks if any element of the list is selected. */\nconst hasSelected = (list: HvListValue[]) => getSelected(list).length > 0;\n\n/** Gets the selection label according to selection. */\nconst getSelectionLabel = (\n labels: HvDropdownLabels | undefined,\n placeholder: string,\n multiSelect: boolean,\n list: HvListValue[] = [],\n) => {\n const { select } = labels || {};\n const selected = getSelected(list);\n\n if (select) return { selected: select };\n\n if (multiSelect) {\n return {\n selected: selected.length,\n total: list.length,\n };\n }\n return { selected: selected.length > 0 ? selected[0].label : placeholder };\n};\n\nexport { getSelectionLabel, getSelected, hasSelected };\n"],"names":[],"mappings":"AAIM,MAAA,cAAc,CAAC,OAAsB,OACzC,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ;AAMrC,MAAM,oBAAoB,CACxB,QACA,aACA,aACA,OAAsB,CAAA,MACnB;AACH,QAAM,EAAE,OAAA,IAAW,UAAU;AACvB,QAAA,WAAW,YAAY,IAAI;AAE7B,MAAA;AAAe,WAAA,EAAE,UAAU;AAE/B,MAAI,aAAa;AACR,WAAA;AAAA,MACL,UAAU,SAAS;AAAA,MACnB,OAAO,KAAK;AAAA,IAAA;AAAA,EAEhB;AACO,SAAA,EAAE,UAAU,SAAS,SAAS,IAAI,SAAS,CAAC,EAAE,QAAQ;AAC/D;"}
1
+ {"version":3,"file":"utils.js","sources":["../../../src/Dropdown/utils.tsx"],"sourcesContent":["import { HvListValue } from \"../List\";\nimport type { HvDropdownLabels } from \"./Dropdown\";\n\n/** Filter selected elements. */\nconst getSelected = (list: HvListValue[] = []) =>\n list.filter((elem) => elem.selected);\n\n/** Checks if any element of the list is selected. */\nconst hasSelected = (list: HvListValue[]) => getSelected(list).length > 0;\n\n/** Gets the selection label according to selection. */\nconst getSelectionLabel = (\n labels: HvDropdownLabels | undefined,\n placeholder: string,\n multiSelect: boolean,\n list: HvListValue[] = [],\n) => {\n const { select } = labels || {};\n const selected = getSelected(list);\n\n if (select) return { selected: select };\n\n if (multiSelect) {\n return {\n selected: selected.length,\n total: list.length,\n };\n }\n return { selected: selected.length > 0 ? selected[0].label : placeholder };\n};\n\nexport { getSelectionLabel, getSelected, hasSelected };\n"],"names":[],"mappings":"AAIM,MAAA,cAAc,CAAC,OAAsB,OACzC,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ;AAMrC,MAAM,oBAAoB,CACxB,QACA,aACA,aACA,OAAsB,CAAA,MACnB;AACH,QAAM,EAAE,OAAA,IAAW,UAAU;AACvB,QAAA,WAAW,YAAY,IAAI;AAEjC,MAAI,OAAQ,QAAO,EAAE,UAAU,OAAO;AAEtC,MAAI,aAAa;AACR,WAAA;AAAA,MACL,UAAU,SAAS;AAAA,MACnB,OAAO,KAAK;AAAA,IAAA;AAAA,EAEhB;AACO,SAAA,EAAE,UAAU,SAAS,SAAS,IAAI,SAAS,CAAC,EAAE,QAAQ;AAC/D;"}
@@ -12,8 +12,7 @@ import { HvLabel } from "../../Forms/Label/Label.js";
12
12
  import { HvInfoMessage } from "../../Forms/InfoMessage/InfoMessage.js";
13
13
  import { HvTypography } from "../../Typography/Typography.js";
14
14
  function validateAccept(file, acceptAttr) {
15
- if (!file || !acceptAttr)
16
- return true;
15
+ if (!file || !acceptAttr) return true;
17
16
  const acceptEntries = acceptAttr.split(",");
18
17
  const fileName = file.name || "";
19
18
  const mimeType = (file.type || "").toLowerCase();
@@ -50,8 +49,7 @@ const HvDropZone = (props) => {
50
49
  setDragState(false);
51
50
  };
52
51
  const handleDragEnter = (event) => {
53
- if (disabled)
54
- return;
52
+ if (disabled) return;
55
53
  event.stopPropagation();
56
54
  event.preventDefault();
57
55
  setDragState(true);
@@ -127,8 +125,7 @@ const HvDropZone = (props) => {
127
125
  onDragLeave: handleDragLeave,
128
126
  onDropCapture: handleDragLeave,
129
127
  onDrop: (event) => {
130
- if (disabled)
131
- return;
128
+ if (disabled) return;
132
129
  const { files } = event.dataTransfer;
133
130
  if (multiple === true || files.length === 1) {
134
131
  event.stopPropagation();
@@ -1 +1 @@
1
- {"version":3,"file":"DropZone.js","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvInfoMessage, HvLabel } from \"../../Forms\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n /**\n * Extensions of the accepted file types\n */\n acceptedFiles?: string;\n /**\n * Dropzone area label.\n */\n dropzone?: string;\n /**\n * Size file warning label.\n */\n sizeWarning?: string;\n /**\n * Size file warning label.\n */\n drag?: string;\n /**\n * Size file warning label.\n */\n selectFiles?: string;\n /**\n * Theming sheet used to style components\n * */\n dropFiles?: string;\n /**\n * Message to display when file size is greater than allowed\n * */\n fileSizeError?: string;\n /**\n * Message to display when file type is greater than allowed\n * */\n fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * Labels to present in FileUploader.\n */\n labels?: HvDropZoneLabels;\n /**\n * Whether the Dropzone should accept multiple files at once.\n */\n multiple?: boolean;\n /**\n * If the input is disabled or not\n */\n disabled?: boolean;\n /**\n * Files extensions accepted for upload.\n */\n accept?: React.InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n /**\n * Max upload size\n * */\n maxFileSize: number;\n /**\n * Function responsible for processing files added to the drop zone.\n */\n onFilesAdded?: HvFilesAddedEvent;\n /**\n * Whether the DropZone should hide labels or not.\n */\n hideLabels?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * A Jss Object used to override or extend the styles applied to the component.\n */\n classes?: HvDropZoneClasses;\n}\n\n// TODO: remove/review in `v6`: delegate to HTML `accept` and/or add custom validation\nfunction validateAccept(file?: File, acceptAttr?: string) {\n if (!file || !acceptAttr) return true;\n\n const acceptEntries = acceptAttr.split(\",\");\n const fileName = file.name || \"\";\n const mimeType = (file.type || \"\").toLowerCase();\n const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\n\n return acceptEntries.some((type) => {\n const validType = type.trim().toLowerCase();\n if (validType.charAt(0) === \".\") {\n return fileName.toLowerCase().endsWith(validType);\n }\n // This is something like a image/* mime type\n if (validType.endsWith(\"/*\")) {\n return baseMimeType === validType.replace(/\\/.*$/, \"\");\n }\n return mimeType === validType;\n });\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n const {\n id: idProp,\n classes: classesProp,\n labels,\n accept,\n maxFileSize,\n inputProps,\n hideLabels,\n multiple = true,\n disabled = false,\n onFilesAdded,\n } = useDefaultProps(\"HvDropZone\", props);\n const id = useUniqueId(idProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [dragState, setDragState] = useState(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const handleDragLeave = () => {\n setDragState(false);\n };\n\n const handleDragEnter: React.DragEventHandler = (event) => {\n if (disabled) return;\n event.stopPropagation();\n event.preventDefault();\n setDragState(true);\n };\n\n const onChangeHandler = (filesList: FileList) => {\n const filesToProcess = Object.values(filesList);\n\n const newFiles = filesToProcess.map((file) => {\n const newFile: HvFileData = new File([file], file.name, {\n type: file.type,\n lastModified: file.lastModified,\n });\n newFile.id = uniqueId(\"uploaded-file-data-\");\n\n const isSizeAllowed = file.size <= maxFileSize;\n const isFileAccepted =\n !accept ||\n accept.includes(file.type?.split(\"/\")[1]) || // TODO: remove in v6\n validateAccept(file, accept);\n\n if (!isFileAccepted) {\n newFile.errorMessage = labels?.fileTypeError;\n newFile.status = \"fail\";\n } else if (!isSizeAllowed) {\n newFile.errorMessage = labels?.fileSizeError;\n newFile.status = \"fail\";\n }\n\n return newFile;\n });\n\n onFilesAdded?.(newFiles);\n };\n\n return (\n <>\n {!hideLabels && (\n <div id={id} className={classes.dropZoneLabelsGroup}>\n <HvLabel\n id={setId(id, \"input-file-label\")}\n htmlFor={setId(id, \"input-file\")}\n label={labels?.dropzone}\n className={classes.dropZoneLabel}\n />\n <HvInfoMessage id={setId(id, \"description\")}>\n {Number.isInteger(maxFileSize) &&\n `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n {labels?.acceptedFiles\n ? labels.acceptedFiles\n : accept && `\\u00A0(${accept?.replaceAll(\",\", \", \")})`}\n </HvInfoMessage>\n </div>\n )}\n <div\n id={setId(id, \"input-file-container\")}\n className={cx(classes.dropZoneContainer, {\n [classes.dragAction]: dragState,\n [classes.dropZoneContainerDisabled]: disabled,\n })}\n >\n <input\n id={setId(id, \"input-file\")}\n className={classes.inputArea}\n type=\"file\"\n multiple={multiple}\n disabled={disabled}\n title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n onClick={() => {\n if (inputRef.current) {\n inputRef.current.value = \"\";\n }\n }}\n onChange={() => {\n if (!disabled && inputRef.current?.files) {\n onChangeHandler(inputRef.current.files);\n }\n }}\n onDragEnter={handleDragEnter}\n onDragOver={handleDragEnter}\n onDragLeave={handleDragLeave}\n onDropCapture={handleDragLeave}\n onDrop={(event) => {\n if (disabled) return;\n\n const { files } = event.dataTransfer;\n if (multiple === true || files.length === 1) {\n event.stopPropagation();\n event.preventDefault();\n onChangeHandler(files);\n }\n }}\n ref={inputRef}\n accept={accept}\n {...inputProps}\n />\n <div className={classes?.dropArea}>\n {dragState ? (\n <div className={classes.dropZoneAreaLabels}>\n <HvTypography className={classes.dragText}>\n {labels?.dropFiles}\n </HvTypography>\n </div>\n ) : (\n <>\n <Doc\n iconSize=\"M\"\n className={classes.dropZoneAreaIcon}\n color={disabled ? \"secondary_60\" : \"secondary\"}\n />\n <div className={classes.dropZoneAreaLabels}>\n <HvTypography className={classes.dragText}>\n {labels?.drag}\n <span\n className={classes.selectFilesText}\n >{`\\xa0${labels?.selectFiles}`}</span>\n </HvTypography>\n </div>\n </>\n )}\n </div>\n </div>\n </>\n );\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DropZone.js","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvInfoMessage, HvLabel } from \"../../Forms\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n /**\n * Extensions of the accepted file types\n */\n acceptedFiles?: string;\n /**\n * Dropzone area label.\n */\n dropzone?: string;\n /**\n * Size file warning label.\n */\n sizeWarning?: string;\n /**\n * Size file warning label.\n */\n drag?: string;\n /**\n * Size file warning label.\n */\n selectFiles?: string;\n /**\n * Theming sheet used to style components\n * */\n dropFiles?: string;\n /**\n * Message to display when file size is greater than allowed\n * */\n fileSizeError?: string;\n /**\n * Message to display when file type is greater than allowed\n * */\n fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * Labels to present in FileUploader.\n */\n labels?: HvDropZoneLabels;\n /**\n * Whether the Dropzone should accept multiple files at once.\n */\n multiple?: boolean;\n /**\n * If the input is disabled or not\n */\n disabled?: boolean;\n /**\n * Files extensions accepted for upload.\n */\n accept?: React.InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n /**\n * Max upload size\n * */\n maxFileSize: number;\n /**\n * Function responsible for processing files added to the drop zone.\n */\n onFilesAdded?: HvFilesAddedEvent;\n /**\n * Whether the DropZone should hide labels or not.\n */\n hideLabels?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * A Jss Object used to override or extend the styles applied to the component.\n */\n classes?: HvDropZoneClasses;\n}\n\n// TODO: remove/review in `v6`: delegate to HTML `accept` and/or add custom validation\nfunction validateAccept(file?: File, acceptAttr?: string) {\n if (!file || !acceptAttr) return true;\n\n const acceptEntries = acceptAttr.split(\",\");\n const fileName = file.name || \"\";\n const mimeType = (file.type || \"\").toLowerCase();\n const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\n\n return acceptEntries.some((type) => {\n const validType = type.trim().toLowerCase();\n if (validType.charAt(0) === \".\") {\n return fileName.toLowerCase().endsWith(validType);\n }\n // This is something like a image/* mime type\n if (validType.endsWith(\"/*\")) {\n return baseMimeType === validType.replace(/\\/.*$/, \"\");\n }\n return mimeType === validType;\n });\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n const {\n id: idProp,\n classes: classesProp,\n labels,\n accept,\n maxFileSize,\n inputProps,\n hideLabels,\n multiple = true,\n disabled = false,\n onFilesAdded,\n } = useDefaultProps(\"HvDropZone\", props);\n const id = useUniqueId(idProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [dragState, setDragState] = useState(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const handleDragLeave = () => {\n setDragState(false);\n };\n\n const handleDragEnter: React.DragEventHandler = (event) => {\n if (disabled) return;\n event.stopPropagation();\n event.preventDefault();\n setDragState(true);\n };\n\n const onChangeHandler = (filesList: FileList) => {\n const filesToProcess = Object.values(filesList);\n\n const newFiles = filesToProcess.map((file) => {\n const newFile: HvFileData = new File([file], file.name, {\n type: file.type,\n lastModified: file.lastModified,\n });\n newFile.id = uniqueId(\"uploaded-file-data-\");\n\n const isSizeAllowed = file.size <= maxFileSize;\n const isFileAccepted =\n !accept ||\n accept.includes(file.type?.split(\"/\")[1]) || // TODO: remove in v6\n validateAccept(file, accept);\n\n if (!isFileAccepted) {\n newFile.errorMessage = labels?.fileTypeError;\n newFile.status = \"fail\";\n } else if (!isSizeAllowed) {\n newFile.errorMessage = labels?.fileSizeError;\n newFile.status = \"fail\";\n }\n\n return newFile;\n });\n\n onFilesAdded?.(newFiles);\n };\n\n return (\n <>\n {!hideLabels && (\n <div id={id} className={classes.dropZoneLabelsGroup}>\n <HvLabel\n id={setId(id, \"input-file-label\")}\n htmlFor={setId(id, \"input-file\")}\n label={labels?.dropzone}\n className={classes.dropZoneLabel}\n />\n <HvInfoMessage id={setId(id, \"description\")}>\n {Number.isInteger(maxFileSize) &&\n `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n {labels?.acceptedFiles\n ? labels.acceptedFiles\n : accept && `\\u00A0(${accept?.replaceAll(\",\", \", \")})`}\n </HvInfoMessage>\n </div>\n )}\n <div\n id={setId(id, \"input-file-container\")}\n className={cx(classes.dropZoneContainer, {\n [classes.dragAction]: dragState,\n [classes.dropZoneContainerDisabled]: disabled,\n })}\n >\n <input\n id={setId(id, \"input-file\")}\n className={classes.inputArea}\n type=\"file\"\n multiple={multiple}\n disabled={disabled}\n title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n onClick={() => {\n if (inputRef.current) {\n inputRef.current.value = \"\";\n }\n }}\n onChange={() => {\n if (!disabled && inputRef.current?.files) {\n onChangeHandler(inputRef.current.files);\n }\n }}\n onDragEnter={handleDragEnter}\n onDragOver={handleDragEnter}\n onDragLeave={handleDragLeave}\n onDropCapture={handleDragLeave}\n onDrop={(event) => {\n if (disabled) return;\n\n const { files } = event.dataTransfer;\n if (multiple === true || files.length === 1) {\n event.stopPropagation();\n event.preventDefault();\n onChangeHandler(files);\n }\n }}\n ref={inputRef}\n accept={accept}\n {...inputProps}\n />\n <div className={classes?.dropArea}>\n {dragState ? (\n <div className={classes.dropZoneAreaLabels}>\n <HvTypography className={classes.dragText}>\n {labels?.dropFiles}\n </HvTypography>\n </div>\n ) : (\n <>\n <Doc\n iconSize=\"M\"\n className={classes.dropZoneAreaIcon}\n color={disabled ? \"secondary_60\" : \"secondary\"}\n />\n <div className={classes.dropZoneAreaLabels}>\n <HvTypography className={classes.dragText}>\n {labels?.drag}\n <span\n className={classes.selectFilesText}\n >{`\\xa0${labels?.selectFiles}`}</span>\n </HvTypography>\n </div>\n </>\n )}\n </div>\n </div>\n </>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -14,8 +14,7 @@ const HvFileList = (props) => {
14
14
  } = useDefaultProps("HvFileList", props);
15
15
  const { classes } = useClasses(classesProp);
16
16
  const hasFiles = list.length > 0;
17
- if (!hasFiles)
18
- return null;
17
+ if (!hasFiles) return null;
19
18
  return /* @__PURE__ */ jsx("ul", { id: setId(id, "list"), className: classes.list, children: list.map((data) => /* @__PURE__ */ jsx(
20
19
  HvFile,
21
20
  {
@@ -1 +1 @@
1
- {"version":3,"file":"FileList.js","sources":["../../../../src/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The files to upload.\n */\n list?: HvFileData[];\n /**\n * Callback fired when file is removed from list.\n */\n onFileRemoved?: HvFileRemovedEvent;\n /**\n * Value of aria-label to apply to remove file button in FileList\n * */\n removeFileButtonLabel?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the component.\n */\n classes?: HvFileListClasses;\n}\n\nexport const HvFileList = (props: HvFileListProps) => {\n const {\n id,\n classes: classesProp,\n list = [],\n removeFileButtonLabel,\n onFileRemoved,\n } = useDefaultProps(\"HvFileList\", props);\n const { classes } = useClasses(classesProp);\n\n const hasFiles = list.length > 0;\n if (!hasFiles) return null;\n\n return (\n <ul id={setId(id, \"list\")} className={classes.list}>\n {list.map((data) => (\n <HvFile\n key={data.id}\n classes={{ root: classes?.listItem }}\n data={data}\n onFileRemoved={onFileRemoved}\n removeFileButtonLabel={removeFileButtonLabel}\n />\n ))}\n </ul>\n );\n};\n"],"names":[],"mappings":";;;;;;AAiCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO,CAAC;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,WAAW,KAAK,SAAS;AAC/B,MAAI,CAAC;AAAiB,WAAA;AAEtB,SACG,oBAAA,MAAA,EAAG,IAAI,MAAM,IAAI,MAAM,GAAG,WAAW,QAAQ,MAC3C,UAAK,KAAA,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,EAAE,MAAM,SAAS,SAAS;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAJK,KAAK;AAAA,EAMb,CAAA,EACH,CAAA;AAEJ;"}
1
+ {"version":3,"file":"FileList.js","sources":["../../../../src/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The files to upload.\n */\n list?: HvFileData[];\n /**\n * Callback fired when file is removed from list.\n */\n onFileRemoved?: HvFileRemovedEvent;\n /**\n * Value of aria-label to apply to remove file button in FileList\n * */\n removeFileButtonLabel?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the component.\n */\n classes?: HvFileListClasses;\n}\n\nexport const HvFileList = (props: HvFileListProps) => {\n const {\n id,\n classes: classesProp,\n list = [],\n removeFileButtonLabel,\n onFileRemoved,\n } = useDefaultProps(\"HvFileList\", props);\n const { classes } = useClasses(classesProp);\n\n const hasFiles = list.length > 0;\n if (!hasFiles) return null;\n\n return (\n <ul id={setId(id, \"list\")} className={classes.list}>\n {list.map((data) => (\n <HvFile\n key={data.id}\n classes={{ root: classes?.listItem }}\n data={data}\n onFileRemoved={onFileRemoved}\n removeFileButtonLabel={removeFileButtonLabel}\n />\n ))}\n </ul>\n );\n};\n"],"names":[],"mappings":";;;;;;AAiCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO,CAAC;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,WAAW,KAAK,SAAS;AAC3B,MAAA,CAAC,SAAiB,QAAA;AAEtB,SACG,oBAAA,MAAA,EAAG,IAAI,MAAM,IAAI,MAAM,GAAG,WAAW,QAAQ,MAC3C,UAAK,KAAA,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,EAAE,MAAM,SAAS,SAAS;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAJK,KAAK;AAAA,EAMb,CAAA,EACH,CAAA;AAEJ;"}
@@ -66,11 +66,9 @@ const HvFilterGroupContent = forwardRef((props, ref) => {
66
66
  onClear?.(event);
67
67
  };
68
68
  const handleToggle = (event, open) => {
69
- if (event === null)
70
- return;
69
+ if (event === null) return;
71
70
  setFilterGroupOpen(open);
72
- if (!open)
73
- onCancelHandler?.(event);
71
+ if (!open) onCancelHandler?.(event);
74
72
  };
75
73
  const Header = useMemo(
76
74
  () => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1 +1 @@
1
- {"version":3,"file":"FilterContent.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../Forms\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { HvFilterGroupHorizontalPlacement, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n extends Omit<HvBaseDropdownProps, \"onChange\"> {\n description?: React.ReactNode;\n status?: HvFormStatus;\n onChange?: (\n event: React.MouseEvent<HTMLButtonElement>,\n value?: HvFilterGroupValue,\n ) => void;\n onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n labels?: HvFilterGroupLabels;\n horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n disablePortal?: boolean;\n escapeWithReference?: boolean;\n height?: string | number;\n leftEmptyElement?: React.ReactNode;\n rightEmptyElement?: React.ReactNode;\n disabled?: boolean;\n classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n HTMLDivElement,\n HvFilterGroupContentProps\n>((props, ref) => {\n const {\n id,\n status,\n disabled = false,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onCancel,\n onClear,\n labels,\n horizontalPlacement = \"right\",\n disablePortal = true,\n escapeWithReference = true,\n height,\n leftEmptyElement,\n rightEmptyElement,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n const { classes } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n const {\n defaultValue,\n filterValues,\n rollbackFilters,\n clearFilters,\n applyFilters,\n applyDisabled,\n } = useContext(HvFilterGroupContext);\n\n const focusTarget = useRef<HTMLDivElement>(null);\n\n const focusOnContainer = () => {\n focusTarget.current?.focus();\n };\n\n const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n applyFilters();\n onChange?.(event, filterValues);\n setFilterGroupOpen(false);\n };\n\n const onCancelHandler = (\n event: React.MouseEvent<HTMLButtonElement> | Event,\n ) => {\n rollbackFilters();\n onCancel?.(event);\n setFilterGroupOpen(false);\n };\n\n const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n clearFilters();\n onClear?.(event);\n };\n\n const handleToggle = (event: Event, open: boolean) => {\n /* \n If evt is null this toggle wasn't triggered by the user.\n instead it was triggered by the baseDropdown useEffect after\n the datepicker changed the expanded value this baseDropdown behavior needs a review\n */\n if (event === null) return;\n setFilterGroupOpen(open);\n if (!open) onCancelHandler?.(event);\n };\n\n const Header = useMemo(\n () => (\n <>\n <Filters />\n <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n </>\n ),\n [labels?.placeholder],\n );\n\n return (\n <HvBaseDropdown\n ref={ref}\n id={setId(id, \"dropdown\")}\n role=\"combobox\"\n classes={{\n root: classes.dropdown,\n panel: classes.panel,\n selection: classes.baseDropdownSelection,\n header: classes.header,\n }}\n disabled={disabled}\n disablePortal={disablePortal}\n variableWidth\n placement={horizontalPlacement}\n expanded={filterGroupOpen}\n onToggle={handleToggle}\n onClickOutside={onCancelHandler}\n onContainerCreation={focusOnContainer}\n placeholder={Header}\n adornment={<HvFilterGroupCounter />}\n popperProps={{\n modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-invalid={status === \"invalid\" ? true : undefined}\n aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n aria-describedby={\n [description && setId(id, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n {...others}\n >\n <div ref={focusTarget} tabIndex={-1} />\n <div className={classes.root} style={{ height }}>\n <HvFilterGroupLeftPanel\n id={id}\n className={classes.leftSidePanel}\n emptyElement={leftEmptyElement}\n />\n <HvFilterGroupRightPanel\n id={id}\n className={classes.rightSidePanel}\n emptyElement={rightEmptyElement}\n labels={labels}\n />\n </div>\n <HvActionBar className={classes.actionBar}>\n <HvButton\n id={setId(id, \"clearFilters-button\")}\n disabled={\n defaultValue\n ? defaultValue?.flat().length === filterValues?.flat().length\n : filterValues?.flat().length === 0\n }\n variant=\"secondaryGhost\"\n onClick={onClearHandler}\n >\n {labels?.clearLabel}\n </HvButton>\n <div aria-hidden=\"true\" className={classes.space}>\n &nbsp;\n </div>\n <HvButton\n id={setId(id, \"apply-button\")}\n disabled={applyDisabled}\n variant={\n activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n }\n onClick={onApplyHandler}\n className={classes.applyButton}\n >\n {labels?.applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"cancel-button\")}\n variant={\n activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n }\n onClick={onCancelHandler}\n >\n {labels?.cancelLabel}\n </HvButton>\n </HvActionBar>\n </HvBaseDropdown>\n );\n});\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"FilterContent.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../Forms\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { HvFilterGroupHorizontalPlacement, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n extends Omit<HvBaseDropdownProps, \"onChange\"> {\n description?: React.ReactNode;\n status?: HvFormStatus;\n onChange?: (\n event: React.MouseEvent<HTMLButtonElement>,\n value?: HvFilterGroupValue,\n ) => void;\n onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n labels?: HvFilterGroupLabels;\n horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n disablePortal?: boolean;\n escapeWithReference?: boolean;\n height?: string | number;\n leftEmptyElement?: React.ReactNode;\n rightEmptyElement?: React.ReactNode;\n disabled?: boolean;\n classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n HTMLDivElement,\n HvFilterGroupContentProps\n>((props, ref) => {\n const {\n id,\n status,\n disabled = false,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n onChange,\n onCancel,\n onClear,\n labels,\n horizontalPlacement = \"right\",\n disablePortal = true,\n escapeWithReference = true,\n height,\n leftEmptyElement,\n rightEmptyElement,\n classes: classesProp,\n ...others\n } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n const { classes } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n const {\n defaultValue,\n filterValues,\n rollbackFilters,\n clearFilters,\n applyFilters,\n applyDisabled,\n } = useContext(HvFilterGroupContext);\n\n const focusTarget = useRef<HTMLDivElement>(null);\n\n const focusOnContainer = () => {\n focusTarget.current?.focus();\n };\n\n const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n applyFilters();\n onChange?.(event, filterValues);\n setFilterGroupOpen(false);\n };\n\n const onCancelHandler = (\n event: React.MouseEvent<HTMLButtonElement> | Event,\n ) => {\n rollbackFilters();\n onCancel?.(event);\n setFilterGroupOpen(false);\n };\n\n const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n clearFilters();\n onClear?.(event);\n };\n\n const handleToggle = (event: Event, open: boolean) => {\n /* \n If evt is null this toggle wasn't triggered by the user.\n instead it was triggered by the baseDropdown useEffect after\n the datepicker changed the expanded value this baseDropdown behavior needs a review\n */\n if (event === null) return;\n setFilterGroupOpen(open);\n if (!open) onCancelHandler?.(event);\n };\n\n const Header = useMemo(\n () => (\n <>\n <Filters />\n <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n </>\n ),\n [labels?.placeholder],\n );\n\n return (\n <HvBaseDropdown\n ref={ref}\n id={setId(id, \"dropdown\")}\n role=\"combobox\"\n classes={{\n root: classes.dropdown,\n panel: classes.panel,\n selection: classes.baseDropdownSelection,\n header: classes.header,\n }}\n disabled={disabled}\n disablePortal={disablePortal}\n variableWidth\n placement={horizontalPlacement}\n expanded={filterGroupOpen}\n onToggle={handleToggle}\n onClickOutside={onCancelHandler}\n onContainerCreation={focusOnContainer}\n placeholder={Header}\n adornment={<HvFilterGroupCounter />}\n popperProps={{\n modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-invalid={status === \"invalid\" ? true : undefined}\n aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n aria-describedby={\n [description && setId(id, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() || undefined\n }\n {...others}\n >\n <div ref={focusTarget} tabIndex={-1} />\n <div className={classes.root} style={{ height }}>\n <HvFilterGroupLeftPanel\n id={id}\n className={classes.leftSidePanel}\n emptyElement={leftEmptyElement}\n />\n <HvFilterGroupRightPanel\n id={id}\n className={classes.rightSidePanel}\n emptyElement={rightEmptyElement}\n labels={labels}\n />\n </div>\n <HvActionBar className={classes.actionBar}>\n <HvButton\n id={setId(id, \"clearFilters-button\")}\n disabled={\n defaultValue\n ? defaultValue?.flat().length === filterValues?.flat().length\n : filterValues?.flat().length === 0\n }\n variant=\"secondaryGhost\"\n onClick={onClearHandler}\n >\n {labels?.clearLabel}\n </HvButton>\n <div aria-hidden=\"true\" className={classes.space}>\n &nbsp;\n </div>\n <HvButton\n id={setId(id, \"apply-button\")}\n disabled={applyDisabled}\n variant={\n activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n }\n onClick={onApplyHandler}\n className={classes.applyButton}\n >\n {labels?.applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"cancel-button\")}\n variant={\n activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n }\n onClick={onCancelHandler}\n >\n {labels?.cancelLabel}\n </HvButton>\n </HvActionBar>\n </HvBaseDropdown>\n );\n});\n"],"names":[],"mappings":"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"}
@@ -33,8 +33,7 @@ const HvFocus = ({
33
33
  return focuses;
34
34
  };
35
35
  const setTabIndex = (el, tabIndex = 0) => {
36
- if (!el)
37
- return;
36
+ if (!el) return;
38
37
  const elChildFocus = getFocusableChildren(el)[0];
39
38
  if (elChildFocus) {
40
39
  el.tabIndex = -1;
@@ -48,8 +47,7 @@ const HvFocus = ({
48
47
  const firstSelected = focuses.find(
49
48
  (focus) => focus.classList.contains(classes.selected || "selected")
50
49
  );
51
- if (!firstSelected)
52
- return;
50
+ if (!firstSelected) return;
53
51
  focuses.forEach((focus) => setTabIndex(focus, -1));
54
52
  setTabIndex(firstSelected, 0);
55
53
  };
@@ -71,8 +69,7 @@ const HvFocus = ({
71
69
  };
72
70
  const config = (el) => {
73
71
  const { tabIndex } = configuration;
74
- if (!el || hasRunConfig)
75
- return;
72
+ if (!el || hasRunConfig) return;
76
73
  if (strategy === "card") {
77
74
  setChildFocus(children);
78
75
  return;
@@ -85,8 +82,7 @@ const HvFocus = ({
85
82
  focusableChildren.forEach((child) => setTabIndex(child, -1));
86
83
  setChildFocus(focusableChildren[0]);
87
84
  }
88
- if (tabIndex != null)
89
- setTabIndex(el, tabIndex);
85
+ if (tabIndex != null) setTabIndex(el, tabIndex);
90
86
  setHasRunConfig(true);
91
87
  };
92
88
  const addFocusClass = (evt) => {
@@ -118,8 +114,7 @@ const HvFocus = ({
118
114
  };
119
115
  const onMouseDown = (evt) => {
120
116
  const hasCard = !!evt.currentTarget?.querySelector(".HvIsCardGridElement");
121
- if (strategy === "grid" && hasCard)
122
- return;
117
+ if (strategy === "grid" && hasCard) return;
123
118
  setFocusTo(evt.currentTarget);
124
119
  setTabIndex(evt.currentTarget, 0);
125
120
  if (!focusOnClick) {
@@ -297,11 +292,9 @@ const HvFocus = ({
297
292
  onVerticalArrangementHandler(evt, focuses, focusesList);
298
293
  };
299
294
  const onKeyUp = (evt) => {
300
- if (isBrowser("firefox"))
301
- evt.preventDefault();
295
+ if (isBrowser("firefox")) evt.preventDefault();
302
296
  };
303
- if (disabled)
304
- return children;
297
+ if (disabled) return children;
305
298
  const focusWrapper = (childrenToWrap) => /* @__PURE__ */ jsxs("div", { className: classes.externalReference, children: [
306
299
  childrenToWrap,
307
300
  showFocus && /* @__PURE__ */ jsx("div", { className: classes.falseFocus })
@@ -1 +1 @@
1
- {"version":3,"file":"Focus.js","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import { cloneElement, useState } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isBrowser } from \"../utils/browser\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { ConditionalWrapper } from \"../utils/ConditionalWrapper\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\n\nexport { staticClasses as focusClasses };\nexport type HvFocusClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n children: React.ReactElement;\n /** Extra configuration for the child element. */\n configuration?: {\n tabIndex?: number;\n };\n /** Indicates that the disabled class should be applied. */\n disabledClass?: boolean;\n /** Whether the focus is selected. */\n selected?: boolean;\n /** Whether the focus is disabled. */\n disabled?: boolean;\n /** The reference to the root element to hold all Focus' context. */\n rootRef?: React.RefObject<HTMLElement>;\n /** Show focus when click element. v */\n focusOnClick?: boolean;\n /** Show focus when click element. v */\n focusDisabled?: boolean;\n /** Focus and navigation strategy to be used. v */\n strategy?: HvFocusStrategies;\n /** Uses an absolute positioned div as a focus. v */\n useFalseFocus?: boolean;\n /** Narrows the results of the focus to only theses class v */\n filterClass?: string;\n /** How much the navigation will skip when using the arrows. v */\n navigationJump?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFocusClasses;\n}\n\nexport const HvFocus = ({\n classes: classesProp,\n children,\n configuration = {},\n disabledClass = false,\n selected = false,\n disabled = false,\n rootRef = undefined,\n focusOnClick = false,\n focusDisabled = true,\n strategy = \"listbox\",\n useFalseFocus = false,\n filterClass,\n navigationJump = 4,\n}: HvFocusProps) => {\n const [showFocus, setShowFocus] = useState<boolean>(false);\n const [childFocus, setChildFocus] = useState<any>();\n const [hasRunConfig, setHasRunConfig] = useState(false);\n const { classes, cx } = useClasses(classesProp);\n\n const getFocuses = () => {\n const focuses = rootRef?.current\n ? Array.from(\n rootRef.current.getElementsByClassName(\n filterClass || staticClasses.root || \"root\",\n ),\n )\n : [];\n return focuses;\n };\n\n const setTabIndex = (el, tabIndex = 0) => {\n if (!el) return;\n const elChildFocus = getFocusableChildren(el)[0];\n if (elChildFocus) {\n el.tabIndex = -1;\n elChildFocus.tabIndex = tabIndex;\n } else {\n el.tabIndex = tabIndex;\n }\n };\n\n const setSelectedTabIndex = () => {\n const focuses = getFocuses();\n const firstSelected = focuses.find((focus) =>\n focus.classList.contains(classes.selected || \"selected\"),\n );\n\n if (!firstSelected) return;\n focuses.forEach((focus) => setTabIndex(focus, -1));\n setTabIndex(firstSelected, 0);\n };\n\n const clearTabSiblings = (el) => {\n getFocuses().forEach((focus) => setTabIndex(focus, -1));\n setTabIndex(el, 0);\n };\n\n const onFocusStrategy = (evt) => {\n if (strategy === \"listbox\") {\n clearTabSiblings(evt.currentTarget);\n }\n };\n\n const onBlurStrategy = () => {\n if (\n strategy === \"listbox\" &&\n rootRef &&\n rootRef.current &&\n !rootRef.current.contains(document.activeElement)\n ) {\n setTimeout(() => {\n setSelectedTabIndex();\n }, 10);\n }\n };\n\n const config = (el) => {\n const { tabIndex } = configuration;\n if (!el || hasRunConfig) return;\n if (strategy === \"card\") {\n setChildFocus(children);\n return;\n }\n\n if (strategy === \"grid\") {\n return;\n }\n\n const focusableChildren = getFocusableChildren(el);\n if (focusableChildren.length) {\n focusableChildren.forEach((child) => setTabIndex(child, -1));\n setChildFocus(focusableChildren[0]);\n }\n\n if (tabIndex != null) setTabIndex(el, tabIndex);\n setHasRunConfig(true);\n };\n\n const addFocusClass = (evt) => {\n if (!useFalseFocus) {\n // evt.currentTarget.classList.add(classes.focused);\n classes.focused\n .split(\" \")\n .forEach((c) => evt.currentTarget.classList.add(c));\n // add global class HvIsFocused as a marker\n // not to be styled directly, only as helper in specific css queries\n evt.currentTarget.classList.add(\"HvIsFocused\");\n classes?.focus\n ?.split(\" \")\n .forEach((c) => evt.currentTarget.classList.add(c));\n }\n };\n\n const removeFocusClass = () => {\n if (!useFalseFocus) {\n getFocuses().forEach((element) => {\n // element.classList.remove(classes.focused);\n classes.focused.split(\" \").forEach((c) => element.classList.remove(c));\n // remove the global class HvIsFocused\n element.classList.remove(\"HvIsFocused\");\n classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n });\n }\n };\n\n const onFocus = (evt) => {\n addFocusClass(evt);\n setShowFocus(true);\n // give focus to child element if any focusable\n\n childFocus?.focus?.();\n onFocusStrategy(evt);\n };\n\n const onBlur = () => {\n setShowFocus(false);\n removeFocusClass();\n onBlurStrategy();\n };\n\n const onMouseDown = (evt) => {\n const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n if (strategy === \"grid\" && hasCard) return;\n\n setFocusTo(evt.currentTarget);\n setTabIndex(evt.currentTarget, 0);\n // remove focus outline unless explicitly enabled\n if (!focusOnClick) {\n // TODO this piece of code works only because onMouseDown is happening after the focus event\n // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n removeFocusClass();\n setShowFocus(false);\n }\n };\n\n const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {\n if (focusesList?.includes(previousFocus)) {\n setTabIndex(previousFocus, -1);\n }\n setTabIndex(nextFocus, 0);\n setFocusTo(nextFocus);\n };\n\n const getEnabledKeys = (currentFocusIndex, jump, listSize) => ({\n right:\n (currentFocusIndex + 1) % jump === 0 ||\n currentFocusIndex + 1 > listSize - 1,\n left: currentFocusIndex % jump === 0,\n up: currentFocusIndex - jump < 0,\n down:\n currentFocusIndex + jump > listSize ||\n currentFocusIndex + jump > listSize - 1,\n });\n\n const onGridKeyDownHandler = (\n evt,\n focuses,\n focusesList,\n currentFocusIndex,\n jump,\n ) => {\n const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n if (\n !isOneOfKeys(evt, [\n \"ArrowUp\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Home\",\n \"End\",\n \"Space\",\n \"Enter\",\n ]) ||\n (childFocusIsInput && isKey(evt, \"Enter\"))\n ) {\n // nothing to do\n return;\n }\n\n // we'll do something with the key so prevent default and stop propagation\n // except for Enter and SpaceBar\n if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n const blockedKeys = getEnabledKeys(\n currentFocusIndex,\n jump,\n focusesList.length,\n );\n\n switch (evt.code) {\n case \"Space\":\n case \"Enter\":\n if (isBrowser(\"firefox\")) {\n evt.target.click();\n } else {\n evt.currentTarget.click();\n }\n break;\n case \"ArrowUp\":\n if (!blockedKeys.up) {\n focusAndUpdateIndex(\n focuses.jump || focuses.last,\n evt.current,\n focusesList,\n );\n }\n break;\n case \"ArrowDown\":\n if (!blockedKeys.down) {\n focusAndUpdateIndex(\n focuses.fall || focuses.first,\n evt.current,\n focusesList,\n );\n }\n break;\n case \"ArrowLeft\":\n if (!blockedKeys.left) {\n focusAndUpdateIndex(\n focuses.previous || focuses.last,\n evt.current,\n focusesList,\n );\n }\n break;\n case \"ArrowRight\":\n if (!blockedKeys.right) {\n focusAndUpdateIndex(\n focuses.next || focuses.first,\n evt.current,\n focusesList,\n );\n }\n break;\n case \"Home\":\n focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n break;\n case \"End\":\n focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n break;\n default:\n }\n };\n\n const onVerticalArrangementHandler = (evt, focuses, focusesList) => {\n const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n if (\n !isOneOfKeys(evt, [\n \"ArrowUp\",\n \"ArrowDown\",\n \"Home\",\n \"End\",\n \"Space\",\n \"Enter\",\n ]) ||\n (childFocusIsInput && isKey(evt, \"Enter\"))\n ) {\n // nothing to do\n return;\n }\n\n // we'll do something with the key so prevent default and stop propagation\n evt.preventDefault();\n evt.stopPropagation();\n\n switch (evt.code) {\n case \"Space\":\n case \"Enter\":\n evt.target.click();\n break;\n case \"ArrowUp\":\n focusAndUpdateIndex(\n focuses.previous || focuses.last,\n evt.current,\n focusesList,\n );\n break;\n case \"ArrowDown\":\n focusAndUpdateIndex(\n focuses.next || focuses.first,\n evt.current,\n focusesList,\n );\n break;\n case \"Home\":\n focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n break;\n case \"End\":\n focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n break;\n default:\n }\n };\n\n const onSingleHandler = (evt) => {\n const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n if (\n !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n (childFocusIsInput && isKey(evt, \"Enter\"))\n ) {\n // nothing to do\n return;\n }\n\n // we'll do something with the key so prevent default and stop propagation\n evt.preventDefault();\n evt.stopPropagation();\n\n evt.currentTarget.click();\n };\n\n const onKeyDown = (evt) => {\n if (rootRef?.current == null) {\n // operating outside of a composite widget\n // nothing to manage, just style and trigger clicks\n onSingleHandler(evt);\n return;\n }\n\n // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n const isDisabledFocusable = strategy === \"menu\";\n const focusesList = getFocuses().filter(\n (el) =>\n isDisabledFocusable ||\n !el.classList.contains(classes?.disabled as string),\n );\n\n const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n const focuses = {\n first: focusesList[0],\n last: focusesList[focusesList.length - 1],\n previous: focusesList[currentFocus - 1],\n next: focusesList[currentFocus + 1],\n fall: focusesList[currentFocus + navigationJump],\n jump: focusesList[currentFocus - navigationJump],\n };\n\n if (strategy === \"grid\") {\n onGridKeyDownHandler(\n evt,\n focuses,\n focusesList,\n currentFocus,\n navigationJump,\n );\n return;\n }\n\n // TODO add property for specifying the composite widget orientation\n // TODO implement handler for horizontal orientation\n onVerticalArrangementHandler(evt, focuses, focusesList);\n };\n\n const onKeyUp = (evt) => {\n if (isBrowser(\"firefox\")) evt.preventDefault();\n };\n\n if (disabled) return children;\n\n const focusWrapper = (childrenToWrap) => (\n <div className={classes.externalReference}>\n {childrenToWrap}\n {showFocus && <div className={classes.falseFocus} />}\n </div>\n );\n\n return (\n <ConditionalWrapper condition={useFalseFocus} wrapper={focusWrapper}>\n {cloneElement(children, {\n className: cx(\n [classes.root, filterClass],\n {\n [classes.selected]: selected,\n [classes.disabled]: disabledClass,\n [classes.focusDisabled]: focusDisabled,\n },\n children.props.className,\n ),\n ref: config,\n onFocus,\n onBlur,\n onMouseDown,\n onKeyDown,\n onKeyUp,\n selected,\n })}\n </ConditionalWrapper>\n );\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Focus.js","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import { cloneElement, useState } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isBrowser } from \"../utils/browser\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { ConditionalWrapper } from \"../utils/ConditionalWrapper\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\n\nexport { staticClasses as focusClasses };\nexport type HvFocusClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n children: React.ReactElement;\n /** Extra configuration for the child element. */\n configuration?: {\n tabIndex?: number;\n };\n /** Indicates that the disabled class should be applied. */\n disabledClass?: boolean;\n /** Whether the focus is selected. */\n selected?: boolean;\n /** Whether the focus is disabled. */\n disabled?: boolean;\n /** The reference to the root element to hold all Focus' context. */\n rootRef?: React.RefObject<HTMLElement>;\n /** Show focus when click element. v */\n focusOnClick?: boolean;\n /** Show focus when click element. v */\n focusDisabled?: boolean;\n /** Focus and navigation strategy to be used. v */\n strategy?: HvFocusStrategies;\n /** Uses an absolute positioned div as a focus. v */\n useFalseFocus?: boolean;\n /** Narrows the results of the focus to only theses class v */\n filterClass?: string;\n /** How much the navigation will skip when using the arrows. v */\n navigationJump?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvFocusClasses;\n}\n\ninterface Focuses {\n first: Element;\n last: Element;\n previous: Element;\n next: Element;\n fall: Element;\n jump: Element;\n}\n\nexport const HvFocus = ({\n classes: classesProp,\n children,\n configuration = {},\n disabledClass = false,\n selected = false,\n disabled = false,\n rootRef = undefined,\n focusOnClick = false,\n focusDisabled = true,\n strategy = \"listbox\",\n useFalseFocus = false,\n filterClass,\n navigationJump = 4,\n}: HvFocusProps) => {\n const [showFocus, setShowFocus] = useState<boolean>(false);\n const [childFocus, setChildFocus] = useState<any>();\n const [hasRunConfig, setHasRunConfig] = useState(false);\n const { classes, cx } = useClasses(classesProp);\n\n const getFocuses = () => {\n const focuses = rootRef?.current\n ? Array.from(\n rootRef.current.getElementsByClassName(\n filterClass || staticClasses.root || \"root\",\n ),\n )\n : [];\n return focuses;\n };\n\n const setTabIndex = (el: any, tabIndex = 0) => {\n if (!el) return;\n const elChildFocus = getFocusableChildren(el)[0];\n if (elChildFocus) {\n el.tabIndex = -1;\n elChildFocus.tabIndex = tabIndex;\n } else {\n el.tabIndex = tabIndex;\n }\n };\n\n const setSelectedTabIndex = () => {\n const focuses = getFocuses();\n const firstSelected = focuses.find((focus) =>\n focus.classList.contains(classes.selected || \"selected\"),\n );\n\n if (!firstSelected) return;\n focuses.forEach((focus) => setTabIndex(focus, -1));\n setTabIndex(firstSelected, 0);\n };\n\n const clearTabSiblings = (el: any) => {\n getFocuses().forEach((focus) => setTabIndex(focus, -1));\n setTabIndex(el, 0);\n };\n\n const onFocusStrategy = (evt: any) => {\n if (strategy === \"listbox\") {\n clearTabSiblings(evt.currentTarget);\n }\n };\n\n const onBlurStrategy = () => {\n if (\n strategy === \"listbox\" &&\n rootRef &&\n rootRef.current &&\n !rootRef.current.contains(document.activeElement)\n ) {\n setTimeout(() => {\n setSelectedTabIndex();\n }, 10);\n }\n };\n\n const config = (el: any) => {\n const { tabIndex } = configuration;\n if (!el || hasRunConfig) return;\n if (strategy === \"card\") {\n setChildFocus(children);\n return;\n }\n\n if (strategy === \"grid\") {\n return;\n }\n\n const focusableChildren = getFocusableChildren(el);\n if (focusableChildren.length) {\n focusableChildren.forEach((child: any) => setTabIndex(child, -1));\n setChildFocus(focusableChildren[0]);\n }\n\n if (tabIndex != null) setTabIndex(el, tabIndex);\n setHasRunConfig(true);\n };\n\n const addFocusClass = (evt: any) => {\n if (!useFalseFocus) {\n // evt.currentTarget.classList.add(classes.focused);\n classes.focused\n .split(\" \")\n .forEach((c) => evt.currentTarget.classList.add(c));\n // add global class HvIsFocused as a marker\n // not to be styled directly, only as helper in specific css queries\n evt.currentTarget.classList.add(\"HvIsFocused\");\n classes?.focus\n ?.split(\" \")\n .forEach((c) => evt.currentTarget.classList.add(c));\n }\n };\n\n const removeFocusClass = () => {\n if (!useFalseFocus) {\n getFocuses().forEach((element) => {\n // element.classList.remove(classes.focused);\n classes.focused.split(\" \").forEach((c) => element.classList.remove(c));\n // remove the global class HvIsFocused\n element.classList.remove(\"HvIsFocused\");\n classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n });\n }\n };\n\n const onFocus = (evt: any) => {\n addFocusClass(evt);\n setShowFocus(true);\n // give focus to child element if any focusable\n\n childFocus?.focus?.();\n onFocusStrategy(evt);\n };\n\n const onBlur = () => {\n setShowFocus(false);\n removeFocusClass();\n onBlurStrategy();\n };\n\n const onMouseDown = (evt: any) => {\n const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n if (strategy === \"grid\" && hasCard) return;\n\n setFocusTo(evt.currentTarget);\n setTabIndex(evt.currentTarget, 0);\n // remove focus outline unless explicitly enabled\n if (!focusOnClick) {\n // TODO this piece of code works only because onMouseDown is happening after the focus event\n // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n removeFocusClass();\n setShowFocus(false);\n }\n };\n\n const focusAndUpdateIndex = (\n nextFocus: Element,\n previousFocus: any,\n focusesList: Element[],\n ) => {\n if (focusesList?.includes(previousFocus)) {\n setTabIndex(previousFocus, -1);\n }\n setTabIndex(nextFocus, 0);\n setFocusTo(nextFocus);\n };\n\n const getEnabledKeys = (\n currentFocusIndex: number,\n jump: number,\n listSize: number,\n ) => ({\n right:\n (currentFocusIndex + 1) % jump === 0 ||\n currentFocusIndex + 1 > listSize - 1,\n left: currentFocusIndex % jump === 0,\n up: currentFocusIndex - jump < 0,\n down:\n currentFocusIndex + jump > listSize ||\n currentFocusIndex + jump > listSize - 1,\n });\n\n const onGridKeyDownHandler = (\n evt: any,\n focuses: Focuses,\n focusesList: Element[],\n currentFocusIndex: number,\n jump: number,\n ) => {\n const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n if (\n !isOneOfKeys(evt, [\n \"ArrowUp\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"Home\",\n \"End\",\n \"Space\",\n \"Enter\",\n ]) ||\n (childFocusIsInput && isKey(evt, \"Enter\"))\n ) {\n // nothing to do\n return;\n }\n\n // we'll do something with the key so prevent default and stop propagation\n // except for Enter and SpaceBar\n if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n const blockedKeys = getEnabledKeys(\n currentFocusIndex,\n jump,\n focusesList.length,\n );\n\n switch (evt.code) {\n case \"Space\":\n case \"Enter\":\n if (isBrowser(\"firefox\")) {\n evt.target.click();\n } else {\n evt.currentTarget.click();\n }\n break;\n case \"ArrowUp\":\n if (!blockedKeys.up) {\n focusAndUpdateIndex(\n focuses.jump || focuses.last,\n evt.current,\n focusesList,\n );\n }\n break;\n case \"ArrowDown\":\n if (!blockedKeys.down) {\n focusAndUpdateIndex(\n focuses.fall || focuses.first,\n evt.current,\n focusesList,\n );\n }\n break;\n case \"ArrowLeft\":\n if (!blockedKeys.left) {\n focusAndUpdateIndex(\n focuses.previous || focuses.last,\n evt.current,\n focusesList,\n );\n }\n break;\n case \"ArrowRight\":\n if (!blockedKeys.right) {\n focusAndUpdateIndex(\n focuses.next || focuses.first,\n evt.current,\n focusesList,\n );\n }\n break;\n case \"Home\":\n focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n break;\n case \"End\":\n focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n break;\n default:\n }\n };\n\n const onVerticalArrangementHandler = (\n evt: any,\n focuses: Focuses,\n focusesList: Element[],\n ) => {\n const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n if (\n !isOneOfKeys(evt, [\n \"ArrowUp\",\n \"ArrowDown\",\n \"Home\",\n \"End\",\n \"Space\",\n \"Enter\",\n ]) ||\n (childFocusIsInput && isKey(evt, \"Enter\"))\n ) {\n // nothing to do\n return;\n }\n\n // we'll do something with the key so prevent default and stop propagation\n evt.preventDefault();\n evt.stopPropagation();\n\n switch (evt.code) {\n case \"Space\":\n case \"Enter\":\n evt.target.click();\n break;\n case \"ArrowUp\":\n focusAndUpdateIndex(\n focuses.previous || focuses.last,\n evt.current,\n focusesList,\n );\n break;\n case \"ArrowDown\":\n focusAndUpdateIndex(\n focuses.next || focuses.first,\n evt.current,\n focusesList,\n );\n break;\n case \"Home\":\n focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n break;\n case \"End\":\n focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n break;\n default:\n }\n };\n\n const onSingleHandler = (evt: any) => {\n const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n if (\n !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n (childFocusIsInput && isKey(evt, \"Enter\"))\n ) {\n // nothing to do\n return;\n }\n\n // we'll do something with the key so prevent default and stop propagation\n evt.preventDefault();\n evt.stopPropagation();\n\n evt.currentTarget.click();\n };\n\n const onKeyDown = (evt: any) => {\n if (rootRef?.current == null) {\n // operating outside of a composite widget\n // nothing to manage, just style and trigger clicks\n onSingleHandler(evt);\n return;\n }\n\n // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n const isDisabledFocusable = strategy === \"menu\";\n const focusesList = getFocuses().filter(\n (el) =>\n isDisabledFocusable ||\n !el.classList.contains(classes?.disabled as string),\n );\n\n const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n const focuses: Focuses = {\n first: focusesList[0],\n last: focusesList[focusesList.length - 1],\n previous: focusesList[currentFocus - 1],\n next: focusesList[currentFocus + 1],\n fall: focusesList[currentFocus + navigationJump],\n jump: focusesList[currentFocus - navigationJump],\n };\n\n if (strategy === \"grid\") {\n onGridKeyDownHandler(\n evt,\n focuses,\n focusesList,\n currentFocus,\n navigationJump,\n );\n return;\n }\n\n // TODO add property for specifying the composite widget orientation\n // TODO implement handler for horizontal orientation\n onVerticalArrangementHandler(evt, focuses, focusesList);\n };\n\n const onKeyUp = (evt: any) => {\n if (isBrowser(\"firefox\")) evt.preventDefault();\n };\n\n if (disabled) return children;\n\n const focusWrapper = (childrenToWrap: React.ReactNode) => (\n <div className={classes.externalReference}>\n {childrenToWrap}\n {showFocus && <div className={classes.falseFocus} />}\n </div>\n );\n\n return (\n <ConditionalWrapper condition={useFalseFocus} wrapper={focusWrapper}>\n {cloneElement(children, {\n className: cx(\n [classes.root, filterClass],\n {\n [classes.selected]: selected,\n [classes.disabled]: disabledClass,\n [classes.focusDisabled]: focusDisabled,\n },\n children.props.className,\n ),\n ref: config,\n onFocus,\n onBlur,\n onMouseDown,\n onKeyDown,\n onKeyUp,\n selected,\n })}\n </ConditionalWrapper>\n );\n};\n"],"names":[],"mappings":"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"}