@doist/reactist 11.5.1 → 12.0.2

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 (280) hide show
  1. package/dist/reactist.cjs.development.js +1336 -1496
  2. package/dist/reactist.cjs.development.js.map +1 -1
  3. package/dist/reactist.cjs.production.min.js +1 -1
  4. package/dist/reactist.cjs.production.min.js.map +1 -1
  5. package/es/_virtual/_rollupPluginBabelHelpers.js +18 -21
  6. package/es/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
  7. package/es/components/checkbox/checkbox.js +7 -9
  8. package/es/components/checkbox/checkbox.js.map +1 -1
  9. package/es/components/color-picker/color-picker.js +24 -28
  10. package/es/components/color-picker/color-picker.js.map +1 -1
  11. package/es/components/deprecated-button/deprecated-button.js +16 -18
  12. package/es/components/deprecated-button/deprecated-button.js.map +1 -1
  13. package/es/components/deprecated-loading/deprecated-loading.js +7 -10
  14. package/es/components/deprecated-loading/deprecated-loading.js.map +1 -1
  15. package/es/components/deprecated-modal/deprecated-modal.js +69 -101
  16. package/es/components/deprecated-modal/deprecated-modal.js.map +1 -1
  17. package/es/components/deprecated-modal/index.js +4 -4
  18. package/es/components/deprecated-modal/index.js.map +1 -1
  19. package/es/components/dropdown/dropdown.js +86 -85
  20. package/es/components/dropdown/dropdown.js.map +1 -1
  21. package/es/components/icons/CloseIcon.svg.js +9 -11
  22. package/es/components/icons/CloseIcon.svg.js.map +1 -1
  23. package/es/components/input/input.js +4 -3
  24. package/es/components/input/input.js.map +1 -1
  25. package/es/components/key-capturer/key-capturer.js +22 -19
  26. package/es/components/key-capturer/key-capturer.js.map +1 -1
  27. package/es/components/keyboard-shortcut/keyboard-shortcut.js +20 -26
  28. package/es/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  29. package/es/components/menu/menu.js +112 -142
  30. package/es/components/menu/menu.js.map +1 -1
  31. package/es/components/notification/notification.js +32 -32
  32. package/es/components/notification/notification.js.map +1 -1
  33. package/es/components/popover/popover.js +85 -91
  34. package/es/components/popover/popover.js.map +1 -1
  35. package/es/components/popover/positioning-utils.js +49 -65
  36. package/es/components/popover/positioning-utils.js.map +1 -1
  37. package/es/components/progress-bar/progress-bar.js +8 -8
  38. package/es/components/progress-bar/progress-bar.js.map +1 -1
  39. package/es/components/select/select.js +20 -25
  40. package/es/components/select/select.js.map +1 -1
  41. package/es/components/time/time-utils.js +30 -47
  42. package/es/components/time/time-utils.js.map +1 -1
  43. package/es/components/time/time.js +43 -56
  44. package/es/components/time/time.js.map +1 -1
  45. package/es/components/tooltip/tooltip.js +40 -46
  46. package/es/components/tooltip/tooltip.js.map +1 -1
  47. package/es/hooks/use-previous/use-previous.js +2 -2
  48. package/es/hooks/use-previous/use-previous.js.map +1 -1
  49. package/es/new-components/alert/alert.js +7 -6
  50. package/es/new-components/alert/alert.js.map +1 -1
  51. package/es/new-components/avatar/avatar.js +19 -18
  52. package/es/new-components/avatar/avatar.js.map +1 -1
  53. package/es/new-components/avatar/utils.js +12 -9
  54. package/es/new-components/avatar/utils.js.map +1 -1
  55. package/es/new-components/base-button/base-button.js +25 -29
  56. package/es/new-components/base-button/base-button.js.map +1 -1
  57. package/es/new-components/base-field/base-field.js +20 -18
  58. package/es/new-components/base-field/base-field.js.map +1 -1
  59. package/es/new-components/box/box.js +51 -52
  60. package/es/new-components/box/box.js.map +1 -1
  61. package/es/new-components/button/button.js +13 -15
  62. package/es/new-components/button/button.js.map +1 -1
  63. package/es/new-components/button-link/button-link.js +13 -15
  64. package/es/new-components/button-link/button-link.js.map +1 -1
  65. package/es/new-components/checkbox-field/checkbox-field.js +25 -33
  66. package/es/new-components/checkbox-field/checkbox-field.js.map +1 -1
  67. package/es/new-components/checkbox-field/checkbox-icon.js +21 -19
  68. package/es/new-components/checkbox-field/checkbox-icon.js.map +1 -1
  69. package/es/new-components/columns/columns.js +24 -27
  70. package/es/new-components/columns/columns.js.map +1 -1
  71. package/es/new-components/common-helpers.js +3 -3
  72. package/es/new-components/common-helpers.js.map +1 -1
  73. package/es/new-components/divider/divider.js +7 -6
  74. package/es/new-components/divider/divider.js.map +1 -1
  75. package/es/new-components/heading/heading.js +17 -17
  76. package/es/new-components/heading/heading.js.map +1 -1
  77. package/es/new-components/hidden/hidden.js +14 -13
  78. package/es/new-components/hidden/hidden.js.map +1 -1
  79. package/es/new-components/hidden-visually/hidden-visually.js +3 -2
  80. package/es/new-components/hidden-visually/hidden-visually.js.map +1 -1
  81. package/es/new-components/icons/alert-icon.js +13 -11
  82. package/es/new-components/icons/alert-icon.js.map +1 -1
  83. package/es/new-components/icons/close-icon.js +2 -1
  84. package/es/new-components/icons/close-icon.js.map +1 -1
  85. package/es/new-components/icons/password-hidden-icon.js +2 -1
  86. package/es/new-components/icons/password-hidden-icon.js.map +1 -1
  87. package/es/new-components/icons/password-visible-icon.js +2 -1
  88. package/es/new-components/icons/password-visible-icon.js.map +1 -1
  89. package/es/new-components/inline/inline.js +15 -19
  90. package/es/new-components/inline/inline.js.map +1 -1
  91. package/es/new-components/loading/loading.js +12 -10
  92. package/es/new-components/loading/loading.js.map +1 -1
  93. package/es/new-components/modal/modal.js +60 -64
  94. package/es/new-components/modal/modal.js.map +1 -1
  95. package/es/new-components/notice/notice.js +5 -4
  96. package/es/new-components/notice/notice.js.map +1 -1
  97. package/es/new-components/password-field/password-field.js +40 -46
  98. package/es/new-components/password-field/password-field.js.map +1 -1
  99. package/es/new-components/responsive-props.js +5 -5
  100. package/es/new-components/responsive-props.js.map +1 -1
  101. package/es/new-components/select-field/select-field.js +23 -23
  102. package/es/new-components/select-field/select-field.js.map +1 -1
  103. package/es/new-components/spinner/spinner.js +3 -3
  104. package/es/new-components/spinner/spinner.js.map +1 -1
  105. package/es/new-components/stack/stack.js +18 -22
  106. package/es/new-components/stack/stack.js.map +1 -1
  107. package/es/new-components/switch-field/switch-field.js +31 -41
  108. package/es/new-components/switch-field/switch-field.js.map +1 -1
  109. package/es/new-components/tabs/tabs.js +92 -78
  110. package/es/new-components/tabs/tabs.js.map +1 -1
  111. package/es/new-components/tabs/tabs.module.css.js +1 -1
  112. package/es/new-components/text/text.js +16 -17
  113. package/es/new-components/text/text.js.map +1 -1
  114. package/es/new-components/text/text.module.css.js +1 -1
  115. package/es/new-components/text-area/text-area.js +14 -14
  116. package/es/new-components/text-area/text-area.js.map +1 -1
  117. package/es/new-components/text-field/text-field.js +21 -22
  118. package/es/new-components/text-field/text-field.js.map +1 -1
  119. package/es/new-components/text-link/text-link.js +10 -10
  120. package/es/new-components/text-link/text-link.js.map +1 -1
  121. package/es/new-components/text-link/text-link.module.css.js +1 -1
  122. package/es/utils/polymorphism.js.map +1 -1
  123. package/lib/_virtual/_rollupPluginBabelHelpers.js +1 -1
  124. package/lib/components/checkbox/checkbox.js +1 -1
  125. package/lib/components/checkbox/checkbox.js.map +1 -1
  126. package/lib/components/color-picker/color-picker.js +1 -1
  127. package/lib/components/color-picker/color-picker.js.map +1 -1
  128. package/lib/components/deprecated-button/deprecated-button.d.ts +3 -3
  129. package/lib/components/deprecated-button/deprecated-button.js +1 -1
  130. package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
  131. package/lib/components/deprecated-loading/deprecated-loading.js +1 -1
  132. package/lib/components/deprecated-loading/deprecated-loading.js.map +1 -1
  133. package/lib/components/deprecated-modal/deprecated-modal.d.ts +2 -2
  134. package/lib/components/deprecated-modal/deprecated-modal.js +1 -1
  135. package/lib/components/deprecated-modal/deprecated-modal.js.map +1 -1
  136. package/lib/components/deprecated-modal/index.js.map +1 -1
  137. package/lib/components/dropdown/dropdown.d.ts +5 -2
  138. package/lib/components/dropdown/dropdown.js +1 -1
  139. package/lib/components/dropdown/dropdown.js.map +1 -1
  140. package/lib/components/icons/CloseIcon.svg.js +1 -1
  141. package/lib/components/icons/CloseIcon.svg.js.map +1 -1
  142. package/lib/components/input/input.js +1 -1
  143. package/lib/components/input/input.js.map +1 -1
  144. package/lib/components/key-capturer/key-capturer.d.ts +1 -1
  145. package/lib/components/key-capturer/key-capturer.js +1 -1
  146. package/lib/components/key-capturer/key-capturer.js.map +1 -1
  147. package/lib/components/keyboard-shortcut/keyboard-shortcut.js +1 -1
  148. package/lib/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  149. package/lib/components/menu/menu.d.ts +7 -7
  150. package/lib/components/menu/menu.js +1 -1
  151. package/lib/components/menu/menu.js.map +1 -1
  152. package/lib/components/notification/notification.js +1 -1
  153. package/lib/components/notification/notification.js.map +1 -1
  154. package/lib/components/popover/popover.d.ts +1 -1
  155. package/lib/components/popover/popover.js +1 -1
  156. package/lib/components/popover/popover.js.map +1 -1
  157. package/lib/components/popover/positioning-utils.js +1 -1
  158. package/lib/components/popover/positioning-utils.js.map +1 -1
  159. package/lib/components/progress-bar/progress-bar.js +1 -1
  160. package/lib/components/progress-bar/progress-bar.js.map +1 -1
  161. package/lib/components/select/select.js +1 -1
  162. package/lib/components/select/select.js.map +1 -1
  163. package/lib/components/time/time-utils.js +1 -1
  164. package/lib/components/time/time-utils.js.map +1 -1
  165. package/lib/components/time/time.js +1 -1
  166. package/lib/components/time/time.js.map +1 -1
  167. package/lib/components/tooltip/index.d.ts +1 -2
  168. package/lib/components/tooltip/tooltip.d.ts +3 -3
  169. package/lib/components/tooltip/tooltip.js +1 -1
  170. package/lib/components/tooltip/tooltip.js.map +1 -1
  171. package/lib/hooks/use-previous/use-previous.js +1 -1
  172. package/lib/hooks/use-previous/use-previous.js.map +1 -1
  173. package/lib/index.d.ts +2 -1
  174. package/lib/new-components/alert/alert.d.ts +1 -1
  175. package/lib/new-components/alert/alert.js +1 -1
  176. package/lib/new-components/alert/alert.js.map +1 -1
  177. package/lib/new-components/avatar/avatar.js +1 -1
  178. package/lib/new-components/avatar/avatar.js.map +1 -1
  179. package/lib/new-components/avatar/utils.d.ts +1 -1
  180. package/lib/new-components/avatar/utils.js +1 -1
  181. package/lib/new-components/avatar/utils.js.map +1 -1
  182. package/lib/new-components/base-button/base-button.js +1 -1
  183. package/lib/new-components/base-button/base-button.js.map +1 -1
  184. package/lib/new-components/base-field/base-field.d.ts +1 -1
  185. package/lib/new-components/base-field/base-field.js +1 -1
  186. package/lib/new-components/base-field/base-field.js.map +1 -1
  187. package/lib/new-components/box/box.js +1 -1
  188. package/lib/new-components/box/box.js.map +1 -1
  189. package/lib/new-components/button/button.d.ts +1 -58
  190. package/lib/new-components/button/button.js +1 -1
  191. package/lib/new-components/button/button.js.map +1 -1
  192. package/lib/new-components/button-link/button-link.js +1 -1
  193. package/lib/new-components/button-link/button-link.js.map +1 -1
  194. package/lib/new-components/checkbox-field/checkbox-field.d.ts +1 -1
  195. package/lib/new-components/checkbox-field/checkbox-field.js +1 -1
  196. package/lib/new-components/checkbox-field/checkbox-field.js.map +1 -1
  197. package/lib/new-components/checkbox-field/checkbox-icon.js +1 -1
  198. package/lib/new-components/checkbox-field/checkbox-icon.js.map +1 -1
  199. package/lib/new-components/columns/columns.js +1 -1
  200. package/lib/new-components/columns/columns.js.map +1 -1
  201. package/lib/new-components/common-helpers.js +1 -1
  202. package/lib/new-components/common-helpers.js.map +1 -1
  203. package/lib/new-components/common-types.d.ts +2 -2
  204. package/lib/new-components/divider/divider.js +1 -1
  205. package/lib/new-components/divider/divider.js.map +1 -1
  206. package/lib/new-components/heading/heading.d.ts +2 -2
  207. package/lib/new-components/heading/heading.js +1 -1
  208. package/lib/new-components/heading/heading.js.map +1 -1
  209. package/lib/new-components/hidden/hidden.js +1 -1
  210. package/lib/new-components/hidden/hidden.js.map +1 -1
  211. package/lib/new-components/hidden-visually/hidden-visually.js +1 -1
  212. package/lib/new-components/hidden-visually/hidden-visually.js.map +1 -1
  213. package/lib/new-components/icons/alert-icon.d.ts +1 -1
  214. package/lib/new-components/icons/alert-icon.js +1 -1
  215. package/lib/new-components/icons/alert-icon.js.map +1 -1
  216. package/lib/new-components/icons/close-icon.js +1 -1
  217. package/lib/new-components/icons/close-icon.js.map +1 -1
  218. package/lib/new-components/icons/password-hidden-icon.js +1 -1
  219. package/lib/new-components/icons/password-hidden-icon.js.map +1 -1
  220. package/lib/new-components/icons/password-visible-icon.js +1 -1
  221. package/lib/new-components/icons/password-visible-icon.js.map +1 -1
  222. package/lib/new-components/inline/inline.js +1 -1
  223. package/lib/new-components/inline/inline.js.map +1 -1
  224. package/lib/new-components/loading/loading.d.ts +1 -1
  225. package/lib/new-components/loading/loading.js +1 -1
  226. package/lib/new-components/loading/loading.js.map +1 -1
  227. package/lib/new-components/modal/modal.js +1 -1
  228. package/lib/new-components/modal/modal.js.map +1 -1
  229. package/lib/new-components/notice/notice.d.ts +1 -1
  230. package/lib/new-components/notice/notice.js +1 -1
  231. package/lib/new-components/notice/notice.js.map +1 -1
  232. package/lib/new-components/password-field/password-field.d.ts +1 -1
  233. package/lib/new-components/password-field/password-field.js +1 -1
  234. package/lib/new-components/password-field/password-field.js.map +1 -1
  235. package/lib/new-components/responsive-props.d.ts +1 -1
  236. package/lib/new-components/responsive-props.js +1 -1
  237. package/lib/new-components/responsive-props.js.map +1 -1
  238. package/lib/new-components/select-field/select-field.d.ts +1 -1
  239. package/lib/new-components/select-field/select-field.js +1 -1
  240. package/lib/new-components/select-field/select-field.js.map +1 -1
  241. package/lib/new-components/spinner/spinner.js +1 -1
  242. package/lib/new-components/spinner/spinner.js.map +1 -1
  243. package/lib/new-components/stack/stack.js +1 -1
  244. package/lib/new-components/stack/stack.js.map +1 -1
  245. package/lib/new-components/switch-field/switch-field.d.ts +1 -1
  246. package/lib/new-components/switch-field/switch-field.js +1 -1
  247. package/lib/new-components/switch-field/switch-field.js.map +1 -1
  248. package/lib/new-components/tabs/tabs.d.ts +13 -3
  249. package/lib/new-components/tabs/tabs.js +1 -1
  250. package/lib/new-components/tabs/tabs.js.map +1 -1
  251. package/lib/new-components/tabs/tabs.module.css.js +1 -1
  252. package/lib/new-components/test-helpers.d.ts +4 -3
  253. package/lib/new-components/text/text.js +1 -1
  254. package/lib/new-components/text/text.js.map +1 -1
  255. package/lib/new-components/text/text.module.css.js +1 -1
  256. package/lib/new-components/text-area/text-area.js +1 -1
  257. package/lib/new-components/text-area/text-area.js.map +1 -1
  258. package/lib/new-components/text-field/text-field.d.ts +1 -1
  259. package/lib/new-components/text-field/text-field.js +1 -1
  260. package/lib/new-components/text-field/text-field.js.map +1 -1
  261. package/lib/new-components/text-link/text-link.js +1 -1
  262. package/lib/new-components/text-link/text-link.js.map +1 -1
  263. package/lib/new-components/text-link/text-link.module.css.js +1 -1
  264. package/lib/utils/polymorphism.js.map +1 -1
  265. package/package.json +45 -38
  266. package/styles/base-field.css +1 -1
  267. package/styles/checkbox-field.css +1 -1
  268. package/styles/menu.css +1 -1
  269. package/styles/password-field.css +1 -1
  270. package/styles/reactist.css +5 -5
  271. package/styles/select-field.css +1 -1
  272. package/styles/switch-field.css +1 -1
  273. package/styles/tabs.css +1 -1
  274. package/styles/tabs.module.css.css +1 -1
  275. package/styles/text-area.css +1 -1
  276. package/styles/text-field.css +1 -1
  277. package/styles/text-link.css +1 -1
  278. package/styles/text-link.module.css.css +1 -1
  279. package/styles/text.css +1 -1
  280. package/styles/text.module.css.css +1 -1
