@dxc-technology/halstack-react 0.0.0-757bc34 → 0.0.0-75a707a

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 (353) hide show
  1. package/README.md +1 -2
  2. package/dist/index.d.mts +6661 -0
  3. package/dist/index.d.ts +6661 -0
  4. package/dist/index.js +14514 -0
  5. package/dist/index.mjs +14456 -0
  6. package/package.json +68 -68
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -35
  9. package/HalstackContext.d.ts +0 -1353
  10. package/HalstackContext.js +0 -310
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -185
  13. package/accordion/Accordion.stories.tsx +0 -283
  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 -8
  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/types.d.ts +0 -67
  24. package/accordion-group/types.js +0 -5
  25. package/alert/Alert.d.ts +0 -4
  26. package/alert/Alert.js +0 -257
  27. package/alert/Alert.stories.tsx +0 -198
  28. package/alert/Alert.test.js +0 -75
  29. package/alert/types.d.ts +0 -49
  30. package/alert/types.js +0 -5
  31. package/badge/Badge.d.ts +0 -4
  32. package/badge/Badge.js +0 -48
  33. package/badge/types.d.ts +0 -5
  34. package/badge/types.js +0 -5
  35. package/bleed/Bleed.d.ts +0 -3
  36. package/bleed/Bleed.js +0 -43
  37. package/bleed/Bleed.stories.tsx +0 -342
  38. package/bleed/types.d.ts +0 -37
  39. package/bleed/types.js +0 -5
  40. package/box/Box.d.ts +0 -4
  41. package/box/Box.js +0 -78
  42. package/box/Box.stories.tsx +0 -119
  43. package/box/Box.test.js +0 -13
  44. package/box/types.d.ts +0 -32
  45. package/box/types.js +0 -5
  46. package/bulleted-list/BulletedList.d.ts +0 -7
  47. package/bulleted-list/BulletedList.js +0 -99
  48. package/bulleted-list/BulletedList.stories.tsx +0 -116
  49. package/bulleted-list/types.d.ts +0 -38
  50. package/bulleted-list/types.js +0 -5
  51. package/button/Button.d.ts +0 -4
  52. package/button/Button.js +0 -121
  53. package/button/Button.stories.tsx +0 -344
  54. package/button/Button.test.js +0 -36
  55. package/button/types.d.ts +0 -57
  56. package/button/types.js +0 -5
  57. package/card/Card.d.ts +0 -4
  58. package/card/Card.js +0 -120
  59. package/card/Card.stories.tsx +0 -171
  60. package/card/Card.test.js +0 -39
  61. package/card/types.d.ts +0 -62
  62. package/card/types.js +0 -5
  63. package/checkbox/Checkbox.d.ts +0 -4
  64. package/checkbox/Checkbox.js +0 -220
  65. package/checkbox/Checkbox.stories.tsx +0 -222
  66. package/checkbox/Checkbox.test.js +0 -199
  67. package/checkbox/types.d.ts +0 -72
  68. package/checkbox/types.js +0 -5
  69. package/chip/Chip.d.ts +0 -4
  70. package/chip/Chip.js +0 -121
  71. package/chip/Chip.stories.tsx +0 -214
  72. package/chip/Chip.test.js +0 -41
  73. package/chip/types.d.ts +0 -45
  74. package/chip/types.js +0 -5
  75. package/common/OpenSans.css +0 -69
  76. package/common/coreTokens.d.ts +0 -237
  77. package/common/coreTokens.js +0 -184
  78. package/common/fonts/OpenSans-Bold.ttf +0 -0
  79. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  80. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  81. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Italic.ttf +0 -0
  83. package/common/fonts/OpenSans-Light.ttf +0 -0
  84. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  85. package/common/fonts/OpenSans-Regular.ttf +0 -0
  86. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  87. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  88. package/common/utils.d.ts +0 -1
  89. package/common/utils.js +0 -16
  90. package/common/variables.d.ts +0 -1499
  91. package/common/variables.js +0 -1371
  92. package/container/Container.d.ts +0 -4
  93. package/container/Container.js +0 -198
  94. package/container/Container.stories.tsx +0 -229
  95. package/container/types.d.ts +0 -74
  96. package/container/types.js +0 -5
  97. package/date-input/Calendar.d.ts +0 -4
  98. package/date-input/Calendar.js +0 -214
  99. package/date-input/DateInput.d.ts +0 -4
  100. package/date-input/DateInput.js +0 -223
  101. package/date-input/DateInput.stories.tsx +0 -285
  102. package/date-input/DateInput.test.js +0 -808
  103. package/date-input/DatePicker.d.ts +0 -4
  104. package/date-input/DatePicker.js +0 -115
  105. package/date-input/Icons.d.ts +0 -6
  106. package/date-input/Icons.js +0 -58
  107. package/date-input/YearPicker.d.ts +0 -4
  108. package/date-input/YearPicker.js +0 -100
  109. package/date-input/types.d.ts +0 -164
  110. package/date-input/types.js +0 -5
  111. package/dialog/Dialog.d.ts +0 -4
  112. package/dialog/Dialog.js +0 -107
  113. package/dialog/Dialog.stories.tsx +0 -365
  114. package/dialog/Dialog.test.js +0 -307
  115. package/dialog/types.d.ts +0 -36
  116. package/dialog/types.js +0 -5
  117. package/dropdown/Dropdown.d.ts +0 -4
  118. package/dropdown/Dropdown.js +0 -334
  119. package/dropdown/Dropdown.stories.tsx +0 -438
  120. package/dropdown/Dropdown.test.js +0 -599
  121. package/dropdown/DropdownMenu.d.ts +0 -4
  122. package/dropdown/DropdownMenu.js +0 -63
  123. package/dropdown/DropdownMenuItem.d.ts +0 -4
  124. package/dropdown/DropdownMenuItem.js +0 -67
  125. package/dropdown/types.d.ts +0 -98
  126. package/dropdown/types.js +0 -5
  127. package/file-input/FileInput.d.ts +0 -4
  128. package/file-input/FileInput.js +0 -479
  129. package/file-input/FileInput.stories.tsx +0 -618
  130. package/file-input/FileInput.test.js +0 -459
  131. package/file-input/FileItem.d.ts +0 -4
  132. package/file-input/FileItem.js +0 -135
  133. package/file-input/types.d.ts +0 -129
  134. package/file-input/types.js +0 -5
  135. package/flex/Flex.d.ts +0 -4
  136. package/flex/Flex.js +0 -57
  137. package/flex/Flex.stories.tsx +0 -112
  138. package/flex/types.d.ts +0 -97
  139. package/flex/types.js +0 -5
  140. package/footer/Footer.d.ts +0 -4
  141. package/footer/Footer.js +0 -134
  142. package/footer/Footer.stories.tsx +0 -152
  143. package/footer/Footer.test.js +0 -85
  144. package/footer/Icons.d.ts +0 -2
  145. package/footer/Icons.js +0 -72
  146. package/footer/types.d.ts +0 -58
  147. package/footer/types.js +0 -5
  148. package/grid/Grid.d.ts +0 -7
  149. package/grid/Grid.js +0 -76
  150. package/grid/Grid.stories.tsx +0 -219
  151. package/grid/types.d.ts +0 -115
  152. package/grid/types.js +0 -5
  153. package/header/Header.d.ts +0 -8
  154. package/header/Header.js +0 -230
  155. package/header/Header.stories.tsx +0 -251
  156. package/header/Header.test.js +0 -66
  157. package/header/Icons.d.ts +0 -2
  158. package/header/Icons.js +0 -29
  159. package/header/types.d.ts +0 -33
  160. package/header/types.js +0 -5
  161. package/heading/Heading.d.ts +0 -4
  162. package/heading/Heading.js +0 -137
  163. package/heading/Heading.stories.tsx +0 -54
  164. package/heading/Heading.test.js +0 -169
  165. package/heading/types.d.ts +0 -33
  166. package/heading/types.js +0 -5
  167. package/image/Image.d.ts +0 -4
  168. package/image/Image.js +0 -70
  169. package/image/Image.stories.tsx +0 -127
  170. package/image/types.d.ts +0 -72
  171. package/image/types.js +0 -5
  172. package/inset/Inset.d.ts +0 -3
  173. package/inset/Inset.js +0 -43
  174. package/inset/Inset.stories.tsx +0 -230
  175. package/inset/types.d.ts +0 -37
  176. package/inset/types.js +0 -5
  177. package/layout/ApplicationLayout.d.ts +0 -20
  178. package/layout/ApplicationLayout.js +0 -134
  179. package/layout/ApplicationLayout.stories.tsx +0 -162
  180. package/layout/Icons.d.ts +0 -8
  181. package/layout/Icons.js +0 -58
  182. package/layout/SidenavContext.d.ts +0 -5
  183. package/layout/SidenavContext.js +0 -13
  184. package/layout/types.d.ts +0 -41
  185. package/layout/types.js +0 -5
  186. package/link/Link.d.ts +0 -4
  187. package/link/Link.js +0 -115
  188. package/link/Link.stories.tsx +0 -253
  189. package/link/Link.test.js +0 -63
  190. package/link/types.d.ts +0 -54
  191. package/link/types.js +0 -5
  192. package/main.d.ts +0 -47
  193. package/main.js +0 -343
  194. package/nav-tabs/NavTabs.d.ts +0 -8
  195. package/nav-tabs/NavTabs.js +0 -90
  196. package/nav-tabs/NavTabs.stories.tsx +0 -274
  197. package/nav-tabs/NavTabs.test.js +0 -75
  198. package/nav-tabs/Tab.d.ts +0 -4
  199. package/nav-tabs/Tab.js +0 -117
  200. package/nav-tabs/types.d.ts +0 -52
  201. package/nav-tabs/types.js +0 -5
  202. package/number-input/NumberInput.d.ts +0 -11
  203. package/number-input/NumberInput.js +0 -67
  204. package/number-input/NumberInput.stories.tsx +0 -131
  205. package/number-input/NumberInput.test.js +0 -830
  206. package/number-input/types.d.ts +0 -130
  207. package/number-input/types.js +0 -5
  208. package/paginator/Icons.d.ts +0 -5
  209. package/paginator/Icons.js +0 -40
  210. package/paginator/Paginator.d.ts +0 -4
  211. package/paginator/Paginator.js +0 -138
  212. package/paginator/Paginator.stories.tsx +0 -87
  213. package/paginator/Paginator.test.js +0 -335
  214. package/paginator/types.d.ts +0 -38
  215. package/paginator/types.js +0 -5
  216. package/paragraph/Paragraph.d.ts +0 -5
  217. package/paragraph/Paragraph.js +0 -27
  218. package/paragraph/Paragraph.stories.tsx +0 -27
  219. package/password-input/Icons.d.ts +0 -6
  220. package/password-input/Icons.js +0 -35
  221. package/password-input/PasswordInput.d.ts +0 -4
  222. package/password-input/PasswordInput.js +0 -97
  223. package/password-input/PasswordInput.stories.tsx +0 -100
  224. package/password-input/PasswordInput.test.js +0 -198
  225. package/password-input/types.d.ts +0 -111
  226. package/password-input/types.js +0 -5
  227. package/progress-bar/ProgressBar.d.ts +0 -4
  228. package/progress-bar/ProgressBar.js +0 -150
  229. package/progress-bar/ProgressBar.stories.tsx +0 -93
  230. package/progress-bar/ProgressBar.test.js +0 -93
  231. package/progress-bar/types.d.ts +0 -37
  232. package/progress-bar/types.js +0 -5
  233. package/quick-nav/QuickNav.d.ts +0 -4
  234. package/quick-nav/QuickNav.js +0 -94
  235. package/quick-nav/QuickNav.stories.tsx +0 -356
  236. package/quick-nav/types.d.ts +0 -21
  237. package/quick-nav/types.js +0 -5
  238. package/radio-group/Radio.d.ts +0 -4
  239. package/radio-group/Radio.js +0 -124
  240. package/radio-group/RadioGroup.d.ts +0 -4
  241. package/radio-group/RadioGroup.js +0 -235
  242. package/radio-group/RadioGroup.stories.tsx +0 -214
  243. package/radio-group/RadioGroup.test.js +0 -756
  244. package/radio-group/types.d.ts +0 -114
  245. package/radio-group/types.js +0 -5
  246. package/resultset-table/Icons.d.ts +0 -7
  247. package/resultset-table/Icons.js +0 -47
  248. package/resultset-table/ResultsetTable.d.ts +0 -4
  249. package/resultset-table/ResultsetTable.js +0 -159
  250. package/resultset-table/ResultsetTable.stories.tsx +0 -300
  251. package/resultset-table/ResultsetTable.test.js +0 -305
  252. package/resultset-table/types.d.ts +0 -67
  253. package/resultset-table/types.js +0 -5
  254. package/select/Icons.d.ts +0 -10
  255. package/select/Icons.js +0 -89
  256. package/select/Listbox.d.ts +0 -4
  257. package/select/Listbox.js +0 -143
  258. package/select/Option.d.ts +0 -4
  259. package/select/Option.js +0 -80
  260. package/select/Select.d.ts +0 -4
  261. package/select/Select.js +0 -582
  262. package/select/Select.stories.tsx +0 -971
  263. package/select/Select.test.js +0 -2334
  264. package/select/types.d.ts +0 -209
  265. package/select/types.js +0 -5
  266. package/sidenav/Icons.d.ts +0 -7
  267. package/sidenav/Icons.js +0 -47
  268. package/sidenav/Sidenav.d.ts +0 -10
  269. package/sidenav/Sidenav.js +0 -199
  270. package/sidenav/Sidenav.stories.tsx +0 -282
  271. package/sidenav/Sidenav.test.js +0 -37
  272. package/sidenav/types.d.ts +0 -76
  273. package/sidenav/types.js +0 -5
  274. package/slider/Slider.d.ts +0 -4
  275. package/slider/Slider.js +0 -294
  276. package/slider/Slider.test.js +0 -254
  277. package/slider/types.d.ts +0 -86
  278. package/slider/types.js +0 -5
  279. package/spinner/Spinner.d.ts +0 -4
  280. package/spinner/Spinner.js +0 -214
  281. package/spinner/Spinner.stories.tsx +0 -129
  282. package/spinner/Spinner.test.js +0 -55
  283. package/spinner/types.d.ts +0 -32
  284. package/spinner/types.js +0 -5
  285. package/switch/Switch.d.ts +0 -4
  286. package/switch/Switch.js +0 -219
  287. package/switch/Switch.stories.tsx +0 -137
  288. package/switch/Switch.test.js +0 -180
  289. package/switch/types.d.ts +0 -66
  290. package/switch/types.js +0 -5
  291. package/table/Table.d.ts +0 -4
  292. package/table/Table.js +0 -99
  293. package/table/Table.stories.tsx +0 -356
  294. package/table/Table.test.js +0 -21
  295. package/table/types.d.ts +0 -21
  296. package/table/types.js +0 -5
  297. package/tabs/Tab.d.ts +0 -4
  298. package/tabs/Tab.js +0 -113
  299. package/tabs/Tabs.d.ts +0 -4
  300. package/tabs/Tabs.js +0 -385
  301. package/tabs/Tabs.stories.tsx +0 -226
  302. package/tabs/Tabs.test.js +0 -294
  303. package/tabs/types.d.ts +0 -92
  304. package/tabs/types.js +0 -5
  305. package/tag/Tag.d.ts +0 -4
  306. package/tag/Tag.js +0 -151
  307. package/tag/Tag.stories.tsx +0 -155
  308. package/tag/Tag.test.js +0 -49
  309. package/tag/types.d.ts +0 -69
  310. package/tag/types.js +0 -5
  311. package/text-input/Icons.d.ts +0 -8
  312. package/text-input/Icons.js +0 -56
  313. package/text-input/Suggestion.d.ts +0 -4
  314. package/text-input/Suggestion.js +0 -67
  315. package/text-input/Suggestions.d.ts +0 -4
  316. package/text-input/Suggestions.js +0 -89
  317. package/text-input/TextInput.d.ts +0 -4
  318. package/text-input/TextInput.js +0 -592
  319. package/text-input/TextInput.stories.tsx +0 -465
  320. package/text-input/TextInput.test.js +0 -1739
  321. package/text-input/types.d.ts +0 -205
  322. package/text-input/types.js +0 -5
  323. package/textarea/Textarea.d.ts +0 -4
  324. package/textarea/Textarea.js +0 -240
  325. package/textarea/Textarea.stories.tsx +0 -175
  326. package/textarea/Textarea.test.js +0 -406
  327. package/textarea/types.d.ts +0 -141
  328. package/textarea/types.js +0 -5
  329. package/toggle-group/ToggleGroup.d.ts +0 -4
  330. package/toggle-group/ToggleGroup.js +0 -204
  331. package/toggle-group/ToggleGroup.stories.tsx +0 -218
  332. package/toggle-group/ToggleGroup.test.js +0 -137
  333. package/toggle-group/types.d.ts +0 -114
  334. package/toggle-group/types.js +0 -5
  335. package/typography/Typography.d.ts +0 -4
  336. package/typography/Typography.js +0 -23
  337. package/typography/Typography.stories.tsx +0 -198
  338. package/typography/types.d.ts +0 -18
  339. package/typography/types.js +0 -5
  340. package/useTheme.d.ts +0 -1252
  341. package/useTheme.js +0 -15
  342. package/useTranslatedLabels.d.ts +0 -85
  343. package/useTranslatedLabels.js +0 -14
  344. package/utils/BaseTypography.d.ts +0 -21
  345. package/utils/BaseTypography.js +0 -94
  346. package/utils/FocusLock.d.ts +0 -13
  347. package/utils/FocusLock.js +0 -121
  348. package/wizard/Wizard.d.ts +0 -4
  349. package/wizard/Wizard.js +0 -250
  350. package/wizard/Wizard.stories.tsx +0 -253
  351. package/wizard/Wizard.test.js +0 -114
  352. package/wizard/types.d.ts +0 -64
  353. 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 showed by the calendar.
