@hitachivantara/uikit-react-core 5.58.1 → 5.58.3

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 (264) hide show
  1. package/dist/cjs/Accordion/Accordion.cjs +1 -1
  2. package/dist/cjs/Accordion/Accordion.cjs.map +1 -1
  3. package/dist/cjs/AppSwitcher/Action/Action.cjs +1 -1
  4. package/dist/cjs/AppSwitcher/Action/Action.cjs.map +1 -1
  5. package/dist/cjs/Avatar/Avatar.cjs.map +1 -1
  6. package/dist/cjs/Badge/Badge.styles.cjs.map +1 -1
  7. package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs.map +1 -1
  8. package/dist/cjs/BaseDropdown/BaseDropdown.cjs +2 -3
  9. package/dist/cjs/BaseDropdown/BaseDropdown.cjs.map +1 -1
  10. package/dist/cjs/BaseInput/BaseInput.styles.cjs.map +1 -1
  11. package/dist/cjs/BaseInput/validations.cjs.map +1 -1
  12. package/dist/cjs/BaseRadio/BaseRadio.cjs.map +1 -1
  13. package/dist/cjs/BaseSwitch/BaseSwitch.cjs.map +1 -1
  14. package/dist/cjs/BreadCrumb/BreadCrumb.cjs.map +1 -1
  15. package/dist/cjs/BreadCrumb/Page/Page.cjs.map +1 -1
  16. package/dist/cjs/BreadCrumb/utils.cjs.map +1 -1
  17. package/dist/cjs/Calendar/Calendar.cjs.map +1 -1
  18. package/dist/cjs/Calendar/SingleCalendar/CalendarCell.cjs.map +1 -1
  19. package/dist/cjs/Card/Media/Media.cjs.map +1 -1
  20. package/dist/cjs/Carousel/Carousel.cjs.map +1 -1
  21. package/dist/cjs/Carousel/CarouselControls.cjs.map +1 -1
  22. package/dist/cjs/Carousel/CarouselSlide/CarouselSlide.cjs.map +1 -1
  23. package/dist/cjs/Carousel/CarouselThumbnails.cjs.map +1 -1
  24. package/dist/cjs/CheckBox/CheckBox.cjs +1 -1
  25. package/dist/cjs/CheckBox/CheckBox.cjs.map +1 -1
  26. package/dist/cjs/CheckBoxGroup/CheckBoxGroup.cjs +1 -1
  27. package/dist/cjs/CheckBoxGroup/CheckBoxGroup.cjs.map +1 -1
  28. package/dist/cjs/ColorPicker/ColorPicker.cjs +1 -1
  29. package/dist/cjs/ColorPicker/ColorPicker.cjs.map +1 -1
  30. package/dist/cjs/Controls/Controls.cjs.map +1 -1
  31. package/dist/cjs/DatePicker/DatePicker.cjs +1 -1
  32. package/dist/cjs/DatePicker/DatePicker.cjs.map +1 -1
  33. package/dist/cjs/DropDownMenu/DropDownMenu.cjs +1 -1
  34. package/dist/cjs/DropDownMenu/DropDownMenu.cjs.map +1 -1
  35. package/dist/cjs/Dropdown/Dropdown.cjs +1 -1
  36. package/dist/cjs/Dropdown/Dropdown.cjs.map +1 -1
  37. package/dist/cjs/Dropdown/List/List.cjs.map +1 -1
  38. package/dist/cjs/FileUploader/DropZone/DropZone.cjs +1 -1
  39. package/dist/cjs/FileUploader/DropZone/DropZone.cjs.map +1 -1
  40. package/dist/cjs/FileUploader/DropZone/DropZone.styles.cjs.map +1 -1
  41. package/dist/cjs/FileUploader/FileList/FileList.cjs +1 -1
  42. package/dist/cjs/FileUploader/FileList/FileList.cjs.map +1 -1
  43. package/dist/cjs/FilterGroup/FilterGroup.cjs +1 -1
  44. package/dist/cjs/FilterGroup/FilterGroup.cjs.map +1 -1
  45. package/dist/cjs/Focus/Focus.cjs +1 -3
  46. package/dist/cjs/Focus/Focus.cjs.map +1 -1
  47. package/dist/cjs/Forms/Adornment/Adornment.cjs.map +1 -1
  48. package/dist/cjs/Forms/FormElement/FormElement.cjs +1 -1
  49. package/dist/cjs/Forms/FormElement/FormElement.cjs.map +1 -1
  50. package/dist/cjs/Forms/Suggestions/Suggestions.cjs.map +1 -1
  51. package/dist/cjs/Header/Navigation/MenuBar/MenuBar.cjs.map +1 -1
  52. package/dist/cjs/Header/Navigation/MenuItem/MenuItem.cjs.map +1 -1
  53. package/dist/cjs/Header/Navigation/Navigation.cjs.map +1 -1
  54. package/dist/cjs/Header/Navigation/utils/FocusContext.cjs.map +1 -1
  55. package/dist/cjs/InlineEditor/InlineEditor.cjs.map +1 -1
  56. package/dist/cjs/Input/Input.cjs +2 -4
  57. package/dist/cjs/Input/Input.cjs.map +1 -1
  58. package/dist/cjs/ListContainer/ListContainer.cjs +3 -5
  59. package/dist/cjs/ListContainer/ListContainer.cjs.map +1 -1
  60. package/dist/cjs/ListContainer/ListItem/ListItem.cjs +4 -6
  61. package/dist/cjs/ListContainer/ListItem/ListItem.cjs.map +1 -1
  62. package/dist/cjs/MultiButton/MultiButton.cjs +4 -6
  63. package/dist/cjs/MultiButton/MultiButton.cjs.map +1 -1
  64. package/dist/cjs/Pagination/Pagination.cjs.map +1 -1
  65. package/dist/cjs/Pagination/Pagination.styles.cjs.map +1 -1
  66. package/dist/cjs/Pagination/Select.cjs.map +1 -1
  67. package/dist/cjs/Radio/Radio.cjs +1 -1
  68. package/dist/cjs/Radio/Radio.cjs.map +1 -1
  69. package/dist/cjs/RadioGroup/RadioGroup.cjs +1 -1
  70. package/dist/cjs/RadioGroup/RadioGroup.cjs.map +1 -1
  71. package/dist/cjs/ScrollTo/Horizontal/ScrollToHorizontal.cjs +1 -1
  72. package/dist/cjs/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map +1 -1
  73. package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs +1 -1
  74. package/dist/cjs/ScrollTo/Vertical/ScrollToVertical.cjs.map +1 -1
  75. package/dist/cjs/Section/Section.cjs +1 -1
  76. package/dist/cjs/Section/Section.cjs.map +1 -1
  77. package/dist/cjs/Select/Select.cjs.map +1 -1
  78. package/dist/cjs/SelectionList/SelectionList.cjs +5 -7
  79. package/dist/cjs/SelectionList/SelectionList.cjs.map +1 -1
  80. package/dist/cjs/Skeleton/Skeleton.cjs +49 -0
  81. package/dist/cjs/Skeleton/Skeleton.cjs.map +1 -0
  82. package/dist/cjs/Skeleton/Skeleton.styles.cjs +81 -0
  83. package/dist/cjs/Skeleton/Skeleton.styles.cjs.map +1 -0
  84. package/dist/cjs/Slider/Slider.cjs +1 -1
  85. package/dist/cjs/Slider/Slider.cjs.map +1 -1
  86. package/dist/cjs/Slider/Slider.styles.cjs.map +1 -1
  87. package/dist/cjs/Slider/utils.cjs.map +1 -1
  88. package/dist/cjs/Snackbar/Snackbar.cjs.map +1 -1
  89. package/dist/cjs/SnackbarProvider/SnackbarProvider.cjs.map +1 -1
  90. package/dist/cjs/Stack/Stack.cjs +2 -3
  91. package/dist/cjs/Stack/Stack.cjs.map +1 -1
  92. package/dist/cjs/Switch/Switch.cjs +1 -1
  93. package/dist/cjs/Switch/Switch.cjs.map +1 -1
  94. package/dist/cjs/Tab/Tab.styles.cjs.map +1 -1
  95. package/dist/cjs/Table/Table.cjs.map +1 -1
  96. package/dist/cjs/Table/TableBody/TableBody.cjs.map +1 -1
  97. package/dist/cjs/Table/TableCell/TableCell.cjs.map +1 -1
  98. package/dist/cjs/Table/TableCell/TableCell.styles.cjs.map +1 -1
  99. package/dist/cjs/Table/TableHeader/TableHeader.cjs.map +1 -1
  100. package/dist/cjs/Table/hooks/useHeaderGroups.cjs.map +1 -1
  101. package/dist/cjs/Table/hooks/useResizeColumns.cjs.map +1 -1
  102. package/dist/cjs/Table/hooks/useRowExpand.cjs.map +1 -1
  103. package/dist/cjs/Table/hooks/useRowSelection.cjs.map +1 -1
  104. package/dist/cjs/Table/hooks/useSticky.cjs.map +1 -1
  105. package/dist/cjs/Table/hooks/useTableStyles.cjs.map +1 -1
  106. package/dist/cjs/TableSection/TableSection.cjs +1 -1
  107. package/dist/cjs/TableSection/TableSection.cjs.map +1 -1
  108. package/dist/cjs/Tag/Tag.cjs.map +1 -1
  109. package/dist/cjs/Tag/Tag.styles.cjs.map +1 -1
  110. package/dist/cjs/TagsInput/TagsInput.cjs +1 -1
  111. package/dist/cjs/TagsInput/TagsInput.cjs.map +1 -1
  112. package/dist/cjs/TextArea/TextArea.cjs +1 -1
  113. package/dist/cjs/TextArea/TextArea.cjs.map +1 -1
  114. package/dist/cjs/TimePicker/TimePicker.cjs +1 -1
  115. package/dist/cjs/TimePicker/TimePicker.cjs.map +1 -1
  116. package/dist/cjs/Tooltip/Tooltip.cjs.map +1 -1
  117. package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs.map +1 -1
  118. package/dist/cjs/TreeView/TreeItem/TreeItem.cjs.map +1 -1
  119. package/dist/cjs/VerticalNavigation/Actions/Action.cjs.map +1 -1
  120. package/dist/cjs/VerticalNavigation/Header/Header.cjs.map +1 -1
  121. package/dist/cjs/VerticalNavigation/TreeView/TreeView.cjs +1 -1
  122. package/dist/cjs/VerticalNavigation/TreeView/TreeView.cjs.map +1 -1
  123. package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs.map +1 -1
  124. package/dist/cjs/VerticalNavigation/VerticalNavigationContext.cjs.map +1 -1
  125. package/dist/cjs/hooks/useClickOutside.cjs.map +1 -1
  126. package/dist/cjs/hooks/useUniqueId.cjs.map +1 -1
  127. package/dist/cjs/index.cjs +4 -0
  128. package/dist/cjs/index.cjs.map +1 -1
  129. package/dist/cjs/providers/Provider.cjs +2 -1
  130. package/dist/cjs/providers/Provider.cjs.map +1 -1
  131. package/dist/cjs/utils/setId.cjs.map +1 -1
  132. package/dist/esm/Accordion/Accordion.js +1 -1
  133. package/dist/esm/Accordion/Accordion.js.map +1 -1
  134. package/dist/esm/AppSwitcher/Action/Action.js +1 -1
  135. package/dist/esm/AppSwitcher/Action/Action.js.map +1 -1
  136. package/dist/esm/Avatar/Avatar.js.map +1 -1
  137. package/dist/esm/Badge/Badge.styles.js.map +1 -1
  138. package/dist/esm/BaseCheckBox/BaseCheckBox.js.map +1 -1
  139. package/dist/esm/BaseDropdown/BaseDropdown.js +3 -3
  140. package/dist/esm/BaseDropdown/BaseDropdown.js.map +1 -1
  141. package/dist/esm/BaseInput/BaseInput.styles.js.map +1 -1
  142. package/dist/esm/BaseInput/validations.js.map +1 -1
  143. package/dist/esm/BaseRadio/BaseRadio.js.map +1 -1
  144. package/dist/esm/BaseSwitch/BaseSwitch.js.map +1 -1
  145. package/dist/esm/BreadCrumb/BreadCrumb.js.map +1 -1
  146. package/dist/esm/BreadCrumb/Page/Page.js.map +1 -1
  147. package/dist/esm/BreadCrumb/utils.js.map +1 -1
  148. package/dist/esm/Calendar/Calendar.js.map +1 -1
  149. package/dist/esm/Calendar/SingleCalendar/CalendarCell.js.map +1 -1
  150. package/dist/esm/Card/Media/Media.js.map +1 -1
  151. package/dist/esm/Carousel/Carousel.js.map +1 -1
  152. package/dist/esm/Carousel/CarouselControls.js.map +1 -1
  153. package/dist/esm/Carousel/CarouselSlide/CarouselSlide.js.map +1 -1
  154. package/dist/esm/Carousel/CarouselThumbnails.js.map +1 -1
  155. package/dist/esm/CheckBox/CheckBox.js +1 -1
  156. package/dist/esm/CheckBox/CheckBox.js.map +1 -1
  157. package/dist/esm/CheckBoxGroup/CheckBoxGroup.js +1 -1
  158. package/dist/esm/CheckBoxGroup/CheckBoxGroup.js.map +1 -1
  159. package/dist/esm/ColorPicker/ColorPicker.js +1 -1
  160. package/dist/esm/ColorPicker/ColorPicker.js.map +1 -1
  161. package/dist/esm/Controls/Controls.js.map +1 -1
  162. package/dist/esm/DatePicker/DatePicker.js +1 -1
  163. package/dist/esm/DatePicker/DatePicker.js.map +1 -1
  164. package/dist/esm/DropDownMenu/DropDownMenu.js +1 -1
  165. package/dist/esm/DropDownMenu/DropDownMenu.js.map +1 -1
  166. package/dist/esm/Dropdown/Dropdown.js +1 -1
  167. package/dist/esm/Dropdown/Dropdown.js.map +1 -1
  168. package/dist/esm/Dropdown/List/List.js.map +1 -1
  169. package/dist/esm/FileUploader/DropZone/DropZone.js +1 -1
  170. package/dist/esm/FileUploader/DropZone/DropZone.js.map +1 -1
  171. package/dist/esm/FileUploader/DropZone/DropZone.styles.js.map +1 -1
  172. package/dist/esm/FileUploader/FileList/FileList.js +1 -1
  173. package/dist/esm/FileUploader/FileList/FileList.js.map +1 -1
  174. package/dist/esm/FilterGroup/FilterGroup.js +1 -1
  175. package/dist/esm/FilterGroup/FilterGroup.js.map +1 -1
  176. package/dist/esm/Focus/Focus.js +2 -2
  177. package/dist/esm/Focus/Focus.js.map +1 -1
  178. package/dist/esm/Forms/Adornment/Adornment.js.map +1 -1
  179. package/dist/esm/Forms/FormElement/FormElement.js +1 -1
  180. package/dist/esm/Forms/FormElement/FormElement.js.map +1 -1
  181. package/dist/esm/Forms/Suggestions/Suggestions.js.map +1 -1
  182. package/dist/esm/Header/Navigation/MenuBar/MenuBar.js.map +1 -1
  183. package/dist/esm/Header/Navigation/MenuItem/MenuItem.js.map +1 -1
  184. package/dist/esm/Header/Navigation/Navigation.js.map +1 -1
  185. package/dist/esm/Header/Navigation/utils/FocusContext.js.map +1 -1
  186. package/dist/esm/InlineEditor/InlineEditor.js.map +1 -1
  187. package/dist/esm/Input/Input.js +3 -3
  188. package/dist/esm/Input/Input.js.map +1 -1
  189. package/dist/esm/ListContainer/ListContainer.js +4 -4
  190. package/dist/esm/ListContainer/ListContainer.js.map +1 -1
  191. package/dist/esm/ListContainer/ListItem/ListItem.js +5 -5
  192. package/dist/esm/ListContainer/ListItem/ListItem.js.map +1 -1
  193. package/dist/esm/MultiButton/MultiButton.js +5 -5
  194. package/dist/esm/MultiButton/MultiButton.js.map +1 -1
  195. package/dist/esm/Pagination/Pagination.js.map +1 -1
  196. package/dist/esm/Pagination/Pagination.styles.js.map +1 -1
  197. package/dist/esm/Pagination/Select.js.map +1 -1
  198. package/dist/esm/Radio/Radio.js +1 -1
  199. package/dist/esm/Radio/Radio.js.map +1 -1
  200. package/dist/esm/RadioGroup/RadioGroup.js +1 -1
  201. package/dist/esm/RadioGroup/RadioGroup.js.map +1 -1
  202. package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js +1 -1
  203. package/dist/esm/ScrollTo/Horizontal/ScrollToHorizontal.js.map +1 -1
  204. package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js +1 -1
  205. package/dist/esm/ScrollTo/Vertical/ScrollToVertical.js.map +1 -1
  206. package/dist/esm/Section/Section.js +1 -1
  207. package/dist/esm/Section/Section.js.map +1 -1
  208. package/dist/esm/Select/Select.js.map +1 -1
  209. package/dist/esm/SelectionList/SelectionList.js +6 -6
  210. package/dist/esm/SelectionList/SelectionList.js.map +1 -1
  211. package/dist/esm/Skeleton/Skeleton.js +50 -0
  212. package/dist/esm/Skeleton/Skeleton.js.map +1 -0
  213. package/dist/esm/Skeleton/Skeleton.styles.js +81 -0
  214. package/dist/esm/Skeleton/Skeleton.styles.js.map +1 -0
  215. package/dist/esm/Slider/Slider.js +1 -1
  216. package/dist/esm/Slider/Slider.js.map +1 -1
  217. package/dist/esm/Slider/Slider.styles.js.map +1 -1
  218. package/dist/esm/Slider/utils.js.map +1 -1
  219. package/dist/esm/Snackbar/Snackbar.js.map +1 -1
  220. package/dist/esm/SnackbarProvider/SnackbarProvider.js.map +1 -1
  221. package/dist/esm/Stack/Stack.js +3 -3
  222. package/dist/esm/Stack/Stack.js.map +1 -1
  223. package/dist/esm/Switch/Switch.js +1 -1
  224. package/dist/esm/Switch/Switch.js.map +1 -1
  225. package/dist/esm/Tab/Tab.styles.js.map +1 -1
  226. package/dist/esm/Table/Table.js.map +1 -1
  227. package/dist/esm/Table/TableBody/TableBody.js.map +1 -1
  228. package/dist/esm/Table/TableCell/TableCell.js.map +1 -1
  229. package/dist/esm/Table/TableCell/TableCell.styles.js.map +1 -1
  230. package/dist/esm/Table/TableHeader/TableHeader.js.map +1 -1
  231. package/dist/esm/Table/hooks/useHeaderGroups.js.map +1 -1
  232. package/dist/esm/Table/hooks/useResizeColumns.js.map +1 -1
  233. package/dist/esm/Table/hooks/useRowExpand.js.map +1 -1
  234. package/dist/esm/Table/hooks/useRowSelection.js.map +1 -1
  235. package/dist/esm/Table/hooks/useSticky.js.map +1 -1
  236. package/dist/esm/Table/hooks/useTableStyles.js.map +1 -1
  237. package/dist/esm/TableSection/TableSection.js +1 -1
  238. package/dist/esm/TableSection/TableSection.js.map +1 -1
  239. package/dist/esm/Tag/Tag.js.map +1 -1
  240. package/dist/esm/Tag/Tag.styles.js.map +1 -1
  241. package/dist/esm/TagsInput/TagsInput.js +1 -1
  242. package/dist/esm/TagsInput/TagsInput.js.map +1 -1
  243. package/dist/esm/TextArea/TextArea.js +1 -1
  244. package/dist/esm/TextArea/TextArea.js.map +1 -1
  245. package/dist/esm/TimePicker/TimePicker.js +1 -1
  246. package/dist/esm/TimePicker/TimePicker.js.map +1 -1
  247. package/dist/esm/Tooltip/Tooltip.js.map +1 -1
  248. package/dist/esm/TreeView/TreeItem/DefaultContent.js.map +1 -1
  249. package/dist/esm/TreeView/TreeItem/TreeItem.js.map +1 -1
  250. package/dist/esm/VerticalNavigation/Actions/Action.js.map +1 -1
  251. package/dist/esm/VerticalNavigation/Header/Header.js.map +1 -1
  252. package/dist/esm/VerticalNavigation/TreeView/TreeView.js +1 -1
  253. package/dist/esm/VerticalNavigation/TreeView/TreeView.js.map +1 -1
  254. package/dist/esm/VerticalNavigation/VerticalNavigation.js.map +1 -1
  255. package/dist/esm/VerticalNavigation/VerticalNavigationContext.js.map +1 -1
  256. package/dist/esm/hooks/useClickOutside.js.map +1 -1
  257. package/dist/esm/hooks/useUniqueId.js.map +1 -1
  258. package/dist/esm/index.js +4 -0
  259. package/dist/esm/index.js.map +1 -1
  260. package/dist/esm/providers/Provider.js +2 -1
  261. package/dist/esm/providers/Provider.js.map +1 -1
  262. package/dist/esm/utils/setId.js.map +1 -1
  263. package/dist/types/index.d.ts +205 -178
  264. package/package.json +5 -5
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, forwardRef } from \"react\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { decreaseSize } from \"../utils/sizes\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n /** Inline styles to be applied to the root element. */\n style?: CSSProperties;\n /** The component used for the root node. Either a string to use a DOM element or a component. */\n component?: React.ElementType;\n /** Sets one of the standard sizes of the icons */\n size?: HvAvatarSize;\n /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */\n color?: HvColorAny;\n /** A String representing the background color of the avatar. */\n backgroundColor?: HvColorAny;\n /** The `src` attribute for the `img` element. */\n src?: string;\n /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n srcSet?: string;\n /** The `sizes` attribute for the `img` element. */\n sizes?: string;\n /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n alt?: string;\n /**\n * Attributes applied to the `img` element if the component is used to display an image.\n * It can be used to listen for the loading error event.\n */\n imgProps?: HTMLAttributes<HTMLImageElement>;\n /** A string representing the type of avatar to display, circular or square. */\n variant?: HvAvatarVariant;\n /** A string representing the color of the avatar border that represents its status. */\n status?: string;\n /** A string representing the color of the avatar badge. */\n badge?: string;\n /** Attributes applied to the avatar element. */\n avatarProps?: MuiAvatarProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAvatarClasses;\n}\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<any, HvAvatarProps>((props, ref) => {\n const {\n className,\n style,\n classes: classesProp,\n children: childrenProp,\n component = \"div\",\n size = \"sm\",\n backgroundColor = \"secondary\",\n color = \"atmo1\",\n src,\n srcSet,\n sizes,\n alt,\n imgProps,\n status,\n badge,\n variant = \"circular\",\n avatarProps,\n ...others\n } = useDefaultProps(\"HvAvatar\", props);\n const { classes, cx } = useClasses(classesProp);\n\n let children: React.ReactNode;\n\n // Use a hook instead of onError on the img element to support server-side rendering.\n const imageLoaded = useImageLoaded(src, srcSet);\n const hasImg = src || srcSet;\n const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n if (hasImgNotFailing) {\n children = (\n <img\n alt={alt}\n src={src}\n srcSet={srcSet}\n sizes={sizes}\n className={classes.img}\n {...imgProps}\n />\n );\n } else if (childrenProp != null) {\n children = childrenProp;\n } else if (hasImg && alt) {\n [children] = alt;\n } else {\n children = (\n <User\n color={color}\n iconSize={decreaseSize(size)}\n className={classes.fallback}\n />\n );\n }\n\n const inlineStyle: CSSProperties = {\n ...style,\n };\n\n if (component != null && typeof component !== \"string\") {\n // override border-radius with custom components\n inlineStyle.borderRadius = \"50%\";\n }\n\n if (!hasImgNotFailing) {\n inlineStyle.backgroundColor = getColor(\n backgroundColor,\n theme.colors.secondary\n );\n inlineStyle.color = getColor(color, theme.colors.atmo1);\n }\n\n const statusInlineStyle: CSSProperties = {};\n if (status) {\n // set the status border. we're using the boxShadow property to set the border\n // to be inside the container and not on its edge.\n const statusColor = getColor(status, theme.colors.positive);\n statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n }\n\n const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n return (\n <div ref={ref} className={classes.container} {...others}>\n <div\n className={cx(classes.status, classes[variant], classes[size])}\n style={statusInlineStyle}\n >\n {badge && (\n <div\n className={classes.badge}\n style={{ backgroundColor: badgeColor }}\n />\n )}\n <MuiAvatar\n component={component}\n // Consider not using the root and className classes in this component\n className={cx(classes.root, classes.avatar, classes[size], className)}\n style={inlineStyle}\n variant={variant}\n size={size}\n {...avatarProps}\n >\n {children}\n </MuiAvatar>\n </div>\n </div>\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;AAgEO,MAAM,WAAW,WAA+B,CAAC,OAAO,QAAQ;AAC/D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE1C,MAAA;AAGE,QAAA,cAAc,eAAe,KAAK,MAAM;AAC9C,QAAM,SAAS,OAAO;AAChB,QAAA,mBAAmB,UAAU,gBAAgB;AAEnD,MAAI,kBAAkB;AAElB,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QAClB,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,WAEO,gBAAgB,MAAM;AACpB,eAAA;AAAA,EAAA,WACF,UAAU,KAAK;AACxB,KAAC,QAAQ,IAAI;AAAA,EAAA,OACR;AAEH,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU,aAAa,IAAI;AAAA,QAC3B,WAAW,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzB;AAEA,QAAM,cAA6B;AAAA,IACjC,GAAG;AAAA,EAAA;AAGL,MAAI,aAAa,QAAQ,OAAO,cAAc,UAAU;AAEtD,gBAAY,eAAe;AAAA,EAC7B;AAEA,MAAI,CAAC,kBAAkB;AACrB,gBAAY,kBAAkB;AAAA,MAC5B;AAAA,MACA,MAAM,OAAO;AAAA,IAAA;AAEf,gBAAY,QAAQ,SAAS,OAAO,MAAM,OAAO,KAAK;AAAA,EACxD;AAEA,QAAM,oBAAmC,CAAA;AACzC,MAAI,QAAQ;AAGV,UAAM,cAAc,SAAS,QAAQ,MAAM,OAAO,QAAQ;AACxC,sBAAA,YAAY,yBAAyB,WAAW;AAAA,EACpE;AAEA,QAAM,aAAa,SAAS,SAAS,IAAI,MAAM,OAAO,QAAQ;AAE9D,6BACG,OAAI,EAAA,KAAU,WAAW,QAAQ,WAAY,GAAG,QAC/C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,OAAO,GAAG,QAAQ,IAAI,CAAC;AAAA,MAC7D,OAAO;AAAA,MAEN,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,OAAO,EAAE,iBAAiB,WAAW;AAAA,UAAA;AAAA,QACvC;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YAEA,WAAW,GAAG,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS;AAAA,YACpE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
1
+ {"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { decreaseSize } from \"../utils/sizes\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n /** The component used for the root node. Either a string to use a DOM element or a component. */\n component?: React.ElementType;\n /** Sets one of the standard sizes of the icons */\n size?: HvAvatarSize;\n /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */\n color?: HvColorAny;\n /** A String representing the background color of the avatar. */\n backgroundColor?: HvColorAny;\n /** The `src` attribute for the `img` element. */\n src?: string;\n /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n srcSet?: string;\n /** The `sizes` attribute for the `img` element. */\n sizes?: string;\n /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n alt?: string;\n /**\n * Attributes applied to the `img` element if the component is used to display an image.\n * It can be used to listen for the loading error event.\n */\n imgProps?: React.HTMLAttributes<HTMLImageElement>;\n /** A string representing the type of avatar to display, circular or square. */\n variant?: HvAvatarVariant;\n /** A string representing the color of the avatar border that represents its status. */\n status?: string;\n /** A string representing the color of the avatar badge. */\n badge?: string;\n /** Attributes applied to the avatar element. */\n avatarProps?: MuiAvatarProps;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvAvatarClasses;\n}\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<any, HvAvatarProps>((props, ref) => {\n const {\n className,\n style,\n classes: classesProp,\n children: childrenProp,\n component = \"div\",\n size = \"sm\",\n backgroundColor = \"secondary\",\n color = \"atmo1\",\n src,\n srcSet,\n sizes,\n alt,\n imgProps,\n status,\n badge,\n variant = \"circular\",\n avatarProps,\n ...others\n } = useDefaultProps(\"HvAvatar\", props);\n const { classes, cx } = useClasses(classesProp);\n\n let children: React.ReactNode;\n\n // Use a hook instead of onError on the img element to support server-side rendering.\n const imageLoaded = useImageLoaded(src, srcSet);\n const hasImg = src || srcSet;\n const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n if (hasImgNotFailing) {\n children = (\n <img\n alt={alt}\n src={src}\n srcSet={srcSet}\n sizes={sizes}\n className={classes.img}\n {...imgProps}\n />\n );\n } else if (childrenProp != null) {\n children = childrenProp;\n } else if (hasImg && alt) {\n [children] = alt;\n } else {\n children = (\n <User\n color={color}\n iconSize={decreaseSize(size)}\n className={classes.fallback}\n />\n );\n }\n\n const inlineStyle: React.CSSProperties = {\n ...style,\n };\n\n if (component != null && typeof component !== \"string\") {\n // override border-radius with custom components\n inlineStyle.borderRadius = \"50%\";\n }\n\n if (!hasImgNotFailing) {\n inlineStyle.backgroundColor = getColor(\n backgroundColor,\n theme.colors.secondary\n );\n inlineStyle.color = getColor(color, theme.colors.atmo1);\n }\n\n const statusInlineStyle: React.CSSProperties = {};\n if (status) {\n // set the status border. we're using the boxShadow property to set the border\n // to be inside the container and not on its edge.\n const statusColor = getColor(status, theme.colors.positive);\n statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n }\n\n const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n return (\n <div ref={ref} className={classes.container} {...others}>\n <div\n className={cx(classes.status, classes[variant], classes[size])}\n style={statusInlineStyle}\n >\n {badge && (\n <div\n className={classes.badge}\n style={{ backgroundColor: badgeColor }}\n />\n )}\n <MuiAvatar\n component={component}\n // Consider not using the root and className classes in this component\n className={cx(classes.root, classes.avatar, classes[size], className)}\n style={inlineStyle}\n variant={variant}\n size={size}\n {...avatarProps}\n >\n {children}\n </MuiAvatar>\n </div>\n </div>\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;AA8DO,MAAM,WAAW,WAA+B,CAAC,OAAO,QAAQ;AAC/D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE1C,MAAA;AAGE,QAAA,cAAc,eAAe,KAAK,MAAM;AAC9C,QAAM,SAAS,OAAO;AAChB,QAAA,mBAAmB,UAAU,gBAAgB;AAEnD,MAAI,kBAAkB;AAElB,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QAClB,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,WAEO,gBAAgB,MAAM;AACpB,eAAA;AAAA,EAAA,WACF,UAAU,KAAK;AACxB,KAAC,QAAQ,IAAI;AAAA,EAAA,OACR;AAEH,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU,aAAa,IAAI;AAAA,QAC3B,WAAW,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzB;AAEA,QAAM,cAAmC;AAAA,IACvC,GAAG;AAAA,EAAA;AAGL,MAAI,aAAa,QAAQ,OAAO,cAAc,UAAU;AAEtD,gBAAY,eAAe;AAAA,EAC7B;AAEA,MAAI,CAAC,kBAAkB;AACrB,gBAAY,kBAAkB;AAAA,MAC5B;AAAA,MACA,MAAM,OAAO;AAAA,IAAA;AAEf,gBAAY,QAAQ,SAAS,OAAO,MAAM,OAAO,KAAK;AAAA,EACxD;AAEA,QAAM,oBAAyC,CAAA;AAC/C,MAAI,QAAQ;AAGV,UAAM,cAAc,SAAS,QAAQ,MAAM,OAAO,QAAQ;AACxC,sBAAA,YAAY,yBAAyB,WAAW;AAAA,EACpE;AAEA,QAAM,aAAa,SAAS,SAAS,IAAI,MAAM,OAAO,QAAQ;AAE9D,6BACG,OAAI,EAAA,KAAU,WAAW,QAAQ,WAAY,GAAG,QAC/C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,OAAO,GAAG,QAAQ,IAAI,CAAC;AAAA,MAC7D,OAAO;AAAA,MAEN,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,OAAO,EAAE,iBAAiB,WAAW;AAAA,UAAA;AAAA,QACvC;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YAEA,WAAW,GAAG,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS;AAAA,YACpE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.styles.js","sources":["../../../src/Badge/Badge.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nconst labelBaseStyle: CSSProperties = {\n ...theme.typography.label,\n padding: \"0 5px\",\n color: theme.colors.atmo1,\n lineHeight: \"16px\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBadge\", {\n root: { position: \"relative\", \"&>*\": { float: \"left\" } },\n badgeContainer: { width: 0 },\n badgePosition: {},\n badge: {\n borderRadius: theme.space.xs,\n backgroundColor: theme.colors.secondary,\n float: \"left\",\n minHeight: \"8px\",\n minWidth: \"8px\",\n },\n showCount: { ...labelBaseStyle, wordBreak: \"keep-all\" },\n showLabel: { ...labelBaseStyle, wordBreak: \"keep-all\" },\n badgeIcon: { position: \"relative\", top: \"1px\", left: \"-7px\" },\n badgeOneDigit: { padding: 0, width: \"16px\", textAlign: \"center\" },\n});\n"],"names":[],"mappings":";;AAMA,MAAM,iBAAgC;AAAA,EACpC,GAAG,MAAM,WAAW;AAAA,EACpB,SAAS;AAAA,EACT,OAAO,MAAM,OAAO;AAAA,EACpB,YAAY;AACd;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,UAAU,YAAY,OAAO,EAAE,OAAO,SAAS;AAAA,EACvD,gBAAgB,EAAE,OAAO,EAAE;AAAA,EAC3B,eAAe,CAAC;AAAA,EAChB,OAAO;AAAA,IACL,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,EAAE,GAAG,gBAAgB,WAAW,WAAW;AAAA,EACtD,WAAW,EAAE,GAAG,gBAAgB,WAAW,WAAW;AAAA,EACtD,WAAW,EAAE,UAAU,YAAY,KAAK,OAAO,MAAM,OAAO;AAAA,EAC5D,eAAe,EAAE,SAAS,GAAG,OAAO,QAAQ,WAAW,SAAS;AAClE,CAAC;"}
1
+ {"version":3,"file":"Badge.styles.js","sources":["../../../src/Badge/Badge.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nconst labelBaseStyle: React.CSSProperties = {\n ...theme.typography.label,\n padding: \"0 5px\",\n color: theme.colors.atmo1,\n lineHeight: \"16px\",\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBadge\", {\n root: { position: \"relative\", \"&>*\": { float: \"left\" } },\n badgeContainer: { width: 0 },\n badgePosition: {},\n badge: {\n borderRadius: theme.space.xs,\n backgroundColor: theme.colors.secondary,\n float: \"left\",\n minHeight: \"8px\",\n minWidth: \"8px\",\n },\n showCount: { ...labelBaseStyle, wordBreak: \"keep-all\" },\n showLabel: { ...labelBaseStyle, wordBreak: \"keep-all\" },\n badgeIcon: { position: \"relative\", top: \"1px\", left: \"-7px\" },\n badgeOneDigit: { padding: 0, width: \"16px\", textAlign: \"center\" },\n});\n"],"names":[],"mappings":";;AAIA,MAAM,iBAAsC;AAAA,EAC1C,GAAG,MAAM,WAAW;AAAA,EACpB,SAAS;AAAA,EACT,OAAO,MAAM,OAAO;AAAA,EACpB,YAAY;AACd;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,UAAU,YAAY,OAAO,EAAE,OAAO,SAAS;AAAA,EACvD,gBAAgB,EAAE,OAAO,EAAE;AAAA,EAC3B,eAAe,CAAC;AAAA,EAChB,OAAO;AAAA,IACL,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,EAAE,GAAG,gBAAgB,WAAW,WAAW;AAAA,EACtD,WAAW,EAAE,GAAG,gBAAgB,WAAW,WAAW;AAAA,EACtD,WAAW,EAAE,UAAU,YAAY,KAAK,OAAO,MAAM,OAAO;AAAA,EAC5D,eAAe,EAAE,SAAS,GAAG,OAAO,QAAQ,WAAW,SAAS;AAClE,CAAC;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n CheckboxCheck as CheckboxCheckIcon,\n CheckboxPartial as CheckboxPartialIcon,\n Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n *\n * When defined the checkbox state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * If `true` the checkbox visually shows the indeterminate state.\n */\n indeterminate?: boolean;\n /**\n * The callback fired when the checkbox is pressed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any\n ) => void;\n /**\n * Whether the selector should use semantic colors.\n */\n semantic?: boolean;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /**\n * Callback fired when the component is blurred.\n */\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /**\n * A Jss Object used to override or extend the styles applied to the checkbox.\n */\n classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n options: {\n disabled: boolean;\n semantic: boolean;\n },\n classes: HvBaseCheckBoxClasses\n) => {\n const { disabled, semantic } = options;\n const color =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_light\", \"base_dark\"]) ||\n undefined;\n const checkedColor =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_dark\", \"base_light\"]) ||\n undefined;\n\n // Default colors: [\"atmo1\",\"secondary\"]\n return {\n checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n checkboxPartial: (\n <CheckboxPartialIcon color={color} className={classes.icon} />\n ),\n checkboxChecked: (\n <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n ),\n };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n HTMLButtonElement,\n HvBaseCheckBoxProps\n>((props, ref) => {\n const {\n id,\n classes: classesProp,\n className,\n name,\n inputProps,\n onChange,\n onFocusVisible,\n onBlur,\n checked,\n indeterminate,\n defaultChecked,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n semantic = false,\n ...others\n } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n const onChangeCallback = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(event, event.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n const onBlurCallback = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n setFocusVisible(false);\n onBlur?.(event);\n },\n [onBlur]\n );\n\n const onFocusVisibleCallback = useCallback(\n (event: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(event);\n },\n [onFocusVisible]\n );\n\n return (\n <MuiCheckbox\n ref={ref}\n id={id}\n name={name}\n value={value}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n className\n )}\n icon={icons.checkbox}\n indeterminateIcon={icons.checkboxPartial}\n checkedIcon={icons.checkboxChecked}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n checked={checked}\n defaultChecked={defaultChecked}\n indeterminate={indeterminate}\n inputProps={inputProps}\n onChange={onChangeCallback}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n color=\"default\"\n disableRipple\n {...others}\n />\n );\n});\n"],"names":["CheckboxIcon","CheckboxPartialIcon","CheckboxCheckIcon"],"mappings":";;;;;;;AA6FA,MAAM,mBAAmB,CACvB,SAIA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAGK,SAAA;AAAA,IACL,UAAW,oBAAAA,UAAA,EAAa,OAAc,WAAW,QAAQ,MAAM;AAAA,IAC/D,iBACG,oBAAAC,iBAAA,EAAoB,OAAc,WAAW,QAAQ,MAAM;AAAA,IAE9D,iBACG,oBAAAC,eAAA,EAAkB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGvE;AAQO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,QACrE;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
1
+ {"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n CheckboxCheck as CheckboxCheckIcon,\n CheckboxPartial as CheckboxPartialIcon,\n Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n *\n * When defined the checkbox state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * If `true` the checkbox visually shows the indeterminate state.\n */\n indeterminate?: boolean;\n /**\n * The callback fired when the checkbox is pressed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any\n ) => void;\n /**\n * Whether the selector should use semantic colors.\n */\n semantic?: boolean;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /**\n * Callback fired when the component is blurred.\n */\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /**\n * A Jss Object used to override or extend the styles applied to the checkbox.\n */\n classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n options: {\n disabled: boolean;\n semantic: boolean;\n },\n classes: HvBaseCheckBoxClasses\n) => {\n const { disabled, semantic } = options;\n const color =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_light\", \"base_dark\"]) ||\n undefined;\n const checkedColor =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_dark\", \"base_light\"]) ||\n undefined;\n\n // Default colors: [\"atmo1\",\"secondary\"]\n return {\n checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n checkboxPartial: (\n <CheckboxPartialIcon color={color} className={classes.icon} />\n ),\n checkboxChecked: (\n <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n ),\n };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n HTMLButtonElement,\n HvBaseCheckBoxProps\n>((props, ref) => {\n const {\n id,\n classes: classesProp,\n className,\n name,\n inputProps,\n onChange,\n onFocusVisible,\n onBlur,\n checked,\n indeterminate,\n defaultChecked,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n semantic = false,\n ...others\n } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n const onChangeCallback = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(event, event.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n const onBlurCallback = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n setFocusVisible(false);\n onBlur?.(event);\n },\n [onBlur]\n );\n\n const onFocusVisibleCallback = useCallback(\n (event: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(event);\n },\n [onFocusVisible]\n );\n\n return (\n <MuiCheckbox\n ref={ref}\n id={id}\n name={name}\n value={value}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n className\n )}\n icon={icons.checkbox}\n indeterminateIcon={icons.checkboxPartial}\n checkedIcon={icons.checkboxChecked}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n checked={checked}\n defaultChecked={defaultChecked}\n indeterminate={indeterminate}\n inputProps={inputProps}\n onChange={onChangeCallback}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n color=\"default\"\n disableRipple\n {...others}\n />\n );\n});\n"],"names":["CheckboxIcon","CheckboxPartialIcon","CheckboxCheckIcon"],"mappings":";;;;;;;AA6FA,MAAM,mBAAmB,CACvB,SAIA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAGK,SAAA;AAAA,IACL,UAAW,oBAAAA,UAAA,EAAa,OAAc,WAAW,QAAQ,MAAM;AAAA,IAC/D,iBACG,oBAAAC,iBAAA,EAAoB,OAAc,WAAW,QAAQ,MAAM;AAAA,IAE9D,iBACG,oBAAAC,eAAA,EAAkB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGvE;AAQO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,QACrE;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
@@ -1,5 +1,5 @@
1
1
  import { jsxs, jsx } from "@emotion/react/jsx-runtime";
