@dxc-technology/halstack-react 0.0.0-dec566a → 0.0.0-df9abc7

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 (380) hide show
  1. package/README.md +1 -2
  2. package/dist/index.d.mts +6581 -0
  3. package/dist/index.d.ts +6581 -0
  4. package/dist/index.js +14078 -0
  5. package/dist/index.mjs +14020 -0
  6. package/package.json +68 -68
  7. package/BackgroundColorContext.d.ts +0 -1
  8. package/BackgroundColorContext.js +0 -30
  9. package/HalstackContext.d.ts +0 -1249
  10. package/HalstackContext.js +0 -310
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -169
  13. package/accordion/Accordion.stories.tsx +0 -252
  14. package/accordion/Accordion.test.js +0 -56
  15. package/accordion/types.d.ts +0 -57
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -101
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -252
  20. package/accordion-group/AccordionGroup.test.js +0 -98
  21. package/accordion-group/AccordionGroupAccordion.d.ts +0 -4
  22. package/accordion-group/AccordionGroupAccordion.js +0 -31
  23. package/accordion-group/AccordionGroupContext.d.ts +0 -3
  24. package/accordion-group/AccordionGroupContext.js +0 -8
  25. package/accordion-group/types.d.ts +0 -67
  26. package/accordion-group/types.js +0 -5
  27. package/action-icon/ActionIcon.d.ts +0 -4
  28. package/action-icon/ActionIcon.js +0 -48
  29. package/action-icon/ActionIcon.stories.tsx +0 -41
  30. package/action-icon/ActionIcon.test.js +0 -64
  31. package/action-icon/types.d.ts +0 -26
  32. package/action-icon/types.js +0 -5
  33. package/alert/Alert.d.ts +0 -4
  34. package/alert/Alert.js +0 -200
  35. package/alert/Alert.stories.tsx +0 -198
  36. package/alert/Alert.test.js +0 -75
  37. package/alert/types.d.ts +0 -49
  38. package/alert/types.js +0 -5
  39. package/badge/Badge.d.ts +0 -4
  40. package/badge/Badge.js +0 -159
  41. package/badge/Badge.stories.tsx +0 -210
  42. package/badge/Badge.test.js +0 -30
  43. package/badge/types.d.ts +0 -54
  44. package/badge/types.js +0 -5
  45. package/bleed/Bleed.d.ts +0 -3
  46. package/bleed/Bleed.js +0 -43
  47. package/bleed/Bleed.stories.tsx +0 -342
  48. package/bleed/types.d.ts +0 -37
  49. package/bleed/types.js +0 -5
  50. package/box/Box.d.ts +0 -4
  51. package/box/Box.js +0 -75
  52. package/box/Box.stories.tsx +0 -119
  53. package/box/Box.test.js +0 -13
  54. package/box/types.d.ts +0 -32
  55. package/box/types.js +0 -5
  56. package/bulleted-list/BulletedList.d.ts +0 -7
  57. package/bulleted-list/BulletedList.js +0 -92
  58. package/bulleted-list/BulletedList.stories.tsx +0 -115
  59. package/bulleted-list/types.d.ts +0 -38
  60. package/bulleted-list/types.js +0 -5
  61. package/button/Button.d.ts +0 -4
  62. package/button/Button.js +0 -121
  63. package/button/Button.stories.tsx +0 -326
  64. package/button/Button.test.js +0 -38
  65. package/button/types.d.ts +0 -57
  66. package/button/types.js +0 -5
  67. package/card/Card.d.ts +0 -4
  68. package/card/Card.js +0 -120
  69. package/card/Card.stories.tsx +0 -171
  70. package/card/Card.test.js +0 -39
  71. package/card/types.d.ts +0 -62
  72. package/card/types.js +0 -5
  73. package/checkbox/Checkbox.d.ts +0 -4
  74. package/checkbox/Checkbox.js +0 -215
  75. package/checkbox/Checkbox.stories.tsx +0 -222
  76. package/checkbox/Checkbox.test.js +0 -199
  77. package/checkbox/types.d.ts +0 -72
  78. package/checkbox/types.js +0 -5
  79. package/chip/Chip.d.ts +0 -4
  80. package/chip/Chip.js +0 -121
  81. package/chip/Chip.stories.tsx +0 -214
  82. package/chip/Chip.test.js +0 -41
  83. package/chip/types.d.ts +0 -45
  84. package/chip/types.js +0 -5
  85. package/common/coreTokens.d.ts +0 -237
  86. package/common/coreTokens.js +0 -184
  87. package/common/utils.d.ts +0 -1
  88. package/common/utils.js +0 -16
  89. package/common/variables.d.ts +0 -1395
  90. package/common/variables.js +0 -1267
  91. package/container/Container.d.ts +0 -4
  92. package/container/Container.js +0 -194
  93. package/container/Container.stories.tsx +0 -214
  94. package/container/types.d.ts +0 -74
  95. package/container/types.js +0 -5
  96. package/contextual-menu/ContextualMenu.d.ts +0 -7
  97. package/contextual-menu/ContextualMenu.js +0 -71
  98. package/contextual-menu/ContextualMenu.stories.tsx +0 -182
  99. package/contextual-menu/ContextualMenu.test.js +0 -71
  100. package/contextual-menu/MenuItemAction.d.ts +0 -4
  101. package/contextual-menu/MenuItemAction.js +0 -46
  102. package/contextual-menu/types.d.ts +0 -22
  103. package/contextual-menu/types.js +0 -5
  104. package/date-input/Calendar.d.ts +0 -4
  105. package/date-input/Calendar.js +0 -214
  106. package/date-input/DateInput.d.ts +0 -4
  107. package/date-input/DateInput.js +0 -223
  108. package/date-input/DateInput.stories.tsx +0 -285
  109. package/date-input/DateInput.test.js +0 -808
  110. package/date-input/DatePicker.d.ts +0 -4
  111. package/date-input/DatePicker.js +0 -115
  112. package/date-input/Icons.d.ts +0 -6
  113. package/date-input/Icons.js +0 -58
  114. package/date-input/YearPicker.d.ts +0 -4
  115. package/date-input/YearPicker.js +0 -100
  116. package/date-input/types.d.ts +0 -164
  117. package/date-input/types.js +0 -5
  118. package/dialog/Dialog.d.ts +0 -4
  119. package/dialog/Dialog.js +0 -104
  120. package/dialog/Dialog.stories.tsx +0 -365
  121. package/dialog/Dialog.test.js +0 -307
  122. package/dialog/types.d.ts +0 -36
  123. package/dialog/types.js +0 -5
  124. package/divider/Divider.d.ts +0 -4
  125. package/divider/Divider.js +0 -36
  126. package/divider/Divider.stories.tsx +0 -223
  127. package/divider/Divider.test.js +0 -38
  128. package/divider/types.d.ts +0 -21
  129. package/divider/types.js +0 -5
  130. package/dropdown/Dropdown.d.ts +0 -4
  131. package/dropdown/Dropdown.js +0 -319
  132. package/dropdown/Dropdown.stories.tsx +0 -427
  133. package/dropdown/Dropdown.test.js +0 -599
  134. package/dropdown/DropdownMenu.d.ts +0 -4
  135. package/dropdown/DropdownMenu.js +0 -63
  136. package/dropdown/DropdownMenuItem.d.ts +0 -4
  137. package/dropdown/DropdownMenuItem.js +0 -70
  138. package/dropdown/types.d.ts +0 -96
  139. package/dropdown/types.js +0 -5
  140. package/file-input/FileInput.d.ts +0 -4
  141. package/file-input/FileInput.js +0 -479
  142. package/file-input/FileInput.stories.tsx +0 -618
  143. package/file-input/FileInput.test.js +0 -459
  144. package/file-input/FileItem.d.ts +0 -4
  145. package/file-input/FileItem.js +0 -135
  146. package/file-input/types.d.ts +0 -129
  147. package/file-input/types.js +0 -5
  148. package/flex/Flex.d.ts +0 -4
  149. package/flex/Flex.js +0 -57
  150. package/flex/Flex.stories.tsx +0 -112
  151. package/flex/types.d.ts +0 -97
  152. package/flex/types.js +0 -5
  153. package/footer/Footer.d.ts +0 -4
  154. package/footer/Footer.js +0 -138
  155. package/footer/Footer.stories.tsx +0 -171
  156. package/footer/Footer.test.js +0 -85
  157. package/footer/Icons.d.ts +0 -3
  158. package/footer/Icons.js +0 -136
  159. package/footer/types.d.ts +0 -64
  160. package/footer/types.js +0 -5
  161. package/grid/Grid.d.ts +0 -7
  162. package/grid/Grid.js +0 -76
  163. package/grid/Grid.stories.tsx +0 -219
  164. package/grid/types.d.ts +0 -115
  165. package/grid/types.js +0 -5
  166. package/header/Header.d.ts +0 -8
  167. package/header/Header.js +0 -220
  168. package/header/Header.stories.tsx +0 -251
  169. package/header/Header.test.js +0 -66
  170. package/header/Icons.d.ts +0 -2
  171. package/header/Icons.js +0 -29
  172. package/header/types.d.ts +0 -33
  173. package/header/types.js +0 -5
  174. package/heading/Heading.d.ts +0 -4
  175. package/heading/Heading.js +0 -137
  176. package/heading/Heading.stories.tsx +0 -54
  177. package/heading/Heading.test.js +0 -169
  178. package/heading/types.d.ts +0 -33
  179. package/heading/types.js +0 -5
  180. package/icon/Icon.d.ts +0 -4
  181. package/icon/Icon.js +0 -33
  182. package/icon/Icon.stories.tsx +0 -28
  183. package/icon/types.d.ts +0 -4
  184. package/icon/types.js +0 -5
  185. package/image/Image.d.ts +0 -4
  186. package/image/Image.js +0 -70
  187. package/image/Image.stories.tsx +0 -129
  188. package/image/types.d.ts +0 -72
  189. package/image/types.js +0 -5
  190. package/inset/Inset.d.ts +0 -3
  191. package/inset/Inset.js +0 -43
  192. package/inset/Inset.stories.tsx +0 -230
  193. package/inset/types.d.ts +0 -37
  194. package/inset/types.js +0 -5
  195. package/layout/ApplicationLayout.d.ts +0 -20
  196. package/layout/ApplicationLayout.js +0 -134
  197. package/layout/ApplicationLayout.stories.tsx +0 -162
  198. package/layout/Icons.d.ts +0 -8
  199. package/layout/Icons.js +0 -58
  200. package/layout/types.d.ts +0 -41
  201. package/layout/types.js +0 -5
  202. package/link/Link.d.ts +0 -4
  203. package/link/Link.js +0 -115
  204. package/link/Link.stories.tsx +0 -253
  205. package/link/Link.test.js +0 -63
  206. package/link/types.d.ts +0 -54
  207. package/link/types.js +0 -5
  208. package/main.d.ts +0 -49
  209. package/main.js +0 -357
  210. package/nav-tabs/NavTabs.d.ts +0 -7
  211. package/nav-tabs/NavTabs.js +0 -93
  212. package/nav-tabs/NavTabs.stories.tsx +0 -276
  213. package/nav-tabs/NavTabs.test.js +0 -76
  214. package/nav-tabs/NavTabsContext.d.ts +0 -3
  215. package/nav-tabs/NavTabsContext.js +0 -8
  216. package/nav-tabs/Tab.d.ts +0 -4
  217. package/nav-tabs/Tab.js +0 -118
  218. package/nav-tabs/types.d.ts +0 -52
  219. package/nav-tabs/types.js +0 -5
  220. package/number-input/NumberInput.d.ts +0 -4
  221. package/number-input/NumberInput.js +0 -86
  222. package/number-input/NumberInput.stories.tsx +0 -131
  223. package/number-input/NumberInput.test.js +0 -989
  224. package/number-input/NumberInputContext.d.ts +0 -3
  225. package/number-input/NumberInputContext.js +0 -8
  226. package/number-input/types.d.ts +0 -136
  227. package/number-input/types.js +0 -5
  228. package/paginator/Icons.d.ts +0 -5
  229. package/paginator/Icons.js +0 -40
  230. package/paginator/Paginator.d.ts +0 -4
  231. package/paginator/Paginator.js +0 -135
  232. package/paginator/Paginator.stories.tsx +0 -87
  233. package/paginator/Paginator.test.js +0 -335
  234. package/paginator/types.d.ts +0 -38
  235. package/paginator/types.js +0 -5
  236. package/paragraph/Paragraph.d.ts +0 -5
  237. package/paragraph/Paragraph.js +0 -22
  238. package/paragraph/Paragraph.stories.tsx +0 -27
  239. package/password-input/Icons.d.ts +0 -6
  240. package/password-input/Icons.js +0 -35
  241. package/password-input/PasswordInput.d.ts +0 -4
  242. package/password-input/PasswordInput.js +0 -97
  243. package/password-input/PasswordInput.stories.tsx +0 -99
  244. package/password-input/PasswordInput.test.js +0 -198
  245. package/password-input/types.d.ts +0 -111
  246. package/password-input/types.js +0 -5
  247. package/progress-bar/ProgressBar.d.ts +0 -4
  248. package/progress-bar/ProgressBar.js +0 -144
  249. package/progress-bar/ProgressBar.stories.tsx +0 -93
  250. package/progress-bar/ProgressBar.test.js +0 -93
  251. package/progress-bar/types.d.ts +0 -37
  252. package/progress-bar/types.js +0 -5
  253. package/quick-nav/QuickNav.d.ts +0 -4
  254. package/quick-nav/QuickNav.js +0 -94
  255. package/quick-nav/QuickNav.stories.tsx +0 -356
  256. package/quick-nav/types.d.ts +0 -21
  257. package/quick-nav/types.js +0 -5
  258. package/radio-group/Radio.d.ts +0 -4
  259. package/radio-group/Radio.js +0 -124
  260. package/radio-group/RadioGroup.d.ts +0 -4
  261. package/radio-group/RadioGroup.js +0 -235
  262. package/radio-group/RadioGroup.stories.tsx +0 -214
  263. package/radio-group/RadioGroup.test.js +0 -756
  264. package/radio-group/types.d.ts +0 -114
  265. package/radio-group/types.js +0 -5
  266. package/resultset-table/Icons.d.ts +0 -7
  267. package/resultset-table/Icons.js +0 -47
  268. package/resultset-table/ResultsetTable.d.ts +0 -7
  269. package/resultset-table/ResultsetTable.js +0 -170
  270. package/resultset-table/ResultsetTable.stories.tsx +0 -401
  271. package/resultset-table/ResultsetTable.test.js +0 -381
  272. package/resultset-table/types.d.ts +0 -100
  273. package/resultset-table/types.js +0 -5
  274. package/select/Icons.d.ts +0 -10
  275. package/select/Icons.js +0 -89
  276. package/select/Listbox.d.ts +0 -4
  277. package/select/Listbox.js +0 -143
  278. package/select/Option.d.ts +0 -4
  279. package/select/Option.js +0 -87
  280. package/select/Select.d.ts +0 -4
  281. package/select/Select.js +0 -590
  282. package/select/Select.stories.tsx +0 -971
  283. package/select/Select.test.js +0 -2370
  284. package/select/types.d.ts +0 -209
  285. package/select/types.js +0 -5
  286. package/sidenav/Icons.d.ts +0 -7
  287. package/sidenav/Icons.js +0 -47
  288. package/sidenav/Sidenav.d.ts +0 -10
  289. package/sidenav/Sidenav.js +0 -197
  290. package/sidenav/Sidenav.stories.tsx +0 -282
  291. package/sidenav/Sidenav.test.js +0 -37
  292. package/sidenav/SidenavContext.d.ts +0 -5
  293. package/sidenav/SidenavContext.js +0 -13
  294. package/sidenav/types.d.ts +0 -76
  295. package/sidenav/types.js +0 -5
  296. package/slider/Slider.d.ts +0 -4
  297. package/slider/Slider.js +0 -285
  298. package/slider/Slider.test.js +0 -254
  299. package/slider/types.d.ts +0 -86
  300. package/slider/types.js +0 -5
  301. package/spinner/Spinner.d.ts +0 -4
  302. package/spinner/Spinner.js +0 -206
  303. package/spinner/Spinner.stories.tsx +0 -129
  304. package/spinner/Spinner.test.js +0 -55
  305. package/spinner/types.d.ts +0 -32
  306. package/spinner/types.js +0 -5
  307. package/status-light/StatusLight.d.ts +0 -4
  308. package/status-light/StatusLight.js +0 -51
  309. package/status-light/StatusLight.stories.tsx +0 -74
  310. package/status-light/StatusLight.test.js +0 -25
  311. package/status-light/types.d.ts +0 -17
  312. package/status-light/types.js +0 -5
  313. package/switch/Switch.d.ts +0 -4
  314. package/switch/Switch.js +0 -214
  315. package/switch/Switch.stories.tsx +0 -137
  316. package/switch/Switch.test.js +0 -180
  317. package/switch/types.d.ts +0 -66
  318. package/switch/types.js +0 -5
  319. package/table/DropdownTheme.js +0 -62
  320. package/table/Table.d.ts +0 -8
  321. package/table/Table.js +0 -161
  322. package/table/Table.stories.tsx +0 -651
  323. package/table/Table.test.js +0 -113
  324. package/table/types.d.ts +0 -49
  325. package/table/types.js +0 -5
  326. package/tabs/Tab.d.ts +0 -4
  327. package/tabs/Tab.js +0 -116
  328. package/tabs/Tabs.d.ts +0 -4
  329. package/tabs/Tabs.js +0 -384
  330. package/tabs/Tabs.stories.tsx +0 -226
  331. package/tabs/Tabs.test.js +0 -294
  332. package/tabs/types.d.ts +0 -92
  333. package/tabs/types.js +0 -5
  334. package/tag/Tag.d.ts +0 -4
  335. package/tag/Tag.js +0 -151
  336. package/tag/Tag.stories.tsx +0 -155
  337. package/tag/Tag.test.js +0 -49
  338. package/tag/types.d.ts +0 -69
  339. package/tag/types.js +0 -5
  340. package/text-input/Suggestion.d.ts +0 -4
  341. package/text-input/Suggestion.js +0 -67
  342. package/text-input/Suggestions.d.ts +0 -4
  343. package/text-input/Suggestions.js +0 -86
  344. package/text-input/TextInput.d.ts +0 -4
  345. package/text-input/TextInput.js +0 -567
  346. package/text-input/TextInput.stories.tsx +0 -465
  347. package/text-input/TextInput.test.js +0 -1756
  348. package/text-input/types.d.ts +0 -205
  349. package/text-input/types.js +0 -5
  350. package/textarea/Textarea.d.ts +0 -4
  351. package/textarea/Textarea.js +0 -234
  352. package/textarea/Textarea.stories.tsx +0 -174
  353. package/textarea/Textarea.test.js +0 -406
  354. package/textarea/types.d.ts +0 -141
  355. package/textarea/types.js +0 -5
  356. package/toggle-group/ToggleGroup.d.ts +0 -4
  357. package/toggle-group/ToggleGroup.js +0 -201
  358. package/toggle-group/ToggleGroup.stories.tsx +0 -218
  359. package/toggle-group/ToggleGroup.test.js +0 -137
  360. package/toggle-group/types.d.ts +0 -114
  361. package/toggle-group/types.js +0 -5
  362. package/typography/Typography.d.ts +0 -4
  363. package/typography/Typography.js +0 -23
  364. package/typography/Typography.stories.tsx +0 -198
  365. package/typography/types.d.ts +0 -18
  366. package/typography/types.js +0 -5
  367. package/useTheme.d.ts +0 -1148
  368. package/useTheme.js +0 -15
  369. package/useTranslatedLabels.d.ts +0 -85
  370. package/useTranslatedLabels.js +0 -14
  371. package/utils/BaseTypography.d.ts +0 -21
  372. package/utils/BaseTypography.js +0 -94
  373. package/utils/FocusLock.d.ts +0 -13
  374. package/utils/FocusLock.js +0 -124
  375. package/wizard/Wizard.d.ts +0 -4
  376. package/wizard/Wizard.js +0 -250
  377. package/wizard/Wizard.stories.tsx +0 -253
  378. package/wizard/Wizard.test.js +0 -114
  379. package/wizard/types.d.ts +0 -64
  380. package/wizard/types.js +0 -5
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import { DatePickerPropsType } from "./types";
3
- declare const _default: React.MemoExoticComponent<({ date, onDateSelect, id }: DatePickerPropsType) => JSX.Element>;
4
- export default _default;
@@ -1,115 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
- var _dayjs = _interopRequireDefault(require("dayjs"));
12
- var _react = _interopRequireWildcard(require("react"));
13
- var _styledComponents = _interopRequireDefault(require("styled-components"));
14
- var _Calendar = _interopRequireDefault(require("./Calendar"));
15
- var _YearPicker = _interopRequireDefault(require("./YearPicker"));
16
- var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
17
- var _Icons = require("./Icons");
18
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
19
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
21
- var today = (0, _dayjs["default"])();
22
- var DxcDatePicker = function DxcDatePicker(_ref) {
23
- var date = _ref.date,
24
- onDateSelect = _ref.onDateSelect,
25
- id = _ref.id;
26
- var _useState = (0, _react.useState)(date !== null && date !== void 0 && date.isValid() ? date : (0, _dayjs["default"])()),
27
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
28
- innerDate = _useState2[0],
29
- setInnerDate = _useState2[1];
30
- var _useState3 = (0, _react.useState)("calendar"),
31
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
32
- content = _useState4[0],
33
- setContent = _useState4[1];
34
- var selectedDate = date !== null && date !== void 0 && date.isValid() ? date : null;
35
- var translatedLabels = (0, _useTranslatedLabels["default"])();
36
- var handleDateSelect = function handleDateSelect(date) {
37
- setInnerDate(date);
38
- onDateSelect(date);
39
- };
40
- var handleOnYearSelect = function handleOnYearSelect(year) {
41
- setInnerDate(innerDate.set("year", year));
42
- setContent("calendar");
43
- };
44
- var handleMonthChange = function handleMonthChange(date) {
45
- setInnerDate(date);
46
- };
47
- return /*#__PURE__*/_react["default"].createElement(DatePicker, {
48
- id: id
49
- }, /*#__PURE__*/_react["default"].createElement(PickerHeader, null, /*#__PURE__*/_react["default"].createElement(HeaderButton, {
50
- "aria-label": translatedLabels.calendar.previousMonthTitle,
51
- title: translatedLabels.calendar.previousMonthTitle,
52
- onClick: function onClick() {
53
- return handleMonthChange(innerDate.set("month", innerDate.get("month") - 1));
54
- }
55
- }, _Icons.leftCaret), /*#__PURE__*/_react["default"].createElement(HeaderYearTrigger, {
56
- "aria-live": "polite",
57
- onClick: function onClick() {
58
- return setContent(function (content) {
59
- return content === "yearPicker" ? "calendar" : "yearPicker";
60
- });
61
- }
62
- }, /*#__PURE__*/_react["default"].createElement(HeaderYearTriggerLabel, null, translatedLabels.calendar.months[innerDate.get("month")], " ", innerDate.format("YYYY")), content === "yearPicker" ? _Icons.upCaret : _Icons.downCaret), /*#__PURE__*/_react["default"].createElement(HeaderButton, {
63
- "aria-label": translatedLabels.calendar.nextMonthTitle,
64
- title: translatedLabels.calendar.nextMonthTitle,
65
- onClick: function onClick() {
66
- return handleMonthChange(innerDate.set("month", innerDate.get("month") + 1));
67
- }
68
- }, _Icons.rightCaret)), content === "calendar" && /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {
69
- innerDate: innerDate,
70
- selectedDate: selectedDate,
71
- onInnerDateChange: setInnerDate,
72
- onDaySelect: handleDateSelect,
73
- today: today
74
- }), content === "yearPicker" && /*#__PURE__*/_react["default"].createElement(_YearPicker["default"], {
75
- selectedDate: selectedDate,
76
- onYearSelect: handleOnYearSelect,
77
- today: today
78
- }));
79
- };
80
- var DatePicker = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n padding-top: 16px;\n background-color: ", ";\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n border: ", ";\n border-radius: 4px;\n width: fit-content;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
81
- return props.theme.dateInput.pickerBackgroundColor;
82
- }, function (props) {
83
- return "".concat(props.theme.dateInput.pickerBorderWidth, " ").concat(props.theme.dateInput.pickerBorderStyle, "\n ").concat(props.theme.dateInput.pickerBorderColor);
84
- }, function (props) {
85
- return props.theme.dateInput.pickerFontFamily;
86
- }, function (props) {
87
- return props.theme.dateInput.pickerFontSize;
88
- }, function (props) {
89
- return props.theme.dateInput.pickerFontColor;
90
- }, function (props) {
91
- return props.theme.dateInput.pickerFontWeight;
92
- });
93
- var PickerHeader = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: space-between;\n padding: 0px 16px;\n"])));
94
- var HeaderButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0px;\n color: ", ";\n background-color: ", ";\n border-radius: 4px;\n border: none;\n cursor: pointer;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:focus {\n outline: ", ";\n }\n &:active {\n color: ", ";\n background-color: ", ";\n }\n svg {\n width: 24px;\n height: 24px;\n }\n"])), function (props) {
95
- return props.theme.dateInput.pickerHeaderFontColor;
96
- }, function (props) {
97
- return props.theme.dateInput.pickerHeaderBackgroundColor;
98
- }, function (props) {
99
- return props.theme.dateInput.pickerHeaderHoverFontColor;
100
- }, function (props) {
101
- return props.theme.dateInput.pickerHeaderHoverBackgroundColor;
102
- }, function (props) {
103
- return "".concat(props.theme.dateInput.pickerFocusColor, " solid\n ").concat(props.theme.dateInput.pickerFocusWidth);
104
- }, function (props) {
105
- return props.theme.dateInput.pickerHeaderActiveFontColor;
106
- }, function (props) {
107
- return props.theme.dateInput.pickerHeaderActiveBackgroundColor;
108
- });
109
- var HeaderYearTrigger = (0, _styledComponents["default"])(HeaderButton)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n gap: 8px;\n height: 40px;\n width: 172px;\n"])));
110
- var HeaderYearTriggerLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: ", ";\n font-size: ", ";\n"])), function (props) {
111
- return props.theme.dateInput.pickerFontFamily;
112
- }, function (props) {
113
- return props.theme.dateInput.pickerHeaderFontSize;
114
- });
115
- var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(DxcDatePicker);
@@ -1,6 +0,0 @@
1
- import React from "react";
2
- export declare const calendarIcon: React.JSX.Element;
3
- export declare const leftCaret: React.JSX.Element;
4
- export declare const rightCaret: React.JSX.Element;
5
- export declare const downCaret: React.JSX.Element;
6
- export declare const upCaret: React.JSX.Element;
@@ -1,58 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.upCaret = exports.rightCaret = exports.leftCaret = exports.downCaret = exports.calendarIcon = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var calendarIcon = exports.calendarIcon = /*#__PURE__*/_react["default"].createElement("svg", {
10
- xmlns: "http://www.w3.org/2000/svg",
11
- height: "24",
12
- viewBox: "0 0 24 24",
13
- width: "24",
14
- fill: "currentColor"
15
- }, /*#__PURE__*/_react["default"].createElement("path", {
16
- d: "M0 0h24v24H0z",
17
- fill: "none"
18
- }), /*#__PURE__*/_react["default"].createElement("path", {
19
- d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
20
- }));
21
- var leftCaret = exports.leftCaret = /*#__PURE__*/_react["default"].createElement("svg", {
22
- fill: "currentColor",
23
- focusable: "false",
24
- viewBox: "0 0 24 24"
25
- }, /*#__PURE__*/_react["default"].createElement("path", {
26
- d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
27
- }), /*#__PURE__*/_react["default"].createElement("path", {
28
- fill: "none",
29
- d: "M0 0h24v24H0V0z"
30
- }));
31
- var rightCaret = exports.rightCaret = /*#__PURE__*/_react["default"].createElement("svg", {
32
- fill: "currentColor",
33
- focusable: "false",
34
- viewBox: "0 0 24 24"
35
- }, /*#__PURE__*/_react["default"].createElement("path", {
36
- d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
37
- }), /*#__PURE__*/_react["default"].createElement("path", {
38
- fill: "none",
39
- d: "M0 0h24v24H0V0z"
40
- }));
41
- var downCaret = exports.downCaret = /*#__PURE__*/_react["default"].createElement("svg", {
42
- xmlns: "http://www.w3.org/2000/svg",
43
- width: "24",
44
- height: "24",
45
- viewBox: "0 0 24 24"
46
- }, /*#__PURE__*/_react["default"].createElement("path", {
47
- d: "M7.5 10L12.5 15L17.5 10H7.5Z",
48
- fill: "currentColor"
49
- }));
50
- var upCaret = exports.upCaret = /*#__PURE__*/_react["default"].createElement("svg", {
51
- xmlns: "http://www.w3.org/2000/svg",
52
- height: "24",
53
- width: "24",
54
- viewBox: "0 0 24 24"
55
- }, /*#__PURE__*/_react["default"].createElement("path", {
56
- d: "m7 14 5-5 5 5Z",
57
- fill: "currentColor"
58
- }));
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import { YearPickerPropsType } from "./types";
3
- declare const _default: React.MemoExoticComponent<({ onYearSelect, selectedDate, today }: YearPickerPropsType) => JSX.Element>;
4
- export default _default;
@@ -1,100 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
- var _dayjs = _interopRequireDefault(require("dayjs"));
12
- var _react = _interopRequireWildcard(require("react"));
13
- var _styledComponents = _interopRequireDefault(require("styled-components"));
14
- var _templateObject, _templateObject2;
15
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
17
- var getYearsArray = function getYearsArray() {
18
- var yearList = [];
19
- for (var i = 1899; i <= 2100; i++) {
20
- yearList.push(i);
21
- }
22
- return yearList;
23
- };
24
- var yearList = getYearsArray();
25
- var YearPicker = function YearPicker(_ref) {
26
- var onYearSelect = _ref.onYearSelect,
27
- selectedDate = _ref.selectedDate,
28
- today = _ref.today;
29
- var _useState = (0, _react.useState)(selectedDate ? selectedDate.get("year") : (0, _dayjs["default"])().get("year")),
30
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
31
- yearToFocus = _useState2[0],
32
- setYearToFocus = _useState2[1];
33
- (0, _react.useEffect)(function () {
34
- var _yearToFocusEl$scroll;
35
- var yearToFocusEl = document.getElementById("year_".concat(yearToFocus));
36
- yearToFocusEl === null || yearToFocusEl === void 0 ? void 0 : (_yearToFocusEl$scroll = yearToFocusEl.scrollIntoView) === null || _yearToFocusEl$scroll === void 0 ? void 0 : _yearToFocusEl$scroll.call(yearToFocusEl, {
37
- block: "nearest",
38
- inline: "start"
39
- });
40
- yearToFocusEl === null || yearToFocusEl === void 0 ? void 0 : yearToFocusEl.focus();
41
- }, [yearToFocus]);
42
- var handleDayKeyboardEvent = function handleDayKeyboardEvent(event) {
43
- switch (event.key) {
44
- case "ArrowUp":
45
- setYearToFocus(function (prev) {
46
- return prev > 1899 ? prev - 1 : prev;
47
- });
48
- break;
49
- case "ArrowDown":
50
- setYearToFocus(function (prev) {
51
- return prev < 2100 ? prev + 1 : prev;
52
- });
53
- break;
54
- }
55
- };
56
- return /*#__PURE__*/_react["default"].createElement(YearPickerContainer, null, yearList.map(function (year) {
57
- return /*#__PURE__*/_react["default"].createElement(YearPickerButton, {
58
- "aria-label": year,
59
- key: year,
60
- selected: (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("year")) === year,
61
- "aria-selected": (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("year")) === year,
62
- tabIndex: yearToFocus === year ? 0 : -1,
63
- isCurrentYear: today.get("year") === year,
64
- onKeyDown: function onKeyDown(event) {
65
- return handleDayKeyboardEvent(event);
66
- },
67
- id: "year_".concat(year),
68
- onClick: function onClick() {
69
- onYearSelect(year);
70
- }
71
- }, year);
72
- }));
73
- };
74
- var YearPickerContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 4px;\n align-items: center;\n overflow-y: scroll;\n width: 292px;\n height: 312px;\n padding: 2px 8px 8px 8px;\n"])));
75
- var YearPickerButton = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 80px;\n min-height: 40px;\n line-height: 21px;\n background-color: transparent;\n border: none;\n border-radius: 50px;\n cursor: pointer;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n font-weight: ", ";\n\n ", "\n\n &:hover, &:focus, &:active {\n font-size: ", ";\n line-height: 36px;\n }\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:focus {\n color: ", ";\n outline: ", ";\n }\n &:active {\n color: ", ";\n background-color: ", " !important;\n }\n"])), function (props) {
76
- return props.theme.dateInput.pickerFontFamily;
77
- }, function (props) {
78
- return props.theme.dateInput.pickerFontSize;
79
- }, function (props) {
80
- return props.theme.dateInput.pickerFontColor;
81
- }, function (props) {
82
- return props.theme.dateInput.pickerFontWeight;
83
- }, function (props) {
84
- return props.selected ? "font-size: ".concat(props.theme.dateInput.pickerInteractedYearFontSize, ";\n line-height: 36px;\n color: ").concat(props.theme.dateInput.pickerSelectedFontColor, " !important;\n background-color: ").concat(props.theme.dateInput.pickerSelectedBackgroundColor, " !important;") : props.isCurrentYear ? "border: 1px solid ".concat(props.theme.dateInput.pickerCurrentDateBorderColor, "; \n color: ").concat(props.theme.dateInput.pickerCurrentYearFontColor, ";") : "";
85
- }, function (props) {
86
- return props.theme.dateInput.pickerInteractedYearFontSize;
87
- }, function (props) {
88
- return props.theme.dateInput.pickerHoverFontColor;
89
- }, function (props) {
90
- return props.theme.dateInput.pickerHoverBackgroundColor;
91
- }, function (props) {
92
- return props.theme.dateInput.pickerHoverFontColor;
93
- }, function (props) {
94
- return "".concat(props.theme.dateInput.pickerFocusColor, " solid\n ").concat(props.theme.dateInput.pickerFocusWidth);
95
- }, function (props) {
96
- return props.theme.dateInput.pickerActiveFontColor;
97
- }, function (props) {
98
- return props.theme.dateInput.pickerActiveBackgroundColor;
99
- });
100
- var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(YearPicker);
@@ -1,164 +0,0 @@
1
- import { Dayjs } from "dayjs";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- type Props = {
10
- /**
11
- * Initial value of the input element, only when it is uncontrolled.
12
- */
13
- defaultValue?: string;
14
- /**
15
- * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
16
- */
17
- value?: string;
18
- /**
19
- * Text to be placed above the date input.
20
- */
21
- label?: string;
22
- /**
23
- * Name attribute of the input element.
24
- */
25
- name?: string;
26
- /**
27
- * Helper text to be placed above the date.
28
- */
29
- helperText?: string;
30
- /**
31
- * If true, the date format will appear as placeholder in the field.
32
- */
33
- placeholder?: boolean;
34
- /**
35
- * The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
36
- */
37
- format?: string;
38
- /**
39
- * If true, the date input will have an action to clear the entered value.
40
- */
41
- clearable?: boolean;
42
- /**
43
- * If true, the component will be disabled.
44
- */
45
- disabled?: boolean;
46
- /**
47
- * If true, the date will be optional, showing the text '(Optional)'
48
- * next to the label. Otherwise, the field will be considered required and an error will be
49
- * passed as a parameter to the OnBlur and onChange functions when it has
50
- * not been filled.
51
- */
52
- optional?: boolean;
53
- /**
54
- * If true, the component will not be mutable, meaning the user can not edit the control.
55
- * The date picker cannot be opened either. In addition, the clear action will not be displayed
56
- * even if the flag is set to true.
57
- */
58
- readOnly?: boolean;
59
- /**
60
- * This function will be called when the user types within the input
61
- * element of the component. An object including the string value, the
62
- * error and the date value will be passed to this function.
63
- * If the string value is a valid date, error will
64
- * be undefined. Also, if the string value is not a valid date, date will be undefined.
65
- */
66
- onChange?: (val: {
67
- value: string;
68
- error?: string;
69
- date?: Date;
70
- }) => void;
71
- /**
72
- * This function will be called when the input element loses the focus.
73
- * An object including the string value, the error and the date value
74
- * will be passed to this function. If the string value is a valid date, error will
75
- * be undefined. Also, if the string value is not a valid date, date will be undefined.
76
- */
77
- onBlur?: (val: {
78
- value: string;
79
- error?: string;
80
- date?: Date;
81
- }) => void;
82
- /**
83
- * If it is a defined value and also a truthy string, the component will
84
- * change its appearance, showing the error below the date input
85
- * component. If the defined value is an empty string, it will reserve a
86
- * space below the component for a future error, but it would not change
87
- * its look. In case of being undefined or null, both the appearance and
88
- * the space for the error message would not be modified.
89
- */
90
- error?: string;
91
- /**
92
- * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
93
- * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
94
- */
95
- autocomplete?: string;
96
- /**
97
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
98
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
99
- */
100
- margin?: Space | Margin;
101
- /**
102
- * Size of the component.
103
- */
104
- size?: "medium" | "large" | "fillParent";
105
- /**
106
- * Value of the tabindex attribute.
107
- */
108
- tabIndex?: number;
109
- };
110
- export type DatePickerPropsType = {
111
- /**
112
- * Initial selected date value. If invalid the actual date will be used instead.
113
- */
114
- date: Dayjs;
115
- /**
116
- * Function called when a date is selected.
117
- */
118
- onDateSelect: (date: Dayjs) => void;
119
- /**
120
- * Id assigned to the date picker.
121
- */
122
- id: string;
123
- };
124
- export type CalendarPropsType = {
125
- /**
126
- * Initial selected date value. If invalid the actual date will be used instead.
127
- */
128
- selectedDate: Dayjs;
129
- /**
130
- * Date shown by the calendar.
131
- */
132
- innerDate: Dayjs;
133
- /**
134
- * Function called when the shown date needs to be updated.
135
- */
136
- onInnerDateChange: (date: Dayjs) => void;
137
- /**
138
- * Function called when a date is selected.
139
- */
140
- onDaySelect: (date: Dayjs) => void;
141
- /**
142
- * Current date.
143
- */
144
- today: Dayjs;
145
- };
146
- export type YearPickerPropsType = {
147
- /**
148
- * Initial selected date value. If invalid the actual date will be used instead.
149
- */
150
- selectedDate: Dayjs;
151
- /**
152
- * Function called when a year is selected.
153
- */
154
- onYearSelect: (year: number) => void;
155
- /**
156
- * Current date.
157
- */
158
- today: Dayjs;
159
- };
160
- /**
161
- * Reference to the component.
162
- */
163
- export type RefType = HTMLDivElement;
164
- export default Props;
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import DialogPropsType from "./types";
3
- declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: DialogPropsType) => JSX.Element;
4
- export default DxcDialog;
package/dialog/Dialog.js DELETED
@@ -1,104 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
- var _react = _interopRequireWildcard(require("react"));
11
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
12
- var _variables = require("../common/variables");
13
- var _useTheme = _interopRequireDefault(require("../useTheme"));
14
- var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
15
- var _reactDom = require("react-dom");
16
- var _FocusLock = _interopRequireDefault(require("../utils/FocusLock"));
17
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
18
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
20
- var closeIcon = /*#__PURE__*/_react["default"].createElement("svg", {
21
- role: "img",
22
- xmlns: "http://www.w3.org/2000/svg",
23
- width: "24",
24
- height: "24",
25
- viewBox: "0 0 24 24",
26
- fill: "currentColor"
27
- }, /*#__PURE__*/_react["default"].createElement("path", {
28
- d: "M0 0h24v24H0V0z",
29
- fill: "none"
30
- }), /*#__PURE__*/_react["default"].createElement("path", {
31
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
32
- }));
33
- var DxcDialog = function DxcDialog(_ref) {
34
- var _ref$isCloseVisible = _ref.isCloseVisible,
35
- isCloseVisible = _ref$isCloseVisible === void 0 ? true : _ref$isCloseVisible,
36
- onCloseClick = _ref.onCloseClick,
37
- children = _ref.children,
38
- _ref$overlay = _ref.overlay,
39
- overlay = _ref$overlay === void 0 ? true : _ref$overlay,
40
- onBackgroundClick = _ref.onBackgroundClick,
41
- _ref$tabIndex = _ref.tabIndex,
42
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
43
- var colorsTheme = (0, _useTheme["default"])();
44
- var translatedLabels = (0, _useTranslatedLabels["default"])();
45
- (0, _react.useEffect)(function () {
46
- var handleKeyDown = function handleKeyDown(event) {
47
- if (event.key === "Escape") {
48
- event.preventDefault();
49
- onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
50
- }
51
- };
52
- document.addEventListener("keydown", handleKeyDown);
53
- return function () {
54
- document.removeEventListener("keydown", handleKeyDown);
55
- };
56
- }, [onCloseClick]);
57
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
58
- theme: colorsTheme.dialog
59
- }, /*#__PURE__*/_react["default"].createElement(BodyStyle, null), /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(DialogContainer, null, overlay && /*#__PURE__*/_react["default"].createElement(Overlay, {
60
- onClick: function onClick() {
61
- onBackgroundClick === null || onBackgroundClick === void 0 ? void 0 : onBackgroundClick();
62
- }
63
- }), /*#__PURE__*/_react["default"].createElement(Dialog, {
64
- role: "dialog",
65
- "aria-modal": overlay,
66
- isCloseVisible: isCloseVisible
67
- }, /*#__PURE__*/_react["default"].createElement(_FocusLock["default"], null, children, isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconAction, {
68
- onClick: function onClick() {
69
- onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
70
- },
71
- "aria-label": translatedLabels.dialog.closeIconAriaLabel,
72
- tabIndex: tabIndex
73
- }, closeIcon)))), document.body));
74
- };
75
- var BodyStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n body {\n overflow: hidden;\n }\n"])));
76
- var DialogContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n z-index: 2147483647;\n"])));
77
- var Overlay = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n inset: 0;\n height: 100%;\n background-color: ", ";\n"])), function (props) {
78
- return props.theme.overlayColor;
79
- });
80
- var Dialog = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n box-sizing: border-box;\n max-width: 80%;\n min-width: 696px;\n border-radius: 4px;\n background-color: ", ";\n ", "\n box-shadow: ", ";\n z-index: 2147483647;\n\n @media (max-width: ", "rem) {\n max-width: 92%;\n min-width: 92%;\n }\n"])), function (props) {
81
- return props.theme.backgroundColor;
82
- }, function (props) {
83
- return props.isCloseVisible && "min-height: 72px;";
84
- }, function (props) {
85
- return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
86
- }, _variables.responsiveSizes.medium);
87
- var CloseIconAction = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n all: unset;\n position: absolute;\n top: 24px;\n right: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n box-shadow: 0 0 0 2px transparent;\n color: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n cursor: pointer;\n z-index: 1;\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px #0095ff;\n }\n &:hover {\n background-color: #f2f2f2;\n }\n &:active {\n background-color: #cccccc;\n }\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (props) {
88
- return props.theme.closeIconBackgroundColor;
89
- }, function (props) {
90
- return props.theme.closeIconColor;
91
- }, function (props) {
92
- return props.theme.closeIconBorderRadius;
93
- }, function (props) {
94
- return props.theme.closeIconBorderThickness;
95
- }, function (props) {
96
- return props.theme.closeIconBorderStyle;
97
- }, function (props) {
98
- return props.theme.closeIconBorderColor;
99
- }, function (props) {
100
- return props.theme.closeIconWidth;
101
- }, function (props) {
102
- return props.theme.closeIconHeight;
103
- });
104
- var _default = exports["default"] = DxcDialog;