131
- */
132
- innerDate: Dayjs;
133
- /**
134
- * Function called when the showed 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,107 +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 _BackgroundColorContext = require("../BackgroundColorContext");
15
- var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
16
- var _reactDom = require("react-dom");
17
- var _FocusLock = _interopRequireDefault(require("../utils/FocusLock"));
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 closeIcon = /*#__PURE__*/_react["default"].createElement("svg", {
22
- role: "img",
23
- xmlns: "http://www.w3.org/2000/svg",
24
- width: "24",
25
- height: "24",
26
- viewBox: "0 0 24 24",
27
- fill: "currentColor"
28
- }, /*#__PURE__*/_react["default"].createElement("path", {
29
- d: "M0 0h24v24H0V0z",
30
- fill: "none"
31
- }), /*#__PURE__*/_react["default"].createElement("path", {
32
- 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"
33
- }));
34
- var DxcDialog = function DxcDialog(_ref) {
35
- var _ref$isCloseVisible = _ref.isCloseVisible,
36
- isCloseVisible = _ref$isCloseVisible === void 0 ? true : _ref$isCloseVisible,
37
- onCloseClick = _ref.onCloseClick,
38
- children = _ref.children,
39
- _ref$overlay = _ref.overlay,
40
- overlay = _ref$overlay === void 0 ? true : _ref$overlay,
41
- onBackgroundClick = _ref.onBackgroundClick,
42
- _ref$tabIndex = _ref.tabIndex,
43
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
44
- var colorsTheme = (0, _useTheme["default"])();
45
- var translatedLabels = (0, _useTranslatedLabels["default"])();
46
- (0, _react.useEffect)(function () {
47
- var handleKeyDown = function handleKeyDown(event) {
48
- if (event.key === "Escape") {
49
- event.preventDefault();
50
- onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
51
- }
52
- };
53
- document.addEventListener("keydown", handleKeyDown);
54
- return function () {
55
- document.removeEventListener("keydown", handleKeyDown);
56
- };
57
- }, [onCloseClick]);
58
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
59
- theme: colorsTheme.dialog
60
- }, /*#__PURE__*/_react["default"].createElement(BodyStyle, null), /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(DialogContainer, null, overlay && /*#__PURE__*/_react["default"].createElement(Overlay, {
61
- onClick: function onClick() {
62
- onBackgroundClick === null || onBackgroundClick === void 0 ? void 0 : onBackgroundClick();
63
- }
64
- }), /*#__PURE__*/_react["default"].createElement(Dialog, {
65
- role: "dialog",
66
- "aria-modal": overlay,
67
- isCloseVisible: isCloseVisible
68
- }, /*#__PURE__*/_react["default"].createElement(_FocusLock["default"], null, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
69
- color: colorsTheme.dialog.backgroundColor
70
- }, children), isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconAction, {
71
- onClick: function onClick() {
72
- onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
73
- },
74
- "aria-label": translatedLabels.dialog.closeIconAriaLabel,
75
- tabIndex: tabIndex
76
- }, closeIcon)))), document.body));
77
- };
78
- var BodyStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n body {\n overflow: hidden;\n }\n"])));
79
- 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"])));
80
- 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) {
81
- return props.theme.overlayColor;
82
- });
83
- 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) {
84
- return props.theme.backgroundColor;
85
- }, function (props) {
86
- return props.isCloseVisible && "min-height: 72px;";
87
- }, function (props) {
88
- return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
89
- }, _variables.responsiveSizes.medium);
90
- 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) {
91
- return props.theme.closeIconBackgroundColor;
92
- }, function (props) {
93
- return props.theme.closeIconColor;
94
- }, function (props) {
95
- return props.theme.closeIconBorderRadius;
96
- }, function (props) {
97
- return props.theme.closeIconBorderThickness;
98
- }, function (props) {
99
- return props.theme.closeIconBorderStyle;
100
- }, function (props) {
101
- return props.theme.closeIconBorderColor;
102
- }, function (props) {
103
- return props.theme.closeIconWidth;
104
- }, function (props) {
105
- return props.theme.closeIconHeight;
106
- });
107
- var _default = exports["default"] = DxcDialog;