2
- import React__default, { forwardRef, useState, useCallback, useMemo } from "react";
2
+ import { forwardRef, useState, useCallback, useMemo, isValidElement, cloneElement } from "react";
3
3
  import { createPortal } from "react-dom";
4
4
  import ClickAwayListener from "@mui/material/ClickAwayListener";
5
5
  import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
@@ -68,7 +68,7 @@ const HvBaseDropdown = forwardRef(
68
68
  );
69
69
  const ariaRole = role || (component == null ? "combobox" : void 0);
70
70
  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
71
- const id = useUniqueId(idProp, "hvbasedropdown");
71
+ const id = useUniqueId(idProp);
72
72
  const containerId = setId(id, "children-container");
73
73
  const headerControlArias = {
74
74
  "aria-required": required ?? void 0,
@@ -237,7 +237,7 @@ const HvBaseDropdown = forwardRef(
237
237
  ]
238
238
  }
239
239
  );
240
- const headerElement = component && React__default.isValidElement(component) ? React__default.cloneElement(component, {
240
+ const headerElement = component && isValidElement(component) ? cloneElement(component, {
241
241
  ref: handleDropdownHeaderRef,
242
242
  ...headerControlArias
243
243
  }) : defaultHeaderElement;
@@ -1 +1 @@
1
- {"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n useMemo,\n useState,\n useCallback,\n KeyboardEventHandler,\n AriaAttributes,\n forwardRef,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport ClickAwayListener, {\n ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { PopperProps, usePopper } from \"react-popper\";\nimport {\n detectOverflow,\n ModifierArguments,\n Options,\n Placement,\n} from \"@popperjs/core\";\n\nimport { HvTypography } from \"../Typography\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps extends HvBaseProps {\n /**\n * The role of the element that triggers the popup.\n *\n * Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n */\n role?: string;\n /**\n * Header placeholder.\n */\n placeholder?: React.ReactNode;\n /**\n * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n */\n disabled?: boolean;\n /**\n * If `true` the dropdown will be in read only mode, unable to be interacted.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal?: boolean;\n /**\n * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n */\n variableWidth?: boolean;\n /**\n * If `true` the dropdown starts opened if `false` it starts closed.\n */\n expanded?: boolean;\n /**\n * When uncontrolled, defines the initial expanded state.\n */\n defaultExpanded?: boolean;\n /**\n * An object containing props to be wired to the popper component.\n */\n popperProps?: Partial<PopperProps<any>>;\n /**\n * Placement of the dropdown.\n */\n placement?: \"left\" | \"right\";\n /**\n * Replacement for the header component.\n */\n component?: React.ReactNode;\n /**\n * Adornment to replace the default arrows.\n */\n adornment?: React.ReactNode;\n /**\n * When dropdown changes the expanded state.\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * When user click outside the open container.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n */\n onContainerCreation?: (container: HTMLElement | null) => void;\n /**\n * Attributes applied to the dropdown header element.\n */\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /**\n * Pass a ref to the dropdown header element.\n */\n dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvBaseDropdownClasses;\n /** @ignore */\n ref?: React.Ref<HTMLDivElement>;\n}\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n (props, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n variableWidth,\n placement: placementProp = \"right\",\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n popperProps = {},\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded)\n );\n\n const [referenceElement, setReferenceElement] =\n useState<HTMLElement | null>(null);\n const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n null\n );\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp\n );\n\n const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp, \"hvbasedropdown\");\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n \"aria-disabled\": disabled ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies AriaAttributes;\n\n const placement: Placement = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const onFirstUpdate = useCallback(() => {\n onContainerCreation?.(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n []\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n []\n );\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (\n width !== popperMaxSize?.width ||\n height !== popperMaxSize?.height\n ) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize]\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x || 0;\n const y = state.modifiersData.preventOverflow?.y || 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n []\n );\n\n const modifiers = useMemo<Options[\"modifiers\"]>(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ]\n );\n\n const { styles: popperStyles, attributes } = usePopper(\n referenceElement,\n popperElement,\n {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n }\n );\n\n const popperPlacement =\n (attributes.popper?.[\"data-popper-placement\"] as Placement) ?? \"bottom\";\n\n const handleToggle = useCallback(\n (event: any) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) ||\n (isKey(event, \"ArrowDown\") && isOpen) ||\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled || notControlKey || ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n /* If about to close focus on the header component. */\n setIsOpen(() => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n });\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n );\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n const defaultHeaderElement = (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n [classes.headerOpenDown]:\n isOpen && popperPlacement.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment || (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n\n const headerElement =\n component && React.isValidElement(component)\n ? React.cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n ...headerControlArias,\n })\n : defaultHeaderElement;\n\n const containerComponent = (() => {\n /**\n * Handle keyboard inside children container.\n */\n const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n ref={setPopperElement}\n className={classes.container}\n style={popperStyles.popper}\n {...attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <BaseDropdownContext.Provider value={popperMaxSize}>\n <div\n id={containerId}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n [classes.panelOpenedDown]:\n popperPlacement.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n </BaseDropdownContext.Provider>\n {popperPlacement.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n }\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId || \"\") || document.body\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n ref={ref}\n id={id}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...(ariaRole && {\n role: ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerElement}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n }\n);\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n useMemo,\n useState,\n useCallback,\n forwardRef,\n isValidElement,\n cloneElement,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport ClickAwayListener, {\n ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { PopperProps, usePopper } from \"react-popper\";\nimport {\n detectOverflow,\n ModifierArguments,\n Options,\n Placement,\n} from \"@popperjs/core\";\n\nimport { HvTypography } from \"../Typography\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps extends HvBaseProps {\n /**\n * The role of the element that triggers the popup.\n *\n * Defaults to \"combobox\" if `component` and the default\n * \"textbox\" header is used, undefined otherwise.\n */\n role?: string;\n /**\n * Header placeholder.\n */\n placeholder?: React.ReactNode;\n /**\n * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n */\n disabled?: boolean;\n /**\n * If `true` the dropdown will be in read only mode, unable to be interacted.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required on the form element.\n */\n required?: boolean;\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal?: boolean;\n /**\n * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n * Defaults to `false`.\n */\n variableWidth?: boolean;\n /**\n * If `true` the dropdown starts opened if `false` it starts closed.\n */\n expanded?: boolean;\n /**\n * When uncontrolled, defines the initial expanded state.\n */\n defaultExpanded?: boolean;\n /**\n * An object containing props to be wired to the popper component.\n */\n popperProps?: Partial<PopperProps<any>>;\n /**\n * Placement of the dropdown.\n */\n placement?: \"left\" | \"right\";\n /**\n * Replacement for the header component.\n */\n component?: React.ReactNode;\n /**\n * Adornment to replace the default arrows.\n */\n adornment?: React.ReactNode;\n /**\n * When dropdown changes the expanded state.\n */\n onToggle?: (event: Event, open: boolean) => void;\n /**\n * When user click outside the open container.\n */\n onClickOutside?: (event: Event) => void;\n /**\n * Callback called when the dropdown is opened and ready,\n * commonly used to set focus to the content.\n */\n onContainerCreation?: (container: HTMLElement | null) => void;\n /**\n * Attributes applied to the dropdown header element.\n */\n dropdownHeaderProps?: React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n /**\n * Pass a ref to the dropdown header element.\n */\n dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n /**\n * A Jss Object used to override or extend the component styles applied.\n */\n classes?: HvBaseDropdownClasses;\n /** @ignore */\n ref?: React.Ref<HTMLDivElement>;\n}\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n (props, ref) => {\n const {\n id: idProp,\n className,\n classes: classesProp,\n children,\n role,\n placeholder,\n component,\n adornment,\n expanded,\n dropdownHeaderProps,\n defaultExpanded,\n disabled,\n readOnly,\n required,\n disablePortal,\n variableWidth,\n placement: placementProp = \"right\",\n \"aria-expanded\": ariaExpandedProp,\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n popperProps = {},\n dropdownHeaderRef: dropdownHeaderRefProp,\n onToggle,\n onClickOutside,\n onContainerCreation,\n ...others\n } = useDefaultProps(\"HvBaseDropdown\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { rootId } = useTheme();\n\n const [isOpen, setIsOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded)\n );\n\n const [referenceElement, setReferenceElement] =\n useState<HTMLElement | null>(null);\n const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n null\n );\n const [popperMaxSize, setPopperMaxSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n\n const handleDropdownHeaderRefProp = useForkRef(\n dropdownHeaderRefProp,\n dropdownHeaderProps?.ref\n );\n const handleDropdownHeaderRef = useForkRef(\n setReferenceElement,\n handleDropdownHeaderRefProp\n );\n\n const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n const id = useUniqueId(idProp);\n const containerId = setId(id, \"children-container\");\n\n const headerControlArias = {\n \"aria-required\": required ?? undefined,\n \"aria-readonly\": readOnly ?? undefined,\n \"aria-disabled\": disabled ?? undefined,\n\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": isOpen ? containerId : undefined,\n \"aria-controls\": isOpen ? containerId : undefined,\n } satisfies React.AriaAttributes;\n\n const headerAriaLabels = {\n \"aria-label\": ariaLabelProp,\n \"aria-labelledby\": ariaLabelledByProp,\n } satisfies React.AriaAttributes;\n\n const placement: Placement = `bottom-${\n placementProp === \"right\" ? \"start\" : \"end\"\n }`;\n\n const extensionWidth = referenceElement\n ? referenceElement?.offsetWidth\n : \"inherit\";\n\n const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n popperProps;\n\n const onFirstUpdate = useCallback(() => {\n onContainerCreation?.(popperElement);\n }, [onContainerCreation, popperElement]);\n\n const widthCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n []\n );\n\n const widthCalculatorEffect = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n state.elements.popper.style.width = `${\n (state.elements.reference as any).offsetWidth\n }px`;\n },\n []\n );\n\n const applyMaxSizeCalculator = useCallback(\n ({ state }: ModifierArguments<Options>) => {\n // The `maxSize` modifier provides this data\n const { width, height } = state.modifiersData.maxSize;\n if (\n width !== popperMaxSize?.width ||\n height !== popperMaxSize?.height\n ) {\n setPopperMaxSize({ width, height });\n }\n\n state.styles.popper = {\n ...state.styles.popper,\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n };\n },\n [popperMaxSize]\n );\n\n const maxSizeCalculator = useCallback(\n ({ state, name, options }: ModifierArguments<Options>) => {\n const overflow = detectOverflow(state, options);\n\n const x = state.modifiersData.preventOverflow?.x || 0;\n const y = state.modifiersData.preventOverflow?.y || 0;\n\n const popperWidth = state.rects.popper.width;\n const popperHeight = state.rects.popper.height;\n\n const basePlacement = state.placement.split(\"-\")[0];\n\n const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n state.modifiersData[name] = {\n width: popperWidth - overflow[widthProp] - x,\n height: popperHeight - overflow[heightProp] - y,\n };\n },\n []\n );\n\n const modifiers = useMemo<Options[\"modifiers\"]>(\n () => [\n {\n name: \"variableWidth\",\n enabled: !variableWidth,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: widthCalculator,\n effect: widthCalculatorEffect,\n },\n {\n name: \"maxSize\",\n enabled: true,\n phase: \"main\",\n requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n fn: maxSizeCalculator,\n },\n {\n name: \"applyMaxSize\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"maxSize\"],\n fn: applyMaxSizeCalculator,\n },\n ...popperPropsModifiers,\n ],\n [\n maxSizeCalculator,\n applyMaxSizeCalculator,\n popperPropsModifiers,\n variableWidth,\n widthCalculator,\n widthCalculatorEffect,\n ]\n );\n\n const { styles: popperStyles, attributes } = usePopper(\n referenceElement,\n popperElement,\n {\n placement,\n modifiers,\n onFirstUpdate,\n ...otherPopperProps,\n }\n );\n\n const popperPlacement =\n (attributes.popper?.[\"data-popper-placement\"] as Placement) ?? \"bottom\";\n\n const handleToggle = useCallback(\n (event: any) => {\n if (event && !isKey(event, \"Tab\")) {\n event.preventDefault();\n }\n\n const notControlKey =\n !!event?.code &&\n !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n const ignoredCombinations =\n (isKey(event, \"Esc\") && !isOpen) ||\n (isKey(event, \"ArrowDown\") && isOpen) ||\n (isKey(event, \"Tab\") && !isOpen);\n\n if (disabled || notControlKey || ignoredCombinations) return;\n\n const newOpen = !isOpen;\n\n /* If about to close focus on the header component. */\n setIsOpen(() => {\n if (!newOpen) {\n // Focus-ring won't be visible even if using the keyboard:\n // https://github.com/WICG/focus-visible/issues/88\n referenceElement?.focus({ preventScroll: true });\n }\n\n return newOpen;\n });\n\n onToggle?.(event, newOpen);\n },\n [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n );\n\n const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n const defaultHeaderElement = (\n <div\n id={setId(id, \"header\")}\n className={cx(classes.header, {\n [classes.headerDisabled]: disabled,\n [classes.headerReadOnly]: readOnly,\n [classes.headerOpen]: isOpen,\n [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n [classes.headerOpenDown]:\n isOpen && popperPlacement.includes(\"bottom\"),\n })}\n // TODO: review \"textbox\" role\n role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n {...headerAriaLabels}\n style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n // Removes the element from the navigation sequence for keyboard focus if disabled\n tabIndex={disabled ? -1 : 0}\n ref={handleDropdownHeaderRef}\n {...dropdownHeaderProps}\n >\n <div className={classes.selection}>\n {placeholder && typeof placeholder === \"string\" ? (\n <HvTypography\n className={cx(classes.placeholder, {\n [classes.selectionDisabled]: disabled,\n })}\n variant=\"body\"\n >\n {placeholder}\n </HvTypography>\n ) : (\n placeholder\n )}\n </div>\n <div className={classes.arrowContainer}>\n {adornment || (\n <ExpanderComponent\n iconSize=\"XS\"\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.arrow}\n />\n )}\n </div>\n </div>\n );\n\n const headerElement =\n component && isValidElement(component)\n ? cloneElement(component as React.ReactElement, {\n ref: handleDropdownHeaderRef,\n ...headerControlArias,\n })\n : defaultHeaderElement;\n\n const containerComponent = (() => {\n /**\n * Handle keyboard inside children container.\n */\n const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n if (isKey(event, \"Esc\")) {\n handleToggle(event);\n }\n if (isKey(event, \"Tab\") && !event.shiftKey) {\n const focusList = getFirstAndLastFocus(popperElement);\n if (document.activeElement === focusList?.last) {\n event.preventDefault();\n focusList?.first?.focus();\n }\n }\n };\n\n const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n const isButtonClick = referenceElement?.contains(event.target as any);\n if (!isButtonClick) {\n onClickOutside?.(event);\n setIsOpen(false);\n onToggle?.(event, false);\n }\n };\n\n const container = (\n <div\n ref={setPopperElement}\n className={classes.container}\n style={popperStyles.popper}\n {...attributes.popper}\n >\n <ClickAwayListener onClickAway={handleOutside}>\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div onKeyDown={handleContainerKeyDown}>\n {popperPlacement.includes(\"bottom\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(classes.inputExtensionOpen, {\n [classes.inputExtensionLeftPosition]:\n popperPlacement.includes(\"end\"),\n })}\n />\n )}\n <BaseDropdownContext.Provider value={popperMaxSize}>\n <div\n id={containerId}\n className={cx(classes.panel, {\n [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n [classes.panelOpenedDown]:\n popperPlacement.includes(\"bottom\"),\n })}\n >\n {children}\n </div>\n </BaseDropdownContext.Provider>\n {popperPlacement.includes(\"top\") && (\n <div\n style={{ width: extensionWidth }}\n className={cx(\n classes.inputExtensionOpen,\n classes.inputExtensionOpenShadow,\n {\n [classes.inputExtensionFloatRight]:\n popperPlacement.includes(\"end\"),\n [classes.inputExtensionFloatLeft]:\n popperPlacement.includes(\"start\"),\n }\n )}\n />\n )}\n </div>\n </ClickAwayListener>\n </div>\n );\n\n if (disablePortal) return container;\n\n return createPortal(\n container,\n document.getElementById(rootId || \"\") || document.body\n );\n })();\n\n return (\n <div className={classes.root}>\n <div\n ref={ref}\n id={id}\n className={cx(\n classes.anchor,\n { [classes.rootDisabled]: disabled },\n className\n )}\n {...(!readOnly && {\n onKeyDown: handleToggle,\n onClick: handleToggle,\n })}\n {...(ariaRole && {\n role: ariaRole,\n ...headerAriaLabels,\n ...headerControlArias,\n })}\n // Removes the element from the navigation sequence for keyboard focus\n tabIndex={-1}\n {...others}\n >\n {headerElement}\n </div>\n {isOpen && containerComponent}\n </div>\n );\n }\n);\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n root: {\n display: \"inline-block\",\n width: \"100%\",\n position: \"relative\",\n\n \"&:hover $inputBorderContainer\": {\n backgroundColor: theme.colors.primary,\n },\n\n \"&:focus-within $inputBorderContainer\": {\n backgroundColor: theme.colors.primary,\n },\n },\n disabled: {\n \"& $inputRoot\": {\n backgroundColor: theme.colors.atmo2,\n borderColor: theme.colors.secondary_60,\n },\n\n \"& $inputBorderContainer\": {\n backgroundColor: theme.colors.atmo4,\n },\n\n \"&:hover $inputBorderContainer\": {\n backgroundColor: theme.colors.atmo4,\n },\n\n \"&& $input\": {\n color: theme.colors.secondary_60,\n WebkitTextFillColor: theme.colors.secondary_60,\n },\n\n \"& $inputRootMultiline\": {\n \"& $input\": {\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.secondary_60}`,\n },\n },\n\n \"&:hover $inputRootMultiline\": {\n \"& $input\": {\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.secondary_60}`,\n },\n },\n },\n invalid: {\n \"&:not(.disabled)\": {\n \"& $inputBorderContainer\": {\n backgroundColor: theme.colors.negative,\n },\n\n \"&:hover $inputBorderContainer\": {\n backgroundColor: theme.colors.negative,\n },\n\n \"& $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.negative}`,\n },\n },\n\n \"&:hover $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.negative}`,\n },\n },\n\n \"&:focus-within $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.negative}`,\n },\n },\n },\n },\n resizable: { width: \"auto\" },\n readOnly: {\n \"& $inputBorderContainer\": {\n backgroundColor: \"transparent\",\n },\n\n \"&:hover $inputBorderContainer\": {\n backgroundColor: \"transparent\",\n },\n\n \"&:focus-within $inputBorderContainer\": {\n backgroundColor: \"transparent\",\n },\n\n \"& $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.secondary_60}`,\n backgroundColor: theme.colors.atmo2,\n },\n },\n\n \"&:hover $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.secondary_60}`,\n backgroundColor: theme.colors.atmo2,\n },\n },\n\n \"&:focus-within $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.secondary_60}`,\n backgroundColor: theme.colors.atmo2,\n },\n },\n },\n inputBorderContainer: {\n position: \"absolute\",\n width: \"calc(100% - 4px)\",\n height: \"0px\",\n top: \"31px\",\n left: \"2px\",\n backgroundColor: theme.colors.atmo4,\n },\n inputRootInvalid: { borderColor: theme.colors.negative },\n inputRootReadOnly: {\n borderColor: theme.colors.secondary_60,\n backgroundColor: theme.colors.atmo2,\n },\n inputRoot: {\n margin: 0,\n width: \"100%\",\n borderRadius: theme.radii.base,\n height: \"32px\",\n border: `1px solid ${theme.colors.secondary}`,\n boxSizing: \"border-box\",\n backgroundColor: theme.colors.atmo1,\n fontFamily: theme.fontFamily.body,\n\n \"&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)\":\n {\n borderColor: theme.colors.primary,\n },\n\n \"&:hover:not($inputRootDisabled)::before\": {\n borderBottom: \"none\",\n },\n\n \"&::before\": {\n borderBottom: \"none\",\n },\n\n \"&::after\": {\n borderBottom: \"none\",\n },\n },\n inputRootFocused: {\n backgroundColor: theme.colors.atmo1,\n ...outlineStyles,\n\n \"&:hover\": {\n backgroundColor: theme.colors.atmo1,\n },\n\n \"&$inputRootReadOnly\": {\n backgroundColor: theme.colors.atmo2,\n },\n },\n inputRootDisabled: {\n cursor: \"not-allowed\",\n\n \"&&::before\": {\n borderBottomStyle: \"none\",\n },\n },\n inputRootMultiline: {\n padding: 0,\n backgroundColor: \"transparent\",\n overflow: \"auto\",\n border: \"none\",\n height: \"auto\",\n\n \"& $input\": {\n border: `1px solid ${theme.colors.secondary}`,\n borderRadius: theme.radii.base,\n backgroundColor: theme.colors.atmo1,\n height: \"auto\",\n minHeight: \"21px\",\n padding: \"5px 10px\",\n overflow: \"auto\",\n marginLeft: \"0px\",\n marginRight: \"0px\",\n\n \"&:hover\": {\n border: `1px solid ${theme.colors.primary}`,\n },\n },\n },\n input: {\n height: \"19px\",\n marginLeft: theme.space.xs,\n marginRight: theme.space.xs,\n padding: \"6px 0 5px\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n outline: \"none\",\n width: \"initial\",\n flexGrow: 1,\n ...(theme.typography.body as CSSProperties),\n\n \"&::placeholder\": {\n opacity: 1,\n color: theme.colors.secondary_80,\n },\n\n \"&::-ms-clear\": {\n display: \"none\",\n },\n },\n inputDisabled: {},\n inputReadOnly: {\n color: theme.colors.secondary_80,\n },\n inputResizable: { resize: \"both\", width: \"100%\" },\n});\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n root: {\n display: \"inline-block\",\n width: \"100%\",\n position: \"relative\",\n\n \"&:hover $inputBorderContainer\": {\n backgroundColor: theme.colors.primary,\n },\n\n \"&:focus-within $inputBorderContainer\": {\n backgroundColor: theme.colors.primary,\n },\n },\n disabled: {\n \"& $inputRoot\": {\n backgroundColor: theme.colors.atmo2,\n borderColor: theme.colors.secondary_60,\n },\n\n \"& $inputBorderContainer\": {\n backgroundColor: theme.colors.atmo4,\n },\n\n \"&:hover $inputBorderContainer\": {\n backgroundColor: theme.colors.atmo4,\n },\n\n \"&& $input\": {\n color: theme.colors.secondary_60,\n WebkitTextFillColor: theme.colors.secondary_60,\n },\n\n \"& $inputRootMultiline\": {\n \"& $input\": {\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.secondary_60}`,\n },\n },\n\n \"&:hover $inputRootMultiline\": {\n \"& $input\": {\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.secondary_60}`,\n },\n },\n },\n invalid: {\n \"&:not(.disabled)\": {\n \"& $inputBorderContainer\": {\n backgroundColor: theme.colors.negative,\n },\n\n \"&:hover $inputBorderContainer\": {\n backgroundColor: theme.colors.negative,\n },\n\n \"& $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.negative}`,\n },\n },\n\n \"&:hover $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.negative}`,\n },\n },\n\n \"&:focus-within $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.negative}`,\n },\n },\n },\n },\n resizable: { width: \"auto\" },\n readOnly: {\n \"& $inputBorderContainer\": {\n backgroundColor: \"transparent\",\n },\n\n \"&:hover $inputBorderContainer\": {\n backgroundColor: \"transparent\",\n },\n\n \"&:focus-within $inputBorderContainer\": {\n backgroundColor: \"transparent\",\n },\n\n \"& $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.secondary_60}`,\n backgroundColor: theme.colors.atmo2,\n },\n },\n\n \"&:hover $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.secondary_60}`,\n backgroundColor: theme.colors.atmo2,\n },\n },\n\n \"&:focus-within $inputRootMultiline\": {\n \"& $input\": {\n border: `1px solid ${theme.colors.secondary_60}`,\n backgroundColor: theme.colors.atmo2,\n },\n },\n },\n inputBorderContainer: {\n position: \"absolute\",\n width: \"calc(100% - 4px)\",\n height: \"0px\",\n top: \"31px\",\n left: \"2px\",\n backgroundColor: theme.colors.atmo4,\n },\n inputRootInvalid: { borderColor: theme.colors.negative },\n inputRootReadOnly: {\n borderColor: theme.colors.secondary_60,\n backgroundColor: theme.colors.atmo2,\n },\n inputRoot: {\n margin: 0,\n width: \"100%\",\n borderRadius: theme.radii.base,\n height: \"32px\",\n border: `1px solid ${theme.colors.secondary}`,\n boxSizing: \"border-box\",\n backgroundColor: theme.colors.atmo1,\n fontFamily: theme.fontFamily.body,\n\n \"&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)\":\n {\n borderColor: theme.colors.primary,\n },\n\n \"&:hover:not($inputRootDisabled)::before\": {\n borderBottom: \"none\",\n },\n\n \"&::before\": {\n borderBottom: \"none\",\n },\n\n \"&::after\": {\n borderBottom: \"none\",\n },\n },\n inputRootFocused: {\n backgroundColor: theme.colors.atmo1,\n ...outlineStyles,\n\n \"&:hover\": {\n backgroundColor: theme.colors.atmo1,\n },\n\n \"&$inputRootReadOnly\": {\n backgroundColor: theme.colors.atmo2,\n },\n },\n inputRootDisabled: {\n cursor: \"not-allowed\",\n\n \"&&::before\": {\n borderBottomStyle: \"none\",\n },\n },\n inputRootMultiline: {\n padding: 0,\n backgroundColor: \"transparent\",\n overflow: \"auto\",\n border: \"none\",\n height: \"auto\",\n\n \"& $input\": {\n border: `1px solid ${theme.colors.secondary}`,\n borderRadius: theme.radii.base,\n backgroundColor: theme.colors.atmo1,\n height: \"auto\",\n minHeight: \"21px\",\n padding: \"5px 10px\",\n overflow: \"auto\",\n marginLeft: \"0px\",\n marginRight: \"0px\",\n\n \"&:hover\": {\n border: `1px solid ${theme.colors.primary}`,\n },\n },\n },\n input: {\n height: \"19px\",\n marginLeft: theme.space.xs,\n marginRight: theme.space.xs,\n padding: \"6px 0 5px\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n outline: \"none\",\n width: \"initial\",\n flexGrow: 1,\n ...(theme.typography.body as React.CSSProperties),\n\n \"&::placeholder\": {\n opacity: 1,\n color: theme.colors.secondary_80,\n },\n\n \"&::-ms-clear\": {\n display: \"none\",\n },\n },\n inputDisabled: {},\n inputReadOnly: {\n color: theme.colors.secondary_80,\n },\n inputResizable: { resize: \"both\", width: \"100%\" },\n});\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"validations.js","sources":["../../../src/BaseInput/validations.ts"],"sourcesContent":["import { HTMLInputTypeAttribute } from \"react\";\n\nimport { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport validationStates from \"../Forms/FormElement/validationStates\";\n\n/** Checks if the value is a number. */\nconst isNumeric = (num: string) =>\n // to prevent Number( <spaces> ) = 0\n num.trim().length > 0 && !Number.isNaN(Number(num));\n\n/** Checks if the value is an email */\nconst isEmail = (email: string) => {\n const regexp =\n /^[^\\\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;\n return regexp.test(email);\n};\n\nexport const validationTypes = Object.freeze({\n none: \"none\",\n number: \"number\",\n email: \"email\",\n});\n\n/** Returns the input's validation type based in the type of the input. */\nexport const computeValidationType = (type: HTMLInputTypeAttribute) => {\n switch (type) {\n case \"number\":\n return validationTypes.number;\n case \"email\":\n return validationTypes.email;\n\n default:\n return validationTypes.none;\n }\n};\n\n/**\n * Checks whether any integrated validation, native or not, is active.\n */\nexport const hasBuiltInValidations = (\n required: boolean,\n validationType: HTMLInputTypeAttribute,\n minCharQuantity: number | null | undefined,\n maxCharQuantity: number | null | undefined,\n validation?: (value: string) => boolean,\n inputProps?: InputBaseComponentProps\n) =>\n required ||\n validationType !== validationTypes.none ||\n minCharQuantity != null ||\n maxCharQuantity != null ||\n validation != null ||\n inputProps?.required != null ||\n inputProps?.minLength != null ||\n inputProps?.maxLength != null ||\n inputProps?.min != null ||\n inputProps?.max != null ||\n (inputProps?.type != null &&\n inputProps?.type !== \"text\" &&\n inputProps?.type !== \"password\") ||\n inputProps?.pattern != null;\n\n/** Returns the form element's validation state based in the validity state of the input. */\nexport const computeValidationState = (\n inputValidity: HvInputValidity,\n isEmptyValue: boolean\n) => {\n // to keep 2.x behaviour,\n // consider that if the value is empty (and not required) we're returning to the standBy state.\n // might not make sense, as it makes impossible to say if the user explicitly cleared the input.\n if (inputValidity.valid && isEmptyValue) {\n return validationStates.standBy;\n }\n\n return inputValidity.valid\n ? validationStates.valid\n : validationStates.invalid;\n};\n\n/**\n * Returns a error message based in the validity state of the input.\n *\n * Only one error message is returned even if multiple validations fail.\n * Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.\n *\n * For further customization both status and statusMessage should be controlled and\n * set using the onBlur callback that receives both the value and the input validity object.\n */\nexport const computeValidationMessage = (\n inputValidity: HvInputValidity,\n /** The available localized error messages. */\n errorMessages: Record<string, string>\n) => {\n if (inputValidity.valid) {\n return \"\";\n }\n\n if (inputValidity.valueMissing) {\n return errorMessages.requiredError;\n }\n if (inputValidity.tooLong) {\n return errorMessages.maxCharError;\n }\n if (inputValidity.tooShort) {\n return errorMessages.minCharError;\n }\n if (inputValidity.typeMismatch) {\n return errorMessages.typeMismatchError;\n }\n\n return errorMessages.error;\n};\n\n/**\n * Returns a object describing the validity state of the input.\n *\n * It implements the native browser's ValidityState interface:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\nexport const validateInput = (\n input: HTMLInputElement | HTMLTextAreaElement | null,\n value: string,\n required: boolean,\n minCharQuantity: any,\n maxCharQuantity: any,\n validationType: string,\n validation?: (value: string) => boolean\n): HvInputValidity => {\n // bootstrap validity object using browser's built-in validation\n const inputValidity: HvInputValidity = {\n valid: input?.validity?.valid ?? true,\n badInput: input?.validity?.badInput,\n customError: input?.validity?.customError,\n patternMismatch: input?.validity?.patternMismatch,\n rangeOverflow: input?.validity?.rangeOverflow,\n rangeUnderflow: input?.validity?.rangeUnderflow,\n stepMismatch: input?.validity?.stepMismatch,\n tooLong: input?.validity?.tooLong,\n tooShort: input?.validity?.tooShort,\n typeMismatch: input?.validity?.typeMismatch,\n valueMissing: input?.validity?.valueMissing,\n };\n\n if (!value) {\n if (required) {\n // this is redundant because we're setting the required property in the native input\n inputValidity.valueMissing = true;\n inputValidity.valid = false;\n }\n } else {\n // we're not setting minlength and maxlength in the native input\n // to avoid different browser's behaviours and keep the user experience consistent\n if (minCharQuantity !== null && value.length < minCharQuantity) {\n inputValidity.tooShort = true;\n inputValidity.valid = false;\n }\n\n if (maxCharQuantity !== null && value.length > maxCharQuantity) {\n inputValidity.tooLong = true;\n inputValidity.valid = false;\n }\n\n // the validationType is used instead of type\n // for the same reason stated above\n switch (validationType) {\n case validationTypes.number:\n if (!isNumeric(value)) {\n inputValidity.typeMismatch = true;\n inputValidity.valid = false;\n }\n break;\n\n case validationTypes.email:\n if (!isEmail(value)) {\n inputValidity.typeMismatch = true;\n inputValidity.valid = false;\n }\n break;\n\n default:\n }\n\n if (validation != null && !validation(value)) {\n inputValidity.customError = true;\n inputValidity.valid = false;\n }\n }\n\n return inputValidity;\n};\n\nexport type HvInputValidity = {\n valid?: boolean;\n badInput?: boolean;\n customError?: boolean;\n patternMismatch?: boolean;\n rangeOverflow?: boolean;\n rangeUnderflow?: boolean;\n stepMismatch?: boolean;\n tooLong?: boolean;\n tooShort?: boolean;\n typeMismatch?: boolean;\n valueMissing?: boolean;\n};\n\nexport const DEFAULT_ERROR_MESSAGES = {\n error: \"Invalid value\",\n requiredError: \"The value is required\",\n minCharError: \"The value is too short\",\n maxCharError: \"The value is too long\",\n typeMismatchError: \"Invalid value\",\n};\n"],"names":["validationStates"],"mappings":"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"}
1
+ {"version":3,"file":"validations.js","sources":["../../../src/BaseInput/validations.ts"],"sourcesContent":["import { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport validationStates from \"../Forms/FormElement/validationStates\";\n\n/** Checks if the value is a number. */\nconst isNumeric = (num: string) =>\n // to prevent Number( <spaces> ) = 0\n num.trim().length > 0 && !Number.isNaN(Number(num));\n\n/** Checks if the value is an email */\nconst isEmail = (email: string) => {\n const regexp =\n /^[^\\\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;\n return regexp.test(email);\n};\n\nexport const validationTypes = Object.freeze({\n none: \"none\",\n number: \"number\",\n email: \"email\",\n});\n\n/** Returns the input's validation type based in the type of the input. */\nexport const computeValidationType = (type: React.HTMLInputTypeAttribute) => {\n switch (type) {\n case \"number\":\n return validationTypes.number;\n case \"email\":\n return validationTypes.email;\n\n default:\n return validationTypes.none;\n }\n};\n\n/**\n * Checks whether any integrated validation, native or not, is active.\n */\nexport const hasBuiltInValidations = (\n required: boolean,\n validationType: React.HTMLInputTypeAttribute,\n minCharQuantity: number | null | undefined,\n maxCharQuantity: number | null | undefined,\n validation?: (value: string) => boolean,\n inputProps?: InputBaseComponentProps\n) =>\n required ||\n validationType !== validationTypes.none ||\n minCharQuantity != null ||\n maxCharQuantity != null ||\n validation != null ||\n inputProps?.required != null ||\n inputProps?.minLength != null ||\n inputProps?.maxLength != null ||\n inputProps?.min != null ||\n inputProps?.max != null ||\n (inputProps?.type != null &&\n inputProps?.type !== \"text\" &&\n inputProps?.type !== \"password\") ||\n inputProps?.pattern != null;\n\n/** Returns the form element's validation state based in the validity state of the input. */\nexport const computeValidationState = (\n inputValidity: HvInputValidity,\n isEmptyValue: boolean\n) => {\n // to keep 2.x behaviour,\n // consider that if the value is empty (and not required) we're returning to the standBy state.\n // might not make sense, as it makes impossible to say if the user explicitly cleared the input.\n if (inputValidity.valid && isEmptyValue) {\n return validationStates.standBy;\n }\n\n return inputValidity.valid\n ? validationStates.valid\n : validationStates.invalid;\n};\n\n/**\n * Returns a error message based in the validity state of the input.\n *\n * Only one error message is returned even if multiple validations fail.\n * Also, only required, minCharQuantity, maxCharQuantity and validationType have specific error messages.\n *\n * For further customization both status and statusMessage should be controlled and\n * set using the onBlur callback that receives both the value and the input validity object.\n */\nexport const computeValidationMessage = (\n inputValidity: HvInputValidity,\n /** The available localized error messages. */\n errorMessages: Record<string, string>\n) => {\n if (inputValidity.valid) {\n return \"\";\n }\n\n if (inputValidity.valueMissing) {\n return errorMessages.requiredError;\n }\n if (inputValidity.tooLong) {\n return errorMessages.maxCharError;\n }\n if (inputValidity.tooShort) {\n return errorMessages.minCharError;\n }\n if (inputValidity.typeMismatch) {\n return errorMessages.typeMismatchError;\n }\n\n return errorMessages.error;\n};\n\n/**\n * Returns a object describing the validity state of the input.\n *\n * It implements the native browser's ValidityState interface:\n * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n */\nexport const validateInput = (\n input: HTMLInputElement | HTMLTextAreaElement | null,\n value: string,\n required: boolean,\n minCharQuantity: any,\n maxCharQuantity: any,\n validationType: string,\n validation?: (value: string) => boolean\n): HvInputValidity => {\n // bootstrap validity object using browser's built-in validation\n const inputValidity: HvInputValidity = {\n valid: input?.validity?.valid ?? true,\n badInput: input?.validity?.badInput,\n customError: input?.validity?.customError,\n patternMismatch: input?.validity?.patternMismatch,\n rangeOverflow: input?.validity?.rangeOverflow,\n rangeUnderflow: input?.validity?.rangeUnderflow,\n stepMismatch: input?.validity?.stepMismatch,\n tooLong: input?.validity?.tooLong,\n tooShort: input?.validity?.tooShort,\n typeMismatch: input?.validity?.typeMismatch,\n valueMissing: input?.validity?.valueMissing,\n };\n\n if (!value) {\n if (required) {\n // this is redundant because we're setting the required property in the native input\n inputValidity.valueMissing = true;\n inputValidity.valid = false;\n }\n } else {\n // we're not setting minlength and maxlength in the native input\n // to avoid different browser's behaviours and keep the user experience consistent\n if (minCharQuantity !== null && value.length < minCharQuantity) {\n inputValidity.tooShort = true;\n inputValidity.valid = false;\n }\n\n if (maxCharQuantity !== null && value.length > maxCharQuantity) {\n inputValidity.tooLong = true;\n inputValidity.valid = false;\n }\n\n // the validationType is used instead of type\n // for the same reason stated above\n switch (validationType) {\n case validationTypes.number:\n if (!isNumeric(value)) {\n inputValidity.typeMismatch = true;\n inputValidity.valid = false;\n }\n break;\n\n case validationTypes.email:\n if (!isEmail(value)) {\n inputValidity.typeMismatch = true;\n inputValidity.valid = false;\n }\n break;\n\n default:\n }\n\n if (validation != null && !validation(value)) {\n inputValidity.customError = true;\n inputValidity.valid = false;\n }\n }\n\n return inputValidity;\n};\n\nexport type HvInputValidity = {\n valid?: boolean;\n badInput?: boolean;\n customError?: boolean;\n patternMismatch?: boolean;\n rangeOverflow?: boolean;\n rangeUnderflow?: boolean;\n stepMismatch?: boolean;\n tooLong?: boolean;\n tooShort?: boolean;\n typeMismatch?: boolean;\n valueMissing?: boolean;\n};\n\nexport const DEFAULT_ERROR_MESSAGES = {\n error: \"Invalid value\",\n requiredError: \"The value is required\",\n minCharError: \"The value is too short\",\n maxCharError: \"The value is too long\",\n typeMismatchError: \"Invalid value\",\n};\n"],"names":["validationStates"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n RadioButtonUnselected,\n RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes?: HvBaseRadioClasses;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n *\n * When defined the radio button state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * The callback fired when the radio button is pressed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any\n ) => void;\n /**\n * Whether the selector should use semantic colors.\n */\n semantic?: boolean;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /**\n * @ignore\n */\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n options: { disabled: boolean; semantic: boolean },\n classes: HvBaseRadioClasses\n) => {\n const { disabled, semantic } = options;\n const color =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_light\", \"base_dark\"]) ||\n undefined;\n const checkedColor =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_dark\", \"base_light\"]) ||\n undefined;\n\n return {\n radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n radioChecked: (\n <RadioButtonSelected color={checkedColor} className={classes.icon} />\n ),\n };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n semantic = false,\n inputProps,\n onFocusVisible,\n onBlur,\n ...others\n } = useDefaultProps(\"HvBaseRadio\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible]\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur]\n );\n\n const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n return (\n <MuiRadio\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.focusVisible]: focusVisible,\n },\n className\n )}\n icon={icons.radio}\n checkedIcon={icons.radioChecked}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;AA2Fa,MAAA,mBAAmB,CAC9B,SACA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAEK,SAAA;AAAA,IACL,OAAQ,oBAAA,uBAAA,EAAsB,OAAc,WAAW,QAAQ,MAAM;AAAA,IACrE,cACG,oBAAA,qBAAA,EAAoB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGzE;AAQO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,MAAM;AAAA,QACZ,aAAa,MAAM;AAAA,QACnB,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
1
+ {"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n RadioButtonUnselected,\n RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the radio button.\n */\n classes?: HvBaseRadioClasses;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n *\n * When defined the radio button state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * The callback fired when the radio button is pressed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any\n ) => void;\n /**\n * Whether the selector should use semantic colors.\n */\n semantic?: boolean;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /**\n * @ignore\n */\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n options: { disabled: boolean; semantic: boolean },\n classes: HvBaseRadioClasses\n) => {\n const { disabled, semantic } = options;\n const color =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_light\", \"base_dark\"]) ||\n undefined;\n const checkedColor =\n (disabled && [\"atmo3\", \"secondary_60\"]) ||\n (semantic && [\"base_dark\", \"base_light\"]) ||\n undefined;\n\n return {\n radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n radioChecked: (\n <RadioButtonSelected color={checkedColor} className={classes.icon} />\n ),\n };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n id,\n name,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n checked,\n defaultChecked,\n onChange,\n semantic = false,\n inputProps,\n onFocusVisible,\n onBlur,\n ...others\n } = useDefaultProps(\"HvBaseRadio\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible]\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur]\n );\n\n const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n return (\n <MuiRadio\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.focusVisible]: focusVisible,\n },\n className\n )}\n icon={icons.radio}\n checkedIcon={icons.radioChecked}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;AA2Fa,MAAA,mBAAmB,CAC9B,SACA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAEK,SAAA;AAAA,IACL,OAAQ,oBAAA,uBAAA,EAAsB,OAAc,WAAW,QAAQ,MAAM;AAAA,IACrE,cACG,oBAAA,qBAAA,EAAoB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGzE;AAQO,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,MAAM;AAAA,QACZ,aAAa,MAAM;AAAA,QACnB,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BaseSwitch.js","sources":["../../../src/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the switch.\n */\n classes?: HvBaseSwitchClasses;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the switch is selected, if set to `false` the switch is not selected.\n *\n * When defined the switch state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * The callback fired when the switch is pressed.\n */\n onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /**\n * @ignore\n */\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n\n required = false,\n readOnly = false,\n disabled = false,\n\n checked,\n defaultChecked,\n\n onChange,\n\n inputProps,\n\n onFocusVisible,\n onBlur,\n\n ...others\n } = useDefaultProps(\"HvBaseSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible]\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur]\n );\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n return (\n <MuiSwitch\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n [classes.focusVisible]: focusVisible,\n },\n className\n )}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n classes={{\n root: classes.switch,\n switchBase: classes.switchBase,\n checked: classes.checked,\n track: classes.track,\n thumb: classes.thumb,\n disabled: classes.disabled,\n }}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;AAuFO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MAER,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAAwC;AACvC,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAAwC;AACvC,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,YAAY,QAAQ;AAAA,UACpB,SAAS,QAAQ;AAAA,UACjB,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,UACf,UAAU,QAAQ;AAAA,QACpB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
1
+ {"version":3,"file":"BaseSwitch.js","sources":["../../../src/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses, staticClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n extends Omit<MuiSwitchProps, \"onChange\" | \"classes\"> {\n /**\n * Class names to be applied.\n */\n className?: string;\n /**\n * A Jss Object used to override or extend the styles applied to the switch.\n */\n classes?: HvBaseSwitchClasses;\n /**\n * Id to be applied to the root node.\n */\n id?: string;\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the switch is selected, if set to `false` the switch is not selected.\n *\n * When defined the switch state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * The callback fired when the switch is pressed.\n */\n onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /**\n * @ignore\n */\n onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n value = \"on\",\n\n required = false,\n readOnly = false,\n disabled = false,\n\n checked,\n defaultChecked,\n\n onChange,\n\n inputProps,\n\n onFocusVisible,\n onBlur,\n\n ...others\n } = useDefaultProps(\"HvBaseSwitch\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const onFocusVisibleCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(true);\n onFocusVisible?.(evt);\n },\n [onFocusVisible]\n );\n\n const onBlurCallback = useCallback(\n (evt: React.FocusEvent<any, Element>) => {\n setFocusVisible(false);\n onBlur?.(evt);\n },\n [onBlur]\n );\n\n const onLocalChange = useCallback(\n (evt: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(evt, evt.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n return (\n <MuiSwitch\n ref={ref}\n id={id}\n name={name}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n [classes.focusVisible]: focusVisible,\n },\n className\n )}\n color=\"default\"\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n disableRipple\n onChange={onLocalChange}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n classes={{\n root: classes.switch,\n switchBase: classes.switchBase,\n checked: classes.checked,\n track: classes.track,\n thumb: classes.thumb,\n disabled: classes.disabled,\n }}\n inputProps={inputProps}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n {...others}\n />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;AAuFO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MAER,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MAEX;AAAA,MACA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAAwC;AACvC,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAAwC;AACvC,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGT,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QACF;AAEA,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAAA;AAI1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UAC1B;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,YAAY,QAAQ;AAAA,UACpB,SAAS,QAAQ;AAAA,UACjB,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,UACf,UAAU,QAAQ;AAAA,QACpB;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BreadCrumb.js","sources":["../../../src/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement, MouseEvent } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvTypography } from \"../Typography\";\n\nimport { HvPathElement } from \"./PathElement\";\nimport { HvBreadCrumbPage } from \"./Page\";\nimport { staticClasses, useClasses } from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport { HvBreadCrumbPathElement } from \"./types\";\n\nexport { staticClasses as breadCrumbClasses };\n\nexport type HvBreadCrumbClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** List of breadcrumb. */\n listRoute?: HvBreadCrumbPathElement[];\n /** URL to build the breadcrumb. */\n url?: string;\n /** Number of pages visible. */\n maxVisible?: number;\n /** The component used for the link node. Either a string to use a DOM element or a component. */\n component?: React.ElementType;\n /** Function passed to the component. If defined the component prop is used as the link node. */\n onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n /** Props passed down to the DropDownMenu sub-menu component. */\n dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n const {\n classes: classesProp,\n className,\n id,\n listRoute = [],\n maxVisible,\n url,\n onClick,\n component,\n dropDownMenuProps,\n ...others\n } = useDefaultProps(\"HvBreadCrumb\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n let listPath = listRoute.slice();\n\n // build the listPath object list\n if (url != null) {\n listPath = [];\n\n // get the domain\n const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n // get url without domain\n const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n pathNames.map((elem, index) =>\n listPath.push({\n label: decodeURI(elem),\n path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n })\n );\n }\n\n const breadcrumbPath =\n maxVisibleElem && listPath.length > maxVisibleElem\n ? pathWithSubMenu(\n id,\n listPath,\n maxVisibleElem,\n onClick,\n dropDownMenuProps\n )\n : listPath;\n\n return (\n <nav id={id} className={cx(classes.root, className)} {...others}>\n <ol className={classes.orderedList}>\n {listPath.map((elem, index) => {\n const key = `key_${index}`;\n const isLast = index === breadcrumbPath.length - 1;\n\n return (\n <HvPathElement\n classes={{\n centerContainer: classes.centerContainer,\n separatorContainer: classes.separatorContainer,\n }}\n key={key}\n last={isLast}\n >\n {(isValidElement(elem) && elem) ||\n (isLast && (\n <HvTypography className={classes.currentPage} variant=\"body\">\n {removeExtension(elem.label)}\n </HvTypography>\n )) || (\n <HvBreadCrumbPage\n elem={elem}\n classes={{\n a: classes.a,\n link: classes.link,\n }}\n component={component}\n onClick={onClick}\n />\n )}\n </HvPathElement>\n );\n })}\n </ol>\n </nav>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAuCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY,CAAC;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,iBAAiB,cAAc,aAAa,IAAI,IAAI;AACtD,MAAA,WAAW,UAAU;AAGzB,MAAI,OAAO,MAAM;AACf,eAAW,CAAA;AAGL,UAAA,UAAU,IAAI,MAAM,cAAc;AAGxC,UAAM,mBAAmB,IAAI,QAAQ,gBAAgB,EAAE;AAEjD,UAAA,YAAY,iBAAiB,MAAM,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC;AAEnD,cAAA;AAAA,MAAI,CAAC,MAAM,UACnB,SAAS,KAAK;AAAA,QACZ,OAAO,UAAU,IAAI;AAAA,QACrB,MAAM,GAAG,OAAO,IAAI,UAAU,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,MAAA,CAC5D;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,iBACJ,kBAAkB,SAAS,SAAS,iBAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAEF,IAAA;AAGJ,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAC,oBAAA,MAAA,EAAG,WAAW,QAAQ,aACpB,mBAAS,IAAI,CAAC,MAAM,UAAU;AACvB,UAAA,MAAM,OAAO,KAAK;AAClB,UAAA,SAAS,UAAU,eAAe,SAAS;AAG/C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,iBAAiB,QAAQ;AAAA,UACzB,oBAAoB,QAAQ;AAAA,QAC9B;AAAA,QAEA,MAAM;AAAA,QAEJ,yBAAe,IAAI,KAAK,QACvB,8BACE,cAAa,EAAA,WAAW,QAAQ,aAAa,SAAQ,QACnD,UAAA,gBAAgB,KAAK,KAAK,EAC7B,CAAA,KAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,cACP,GAAG,QAAQ;AAAA,cACX,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAjBC;AAAA,IAAA;AAAA,EAmBP,CAEH,GACH,EACF,CAAA;AAEJ;"}
1
+ {"version":3,"file":"BreadCrumb.js","sources":["../../../src/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvTypography } from \"../Typography\";\n\nimport { HvPathElement } from \"./PathElement\";\nimport { HvBreadCrumbPage } from \"./Page\";\nimport { staticClasses, useClasses } from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport { HvBreadCrumbPathElement } from \"./types\";\n\nexport { staticClasses as breadCrumbClasses };\n\nexport type HvBreadCrumbClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbProps\n extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n /** List of breadcrumb. */\n listRoute?: HvBreadCrumbPathElement[];\n /** URL to build the breadcrumb. */\n url?: string;\n /** Number of pages visible. */\n maxVisible?: number;\n /** The component used for the link node. Either a string to use a DOM element or a component. */\n component?: React.ElementType;\n /** Function passed to the component. If defined the component prop is used as the link node. */\n onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void;\n /** Props passed down to the DropDownMenu sub-menu component. */\n dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n const {\n classes: classesProp,\n className,\n id,\n listRoute = [],\n maxVisible,\n url,\n onClick,\n component,\n dropDownMenuProps,\n ...others\n } = useDefaultProps(\"HvBreadCrumb\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n let listPath = listRoute.slice();\n\n // build the listPath object list\n if (url != null) {\n listPath = [];\n\n // get the domain\n const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n // get url without domain\n const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n pathNames.map((elem, index) =>\n listPath.push({\n label: decodeURI(elem),\n path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n })\n );\n }\n\n const breadcrumbPath =\n maxVisibleElem && listPath.length > maxVisibleElem\n ? pathWithSubMenu(\n id,\n listPath,\n maxVisibleElem,\n onClick,\n dropDownMenuProps\n )\n : listPath;\n\n return (\n <nav id={id} className={cx(classes.root, className)} {...others}>\n <ol className={classes.orderedList}>\n {listPath.map((elem, index) => {\n const key = `key_${index}`;\n const isLast = index === breadcrumbPath.length - 1;\n\n return (\n <HvPathElement\n classes={{\n centerContainer: classes.centerContainer,\n separatorContainer: classes.separatorContainer,\n }}\n key={key}\n last={isLast}\n >\n {(isValidElement(elem) && elem) ||\n (isLast && (\n <HvTypography className={classes.currentPage} variant=\"body\">\n {removeExtension(elem.label)}\n </HvTypography>\n )) || (\n <HvBreadCrumbPage\n elem={elem}\n classes={{\n a: classes.a,\n link: classes.link,\n }}\n component={component}\n onClick={onClick}\n />\n )}\n </HvPathElement>\n );\n })}\n </ol>\n </nav>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAuCa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY,CAAC;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,iBAAiB,cAAc,aAAa,IAAI,IAAI;AACtD,MAAA,WAAW,UAAU;AAGzB,MAAI,OAAO,MAAM;AACf,eAAW,CAAA;AAGL,UAAA,UAAU,IAAI,MAAM,cAAc;AAGxC,UAAM,mBAAmB,IAAI,QAAQ,gBAAgB,EAAE;AAEjD,UAAA,YAAY,iBAAiB,MAAM,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC;AAEnD,cAAA;AAAA,MAAI,CAAC,MAAM,UACnB,SAAS,KAAK;AAAA,QACZ,OAAO,UAAU,IAAI;AAAA,QACrB,MAAM,GAAG,OAAO,IAAI,UAAU,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,GAAG,CAAC;AAAA,MAAA,CAC5D;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,iBACJ,kBAAkB,SAAS,SAAS,iBAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAEF,IAAA;AAGJ,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAC,oBAAA,MAAA,EAAG,WAAW,QAAQ,aACpB,mBAAS,IAAI,CAAC,MAAM,UAAU;AACvB,UAAA,MAAM,OAAO,KAAK;AAClB,UAAA,SAAS,UAAU,eAAe,SAAS;AAG/C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,iBAAiB,QAAQ;AAAA,UACzB,oBAAoB,QAAQ;AAAA,QAC9B;AAAA,QAEA,MAAM;AAAA,QAEJ,yBAAe,IAAI,KAAK,QACvB,8BACE,cAAa,EAAA,WAAW,QAAQ,aAAa,SAAQ,QACnD,UAAA,gBAAgB,KAAK,KAAK,EAC7B,CAAA,KAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,cACP,GAAG,QAAQ;AAAA,cACX,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAjBC;AAAA,IAAA;AAAA,EAmBP,CAEH,GACH,EACF,CAAA;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Page.js","sources":["../../../../src/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvBreadCrumbPathElement } from \"../types\";\nimport { staticClasses, useClasses } from \"./Page.styles\";\n\nexport { staticClasses as breadCrumbPageClasses };\n\nexport type HvBreadCrumbPageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbPageProps {\n component?: React.ElementType;\n onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n elem: HvBreadCrumbPathElement;\n classes?: HvBreadCrumbPageClasses;\n}\n\nexport const HvBreadCrumbPage = (props: HvBreadCrumbPageProps) => {\n const {\n component,\n onClick,\n elem,\n classes: classesProp,\n } = useDefaultProps(\"HvBreadCrumbPage\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { label, path, ...others } = elem;\n\n const handleClick = (event: MouseEvent<HTMLElement>) => {\n event.preventDefault();\n onClick?.(event, elem);\n };\n\n return (\n <HvTypography\n noWrap\n variant=\"label\"\n component={component || \"a\"}\n href={elem.path}\n onClick={onClick && handleClick}\n className={cx(classes.link, classes.label, classes.a)}\n {...others}\n >\n <HvOverflowTooltip data={elem.label} />\n </HvTypography>\n );\n};\n"],"names":[],"mappings":";;;;;;AAqBa,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,OAAO,MAAM,GAAG,WAAW;AAE7B,QAAA,cAAc,CAAC,UAAmC;AACtD,UAAM,eAAe;AACrB,cAAU,OAAO,IAAI;AAAA,EAAA;AAIrB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,SAAQ;AAAA,MACR,WAAW,aAAa;AAAA,MACxB,MAAM,KAAK;AAAA,MACX,SAAS,WAAW;AAAA,MACpB,WAAW,GAAG,QAAQ,MAAM,QAAQ,OAAO,QAAQ,CAAC;AAAA,MACnD,GAAG;AAAA,MAEJ,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,OAAO;AAAA,IAAA;AAAA,EAAA;AAG3C;"}
1
+ {"version":3,"file":"Page.js","sources":["../../../../src/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import { HvTypography } from \"../../Typography\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvBreadCrumbPathElement } from \"../types\";\nimport { staticClasses, useClasses } from \"./Page.styles\";\n\nexport { staticClasses as breadCrumbPageClasses };\n\nexport type HvBreadCrumbPageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbPageProps {\n component?: React.ElementType;\n onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void;\n elem: HvBreadCrumbPathElement;\n classes?: HvBreadCrumbPageClasses;\n}\n\nexport const HvBreadCrumbPage = (props: HvBreadCrumbPageProps) => {\n const {\n component,\n onClick,\n elem,\n classes: classesProp,\n } = useDefaultProps(\"HvBreadCrumbPage\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const { label, path, ...others } = elem;\n\n const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n onClick?.(event, elem);\n };\n\n return (\n <HvTypography\n noWrap\n variant=\"label\"\n component={component || \"a\"}\n href={elem.path}\n onClick={onClick && handleClick}\n className={cx(classes.link, classes.label, classes.a)}\n {...others}\n >\n <HvOverflowTooltip data={elem.label} />\n </HvTypography>\n );\n};\n"],"names":[],"mappings":";;;;;;AAmBa,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,OAAO,MAAM,GAAG,WAAW;AAE7B,QAAA,cAAc,CAAC,UAAyC;AAC5D,UAAM,eAAe;AACrB,cAAU,OAAO,IAAI;AAAA,EAAA;AAIrB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,SAAQ;AAAA,MACR,WAAW,aAAa;AAAA,MACxB,MAAM,KAAK;AAAA,MACX,SAAS,WAAW;AAAA,MACpB,WAAW,GAAG,QAAQ,MAAM,QAAQ,OAAO,QAAQ,CAAC;AAAA,MACnD,GAAG;AAAA,MAEJ,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,OAAO;AAAA,IAAA;AAAA,EAAA;AAG3C;"}
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sources":["../../../src/BreadCrumb/utils.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { MoreOptionsHorizontal } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { setId } from \"../utils/setId\";\n\nexport const removeExtension = (label: string) =>\n label.includes(\".\") ? label.substring(0, label.lastIndexOf(\".\")) : label;\n\nexport const pathWithSubMenu = (\n id: string | undefined,\n listRoute: any,\n maxVisible: number,\n onClick?: (event: MouseEvent<HTMLElement>, data: any) => void,\n dropDownMenuProps?: Partial<HvDropDownMenuProps>\n) => {\n const nbrElemToSubMenu = listRoute.length - maxVisible;\n const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);\n\n const handleClick = (event: any, data: any) => {\n event.preventDefault();\n\n onClick?.(event, data);\n };\n\n listRoute.splice(\n 1,\n nbrElemToSubMenu,\n <HvDropDownMenu\n id={setId(id, \"submenu\")}\n icon={<MoreOptionsHorizontal iconSize=\"S\" color=\"secondary\" />}\n dataList={subMenuList}\n {...dropDownMenuProps}\n onClick={onClick != null ? handleClick : undefined}\n />\n );\n\n return listRoute;\n};\n"],"names":[],"mappings":";;;;AAOO,MAAM,kBAAkB,CAAC,UAC9B,MAAM,SAAS,GAAG,IAAI,MAAM,UAAU,GAAG,MAAM,YAAY,GAAG,CAAC,IAAI;AAE9D,MAAM,kBAAkB,CAC7B,IACA,WACA,YACA,SACA,sBACG;AACG,QAAA,mBAAmB,UAAU,SAAS;AAC5C,QAAM,cAAc,UAAU,MAAM,GAAG,mBAAmB,CAAC;AAErD,QAAA,cAAc,CAAC,OAAY,SAAc;AAC7C,UAAM,eAAe;AAErB,cAAU,OAAO,IAAI;AAAA,EAAA;AAGb,YAAA;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,SAAS;AAAA,QACvB,MAAO,oBAAA,uBAAA,EAAsB,UAAS,KAAI,OAAM,aAAY;AAAA,QAC5D,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,SAAS,WAAW,OAAO,cAAc;AAAA,MAAA;AAAA,IAC3C;AAAA,EAAA;AAGK,SAAA;AACT;"}
1
+ {"version":3,"file":"utils.js","sources":["../../../src/BreadCrumb/utils.tsx"],"sourcesContent":["import { MoreOptionsHorizontal } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { setId } from \"../utils/setId\";\n\nexport const removeExtension = (label: string) =>\n label.includes(\".\") ? label.substring(0, label.lastIndexOf(\".\")) : label;\n\nexport const pathWithSubMenu = (\n id: string | undefined,\n listRoute: any,\n maxVisible: number,\n onClick?: (event: React.MouseEvent<HTMLElement>, data: any) => void,\n dropDownMenuProps?: Partial<HvDropDownMenuProps>\n) => {\n const nbrElemToSubMenu = listRoute.length - maxVisible;\n const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);\n\n const handleClick = (event: any, data: any) => {\n event.preventDefault();\n\n onClick?.(event, data);\n };\n\n listRoute.splice(\n 1,\n nbrElemToSubMenu,\n <HvDropDownMenu\n id={setId(id, \"submenu\")}\n icon={<MoreOptionsHorizontal iconSize=\"S\" color=\"secondary\" />}\n dataList={subMenuList}\n {...dropDownMenuProps}\n onClick={onClick != null ? handleClick : undefined}\n />\n );\n\n return listRoute;\n};\n"],"names":[],"mappings":";;;;AAKO,MAAM,kBAAkB,CAAC,UAC9B,MAAM,SAAS,GAAG,IAAI,MAAM,UAAU,GAAG,MAAM,YAAY,GAAG,CAAC,IAAI;AAE9D,MAAM,kBAAkB,CAC7B,IACA,WACA,YACA,SACA,sBACG;AACG,QAAA,mBAAmB,UAAU,SAAS;AAC5C,QAAM,cAAc,UAAU,MAAM,GAAG,mBAAmB,CAAC;AAErD,QAAA,cAAc,CAAC,OAAY,SAAc;AAC7C,UAAM,eAAe;AAErB,cAAU,OAAO,IAAI;AAAA,EAAA;AAGb,YAAA;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM,IAAI,SAAS;AAAA,QACvB,MAAO,oBAAA,uBAAA,EAAsB,UAAS,KAAI,OAAM,aAAY;AAAA,QAC5D,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,SAAS,WAAW,OAAO,cAAc;AAAA,MAAA;AAAA,IAC3C;AAAA,EAAA;AAGK,SAAA;AACT;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { setId } from \"../utils/setId\";\nimport { HvFormElementContext, HvFormElementValueContext } from \"../Forms\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { isRange } from \"./utils\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\n\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n /**\n * Styles applied from the theme.\n */\n classes?: HvCalendarClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The calendar locale. If undefined, it defaults to en-US\n *\n */\n locale?: string;\n /**\n * Date that the calendar would show.\n * if using the object format the calendar enter in range mode showing two calendars\n */\n value?: DateRangeProp | Date;\n /**\n * Controls the visible month of the Calendar\n */\n visibleMonth?: number;\n /**\n * Controls the visible year of the Calendar\n */\n visibleYear?: number;\n /**\n * Controls the visible month of the Calendar on the right side of the datepicker\n */\n rightVisibleMonth?: number;\n /**\n * Controls the visible year of the Calendar on the right side of the datepicker\n */\n rightVisibleYear?: number;\n /**\n * Callback function to be triggered when the selected date has changed.\n */\n onChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n value: Date | DateRangeProp\n ) => void;\n /**\n * Callback function to be triggered when the selected date input has changed.\n */\n onInputChange?: (\n event:\n | React.ChangeEvent<\n HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n >\n | undefined,\n value: Date | DateRangeProp,\n position: \"left\" | \"right\"\n ) => void;\n /**\n * Callback function to be triggered when the user clicks on the month or year selector.\n * it receives the action that was pressed:\n * previous_month, next_month, previous_year, next_year,month\n */\n onVisibleDateChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n action: VisibilitySelectorActions,\n value?: Date | DateRangeProp | number,\n position?: \"left\" | \"right\"\n ) => void;\n /**\n * The maximum selectable date after this all values are disabled.\n */\n maximumDate?: Date;\n /**\n * The minimum selectable date before this all values are disabled.\n */\n minimumDate?: Date;\n /**\n * An element placed before the Calendar\n */\n startAdornment?: React.ReactNode;\n /**\n * Indicates if header should display the day of week.\n */\n showDayOfWeek?: boolean;\n /**\n * Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n const {\n classes: classesProp,\n id,\n locale = \"en-US\",\n value,\n visibleMonth,\n visibleYear,\n rightVisibleMonth,\n rightVisibleYear,\n minimumDate,\n maximumDate,\n startAdornment,\n onChange,\n onInputChange,\n onVisibleDateChange,\n invalidDateLabel,\n ...others\n } = useDefaultProps(\"HvCalendar\", props);\n const { classes } = useClasses(classesProp);\n\n const { elementId } = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const localValue = value ?? elementValue;\n const localId = id ?? setId(elementId, \"single-calendar\");\n const rangeMode = isRange(localValue);\n const rightCalendarId = setId(localId, \"single-calendar-right\");\n const clampedMonth =\n visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n const singleCalendar = (\n <HvSingleCalendar\n id={localId}\n locale={locale}\n value={localValue}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) =>\n onInputChange && onInputChange(evt, date, \"left\")\n }\n onVisibleDateChange={onVisibleDateChange}\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n );\n\n const rangeCalendar = (\n <div className={classes.rangeCalendarContainer}>\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={localId}\n locale={locale}\n value={localValue}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) =>\n onInputChange && onInputChange(evt, date, \"left\")\n }\n onVisibleDateChange={(event, action, index) =>\n onVisibleDateChange?.(event, action, index, \"left\")\n }\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={rightCalendarId}\n locale={locale}\n value={localValue}\n visibleMonth={rightVisibleMonth}\n visibleYear={rightVisibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) =>\n onInputChange && onInputChange(evt, date, \"right\")\n }\n onVisibleDateChange={(event, action, index) => {\n onVisibleDateChange?.(event, action, index, \"right\");\n }}\n showEndDate\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n </div>\n );\n\n return (\n <div className={classes.root}>\n {startAdornment}\n {rangeMode ? rangeCalendar : singleCalendar}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8Ga,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AAC/C,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,aAAa,SAAS;AAC5B,QAAM,UAAU,MAAM,MAAM,WAAW,iBAAiB;AAClD,QAAA,YAAY,QAAQ,UAAU;AAC9B,QAAA,kBAAkB,MAAM,SAAS,uBAAuB;AAC9D,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,MAElD;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,QAElD,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,OAAO;AAAA,QAEnD,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EACF,EAAA,CAAA;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAC/B,EAAA,CAAA;AAEJ;"}
1
+ {"version":3,"file":"Calendar.js","sources":["../../../src/Calendar/Calendar.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { setId } from \"../utils/setId\";\nimport { HvFormElementContext, HvFormElementValueContext } from \"../Forms\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { isRange } from \"./utils\";\nimport { HvSingleCalendar } from \"./SingleCalendar\";\nimport { DateRangeProp, VisibilitySelectorActions } from \"./types\";\n\nimport { staticClasses, useClasses } from \"./Calendar.styles\";\n\nexport { staticClasses as calendarClasses };\n\nexport type HvCalendarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCalendarProps {\n /**\n * Styles applied from the theme.\n */\n classes?: HvCalendarClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The calendar locale. If undefined, it defaults to en-US\n *\n */\n locale?: string;\n /**\n * Date that the calendar would show.\n * if using the object format the calendar enter in range mode showing two calendars\n */\n value?: DateRangeProp | Date;\n /**\n * Controls the visible month of the Calendar\n */\n visibleMonth?: number;\n /**\n * Controls the visible year of the Calendar\n */\n visibleYear?: number;\n /**\n * Controls the visible month of the Calendar on the right side of the datepicker\n */\n rightVisibleMonth?: number;\n /**\n * Controls the visible year of the Calendar on the right side of the datepicker\n */\n rightVisibleYear?: number;\n /**\n * Callback function to be triggered when the selected date has changed.\n */\n onChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n value: Date | DateRangeProp\n ) => void;\n /**\n * Callback function to be triggered when the selected date input has changed.\n */\n onInputChange?: (\n event:\n | React.ChangeEvent<\n HTMLTextAreaElement | HTMLInputElement | HTMLButtonElement\n >\n | undefined,\n value: Date | DateRangeProp,\n position: \"left\" | \"right\"\n ) => void;\n /**\n * Callback function to be triggered when the user clicks on the month or year selector.\n * it receives the action that was pressed:\n * previous_month, next_month, previous_year, next_year,month\n */\n onVisibleDateChange?: (\n event:\n | React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>\n | undefined,\n action: VisibilitySelectorActions,\n value?: Date | DateRangeProp | number,\n position?: \"left\" | \"right\"\n ) => void;\n /**\n * The maximum selectable date after this all values are disabled.\n */\n maximumDate?: Date;\n /**\n * The minimum selectable date before this all values are disabled.\n */\n minimumDate?: Date;\n /**\n * An element placed before the Calendar\n */\n startAdornment?: React.ReactNode;\n /**\n * Indicates if header should display the day of week.\n */\n showDayOfWeek?: boolean;\n /**\n * Label shown when date is invalid.\n */\n invalidDateLabel?: string;\n}\n\nexport const HvCalendar = (props: HvCalendarProps) => {\n const {\n classes: classesProp,\n id,\n locale = \"en-US\",\n value,\n visibleMonth,\n visibleYear,\n rightVisibleMonth,\n rightVisibleYear,\n minimumDate,\n maximumDate,\n startAdornment,\n onChange,\n onInputChange,\n onVisibleDateChange,\n invalidDateLabel,\n ...others\n } = useDefaultProps(\"HvCalendar\", props);\n const { classes } = useClasses(classesProp);\n\n const { elementId } = useContext(HvFormElementContext);\n const elementValue = useContext(HvFormElementValueContext);\n const localValue = value ?? elementValue;\n const localId = id ?? setId(elementId, \"single-calendar\");\n const rangeMode = isRange(localValue);\n const rightCalendarId = setId(localId, \"single-calendar-right\");\n const clampedMonth =\n visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n const singleCalendar = (\n <HvSingleCalendar\n id={localId}\n locale={locale}\n value={localValue}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) =>\n onInputChange && onInputChange(evt, date, \"left\")\n }\n onVisibleDateChange={onVisibleDateChange}\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n );\n\n const rangeCalendar = (\n <div className={classes.rangeCalendarContainer}>\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={localId}\n locale={locale}\n value={localValue}\n visibleMonth={clampedMonth}\n visibleYear={visibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) =>\n onInputChange && onInputChange(evt, date, \"left\")\n }\n onVisibleDateChange={(event, action, index) =>\n onVisibleDateChange?.(event, action, index, \"left\")\n }\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n\n <HvSingleCalendar\n className={classes.singleCalendar}\n id={rightCalendarId}\n locale={locale}\n value={localValue}\n visibleMonth={rightVisibleMonth}\n visibleYear={rightVisibleYear}\n minimumDate={minimumDate}\n maximumDate={maximumDate}\n onChange={onChange}\n onInputChange={(evt, date) =>\n onInputChange && onInputChange(evt, date, \"right\")\n }\n onVisibleDateChange={(event, action, index) => {\n onVisibleDateChange?.(event, action, index, \"right\");\n }}\n showEndDate\n invalidDateLabel={invalidDateLabel}\n {...others}\n />\n </div>\n );\n\n return (\n <div className={classes.root}>\n {startAdornment}\n {rangeMode ? rangeCalendar : singleCalendar}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8Ga,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AAC/C,QAAA,eAAe,WAAW,yBAAyB;AACzD,QAAM,aAAa,SAAS;AAC5B,QAAM,UAAU,MAAM,MAAM,WAAW,iBAAiB;AAClD,QAAA,YAAY,QAAQ,UAAU;AAC9B,QAAA,kBAAkB,MAAM,SAAS,uBAAuB;AAC9D,QAAM,eACJ,gBAAgB,eAAe,KAAK,IAAI,eAAe,KAAK;AAE9D,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,MAElD;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,gBACJ,qBAAC,OAAI,EAAA,WAAW,QAAQ,wBACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,MAAM;AAAA,QAElD,qBAAqB,CAAC,OAAO,QAAQ,UACnC,sBAAsB,OAAO,QAAQ,OAAO,MAAM;AAAA,QAEpD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,IAAI;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP,cAAc;AAAA,QACd,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,CAAC,KAAK,SACnB,iBAAiB,cAAc,KAAK,MAAM,OAAO;AAAA,QAEnD,qBAAqB,CAAC,OAAO,QAAQ,UAAU;AACvB,gCAAA,OAAO,QAAQ,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EACF,EAAA,CAAA;AAGF,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAA;AAAA,IAAA;AAAA,IACA,YAAY,gBAAgB;AAAA,EAC/B,EAAA,CAAA;AAEJ;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarCell.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { SyntheticEvent, useRef } from \"react\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport {\n isSameDay,\n isSameMonth,\n dateInProvidedValueRange,\n checkIfDateIsDisabled,\n isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport CalendarModel from \"../model\";\n\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = (props: HvCalendarCellProps) => {\n const {\n classes: classesProp,\n onChange,\n onKeyDown,\n calendarValue,\n firstDayOfCurrentMonth,\n value,\n isDateSelectionMode,\n today,\n locale,\n minimumDate,\n maximumDate,\n rangeMode = false,\n ...others\n } = useDefaultProps(\"HvCalendarCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const buttonEl = useRef<HTMLButtonElement>(null);\n\n const startDate = isDateRangeProp(calendarValue)\n ? calendarValue.startDate\n : undefined;\n const endDate = isDateRangeProp(calendarValue)\n ? calendarValue.endDate\n : undefined;\n const isCellToday = isSameDay(value, today);\n const isCellSelected = isSameDay(calendarValue, value);\n const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n const isCellAfterStartingDate =\n rangeMode && value && startDate ? value >= startDate : false;\n const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n const isDateInSelectionRange =\n calendarValue && rangeMode\n ? dateInProvidedValueRange(value, calendarValue)\n : false;\n const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n const startBookend = isSameDay(startDate, value);\n const endBookend = isSameDay(endDate, value);\n const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n const handleClick = (event: SyntheticEvent) => {\n if (value) {\n onChange?.(event, value);\n if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n }\n };\n\n const handleKeyDown = (event: any) => {\n onKeyDown?.(event);\n };\n\n const renderDate = () => (\n <button\n ref={buttonEl}\n type=\"button\"\n className={cx(classes.cellContainer, {\n [classes.focusSelection]: inMonth,\n })}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={isDateDisabled || !inMonth}\n data-in-month={inMonth}\n {...others}\n >\n <HvTypography\n variant={isCellToday ? \"label\" : \"body\"}\n className={cx(classes.calendarDate, {\n [classes.calendarDateSelected]: inMonth && isCellSelected,\n [classes.calendarDateNotInMonth]: !inMonth,\n [classes.calendarDateInSelectionRange]:\n inMonth && rangeMode && isDateInSelectionRange,\n [classes.calendarDateDisabled]: isDateDisabled,\n [classes.startBookend]:\n inMonth &&\n ((startBookend && rangeMode) ||\n (isCellStartingDate && isDateSelectionMode)),\n [classes.endBookend]: inMonth && endBookend && rangeMode,\n })}\n >\n {value && value.getDate()}\n </HvTypography>\n </button>\n );\n\n return (\n <div\n className={cx(classes.dateWrapper, {\n [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n })}\n data-calendar-cell=\"calendarCell\"\n >\n {renderDate()}\n </div>\n );\n};\n\nexport interface HvCalendarCellProps {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvCalendarCellClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The text to be shown on the main part of the header.\n */\n calendarValue?: string | Date | DateRangeProp;\n /**\n * The text to be shown on the main part of the header.\n */\n value?: Date;\n /**\n * Locale to be used by the calendar.\n */\n locale?: string;\n /**\n * Callback to define the input date.\n */\n onChange?: (event: SyntheticEvent, value: Date | DateRangeProp) => void;\n /**\n * Callback to handle input onFocus.\n */\n onFocus?: React.FocusEventHandler<any>;\n\n calendarModel?: CalendarModel;\n onKeyDown?: (event: KeyboardEvent) => void;\n\n today?: Date;\n minimumDate?: Date;\n maximumDate?: Date;\n firstDayOfCurrentMonth?: Date;\n isDateSelectionMode?: boolean;\n rangeMode?: boolean;\n tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":[],"mappings":";;;;;;;AAsBa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,WAAW,OAA0B,IAAI;AAE/C,QAAM,YAAY,gBAAgB,aAAa,IAC3C,cAAc,YACd;AACJ,QAAM,UAAU,gBAAgB,aAAa,IACzC,cAAc,UACd;AACE,QAAA,cAAc,UAAU,OAAO,KAAK;AACpC,QAAA,iBAAiB,UAAU,eAAe,KAAK;AAC/C,QAAA,UAAU,YAAY,OAAO,sBAAsB;AACzD,QAAM,0BACJ,aAAa,SAAS,YAAY,SAAS,YAAY;AACzD,QAAM,qBAAqB,YAAY,UAAU,OAAO,SAAS,IAAI;AACrE,QAAM,yBACJ,iBAAiB,YACb,yBAAyB,OAAO,aAAa,IAC7C;AACN,QAAM,iBAAiB,sBAAsB,OAAO,aAAa,WAAW;AACtE,QAAA,eAAe,UAAU,WAAW,KAAK;AACzC,QAAA,aAAa,UAAU,SAAS,KAAK;AAC3C,QAAM,cAAc,uBAAuB;AAErC,QAAA,cAAc,CAAC,UAA0B;AAC7C,QAAI,OAAO;AACT,iBAAW,OAAO,KAAK;AACvB,UAAI,SAAS;AAAS,mBAAW,MAAM,UAAU,SAAS,MAAO,CAAA;AAAA,IACnE;AAAA,EAAA;AAGI,QAAA,gBAAgB,CAAC,UAAe;AACpC,gBAAY,KAAK;AAAA,EAAA;AAGnB,QAAM,aAAa,MACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,eAAe;AAAA,QACnC,CAAC,QAAQ,cAAc,GAAG;AAAA,MAAA,CAC3B;AAAA,MACD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,kBAAkB,CAAC;AAAA,MAC7B,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,cAAc,UAAU;AAAA,UACjC,WAAW,GAAG,QAAQ,cAAc;AAAA,YAClC,CAAC,QAAQ,oBAAoB,GAAG,WAAW;AAAA,YAC3C,CAAC,QAAQ,sBAAsB,GAAG,CAAC;AAAA,YACnC,CAAC,QAAQ,4BAA4B,GACnC,WAAW,aAAa;AAAA,YAC1B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,YAAY,GACnB,YACE,gBAAgB,aACf,sBAAsB;AAAA,YAC3B,CAAC,QAAQ,UAAU,GAAG,WAAW,cAAc;AAAA,UAAA,CAChD;AAAA,UAEA,UAAA,SAAS,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,aAAa;AAAA,QACjC,CAAC,QAAQ,YAAY,GAAG,WAAW,aAAa;AAAA,QAChD,CAAC,QAAQ,iBAAiB,GAAG,aAAa,CAAC;AAAA,MAAA,CAC5C;AAAA,MACD,sBAAmB;AAAA,MAElB,UAAW,WAAA;AAAA,IAAA;AAAA,EAAA;AAGlB;"}
1
+ {"version":3,"file":"CalendarCell.js","sources":["../../../../src/Calendar/SingleCalendar/CalendarCell.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport {\n isSameDay,\n isSameMonth,\n dateInProvidedValueRange,\n checkIfDateIsDisabled,\n isDateRangeProp,\n} from \"../utils\";\nimport { DateRangeProp } from \"../types\";\nimport CalendarModel from \"../model\";\n\nimport { staticClasses, useClasses } from \"./CalendarCell.styles\";\n\nexport { staticClasses as calendarCellClasses };\n\nexport type HvCalendarCellClasses = ExtractNames<typeof useClasses>;\n\nexport const HvCalendarCell = (props: HvCalendarCellProps) => {\n const {\n classes: classesProp,\n onChange,\n onKeyDown,\n calendarValue,\n firstDayOfCurrentMonth,\n value,\n isDateSelectionMode,\n today,\n locale,\n minimumDate,\n maximumDate,\n rangeMode = false,\n ...others\n } = useDefaultProps(\"HvCalendarCell\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const buttonEl = useRef<HTMLButtonElement>(null);\n\n const startDate = isDateRangeProp(calendarValue)\n ? calendarValue.startDate\n : undefined;\n const endDate = isDateRangeProp(calendarValue)\n ? calendarValue.endDate\n : undefined;\n const isCellToday = isSameDay(value, today);\n const isCellSelected = isSameDay(calendarValue, value);\n const inMonth = isSameMonth(value, firstDayOfCurrentMonth);\n const isCellAfterStartingDate =\n rangeMode && value && startDate ? value >= startDate : false;\n const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;\n const isDateInSelectionRange =\n calendarValue && rangeMode\n ? dateInProvidedValueRange(value, calendarValue)\n : false;\n const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);\n const startBookend = isSameDay(startDate, value);\n const endBookend = isSameDay(endDate, value);\n const isSelecting = isDateSelectionMode && isCellAfterStartingDate;\n\n const handleClick = (event: React.SyntheticEvent) => {\n if (value) {\n onChange?.(event, value);\n if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());\n }\n };\n\n const handleKeyDown = (event: any) => {\n onKeyDown?.(event);\n };\n\n const renderDate = () => (\n <button\n ref={buttonEl}\n type=\"button\"\n className={cx(classes.cellContainer, {\n [classes.focusSelection]: inMonth,\n })}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n disabled={isDateDisabled || !inMonth}\n data-in-month={inMonth}\n {...others}\n >\n <HvTypography\n variant={isCellToday ? \"label\" : \"body\"}\n className={cx(classes.calendarDate, {\n [classes.calendarDateSelected]: inMonth && isCellSelected,\n [classes.calendarDateNotInMonth]: !inMonth,\n [classes.calendarDateInSelectionRange]:\n inMonth && rangeMode && isDateInSelectionRange,\n [classes.calendarDateDisabled]: isDateDisabled,\n [classes.startBookend]:\n inMonth &&\n ((startBookend && rangeMode) ||\n (isCellStartingDate && isDateSelectionMode)),\n [classes.endBookend]: inMonth && endBookend && rangeMode,\n })}\n >\n {value && value.getDate()}\n </HvTypography>\n </button>\n );\n\n return (\n <div\n className={cx(classes.dateWrapper, {\n [classes.cellsInRange]: inMonth && rangeMode && isSelecting,\n [classes.cellsOutsideRange]: rangeMode && !isSelecting,\n })}\n data-calendar-cell=\"calendarCell\"\n >\n {renderDate()}\n </div>\n );\n};\n\nexport interface HvCalendarCellProps {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes?: HvCalendarCellClasses;\n /**\n * Identifier.\n */\n id?: string;\n /**\n * The text to be shown on the main part of the header.\n */\n calendarValue?: string | Date | DateRangeProp;\n /**\n * The text to be shown on the main part of the header.\n */\n value?: Date;\n /**\n * Locale to be used by the calendar.\n */\n locale?: string;\n /**\n * Callback to define the input date.\n */\n onChange?: (event: React.SyntheticEvent, value: Date | DateRangeProp) => void;\n /**\n * Callback to handle input onFocus.\n */\n onFocus?: React.FocusEventHandler<any>;\n\n calendarModel?: CalendarModel;\n onKeyDown?: (event: KeyboardEvent) => void;\n\n today?: Date;\n minimumDate?: Date;\n maximumDate?: Date;\n firstDayOfCurrentMonth?: Date;\n isDateSelectionMode?: boolean;\n rangeMode?: boolean;\n tabIndex?: number;\n}\n\nexport default HvCalendarCell;\n"],"names":[],"mappings":";;;;;;;AAsBa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,WAAW,OAA0B,IAAI;AAE/C,QAAM,YAAY,gBAAgB,aAAa,IAC3C,cAAc,YACd;AACJ,QAAM,UAAU,gBAAgB,aAAa,IACzC,cAAc,UACd;AACE,QAAA,cAAc,UAAU,OAAO,KAAK;AACpC,QAAA,iBAAiB,UAAU,eAAe,KAAK;AAC/C,QAAA,UAAU,YAAY,OAAO,sBAAsB;AACzD,QAAM,0BACJ,aAAa,SAAS,YAAY,SAAS,YAAY;AACzD,QAAM,qBAAqB,YAAY,UAAU,OAAO,SAAS,IAAI;AACrE,QAAM,yBACJ,iBAAiB,YACb,yBAAyB,OAAO,aAAa,IAC7C;AACN,QAAM,iBAAiB,sBAAsB,OAAO,aAAa,WAAW;AACtE,QAAA,eAAe,UAAU,WAAW,KAAK;AACzC,QAAA,aAAa,UAAU,SAAS,KAAK;AAC3C,QAAM,cAAc,uBAAuB;AAErC,QAAA,cAAc,CAAC,UAAgC;AACnD,QAAI,OAAO;AACT,iBAAW,OAAO,KAAK;AACvB,UAAI,SAAS;AAAS,mBAAW,MAAM,UAAU,SAAS,MAAO,CAAA;AAAA,IACnE;AAAA,EAAA;AAGI,QAAA,gBAAgB,CAAC,UAAe;AACpC,gBAAY,KAAK;AAAA,EAAA;AAGnB,QAAM,aAAa,MACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,eAAe;AAAA,QACnC,CAAC,QAAQ,cAAc,GAAG;AAAA,MAAA,CAC3B;AAAA,MACD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,kBAAkB,CAAC;AAAA,MAC7B,iBAAe;AAAA,MACd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,cAAc,UAAU;AAAA,UACjC,WAAW,GAAG,QAAQ,cAAc;AAAA,YAClC,CAAC,QAAQ,oBAAoB,GAAG,WAAW;AAAA,YAC3C,CAAC,QAAQ,sBAAsB,GAAG,CAAC;AAAA,YACnC,CAAC,QAAQ,4BAA4B,GACnC,WAAW,aAAa;AAAA,YAC1B,CAAC,QAAQ,oBAAoB,GAAG;AAAA,YAChC,CAAC,QAAQ,YAAY,GACnB,YACE,gBAAgB,aACf,sBAAsB;AAAA,YAC3B,CAAC,QAAQ,UAAU,GAAG,WAAW,cAAc;AAAA,UAAA,CAChD;AAAA,UAEA,UAAA,SAAS,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,aAAa;AAAA,QACjC,CAAC,QAAQ,YAAY,GAAG,WAAW,aAAa;AAAA,QAChD,CAAC,QAAQ,iBAAiB,GAAG,aAAa,CAAC;AAAA,MAAA,CAC5C;AAAA,MACD,sBAAmB;AAAA,MAElB,UAAW,WAAA;AAAA,IAAA;AAAA,EAAA;AAGlB;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Media.js","sources":["../../../../src/Card/Media/Media.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\nimport MuiCardMedia, {\n CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Media.styles\";\n\nexport { staticClasses as cardMediaClasses };\n\nexport type HvCardMediaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardMediaProps\n extends Omit<MuiCardMediaProps, \"classes\">,\n ImgHTMLAttributes<HTMLDivElement>,\n HvBaseProps<HTMLDivElement, \"onClick\" | \"title\"> {\n /** Id to be applied to the root node. */\n id?: string;\n /** The title of the media. */\n title?: string;\n /** The function that will be executed when this section is clicked. */\n onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n /** The component used for the root node. Either a string to use a HTML element or a component. */\n component?: React.ElementType;\n /** The image to display. */\n image?: string;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n id,\n classes: classesProp,\n className,\n children,\n title,\n onClick,\n ...others\n}: HvCardMediaProps) => {\n const { classes } = useClasses(classesProp);\n return (\n <MuiCardMedia\n id={id}\n classes={{\n root: classes.root,\n media: classes.media,\n }}\n className={className}\n role=\"img\"\n title={title}\n onClick={onClick}\n {...others}\n >\n {children}\n </MuiCardMedia>\n );\n};\n"],"names":[],"mappings":";;;;AAgCO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAExC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"Media.js","sources":["../../../../src/Card/Media/Media.tsx"],"sourcesContent":["import MuiCardMedia, {\n CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Media.styles\";\n\nexport { staticClasses as cardMediaClasses };\n\nexport type HvCardMediaClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardMediaProps\n extends Omit<MuiCardMediaProps, \"classes\">,\n React.ImgHTMLAttributes<HTMLDivElement> {\n /** Id to be applied to the root node. */\n id?: string;\n /** The title of the media. */\n title?: string;\n /** The function that will be executed when this section is clicked. */\n onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n /** The component used for the root node. Either a string to use a HTML element or a component. */\n component?: React.ElementType;\n /** The image to display. */\n image?: string;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n id,\n classes: classesProp,\n className,\n children,\n title,\n onClick,\n ...others\n}: HvCardMediaProps) => {\n const { classes } = useClasses(classesProp);\n return (\n <MuiCardMedia\n id={id}\n classes={{\n root: classes.root,\n media: classes.media,\n }}\n className={className}\n role=\"img\"\n title={title}\n onClick={onClick}\n {...others}\n >\n {children}\n </MuiCardMedia>\n );\n};\n"],"names":[],"mappings":";;;;AA6BO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAExC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}