@@ -1,57 +1,57 @@
1
- import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
1
+ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
2
  import React__default from 'react';
3
3
  import classNames from 'classnames';
4
4
  import CloseIcon from '../icons/CloseIcon.svg.js';
5
5
 
6
- var _excluded = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
6
+ const _excluded = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
7
7
 
8
8
  function Notification(_ref) {
9
- var id = _ref.id,
10
- icon = _ref.icon,
11
- title = _ref.title,
12
- subtitle = _ref.subtitle,
13
- children = _ref.children,
14
- customCloseButton = _ref.customCloseButton,
15
- onClick = _ref.onClick,
16
- onClose = _ref.onClose,
17
- _ref$closeAltText = _ref.closeAltText,
18
- closeAltText = _ref$closeAltText === void 0 ? 'Close' : _ref$closeAltText,
19
- className = _ref.className,
20
- _ref$ariaLive = _ref['aria-live'],
21
- ariaLive = _ref$ariaLive === void 0 ? 'polite' : _ref$ariaLive,
22
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
9
+ let {
10
+ id,
11
+ icon,
12
+ title,
13
+ subtitle,
14
+ children,
15
+ customCloseButton,
16
+ onClick,
17
+ onClose,
18
+ closeAltText = 'Close',
19
+ className,
20
+ 'aria-live': ariaLive = 'polite'
21
+ } = _ref,
22
+ rest = _objectWithoutProperties(_ref, _excluded);
23
23
 
24
- var titleId = title ? id + "-title" : null;
25
- var titleIdAttribute = titleId ? {
24
+ const titleId = title ? id + "-title" : null;
25
+ const titleIdAttribute = titleId ? {
26
26
  id: titleId
27
27
  } : null;
28
- var subtitleId = subtitle ? id + "-subtitle" : null;
29
- var subtitleIdAttribute = subtitleId ? {
28
+ const subtitleId = subtitle ? id + "-subtitle" : null;
29
+ const subtitleIdAttribute = subtitleId ? {
30
30
  id: subtitleId
31
31
  } : null;
32
- var contentId = children ? id + "-content" : null;
33
- var contentIdAttribute = children ? {
32
+ const contentId = children ? id + "-content" : null;
33
+ const contentIdAttribute = children ? {
34
34
  id: id + "-content"
35
35
  } : null;
36
- var ariaLabelledBy = contentId ? {
36
+ const ariaLabelledBy = contentId ? {
37
37
  'aria-labelledby': contentId
38
38
  } : titleId ? {
39
39
  'aria-labelledby': titleId
40
40
  } : null;
41
- var ariaDescribedBy = subtitleId && !children ? {
41
+ const ariaDescribedBy = subtitleId && !children ? {
42
42
  'aria-describedby': subtitleId
43
43
  } : null;
44
- var notificationContent = /*#__PURE__*/React__default.createElement("div", Object.assign({
44
+ const notificationContent = /*#__PURE__*/React__default.createElement("div", _objectSpread2({
45
45
  className: "reactist-notification__content"
46
- }, contentIdAttribute), children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title ? /*#__PURE__*/React__default.createElement("h3", Object.assign({
46
+ }, contentIdAttribute), children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title ? /*#__PURE__*/React__default.createElement("h3", _objectSpread2({
47
47
  className: "reactist-notification__title"
48
- }, titleIdAttribute), title) : null, subtitle ? /*#__PURE__*/React__default.createElement("p", Object.assign({
48
+ }, titleIdAttribute), title) : null, subtitle ? /*#__PURE__*/React__default.createElement("p", _objectSpread2({
49
49
  className: "reactist-notification__subtitle"
50
50
  }, subtitleIdAttribute), subtitle) : null));
51
- var notificationBody = /*#__PURE__*/React__default.createElement("div", {
51
+ const notificationBody = /*#__PURE__*/React__default.createElement("div", {
52
52
  className: "reactist-notification__icon-content-group"
53
- }, icon !== null && icon !== void 0 ? icon : null, notificationContent);
54
- return /*#__PURE__*/React__default.createElement("div", Object.assign({
53
+ }, icon != null ? icon : null, notificationContent);
54
+ return /*#__PURE__*/React__default.createElement("div", _objectSpread2(_objectSpread2(_objectSpread2({
55
55
  id: id,
56
56
  role: "alert",
57
57
  className: classNames('reactist-notification', className, {
@@ -59,14 +59,14 @@ function Notification(_ref) {
59
59
  'reactist-notification--with-close-button': Boolean(onClose)
60
60
  }),
61
61
  "aria-live": ariaLive
62
- }, ariaLabelledBy, ariaDescribedBy, rest), onClick ? /*#__PURE__*/React__default.createElement("button", {
62
+ }, ariaLabelledBy), ariaDescribedBy), rest), onClick ? /*#__PURE__*/React__default.createElement("button", {
63
63
  className: "reactist-notification__button",
64
64
  onClick: onClick
65
65
  }, notificationBody) : notificationBody, onClose ? /*#__PURE__*/React__default.createElement("button", {
66
66
  className: "reactist-notification__close-button",
67
67
  onClick: onClose,
68
68
  "aria-label": closeAltText
69
- }, customCloseButton !== null && customCloseButton !== void 0 ? customCloseButton : /*#__PURE__*/React__default.createElement(CloseIcon, null)) : null);
69
+ }, customCloseButton != null ? customCloseButton : /*#__PURE__*/React__default.createElement(CloseIcon, null)) : null);
70
70
  }
71
71
 
72
72
  export { Notification };
@@ -1 +1 @@
1
- {"version":3,"file":"notification.js","sources":["../../../src/components/notification/notification.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\nimport CloseIcon from '../icons/CloseIcon.svg'\nimport './notification.less'\n\ntype NotificationProps = {\n id: string\n icon?: React.ReactNode\n title?: React.ReactNode\n subtitle?: React.ReactNode\n children?: React.ReactNode\n customCloseButton?: React.ReactNode\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n closeAltText?: string\n className?: string\n /** Indicates that the notification will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n 'aria-live'?: 'off' | 'polite' | 'assertive'\n} & Omit<JSX.IntrinsicElements['div'], 'aria-live'>\n\nfunction Notification({\n id,\n icon,\n title,\n subtitle,\n children,\n customCloseButton,\n onClick,\n onClose,\n closeAltText = 'Close',\n className,\n 'aria-live': ariaLive = 'polite',\n ...rest\n}: NotificationProps) {\n const titleId = title ? `${id}-title` : null\n const titleIdAttribute = titleId ? { id: titleId } : null\n const subtitleId = subtitle ? `${id}-subtitle` : null\n const subtitleIdAttribute = subtitleId ? { id: subtitleId } : null\n const contentId = children ? `${id}-content` : null\n const contentIdAttribute = children ? { id: `${id}-content` } : null\n const ariaLabelledBy = contentId\n ? { 'aria-labelledby': contentId }\n : titleId\n ? { 'aria-labelledby': titleId }\n : null\n const ariaDescribedBy = subtitleId && !children ? { 'aria-describedby': subtitleId } : null\n\n const notificationContent = (\n <div className=\"reactist-notification__content\" {...contentIdAttribute}>\n {children ?? (\n <>\n {title ? (\n <h3 className=\"reactist-notification__title\" {...titleIdAttribute}>\n {title}\n </h3>\n ) : null}\n {subtitle ? (\n <p className=\"reactist-notification__subtitle\" {...subtitleIdAttribute}>\n {subtitle}\n </p>\n ) : null}\n </>\n )}\n </div>\n )\n const notificationBody = (\n <div className=\"reactist-notification__icon-content-group\">\n {icon ?? null}\n {notificationContent}\n </div>\n )\n\n return (\n <div\n id={id}\n role=\"alert\"\n className={classNames('reactist-notification', className, {\n 'reactist-notification--with-button': Boolean(onClick),\n 'reactist-notification--with-close-button': Boolean(onClose),\n })}\n aria-live={ariaLive}\n {...ariaLabelledBy}\n {...ariaDescribedBy}\n {...rest}\n >\n {onClick ? (\n <button className=\"reactist-notification__button\" onClick={onClick}>\n {notificationBody}\n </button>\n ) : (\n notificationBody\n )}\n\n {onClose ? (\n <button\n className=\"reactist-notification__close-button\"\n onClick={onClose}\n aria-label={closeAltText}\n >\n {customCloseButton ?? <CloseIcon />}\n </button>\n ) : null}\n </div>\n )\n}\n\nexport { Notification }\n"],"names":["Notification","id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","ariaLive","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","contentIdAttribute","ariaLabelledBy","ariaDescribedBy","notificationContent","React","notificationBody","role","classNames","Boolean","CloseIcon"],"mappings":";;;;;;;AAoBA,SAASA,YAAT;MACIC,UAAAA;MACAC,YAAAA;MACAC,aAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,yBAAAA;MACAC,eAAAA;MACAC,eAAAA;+BACAC;MAAAA,8CAAe;MACfC,iBAAAA;2BACA;MAAaC,sCAAW;MACrBC;;AAEH,MAAMC,OAAO,GAAGV,KAAK,GAAMF,EAAN,cAAmB,IAAxC;AACA,MAAMa,gBAAgB,GAAGD,OAAO,GAAG;AAAEZ,IAAAA,EAAE,EAAEY;AAAN,GAAH,GAAqB,IAArD;AACA,MAAME,UAAU,GAAGX,QAAQ,GAAMH,EAAN,iBAAsB,IAAjD;AACA,MAAMe,mBAAmB,GAAGD,UAAU,GAAG;AAAEd,IAAAA,EAAE,EAAEc;AAAN,GAAH,GAAwB,IAA9D;AACA,MAAME,SAAS,GAAGZ,QAAQ,GAAMJ,EAAN,gBAAqB,IAA/C;AACA,MAAMiB,kBAAkB,GAAGb,QAAQ,GAAG;AAAEJ,IAAAA,EAAE,EAAKA,EAAL;AAAJ,GAAH,GAA6B,IAAhE;AACA,MAAMkB,cAAc,GAAGF,SAAS,GAC1B;AAAE,uBAAmBA;AAArB,GAD0B,GAE1BJ,OAAO,GACP;AAAE,uBAAmBA;AAArB,GADO,GAEP,IAJN;AAKA,MAAMO,eAAe,GAAGL,UAAU,IAAI,CAACV,QAAf,GAA0B;AAAE,wBAAoBU;AAAtB,GAA1B,GAA+D,IAAvF;AAEA,MAAMM,mBAAmB,gBACrBC,4BAAA,MAAA;AAAKZ,IAAAA,SAAS,EAAC;KAAqCQ,mBAApD,EACKb,QADL,aACKA,QADL,cACKA,QADL,gBAEQiB,4BAAA,wBAAA,MAAA,EACKnB,KAAK,gBACFmB,4BAAA,KAAA;AAAIZ,IAAAA,SAAS,EAAC;KAAmCI,iBAAjD,EACKX,KADL,CADE,GAIF,IALR,EAMKC,QAAQ,gBACLkB,4BAAA,IAAA;AAAGZ,IAAAA,SAAS,EAAC;KAAsCM,oBAAnD,EACKZ,QADL,CADK,GAIL,IAVR,CAFR,CADJ;AAkBA,MAAMmB,gBAAgB,gBAClBD,4BAAA,MAAA;AAAKZ,IAAAA,SAAS,EAAC;GAAf,EACKR,IADL,aACKA,IADL,cACKA,IADL,GACa,IADb,EAEKmB,mBAFL,CADJ;AAOA,sBACIC,4BAAA,MAAA;AACIrB,IAAAA,EAAE,EAAEA;AACJuB,IAAAA,IAAI,EAAC;AACLd,IAAAA,SAAS,EAAEe,UAAU,CAAC,uBAAD,EAA0Bf,SAA1B,EAAqC;AACtD,4CAAsCgB,OAAO,CAACnB,OAAD,CADS;AAEtD,kDAA4CmB,OAAO,CAAClB,OAAD;AAFG,KAArC;iBAIVG;KACPQ,gBACAC,iBACAR,KAVR,EAYKL,OAAO,gBACJe,4BAAA,SAAA;AAAQZ,IAAAA,SAAS,EAAC;AAAgCH,IAAAA,OAAO,EAAEA;GAA3D,EACKgB,gBADL,CADI,GAKJA,gBAjBR,EAoBKf,OAAO,gBACJc,4BAAA,SAAA;AACIZ,IAAAA,SAAS,EAAC;AACVH,IAAAA,OAAO,EAAEC;kBACGC;GAHhB,EAKKH,iBALL,aAKKA,iBALL,cAKKA,iBALL,gBAK0BgB,4BAAA,CAACK,SAAD,MAAA,CAL1B,CADI,GAQJ,IA5BR,CADJ;AAgCH;;;;"}
1
+ {"version":3,"file":"notification.js","sources":["../../../src/components/notification/notification.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\nimport CloseIcon from '../icons/CloseIcon.svg'\nimport './notification.less'\n\ntype NotificationProps = {\n id: string\n icon?: React.ReactNode\n title?: React.ReactNode\n subtitle?: React.ReactNode\n children?: React.ReactNode\n customCloseButton?: React.ReactNode\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n closeAltText?: string\n className?: string\n /** Indicates that the notification will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n 'aria-live'?: 'off' | 'polite' | 'assertive'\n} & Omit<JSX.IntrinsicElements['div'], 'aria-live'>\n\nfunction Notification({\n id,\n icon,\n title,\n subtitle,\n children,\n customCloseButton,\n onClick,\n onClose,\n closeAltText = 'Close',\n className,\n 'aria-live': ariaLive = 'polite',\n ...rest\n}: NotificationProps) {\n const titleId = title ? `${id}-title` : null\n const titleIdAttribute = titleId ? { id: titleId } : null\n const subtitleId = subtitle ? `${id}-subtitle` : null\n const subtitleIdAttribute = subtitleId ? { id: subtitleId } : null\n const contentId = children ? `${id}-content` : null\n const contentIdAttribute = children ? { id: `${id}-content` } : null\n const ariaLabelledBy = contentId\n ? { 'aria-labelledby': contentId }\n : titleId\n ? { 'aria-labelledby': titleId }\n : null\n const ariaDescribedBy = subtitleId && !children ? { 'aria-describedby': subtitleId } : null\n\n const notificationContent = (\n <div className=\"reactist-notification__content\" {...contentIdAttribute}>\n {children ?? (\n <>\n {title ? (\n <h3 className=\"reactist-notification__title\" {...titleIdAttribute}>\n {title}\n </h3>\n ) : null}\n {subtitle ? (\n <p className=\"reactist-notification__subtitle\" {...subtitleIdAttribute}>\n {subtitle}\n </p>\n ) : null}\n </>\n )}\n </div>\n )\n const notificationBody = (\n <div className=\"reactist-notification__icon-content-group\">\n {icon ?? null}\n {notificationContent}\n </div>\n )\n\n return (\n <div\n id={id}\n role=\"alert\"\n className={classNames('reactist-notification', className, {\n 'reactist-notification--with-button': Boolean(onClick),\n 'reactist-notification--with-close-button': Boolean(onClose),\n })}\n aria-live={ariaLive}\n {...ariaLabelledBy}\n {...ariaDescribedBy}\n {...rest}\n >\n {onClick ? (\n <button className=\"reactist-notification__button\" onClick={onClick}>\n {notificationBody}\n </button>\n ) : (\n notificationBody\n )}\n\n {onClose ? (\n <button\n className=\"reactist-notification__close-button\"\n onClick={onClose}\n aria-label={closeAltText}\n >\n {customCloseButton ?? <CloseIcon />}\n </button>\n ) : null}\n </div>\n )\n}\n\nexport { Notification }\n"],"names":["Notification","id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","ariaLive","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","contentIdAttribute","ariaLabelledBy","ariaDescribedBy","notificationContent","React","notificationBody","role","classNames","Boolean","CloseIcon"],"mappings":";;;;;;;AAoBA,SAASA,YAAT;MAAsB;IAClBC,EADkB;IAElBC,IAFkB;IAGlBC,KAHkB;IAIlBC,QAJkB;IAKlBC,QALkB;IAMlBC,iBANkB;IAOlBC,OAPkB;IAQlBC,OARkB;IASlBC,YAAY,GAAG,OATG;IAUlBC,SAVkB;IAWlB,aAAaC,QAAQ,GAAG;;MACrBC;;EAEH,MAAMC,OAAO,GAAGV,KAAK,GAAMF,EAAN,cAAmB,IAAxC;EACA,MAAMa,gBAAgB,GAAGD,OAAO,GAAG;IAAEZ,EAAE,EAAEY;GAAT,GAAqB,IAArD;EACA,MAAME,UAAU,GAAGX,QAAQ,GAAMH,EAAN,iBAAsB,IAAjD;EACA,MAAMe,mBAAmB,GAAGD,UAAU,GAAG;IAAEd,EAAE,EAAEc;GAAT,GAAwB,IAA9D;EACA,MAAME,SAAS,GAAGZ,QAAQ,GAAMJ,EAAN,gBAAqB,IAA/C;EACA,MAAMiB,kBAAkB,GAAGb,QAAQ,GAAG;IAAEJ,EAAE,EAAKA,EAAL;GAAP,GAA6B,IAAhE;EACA,MAAMkB,cAAc,GAAGF,SAAS,GAC1B;IAAE,mBAAmBA;GADK,GAE1BJ,OAAO,GACP;IAAE,mBAAmBA;GADd,GAEP,IAJN;EAKA,MAAMO,eAAe,GAAGL,UAAU,IAAI,CAACV,QAAf,GAA0B;IAAE,oBAAoBU;GAAhD,GAA+D,IAAvF;EAEA,MAAMM,mBAAmB,gBACrBC,4BAAA,MAAA;IAAKZ,SAAS,EAAC;KAAqCQ,kBAApD,GACKb,QADL,WACKA,QADL,gBAEQiB,4BAAA,wBAAA,MAAA,EACKnB,KAAK,gBACFmB,4BAAA,KAAA;IAAIZ,SAAS,EAAC;KAAmCI,gBAAjD,GACKX,KADL,CADE,GAIF,IALR,EAMKC,QAAQ,gBACLkB,4BAAA,IAAA;IAAGZ,SAAS,EAAC;KAAsCM,mBAAnD,GACKZ,QADL,CADK,GAIL,IAVR,CAFR,CADJ;EAkBA,MAAMmB,gBAAgB,gBAClBD,4BAAA,MAAA;IAAKZ,SAAS,EAAC;GAAf,EACKR,IADL,WACKA,IADL,GACa,IADb,EAEKmB,mBAFL,CADJ;EAOA,oBACIC,4BAAA,MAAA;IACIrB,EAAE,EAAEA,EADR;IAEIuB,IAAI,EAAC,OAFT;IAGId,SAAS,EAAEe,UAAU,CAAC,uBAAD,EAA0Bf,SAA1B,EAAqC;MACtD,sCAAsCgB,OAAO,CAACnB,OAAD,CADS;MAEtD,4CAA4CmB,OAAO,CAAClB,OAAD;KAFlC,CAHzB;iBAOeG;KACPQ,cARR,GASQC,eATR,GAUQR,IAVR,GAYKL,OAAO,gBACJe,4BAAA,SAAA;IAAQZ,SAAS,EAAC;IAAgCH,OAAO,EAAEA;GAA3D,EACKgB,gBADL,CADI,GAKJA,gBAjBR,EAoBKf,OAAO,gBACJc,4BAAA,SAAA;IACIZ,SAAS,EAAC;IACVH,OAAO,EAAEC;kBACGC;GAHhB,EAKKH,iBALL,WAKKA,iBALL,gBAK0BgB,4BAAA,CAACK,SAAD,MAAA,CAL1B,CADI,GAQJ,IA5BR,CADJ;AAgCH;;;;"}
@@ -1,74 +1,68 @@
1
- import { inheritsLoose as _inheritsLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
1
  import React__default from 'react';
3
2
  import classNames from 'classnames';
4
3
  import { hasEnoughSpace, calculatePosition } from './positioning-utils.js';
5
4
 
6
- var Popover = /*#__PURE__*/function (_React$Component) {
7
- _inheritsLoose(Popover, _React$Component);
8
-
9
- function Popover() {
10
- var _this;
11
-
12
- _this = _React$Component.apply(this, arguments) || this;
13
-
14
- _this._updatePopoverPosition = function () {
15
- var _this$props = _this.props,
16
- position = _this$props.position,
17
- allowVaguePositioning = _this$props.allowVaguePositioning,
18
- gapSize = _this$props.gapSize;
19
-
20
- var wrapperRect = _this.wrapper.getBoundingClientRect();
21
-
22
- var popoverRect = _this.popover.getBoundingClientRect(); // Instead of using the documentElement find the nearest absolutely positioned element
23
-
24
-
25
- var documentEl = document.documentElement;
26
- var node = _this.wrapper;
27
- var foundParent = false;
5
+ class Popover extends React__default.Component {
6
+ constructor(...args) {
7
+ super(...args);
8
+ this.popover = void 0;
9
+ this.wrapper = void 0;
10
+
11
+ this._updatePopoverPosition = () => {
12
+ const {
13
+ position,
14
+ allowVaguePositioning,
15
+ gapSize
16
+ } = this.props;
17
+ const wrapperRect = this.wrapper.getBoundingClientRect();
18
+ const popoverRect = this.popover.getBoundingClientRect(); // Instead of using the documentElement find the nearest absolutely positioned element
19
+
20
+ const documentEl = document.documentElement;
21
+ let node = this.wrapper;
22
+ let foundParent = false;
28
23
 
29
24
  while (!foundParent) {
30
- var styles = getComputedStyle(node);
31
-
32
- var _position = styles.getPropertyValue('position');
25
+ const styles = getComputedStyle(node);
26
+ const position = styles.getPropertyValue('position');
33
27
 
34
- if (_position === 'absolute' || node === documentEl || !node.parentElement) {
28
+ if (position === 'absolute' || node === documentEl || !node.parentElement) {
35
29
  foundParent = true;
36
30
  } else {
37
31
  node = node.parentElement;
38
32
  }
39
33
  }
40
34
 
41
- var nodeRect = node.getBoundingClientRect();
42
- var windowDimensions = {
35
+ const nodeRect = node.getBoundingClientRect();
36
+ const windowDimensions = {
43
37
  height: nodeRect.height,
44
38
  width: nodeRect.width
45
39
  };
46
- var popoverDimensions = {
40
+ const popoverDimensions = {
47
41
  height: popoverRect.height,
48
42
  width: popoverRect.width
49
43
  };
50
- var wrapperDimensions = {
44
+ const wrapperDimensions = {
51
45
  height: wrapperRect.height,
52
46
  width: wrapperRect.width
53
47
  };
54
- var wrapperPositionRelative = {
48
+ const wrapperPositionRelative = {
55
49
  x: wrapperRect.left - nodeRect.left,
56
50
  y: wrapperRect.top - nodeRect.top
57
51
  };
58
- var wrapperPositionAbsolute = {
52
+ const wrapperPositionAbsolute = {
59
53
  x: wrapperRect.left,
60
54
  y: wrapperRect.top
61
55
  };
62
- var positionsToTry = position === 'auto' ? ['top', 'right', 'bottom', 'left', 'top'] : position === 'vertical' ? ['top', 'bottom'] : position === 'horizontal' ? ['left', 'right'] : [position];
56
+ const positionsToTry = position === 'auto' ? ['top', 'right', 'bottom', 'left', 'top'] : position === 'vertical' ? ['top', 'bottom'] : position === 'horizontal' ? ['left', 'right'] : [position];
63
57
 
64
- for (var index = 0; index < positionsToTry.length; index++) {
65
- var currentPosition = positionsToTry[index];
66
- var enoughSpaceAtPosition = hasEnoughSpace(windowDimensions, popoverDimensions, wrapperDimensions, wrapperPositionRelative, currentPosition, gapSize);
58
+ for (let index = 0; index < positionsToTry.length; index++) {
59
+ const currentPosition = positionsToTry[index];
60
+ const enoughSpaceAtPosition = currentPosition != null ? hasEnoughSpace(windowDimensions, popoverDimensions, wrapperDimensions, wrapperPositionRelative, currentPosition, gapSize) : false;
67
61
 
68
62
  if (enoughSpaceAtPosition || index === positionsToTry.length - 1) {
69
- var popoverPosition = calculatePosition(currentPosition, wrapperDimensions, wrapperPositionAbsolute, popoverDimensions, gapSize);
70
- _this.popover.style.top = popoverPosition.y + "px";
71
- _this.popover.style.left = popoverPosition.x + "px";
63
+ const popoverPosition = currentPosition != null ? calculatePosition(currentPosition, wrapperDimensions, wrapperPositionAbsolute, popoverDimensions, gapSize) : wrapperPositionAbsolute;
64
+ this.popover.style.top = popoverPosition.y + "px";
65
+ this.popover.style.left = popoverPosition.x + "px";
72
66
  /**
73
67
  * Correct placement if vague positioning is allowed.
74
68
  * When it's not allowed we "cut off" popovers and display them
@@ -78,17 +72,17 @@ var Popover = /*#__PURE__*/function (_React$Component) {
78
72
  if (allowVaguePositioning) {
79
73
  // correct horizontally
80
74
  if (popoverPosition.x < 0) {
81
- _this.popover.style.left = 2 * gapSize + "px";
75
+ this.popover.style.left = 2 * gapSize + "px";
82
76
  } // correct vertically
83
77
 
84
78
 
85
79
  if (popoverPosition.y + popoverDimensions.height > windowDimensions.height) {
86
- _this.popover.style.top = windowDimensions.height - popoverDimensions.height - 2 * gapSize + "px";
80
+ this.popover.style.top = windowDimensions.height - popoverDimensions.height - 2 * gapSize + "px";
87
81
  }
88
82
  }
89
83
 
90
84
  if (currentPosition !== position) {
91
- _this.popover.className = _this._getClassNameForPosition(currentPosition);
85
+ this.popover.className = this._getClassNameForPosition(currentPosition);
92
86
  }
93
87
 
94
88
  break;
@@ -96,13 +90,14 @@ var Popover = /*#__PURE__*/function (_React$Component) {
96
90
  }
97
91
  };
98
92
 
99
- _this._getClassNameForPosition = function (position) {
100
- var _this$props2 = _this.props,
101
- visible = _this$props2.visible,
102
- withArrow = _this$props2.withArrow,
103
- arrowClassName = _this$props2.arrowClassName;
104
- var className = classNames('reactist_popover', {
105
- visible: visible
93
+ this._getClassNameForPosition = position => {
94
+ const {
95
+ visible,
96
+ withArrow,
97
+ arrowClassName
98
+ } = this.props;
99
+ const className = classNames('reactist_popover', {
100
+ visible
106
101
  });
107
102
 
108
103
  if (visible && withArrow) {
@@ -117,62 +112,59 @@ var Popover = /*#__PURE__*/function (_React$Component) {
117
112
  return className;
118
113
  };
119
114
 
120
- _this._updatePopoverRef = function (popover) {
121
- _this.popover = popover;
115
+ this._updatePopoverRef = popover => {
116
+ this.popover = popover;
122
117
 
123
- if (typeof _this.props.popoverRef === 'function') {
124
- _this.props.popoverRef(popover);
118
+ if (typeof this.props.popoverRef === 'function') {
119
+ this.props.popoverRef(popover);
125
120
  }
126
121
  };
127
122
 
128
- _this._updateWrapperRef = function (wrapper) {
129
- _this.wrapper = wrapper;
123
+ this._updateWrapperRef = wrapper => {
124
+ this.wrapper = wrapper;
130
125
 
131
- if (typeof _this.props.wrapperRef === 'function') {
132
- _this.props.wrapperRef(wrapper);
126
+ if (typeof this.props.wrapperRef === 'function') {
127
+ this.props.wrapperRef(wrapper);
133
128
  }
134
129
  };
135
-
136
- return _this;
137
130
  }
138
131
 
139
- var _proto = Popover.prototype;
140
-
141
- _proto.componentDidMount = function componentDidMount() {
132
+ componentDidMount() {
142
133
  if (this.props.visible) {
143
134
  this._updatePopoverPosition();
144
135
  }
145
- };
136
+ }
146
137
 
147
- _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
138
+ componentDidUpdate(prevProps) {
148
139
  if (this.wrapper && this.props.visible) {
149
- var positionChanged = prevProps.position !== this.props.position;
150
- var vaguePositioningChanged = prevProps.allowVaguePositioning !== this.props.allowVaguePositioning;
151
- var visibilityChanged = prevProps.visible !== this.props.visible;
152
- var arrowChanged = prevProps.withArrow !== this.props.withArrow;
153
- var gapSizeChanged = prevProps.gapSize !== this.props.gapSize;
154
- var contentChanged = prevProps.content !== this.props.content;
140
+ const positionChanged = prevProps.position !== this.props.position;
141
+ const vaguePositioningChanged = prevProps.allowVaguePositioning !== this.props.allowVaguePositioning;
142
+ const visibilityChanged = prevProps.visible !== this.props.visible;
143
+ const arrowChanged = prevProps.withArrow !== this.props.withArrow;
144
+ const gapSizeChanged = prevProps.gapSize !== this.props.gapSize;
145
+ const contentChanged = prevProps.content !== this.props.content;
155
146
 
156
147
  if (positionChanged || vaguePositioningChanged || visibilityChanged || arrowChanged || gapSizeChanged || contentChanged) {
157
148
  this._updatePopoverPosition();
158
149
  }
159
150
  }
160
- };
161
-
162
- _proto.render = function render() {
163
- var _this$props3 = this.props,
164
- position = _this$props3.position,
165
- wrapperClassName = _this$props3.wrapperClassName,
166
- popoverClassName = _this$props3.popoverClassName,
167
- onMouseEnter = _this$props3.onMouseEnter,
168
- onMouseLeave = _this$props3.onMouseLeave,
169
- onClick = _this$props3.onClick,
170
- trigger = _this$props3.trigger,
171
- content = _this$props3.content;
172
- var popoverClass = position ? this._getClassNameForPosition(position) : '';
173
- var popoverContentClass = classNames('reactist_popover__content', popoverClassName);
174
- var wrapperClass = classNames('reactist_popover__wrapper', wrapperClassName);
175
- var triggerElement = React__default.Children.only(trigger);
151
+ }
152
+
153
+ render() {
154
+ const {
155
+ position,
156
+ wrapperClassName,
157
+ popoverClassName,
158
+ onMouseEnter,
159
+ onMouseLeave,
160
+ onClick,
161
+ trigger,
162
+ content
163
+ } = this.props;
164
+ const popoverClass = position ? this._getClassNameForPosition(position) : '';
165
+ const popoverContentClass = classNames('reactist_popover__content', popoverClassName);
166
+ const wrapperClass = classNames('reactist_popover__wrapper', wrapperClassName);
167
+ const triggerElement = React__default.Children.only(trigger);
176
168
 
177
169
  function handleTriggerClick(event) {
178
170
  // @ts-expect-error This is temporary while we revisit the Popover interface
@@ -197,15 +189,17 @@ var Popover = /*#__PURE__*/function (_React$Component) {
197
189
  }, this.props.visible ? /*#__PURE__*/React__default.createElement("span", {
198
190
  className: popoverContentClass
199
191
  }, typeof content === 'function' ? content() : content) : null));
200
- };
192
+ }
201
193
 
202
- return Popover;
203
- }(React__default.Component);
194
+ }
204
195
 
196
+ Popover.displayName = void 0;
197
+ Popover.defaultProps = void 0;
205
198
  Popover.displayName = 'Popover';
206
199
  Popover.defaultProps = {
207
200
  position: 'auto',
208
- gapSize: 5
201
+ gapSize: 5 // default size of the arrow (see `tooltip.less`)
202
+
209
203
  };
210
204
 
211
205
  export { Popover };
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport { hasEnoughSpace, calculatePosition, RelativePosition } from './positioning-utils'\n\nimport './popover.less'\n\n/**\n * Position of the popover. Defaults to `auto`.\n * `auto` tries to position the tooltip to the top,\n * if there's not enough space it tries to position the tooltip clockwise (right, bottom, left).\n * Setting a distinct value like `right` will always position the popover right, regardless of available space.\n * Specifying `horizontal` will only try to position the tooltip left and right in that order.\n * Specifying `vertical` will only try to position the tooltip top and bottom in that order.\n */\ntype Position = 'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal' | 'auto'\n\ntype Props = {\n visible?: boolean\n /** ref of the popover in case you need to manipulate it. */\n popoverRef?: React.Ref<HTMLElement>\n /** ref of the wrapper in case you need to manipulate it. */\n wrapperRef?: React.Ref<HTMLElement>\n /** Function to be called when the mouse enters the trigger. */\n onMouseEnter?: React.MouseEventHandler\n /** Function to be called when the mouse leaves the trigger. */\n onMouseLeave?: React.MouseEventHandler\n onClick?: React.MouseEventHandler\n /** Additional css class that is applied to the wrapper element. */\n wrapperClassName?: string\n /** Additional css class that is applied to the popover element. */\n popoverClassName?: string\n /** Additional css class that is applied to style the arrow. Not applied when `withArrow` is false. */\n arrowClassName?: string\n /** Content prop of the popover. */\n content?: (() => React.ReactNode) | React.ReactNode\n trigger?: React.ReactNode\n position: Position\n withArrow?: boolean\n /**\n * Whether vague positioning is allowed. When set to true the popover prefers to be fully visible over being correctly centered.\n */\n allowVaguePositioning?: boolean\n /** Gap between the popover wrapper and the arrow. */\n gapSize: number\n}\n\nclass Popover extends React.Component<Props> {\n public static displayName: string\n public static defaultProps: Props\n\n componentDidMount() {\n if (this.props.visible) {\n this._updatePopoverPosition()\n }\n }\n\n componentDidUpdate(prevProps: Props) {\n if (this.wrapper && this.props.visible) {\n const positionChanged = prevProps.position !== this.props.position\n const vaguePositioningChanged =\n prevProps.allowVaguePositioning !== this.props.allowVaguePositioning\n const visibilityChanged = prevProps.visible !== this.props.visible\n const arrowChanged = prevProps.withArrow !== this.props.withArrow\n const gapSizeChanged = prevProps.gapSize !== this.props.gapSize\n const contentChanged = prevProps.content !== this.props.content\n if (\n positionChanged ||\n vaguePositioningChanged ||\n visibilityChanged ||\n arrowChanged ||\n gapSizeChanged ||\n contentChanged\n ) {\n this._updatePopoverPosition()\n }\n }\n }\n\n popover!: HTMLElement\n wrapper!: HTMLElement\n\n _updatePopoverPosition = () => {\n const { position, allowVaguePositioning, gapSize } = this.props\n const wrapperRect = this.wrapper.getBoundingClientRect()\n const popoverRect = this.popover.getBoundingClientRect()\n\n // Instead of using the documentElement find the nearest absolutely positioned element\n const documentEl = document.documentElement\n let node = this.wrapper\n let foundParent = false\n while (!foundParent) {\n const styles = getComputedStyle(node)\n const position = styles.getPropertyValue('position')\n if (position === 'absolute' || node === documentEl || !node.parentElement) {\n foundParent = true\n } else {\n node = node.parentElement\n }\n }\n const nodeRect = node.getBoundingClientRect()\n const windowDimensions = {\n height: nodeRect.height,\n width: nodeRect.width,\n }\n\n const popoverDimensions = {\n height: popoverRect.height,\n width: popoverRect.width,\n }\n const wrapperDimensions = {\n height: wrapperRect.height,\n width: wrapperRect.width,\n }\n const wrapperPositionRelative = {\n x: wrapperRect.left - nodeRect.left,\n y: wrapperRect.top - nodeRect.top,\n }\n const wrapperPositionAbsolute = {\n x: wrapperRect.left,\n y: wrapperRect.top,\n }\n\n const positionsToTry: RelativePosition[] =\n position === 'auto'\n ? ['top', 'right', 'bottom', 'left', 'top']\n : position === 'vertical'\n ? ['top', 'bottom']\n : position === 'horizontal'\n ? ['left', 'right']\n : [position]\n\n for (let index = 0; index < positionsToTry.length; index++) {\n const currentPosition = positionsToTry[index]\n const enoughSpaceAtPosition = hasEnoughSpace(\n windowDimensions,\n popoverDimensions,\n wrapperDimensions,\n wrapperPositionRelative,\n currentPosition,\n gapSize,\n )\n\n if (enoughSpaceAtPosition || index === positionsToTry.length - 1) {\n const popoverPosition = calculatePosition(\n currentPosition,\n wrapperDimensions,\n wrapperPositionAbsolute,\n popoverDimensions,\n gapSize,\n )\n this.popover.style.top = `${popoverPosition.y}px`\n this.popover.style.left = `${popoverPosition.x}px`\n\n /**\n * Correct placement if vague positioning is allowed.\n * When it's not allowed we \"cut off\" popovers and display them\n * out of the viewport to maintain their centered position.\n */\n if (allowVaguePositioning) {\n // correct horizontally\n if (popoverPosition.x < 0) {\n this.popover.style.left = `${2 * gapSize}px`\n }\n // correct vertically\n if (popoverPosition.y + popoverDimensions.height > windowDimensions.height) {\n this.popover.style.top = `${\n windowDimensions.height - popoverDimensions.height - 2 * gapSize\n }px`\n }\n }\n\n if (currentPosition !== position) {\n this.popover.className = this._getClassNameForPosition(currentPosition)\n }\n break\n }\n }\n }\n\n _getClassNameForPosition = (position: Position) => {\n const { visible, withArrow, arrowClassName } = this.props\n const className = classNames('reactist_popover', { visible })\n\n if (visible && withArrow) {\n return classNames(className, arrowClassName, {\n arrow_top: position === 'bottom',\n arrow_right: position === 'left',\n arrow_bottom: position === 'auto' || position === 'top',\n arrow_left: position === 'right',\n })\n }\n return className\n }\n\n _updatePopoverRef = (popover: HTMLElement) => {\n this.popover = popover\n if (typeof this.props.popoverRef === 'function') {\n this.props.popoverRef(popover)\n }\n }\n\n _updateWrapperRef = (wrapper: HTMLElement) => {\n this.wrapper = wrapper\n if (typeof this.props.wrapperRef === 'function') {\n this.props.wrapperRef(wrapper)\n }\n }\n\n render() {\n const {\n position,\n wrapperClassName,\n popoverClassName,\n onMouseEnter,\n onMouseLeave,\n onClick,\n trigger,\n content,\n } = this.props\n const popoverClass = position ? this._getClassNameForPosition(position) : ''\n const popoverContentClass = classNames('reactist_popover__content', popoverClassName)\n const wrapperClass = classNames('reactist_popover__wrapper', wrapperClassName)\n const triggerElement = React.Children.only<React.ReactElement>(\n trigger as React.ReactElement,\n )\n\n function handleTriggerClick(event: React.SyntheticEvent) {\n // @ts-expect-error This is temporary while we revisit the Popover interface\n if (onClick) onClick(event)\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n if (typeof triggerElement.props.onClick === 'function') {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call\n triggerElement.props.onClick(event)\n }\n }\n\n return (\n <span\n className={wrapperClass}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n ref={this._updateWrapperRef}\n >\n {React.cloneElement(triggerElement, { onClick: handleTriggerClick })}\n <span className={popoverClass} ref={this._updatePopoverRef}>\n {this.props.visible ? (\n <span className={popoverContentClass}>\n {typeof content === 'function' ? content() : content}\n </span>\n ) : null}\n </span>\n </span>\n )\n }\n}\nPopover.displayName = 'Popover'\nPopover.defaultProps = {\n position: 'auto',\n gapSize: 5, // default size of the arrow (see `tooltip.less`)\n}\n\nexport { Popover }\n"],"names":["Popover","props","position","allowVaguePositioning","gapSize","wrapperRect","wrapper","getBoundingClientRect","popoverRect","popover","documentEl","document","documentElement","node","foundParent","styles","getComputedStyle","getPropertyValue","parentElement","nodeRect","windowDimensions","height","width","popoverDimensions","wrapperDimensions","wrapperPositionRelative","x","left","y","top","wrapperPositionAbsolute","positionsToTry","index","length","currentPosition","enoughSpaceAtPosition","hasEnoughSpace","popoverPosition","calculatePosition","style","className","_getClassNameForPosition","visible","withArrow","arrowClassName","classNames","arrow_top","arrow_right","arrow_bottom","arrow_left","popoverRef","wrapperRef","componentDidMount","_updatePopoverPosition","componentDidUpdate","prevProps","positionChanged","vaguePositioningChanged","visibilityChanged","arrowChanged","gapSizeChanged","contentChanged","content","render","wrapperClassName","popoverClassName","onMouseEnter","onMouseLeave","onClick","trigger","popoverClass","popoverContentClass","wrapperClass","triggerElement","React","Children","only","handleTriggerClick","event","ref","_updateWrapperRef","cloneElement","_updatePopoverRef","Component","displayName","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport { hasEnoughSpace, calculatePosition, RelativePosition } from './positioning-utils'\n\nimport './popover.less'\n\n/**\n * Position of the popover. Defaults to `auto`.\n * `auto` tries to position the tooltip to the top,\n * if there's not enough space it tries to position the tooltip clockwise (right, bottom, left).\n * Setting a distinct value like `right` will always position the popover right, regardless of available space.\n * Specifying `horizontal` will only try to position the tooltip left and right in that order.\n * Specifying `vertical` will only try to position the tooltip top and bottom in that order.\n */\ntype Position = 'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal' | 'auto'\n\ntype Props = {\n visible?: boolean\n /** ref of the popover in case you need to manipulate it. */\n popoverRef?: React.Ref<HTMLElement>\n /** ref of the wrapper in case you need to manipulate it. */\n wrapperRef?: React.Ref<HTMLElement>\n /** Function to be called when the mouse enters the trigger. */\n onMouseEnter?: React.MouseEventHandler\n /** Function to be called when the mouse leaves the trigger. */\n onMouseLeave?: React.MouseEventHandler\n onClick?: React.MouseEventHandler\n /** Additional css class that is applied to the wrapper element. */\n wrapperClassName?: string\n /** Additional css class that is applied to the popover element. */\n popoverClassName?: string\n /** Additional css class that is applied to style the arrow. Not applied when `withArrow` is false. */\n arrowClassName?: string\n /** Content prop of the popover. */\n content?: (() => React.ReactNode) | React.ReactNode\n trigger?: React.ReactNode\n position: Position\n withArrow?: boolean\n /**\n * Whether vague positioning is allowed. When set to true the popover prefers to be fully visible over being correctly centered.\n */\n allowVaguePositioning?: boolean\n /** Gap between the popover wrapper and the arrow. */\n gapSize: number\n}\n\nclass Popover extends React.Component<Props> {\n public static displayName: string\n public static defaultProps: Props\n\n componentDidMount() {\n if (this.props.visible) {\n this._updatePopoverPosition()\n }\n }\n\n componentDidUpdate(prevProps: Props) {\n if (this.wrapper && this.props.visible) {\n const positionChanged = prevProps.position !== this.props.position\n const vaguePositioningChanged =\n prevProps.allowVaguePositioning !== this.props.allowVaguePositioning\n const visibilityChanged = prevProps.visible !== this.props.visible\n const arrowChanged = prevProps.withArrow !== this.props.withArrow\n const gapSizeChanged = prevProps.gapSize !== this.props.gapSize\n const contentChanged = prevProps.content !== this.props.content\n if (\n positionChanged ||\n vaguePositioningChanged ||\n visibilityChanged ||\n arrowChanged ||\n gapSizeChanged ||\n contentChanged\n ) {\n this._updatePopoverPosition()\n }\n }\n }\n\n popover!: HTMLElement\n wrapper!: HTMLElement\n\n _updatePopoverPosition = () => {\n const { position, allowVaguePositioning, gapSize } = this.props\n const wrapperRect = this.wrapper.getBoundingClientRect()\n const popoverRect = this.popover.getBoundingClientRect()\n\n // Instead of using the documentElement find the nearest absolutely positioned element\n const documentEl = document.documentElement\n let node = this.wrapper\n let foundParent = false\n while (!foundParent) {\n const styles = getComputedStyle(node)\n const position = styles.getPropertyValue('position')\n if (position === 'absolute' || node === documentEl || !node.parentElement) {\n foundParent = true\n } else {\n node = node.parentElement\n }\n }\n const nodeRect = node.getBoundingClientRect()\n const windowDimensions = {\n height: nodeRect.height,\n width: nodeRect.width,\n }\n\n const popoverDimensions = {\n height: popoverRect.height,\n width: popoverRect.width,\n }\n const wrapperDimensions = {\n height: wrapperRect.height,\n width: wrapperRect.width,\n }\n const wrapperPositionRelative = {\n x: wrapperRect.left - nodeRect.left,\n y: wrapperRect.top - nodeRect.top,\n }\n const wrapperPositionAbsolute = {\n x: wrapperRect.left,\n y: wrapperRect.top,\n }\n\n const positionsToTry: RelativePosition[] =\n position === 'auto'\n ? ['top', 'right', 'bottom', 'left', 'top']\n : position === 'vertical'\n ? ['top', 'bottom']\n : position === 'horizontal'\n ? ['left', 'right']\n : [position]\n\n for (let index = 0; index < positionsToTry.length; index++) {\n const currentPosition = positionsToTry[index]\n const enoughSpaceAtPosition =\n currentPosition != null\n ? hasEnoughSpace(\n windowDimensions,\n popoverDimensions,\n wrapperDimensions,\n wrapperPositionRelative,\n currentPosition,\n gapSize,\n )\n : false\n\n if (enoughSpaceAtPosition || index === positionsToTry.length - 1) {\n const popoverPosition =\n currentPosition != null\n ? calculatePosition(\n currentPosition,\n wrapperDimensions,\n wrapperPositionAbsolute,\n popoverDimensions,\n gapSize,\n )\n : wrapperPositionAbsolute\n this.popover.style.top = `${popoverPosition.y}px`\n this.popover.style.left = `${popoverPosition.x}px`\n\n /**\n * Correct placement if vague positioning is allowed.\n * When it's not allowed we \"cut off\" popovers and display them\n * out of the viewport to maintain their centered position.\n */\n if (allowVaguePositioning) {\n // correct horizontally\n if (popoverPosition.x < 0) {\n this.popover.style.left = `${2 * gapSize}px`\n }\n // correct vertically\n if (popoverPosition.y + popoverDimensions.height > windowDimensions.height) {\n this.popover.style.top = `${\n windowDimensions.height - popoverDimensions.height - 2 * gapSize\n }px`\n }\n }\n\n if (currentPosition !== position) {\n this.popover.className = this._getClassNameForPosition(currentPosition)\n }\n break\n }\n }\n }\n\n _getClassNameForPosition = (position: Position | undefined) => {\n const { visible, withArrow, arrowClassName } = this.props\n const className = classNames('reactist_popover', { visible })\n\n if (visible && withArrow) {\n return classNames(className, arrowClassName, {\n arrow_top: position === 'bottom',\n arrow_right: position === 'left',\n arrow_bottom: position === 'auto' || position === 'top',\n arrow_left: position === 'right',\n })\n }\n return className\n }\n\n _updatePopoverRef = (popover: HTMLElement) => {\n this.popover = popover\n if (typeof this.props.popoverRef === 'function') {\n this.props.popoverRef(popover)\n }\n }\n\n _updateWrapperRef = (wrapper: HTMLElement) => {\n this.wrapper = wrapper\n if (typeof this.props.wrapperRef === 'function') {\n this.props.wrapperRef(wrapper)\n }\n }\n\n render() {\n const {\n position,\n wrapperClassName,\n popoverClassName,\n onMouseEnter,\n onMouseLeave,\n onClick,\n trigger,\n content,\n } = this.props\n const popoverClass = position ? this._getClassNameForPosition(position) : ''\n const popoverContentClass = classNames('reactist_popover__content', popoverClassName)\n const wrapperClass = classNames('reactist_popover__wrapper', wrapperClassName)\n const triggerElement = React.Children.only<React.ReactElement>(\n trigger as React.ReactElement,\n )\n\n function handleTriggerClick(event: React.SyntheticEvent) {\n // @ts-expect-error This is temporary while we revisit the Popover interface\n if (onClick) onClick(event)\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n if (typeof triggerElement.props.onClick === 'function') {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call\n triggerElement.props.onClick(event)\n }\n }\n\n return (\n <span\n className={wrapperClass}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n ref={this._updateWrapperRef}\n >\n {React.cloneElement(triggerElement, { onClick: handleTriggerClick })}\n <span className={popoverClass} ref={this._updatePopoverRef}>\n {this.props.visible ? (\n <span className={popoverContentClass}>\n {typeof content === 'function' ? content() : content}\n </span>\n ) : null}\n </span>\n </span>\n )\n }\n}\nPopover.displayName = 'Popover'\nPopover.defaultProps = {\n position: 'auto',\n gapSize: 5, // default size of the arrow (see `tooltip.less`)\n}\n\nexport { Popover }\n"],"names":["Popover","React","Component","popover","wrapper","_updatePopoverPosition","position","allowVaguePositioning","gapSize","props","wrapperRect","getBoundingClientRect","popoverRect","documentEl","document","documentElement","node","foundParent","styles","getComputedStyle","getPropertyValue","parentElement","nodeRect","windowDimensions","height","width","popoverDimensions","wrapperDimensions","wrapperPositionRelative","x","left","y","top","wrapperPositionAbsolute","positionsToTry","index","length","currentPosition","enoughSpaceAtPosition","hasEnoughSpace","popoverPosition","calculatePosition","style","className","_getClassNameForPosition","visible","withArrow","arrowClassName","classNames","arrow_top","arrow_right","arrow_bottom","arrow_left","_updatePopoverRef","popoverRef","_updateWrapperRef","wrapperRef","componentDidMount","componentDidUpdate","prevProps","positionChanged","vaguePositioningChanged","visibilityChanged","arrowChanged","gapSizeChanged","contentChanged","content","render","wrapperClassName","popoverClassName","onMouseEnter","onMouseLeave","onClick","trigger","popoverClass","popoverContentClass","wrapperClass","triggerElement","Children","only","handleTriggerClick","event","ref","cloneElement","displayName","defaultProps"],"mappings":"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"}