@laerdal/life-react-components 1.2.2-dev.14 → 1.2.2-dev.16

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 (107) hide show
  1. package/dist/esm/Accordion/AccordionItem.js +46 -0
  2. package/dist/esm/Accordion/AccordionItem.js.map +1 -0
  3. package/dist/esm/Accordion/AccordionMenu.js +35 -0
  4. package/dist/esm/Accordion/AccordionMenu.js.map +1 -0
  5. package/dist/esm/Accordion/__tests__/AccordionMenu.test.js +53 -0
  6. package/dist/esm/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
  7. package/dist/esm/Accordion/index.js +4 -0
  8. package/dist/esm/Accordion/index.js.map +1 -0
  9. package/dist/esm/Accordion/styles.js +59 -0
  10. package/dist/esm/Accordion/styles.js.map +1 -0
  11. package/dist/esm/Dropdown/BasicDropdown.js +8 -15
  12. package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
  13. package/dist/esm/Dropdown/CommonStyling.js +69 -68
  14. package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
  15. package/dist/esm/GlobalNavigationBar/Avatar.js +2 -2
  16. package/dist/esm/GlobalNavigationBar/Avatar.js.map +1 -1
  17. package/dist/esm/GlobalNavigationBar/Logo.js +10 -10
  18. package/dist/esm/GlobalNavigationBar/Logo.js.map +1 -1
  19. package/dist/esm/HyperLink/HyperLink.js +20 -17
  20. package/dist/esm/HyperLink/HyperLink.js.map +1 -1
  21. package/dist/esm/InputFields/Checkbox.js +27 -16
  22. package/dist/esm/InputFields/Checkbox.js.map +1 -1
  23. package/dist/esm/InputFields/RadioButton.js +21 -14
  24. package/dist/esm/InputFields/RadioButton.js.map +1 -1
  25. package/dist/esm/Modals/ModalDialog.js +53 -14
  26. package/dist/esm/Modals/ModalDialog.js.map +1 -1
  27. package/dist/esm/Modals/ModalStyles.js +14 -1
  28. package/dist/esm/Modals/ModalStyles.js.map +1 -1
  29. package/dist/esm/Modals/ModalTypes.js +2 -0
  30. package/dist/esm/Modals/ModalTypes.js.map +1 -0
  31. package/dist/esm/index.js +1 -0
  32. package/dist/esm/index.js.map +1 -1
  33. package/dist/js/Accordion/AccordionItem.d.ts +9 -0
  34. package/dist/js/Accordion/AccordionItem.js +58 -0
  35. package/dist/js/Accordion/AccordionItem.js.map +1 -0
  36. package/dist/js/Accordion/AccordionMenu.d.ts +15 -0
  37. package/dist/js/Accordion/AccordionMenu.js +55 -0
  38. package/dist/js/Accordion/AccordionMenu.js.map +1 -0
  39. package/dist/js/Accordion/__tests__/AccordionMenu.test.js +101 -0
  40. package/dist/js/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
  41. package/dist/js/Accordion/index.d.ts +3 -0
  42. package/dist/js/Accordion/index.js +30 -0
  43. package/dist/js/Accordion/index.js.map +1 -0
  44. package/dist/js/Accordion/styles.d.ts +10 -0
  45. package/dist/js/Accordion/styles.js +50 -0
  46. package/dist/js/Accordion/styles.js.map +1 -0
  47. package/dist/js/Dropdown/BasicDropdown.d.ts +1 -4
  48. package/dist/js/Dropdown/BasicDropdown.js +8 -15
  49. package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
  50. package/dist/js/Dropdown/CommonStyling.d.ts +0 -1
  51. package/dist/js/Dropdown/CommonStyling.js +3 -3
  52. package/dist/js/Dropdown/CommonStyling.js.map +1 -1
  53. package/dist/js/GlobalNavigationBar/Avatar.js +2 -2
  54. package/dist/js/GlobalNavigationBar/Avatar.js.map +1 -1
  55. package/dist/js/GlobalNavigationBar/Logo.js +9 -9
  56. package/dist/js/GlobalNavigationBar/Logo.js.map +1 -1
  57. package/dist/js/HyperLink/HyperLink.d.ts +2 -2
  58. package/dist/js/HyperLink/HyperLink.js +19 -15
  59. package/dist/js/HyperLink/HyperLink.js.map +1 -1
  60. package/dist/js/InputFields/Checkbox.js +9 -5
  61. package/dist/js/InputFields/Checkbox.js.map +1 -1
  62. package/dist/js/InputFields/RadioButton.js +3 -3
  63. package/dist/js/InputFields/RadioButton.js.map +1 -1
  64. package/dist/js/Modals/ModalDialog.d.ts +2 -6
  65. package/dist/js/Modals/ModalDialog.js +54 -16
  66. package/dist/js/Modals/ModalDialog.js.map +1 -1
  67. package/dist/js/Modals/ModalStyles.js +7 -3
  68. package/dist/js/Modals/ModalStyles.js.map +1 -1
  69. package/dist/js/Modals/ModalTypes.d.ts +18 -0
  70. package/dist/js/Modals/ModalTypes.js +6 -0
  71. package/dist/js/Modals/ModalTypes.js.map +1 -0
  72. package/dist/js/index.d.ts +1 -0
  73. package/dist/js/index.js +13 -0
  74. package/dist/js/index.js.map +1 -1
  75. package/dist/umd/Accordion/AccordionItem.js +70 -0
  76. package/dist/umd/Accordion/AccordionItem.js.map +1 -0
  77. package/dist/umd/Accordion/AccordionMenu.js +112 -0
  78. package/dist/umd/Accordion/AccordionMenu.js.map +1 -0
  79. package/dist/umd/Accordion/__tests__/AccordionMenu.test.js +74 -0
  80. package/dist/umd/Accordion/__tests__/AccordionMenu.test.js.map +1 -0
  81. package/dist/umd/Accordion/index.js +44 -0
  82. package/dist/umd/Accordion/index.js.map +1 -0
  83. package/dist/umd/Accordion/styles.js +85 -0
  84. package/dist/umd/Accordion/styles.js.map +1 -0
  85. package/dist/umd/Dropdown/BasicDropdown.js +8 -15
  86. package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
  87. package/dist/umd/Dropdown/CommonStyling.js +69 -68
  88. package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
  89. package/dist/umd/GlobalNavigationBar/Avatar.js +2 -2
  90. package/dist/umd/GlobalNavigationBar/Avatar.js.map +1 -1
  91. package/dist/umd/GlobalNavigationBar/Logo.js +10 -10
  92. package/dist/umd/GlobalNavigationBar/Logo.js.map +1 -1
  93. package/dist/umd/HyperLink/HyperLink.js +68 -17
  94. package/dist/umd/HyperLink/HyperLink.js.map +1 -1
  95. package/dist/umd/InputFields/Checkbox.js +27 -16
  96. package/dist/umd/InputFields/Checkbox.js.map +1 -1
  97. package/dist/umd/InputFields/RadioButton.js +21 -14
  98. package/dist/umd/InputFields/RadioButton.js.map +1 -1
  99. package/dist/umd/Modals/ModalDialog.js +56 -18
  100. package/dist/umd/Modals/ModalDialog.js.map +1 -1
  101. package/dist/umd/Modals/ModalStyles.js +14 -1
  102. package/dist/umd/Modals/ModalStyles.js.map +1 -1
  103. package/dist/umd/Modals/ModalTypes.js +20 -0
  104. package/dist/umd/Modals/ModalTypes.js.map +1 -0
  105. package/dist/umd/index.js +13 -4
  106. package/dist/umd/index.js.map +1 -1
  107. package/package.json +1 -1
@@ -0,0 +1,70 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["exports", "prop-types", "react", "..", "../icons", "./styles"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(exports, require("prop-types"), require("react"), require(".."), require("../icons"), require("./styles"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(mod.exports, global.propTypes, global.react, global._, global.icons, global.styles);
11
+ global.undefined = mod.exports;
12
+ }
13
+ })(this, function (exports, _propTypes, _react, _, _icons, _styles) {
14
+ "use strict";
15
+
16
+ Object.defineProperty(exports, "__esModule", {
17
+ value: true
18
+ });
19
+
20
+ var _propTypes2 = _interopRequireDefault(_propTypes);
21
+
22
+ var _react2 = _interopRequireDefault(_react);
23
+
24
+ function _interopRequireDefault(obj) {
25
+ return obj && obj.__esModule ? obj : {
26
+ default: obj
27
+ };
28
+ }
29
+
30
+ const AccordionItem = props => {
31
+ const {
32
+ id,
33
+ onSelect,
34
+ isActive,
35
+ title,
36
+ icon,
37
+ disabled,
38
+ isLast
39
+ } = props;
40
+ return /*#__PURE__*/_react2.default.createElement(_styles.AccordionItemContainer, {
41
+ id: id,
42
+ displaySeparator: !isActive && !isLast,
43
+ isDisabled: disabled ?? false
44
+ }, /*#__PURE__*/_react2.default.createElement(_styles.ItemHeaderContainer, {
45
+ tabIndex: !disabled ? 0 : -1,
46
+ onClick: () => {
47
+ if (!disabled) {
48
+ onSelect(id);
49
+ }
50
+ },
51
+ isDisabled: disabled ?? false
52
+ }, icon && /*#__PURE__*/_react2.default.cloneElement(icon, {
53
+ size: '24px'
54
+ }), /*#__PURE__*/_react2.default.createElement(_.ComponentM, {
55
+ color: disabled ? _.COLORS.neutral_300 : undefined
56
+ }, title), isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronUp, {
57
+ size: "24px"
58
+ }) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronDown, {
59
+ size: "24px"
60
+ })), isActive && /*#__PURE__*/_react2.default.createElement(_styles.ItemBodyContainer, null, /*#__PURE__*/_react2.default.createElement(_.ComponentS, null, props.children)));
61
+ };
62
+
63
+ AccordionItem.propTypes = {
64
+ onSelect: _propTypes2.default.func.isRequired,
65
+ isActive: _propTypes2.default.bool.isRequired,
66
+ isLast: _propTypes2.default.bool.isRequired
67
+ };
68
+ exports.default = AccordionItem;
69
+ });
70
+ //# sourceMappingURL=AccordionItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/Accordion/AccordionItem.tsx"],"names":["onSelect","isActive","isLast","AccordionItem","props","disabled","icon","size","COLORS","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,QAAMG,aAA+D,GAAIC,KAAD,IAAoC;AAC1G,UAAM;AAAA,MAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MAAA,QAAA;AAAA,MAAA,KAAA;AAAA,MAAA,IAAA;AAAA,MAAA,QAAA;AAAiDF,MAAAA;AAAjD,QAAN,KAAA;AACA,WAAA,aACE,gBAAA,aAAA,CAAA,8BAAA,EAAA;AAAwB,MAAA,EAAE,EAA1B,EAAA;AAAgC,MAAA,gBAAgB,EAAE,CAAA,QAAA,IAAa,CAA/D,MAAA;AAAwE,MAAA,UAAU,EAAEG,QAAQ,IAAI;AAAhG,KAAA,EAAA,aACE,gBAAA,aAAA,CAAA,2BAAA,EAAA;AACE,MAAA,QAAQ,EAAE,CAAA,QAAA,GAAA,CAAA,GAAgB,CAD5B,CAAA;AAEE,MAAA,OAAO,EAAE,MAAM;AACb,YAAI,CAAJ,QAAA,EAAe;AACbL,UAAAA,QAAQ,CAARA,EAAQ,CAARA;AACD;AALL,OAAA;AAOE,MAAA,UAAU,EAAEK,QAAQ,IAAI;AAP1B,KAAA,EAQGC,IAAI,IAAA,aAAI,gBAAA,YAAA,CAAA,IAAA,EAA+C;AAAEC,MAAAA,IAAI,EAAE;AAAR,KAA/C,CARX,EAAA,aASE,gBAAA,aAAA,CAAA,YAAA,EAAA;AAAY,MAAA,KAAK,EAAEF,QAAQ,GAAGG,SAAH,WAAA,GAAwBC;AAAnD,KAAA,EATF,KASE,CATF,EAUGR,QAAQ,GAAA,aAAG,gBAAA,aAAA,CAAA,mBAAA,SAAA,EAAA;AAAuB,MAAA,IAAI,EAAC;AAA5B,KAAA,CAAH,GAAA,aAA2C,gBAAA,aAAA,CAAA,mBAAA,WAAA,EAAA;AAAyB,MAAA,IAAI,EAAC;AAA9B,KAAA,CAVtD,CADF,EAaGA,QAAQ,IAAA,aACP,gBAAA,aAAA,CAAA,yBAAA,EAAA,IAAA,EAAA,aACE,gBAAA,aAAA,CAAA,YAAA,EAAA,IAAA,EAAaG,KAAK,CAhB1B,QAgBQ,CADF,CAdJ,CADF;AAFF,GAAA;;;AALEJ,IAAAA,Q;AACAC,IAAAA,Q;AACAC,IAAAA,M;;oBA4BF,a","sourcesContent":["import React from 'react';\nimport { COLORS, ComponentM, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, HeaderIconContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const { id, onSelect, isActive, title, icon, disabled, isLast } = props;\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast} isDisabled={disabled ?? false}>\n <ItemHeaderContainer\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n isDisabled={disabled ?? false}>\n {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n <ComponentM color={disabled ? COLORS.neutral_300 : undefined}>{title}</ComponentM>\n {isActive ? <SystemIcons.ChevronUp size=\"24px\" /> : <SystemIcons.ChevronDown size=\"24px\" />}\n </ItemHeaderContainer>\n {isActive && (\n <ItemBodyContainer>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n )}\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
@@ -0,0 +1,112 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["exports", "prop-types", "react", "./AccordionItem", "./styles"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(exports, require("prop-types"), require("react"), require("./AccordionItem"), require("./styles"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(mod.exports, global.propTypes, global.react, global.AccordionItem, global.styles);
11
+ global.undefined = mod.exports;
12
+ }
13
+ })(this, function (exports, _propTypes, _react, _AccordionItem, _styles) {
14
+ "use strict";
15
+
16
+ Object.defineProperty(exports, "__esModule", {
17
+ value: true
18
+ });
19
+
20
+ var _propTypes2 = _interopRequireDefault(_propTypes);
21
+
22
+ var React = _interopRequireWildcard(_react);
23
+
24
+ var _AccordionItem2 = _interopRequireDefault(_AccordionItem);
25
+
26
+ function _getRequireWildcardCache(nodeInterop) {
27
+ if (typeof WeakMap !== "function") return null;
28
+ var cacheBabelInterop = new WeakMap();
29
+ var cacheNodeInterop = new WeakMap();
30
+ return (_getRequireWildcardCache = function (nodeInterop) {
31
+ return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
32
+ })(nodeInterop);
33
+ }
34
+
35
+ function _interopRequireWildcard(obj, nodeInterop) {
36
+ if (!nodeInterop && obj && obj.__esModule) {
37
+ return obj;
38
+ }
39
+
40
+ if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
41
+ return {
42
+ default: obj
43
+ };
44
+ }
45
+
46
+ var cache = _getRequireWildcardCache(nodeInterop);
47
+
48
+ if (cache && cache.has(obj)) {
49
+ return cache.get(obj);
50
+ }
51
+
52
+ var newObj = {};
53
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
54
+
55
+ for (var key in obj) {
56
+ if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
57
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
58
+
59
+ if (desc && (desc.get || desc.set)) {
60
+ Object.defineProperty(newObj, key, desc);
61
+ } else {
62
+ newObj[key] = obj[key];
63
+ }
64
+ }
65
+ }
66
+
67
+ newObj.default = obj;
68
+
69
+ if (cache) {
70
+ cache.set(obj, newObj);
71
+ }
72
+
73
+ return newObj;
74
+ }
75
+
76
+ function _interopRequireDefault(obj) {
77
+ return obj && obj.__esModule ? obj : {
78
+ default: obj
79
+ };
80
+ }
81
+
82
+ const AccordionMenu = ({
83
+ items,
84
+ selectedItemId,
85
+ onSelect
86
+ }) => {
87
+ return /*#__PURE__*/React.createElement(_styles.AccordionMenuWrapper, null, items.map(item => /*#__PURE__*/React.createElement(_AccordionItem2.default, {
88
+ key: item.id,
89
+ disabled: item.disabled,
90
+ id: item.id,
91
+ title: item.title,
92
+ icon: item.icon,
93
+ isActive: item.id === selectedItemId,
94
+ isLast: items.indexOf(item) === items.length - 1,
95
+ onSelect: onSelect
96
+ }, item.children)));
97
+ };
98
+
99
+ AccordionMenu.propTypes = {
100
+ items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
101
+ id: _propTypes2.default.string.isRequired,
102
+ disabled: _propTypes2.default.bool,
103
+ title: _propTypes2.default.string.isRequired,
104
+ icon: _propTypes2.default.node,
105
+ children: _propTypes2.default.node.isRequired
106
+ })).isRequired,
107
+ selectedItemId: _propTypes2.default.string,
108
+ onSelect: _propTypes2.default.func.isRequired
109
+ };
110
+ exports.default = AccordionMenu;
111
+ });
112
+ //# sourceMappingURL=AccordionMenu.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/Accordion/AccordionMenu.tsx"],"names":["items","selectedItemId","onSelect","id","disabled","title","icon","children","AccordionMenu","item"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,QAAMQ,aAAsD,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,cAAA;AAAyBN,IAAAA;AAAzB,GAAD,KAAyD;AACtH,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,4BAAA,EAAA,IAAA,EACG,KAAK,CAAL,GAAA,CAAWO,IAAD,IAAA,aACT,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AACE,MAAA,GAAG,EAAEA,IAAI,CADX,EAAA;AAEE,MAAA,QAAQ,EAAEA,IAAI,CAFhB,QAAA;AAGE,MAAA,EAAE,EAAEA,IAAI,CAHV,EAAA;AAIE,MAAA,KAAK,EAAEA,IAAI,CAJb,KAAA;AAKE,MAAA,IAAI,EAAEA,IAAI,CALZ,IAAA;AAME,MAAA,QAAQ,EAAEA,IAAI,CAAJA,EAAAA,KANZ,cAAA;AAOE,MAAA,MAAM,EAAET,KAAK,CAALA,OAAAA,CAAAA,IAAAA,MAAwBA,KAAK,CAALA,MAAAA,GAPlC,CAAA;AAQE,MAAA,QAAQ,EAAEE;AARZ,KAAA,EASGO,IAAI,CAZb,QAGM,CADD,CADH,CADF;AADF,GAAA;;;AAbET,IAAAA,K;AAMAG,MAAAA,E;AACAC,MAAAA,Q;AACAC,MAAAA,K;AACAC,MAAAA,I;AACAC,MAAAA,Q;;AATAN,IAAAA,c;AACAC,IAAAA,Q;;oBA+BF,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n items: AccordionItemProps[];\n selectedItemId?: string;\n onSelect: (id: string) => void;\n}\n\nexport interface AccordionItemProps {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({ items, selectedItemId, onSelect }: AccordionProps) => {\n return (\n <AccordionMenuWrapper>\n {items.map((item) => (\n <AccordionItem\n key={item.id}\n disabled={item.disabled}\n id={item.id}\n title={item.title}\n icon={item.icon}\n isActive={item.id === selectedItemId}\n isLast={items.indexOf(item) === items.length - 1}\n onSelect={onSelect}>\n {item.children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}
@@ -0,0 +1,74 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["react", "@testing-library/react", "../../styles", "../AccordionMenu", "jest-styled-components"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(require("react"), require("@testing-library/react"), require("../../styles"), require("../AccordionMenu"), require("jest-styled-components"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(global.react, global.react, global.styles, global.AccordionMenu, global.jestStyledComponents);
11
+ global.undefined = mod.exports;
12
+ }
13
+ })(this, function (_react, _react3, _styles, _AccordionMenu) {
14
+ "use strict";
15
+
16
+ var _react2 = _interopRequireDefault(_react);
17
+
18
+ var _AccordionMenu2 = _interopRequireDefault(_AccordionMenu);
19
+
20
+ function _interopRequireDefault(obj) {
21
+ return obj && obj.__esModule ? obj : {
22
+ default: obj
23
+ };
24
+ }
25
+
26
+ const accordionItems = [{
27
+ id: 'test1_id',
28
+ title: 'Item label with text 1',
29
+ children: /*#__PURE__*/_react2.default.createElement("div", null, "content test1")
30
+ }, {
31
+ id: 'test2_id',
32
+ title: 'Item label with text 2',
33
+ children: /*#__PURE__*/_react2.default.createElement("div", null, "content test2")
34
+ }];
35
+ describe('<AccordionMenu />', () => {
36
+ it('Check correct text placed on labels', async () => {
37
+ const {
38
+ queryByText
39
+ } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
40
+ items: accordionItems,
41
+ onSelect: () => {}
42
+ }));
43
+ expect(queryByText('Item label with text 1')).toBeDefined();
44
+ expect(queryByText('Item label with text 2')).toBeDefined();
45
+ expect(queryByText('content test1')).toBeNull();
46
+ });
47
+ it('Check item label element color and label', async () => {
48
+ const {
49
+ container
50
+ } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
51
+ items: accordionItems,
52
+ onSelect: () => {}
53
+ }));
54
+ const headerItem = container.querySelector('#test2_id');
55
+ expect(headerItem).toBeDefined();
56
+ expect(headerItem?.children[0]).toHaveStyleRule('background', _styles.COLORS.neutral_20);
57
+ expect(headerItem?.textContent).toContain('Item label with text 2');
58
+ });
59
+ it('Check expanded item text', async () => {
60
+ const {
61
+ container
62
+ } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_AccordionMenu2.default, {
63
+ items: accordionItems,
64
+ onSelect: () => {},
65
+ selectedItemId: 'test1_id'
66
+ }));
67
+ const headerItem = container.querySelector('#test1_id'); //check item expanded
68
+
69
+ expect(headerItem?.children[1]).toBeDefined();
70
+ expect(headerItem?.children[1]?.textContent).toContain('content test1');
71
+ });
72
+ });
73
+ });
74
+ //# sourceMappingURL=AccordionMenu.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/Accordion/__tests__/AccordionMenu.test.tsx"],"names":["accordionItems","id","title","children","describe","it","queryByText","render","expect","container","headerItem","COLORS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,cAAc,GAAG,CACrB;AACEC,IAAAA,EAAE,EADJ,UAAA;AAEEC,IAAAA,KAAK,EAFP,wBAAA;AAGEC,IAAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,eAAA;AAHZ,GADqB,EAMrB;AACEF,IAAAA,EAAE,EADJ,UAAA;AAEEC,IAAAA,KAAK,EAFP,wBAAA;AAGEC,IAAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,eAAA;AAHZ,GANqB,CAAvB;AAaAC,EAAAA,QAAQ,CAAA,mBAAA,EAAsB,MAAM;AAClCC,IAAAA,EAAE,CAAA,qCAAA,EAAwC,YAAY;AACpD,YAAM;AAAEC,QAAAA;AAAF,UAAkBC,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,OAAA,CAAPA,CAAxB;AACAC,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,wBAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACF,WAAW,CAAlBE,eAAkB,CAAZ,CAANA,CAAAA,QAAAA;AAJFH,KAAE,CAAFA;AAOAA,IAAAA,EAAE,CAAA,0CAAA,EAA6C,YAAY;AACzD,YAAM;AAAEI,QAAAA;AAAF,UAAgBF,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAE;AAAxD,OAAA,CAAPA,CAAtB;AACA,YAAMG,UAAU,GAAGD,SAAS,CAATA,aAAAA,CAAnB,WAAmBA,CAAnB;AACAD,MAAAA,MAAM,CAANA,UAAM,CAANA,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAPF,CAAOE,CAAD,CAANF,CAAAA,eAAAA,CAAAA,YAAAA,EAA8DG,eAA9DH,UAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAjBF,WAAM,CAANA,CAAAA,SAAAA,CAAAA,wBAAAA;AALFH,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,0BAAA,EAA6B,YAAY;AACzC,YAAM;AAAEI,QAAAA;AAAF,UAAgBF,qBAAM,aAAC,gBAAA,aAAA,CAAA,uBAAA,EAAA;AAAe,QAAA,KAAK,EAApB,cAAA;AAAsC,QAAA,QAAQ,EAAE,MAAM,CAAtD,CAAA;AAA0D,QAAA,cAAc,EAAE;AAA1E,OAAA,CAAPA,CAAtB;AACA,YAAMG,UAAU,GAAGD,SAAS,CAATA,aAAAA,CAFsB,WAEtBA,CAAnB,CAFyC,CAGzC;;AACAD,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAPF,CAAOE,CAAD,CAANF,CAAAA,WAAAA;AACAA,MAAAA,MAAM,CAACE,UAAU,EAAVA,QAAAA,CAAAA,CAAAA,GAAPF,WAAM,CAANA,CAAAA,SAAAA,CAAAA,eAAAA;AALFH,KAAE,CAAFA;AAhBFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport AccordionMenu from '../AccordionMenu';\n\nconst accordionItems = [\n {\n id: 'test1_id',\n title: 'Item label with text 1',\n children: <div>content test1</div>,\n },\n {\n id: 'test2_id',\n title: 'Item label with text 2',\n children: <div>content test2</div>,\n },\n];\n\ndescribe('<AccordionMenu />', () => {\n it('Check correct text placed on labels', async () => {\n const { queryByText } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n expect(queryByText('Item label with text 1')).toBeDefined();\n expect(queryByText('Item label with text 2')).toBeDefined();\n expect(queryByText('content test1')).toBeNull();\n });\n\n it('Check item label element color and label', async () => {\n const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}}></AccordionMenu>);\n const headerItem = container.querySelector('#test2_id');\n expect(headerItem).toBeDefined();\n expect(headerItem?.children[0]).toHaveStyleRule('background', COLORS.neutral_20);\n expect(headerItem?.textContent).toContain('Item label with text 2');\n });\n\n it('Check expanded item text', async () => {\n const { container } = render(<AccordionMenu items={accordionItems} onSelect={() => {}} selectedItemId={'test1_id'}></AccordionMenu>);\n const headerItem = container.querySelector('#test1_id');\n //check item expanded\n expect(headerItem?.children[1]).toBeDefined();\n expect(headerItem?.children[1]?.textContent).toContain('content test1');\n });\n});\n"],"file":"AccordionMenu.test.js"}
@@ -0,0 +1,44 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["exports", "./AccordionMenu", "./styles"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(exports, require("./AccordionMenu"), require("./styles"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(mod.exports, global.AccordionMenu, global.styles);
11
+ global.undefined = mod.exports;
12
+ }
13
+ })(this, function (exports, _AccordionMenu, _styles) {
14
+ "use strict";
15
+
16
+ Object.defineProperty(exports, "__esModule", {
17
+ value: true
18
+ });
19
+ Object.defineProperty(exports, "AccordionMenu", {
20
+ enumerable: true,
21
+ get: function () {
22
+ return _interopRequireDefault(_AccordionMenu).default;
23
+ }
24
+ });
25
+ Object.defineProperty(exports, "AccordionMenuItem", {
26
+ enumerable: true,
27
+ get: function () {
28
+ return _interopRequireDefault(_AccordionMenu).default;
29
+ }
30
+ });
31
+ Object.defineProperty(exports, "AccordionMenuWrapper", {
32
+ enumerable: true,
33
+ get: function () {
34
+ return _styles.AccordionMenuWrapper;
35
+ }
36
+ });
37
+
38
+ function _interopRequireDefault(obj) {
39
+ return obj && obj.__esModule ? obj : {
40
+ default: obj
41
+ };
42
+ }
43
+ });
44
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;oDAAA,O;;;;;;oDACA,O;;;;;;qBACA,oB","sourcesContent":["export { default as AccordionMenu } from './AccordionMenu';\nexport { default as AccordionMenuItem } from './AccordionMenu';\nexport { AccordionMenuWrapper } from './styles';\n"],"file":"index.js"}
@@ -0,0 +1,85 @@
1
+ (function (global, factory) {
2
+ if (typeof define === "function" && define.amd) {
3
+ define(["exports", "styled-components", "../styles", "../styles/z-indexes"], factory);
4
+ } else if (typeof exports !== "undefined") {
5
+ factory(exports, require("styled-components"), require("../styles"), require("../styles/z-indexes"));
6
+ } else {
7
+ var mod = {
8
+ exports: {}
9
+ };
10
+ factory(mod.exports, global.styledComponents, global.styles, global.zIndexes);
11
+ global.undefined = mod.exports;
12
+ }
13
+ })(this, function (exports, _styledComponents, _styles, _zIndexes) {
14
+ "use strict";
15
+
16
+ Object.defineProperty(exports, "__esModule", {
17
+ value: true
18
+ });
19
+ exports.ItemBodyContainer = exports.HeaderIconContainer = exports.ItemHeaderContainer = exports.AccordionItemContainer = exports.AccordionMenuWrapper = undefined;
20
+
21
+ var _styledComponents2 = _interopRequireDefault(_styledComponents);
22
+
23
+ function _interopRequireDefault(obj) {
24
+ return obj && obj.__esModule ? obj : {
25
+ default: obj
26
+ };
27
+ }
28
+
29
+ const AccordionMenuWrapper = exports.AccordionMenuWrapper = _styledComponents2.default.div`
30
+ min-width: 320px;
31
+ display: flex;
32
+ flex-direction: column;
33
+ box-sizing: border-box;
34
+ `;
35
+ const AccordionItemContainer = exports.AccordionItemContainer = _styledComponents2.default.div`
36
+ width: 100%;
37
+ display: flex;
38
+ flex-direction: column;
39
+ box-sizing: border-box;
40
+ border-bottom: ${props => props.displaySeparator ? `1px solid ${_styles.COLORS.neutral_100}` : ''};
41
+ cursor: ${props => props.isDisabled ? 'not-allowed' : 'pointer'};
42
+ `;
43
+ const disabledState = _styledComponents.css`
44
+ background: ${_styles.COLORS.white}!important;
45
+ color: ${_styles.COLORS.neutral_300};
46
+ pointer-events: none;
47
+ svg {
48
+ color: ${_styles.COLORS.neutral_300}!important;
49
+ }
50
+ `;
51
+ const ItemHeaderContainer = exports.ItemHeaderContainer = _styledComponents2.default.div`
52
+ position: relative;
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 8px;
56
+ padding: 12px 16px 11px 16px;
57
+ cursor: pointer;
58
+ background: ${_styles.COLORS.neutral_20};
59
+ svg:last-child {
60
+ margin-left: auto;
61
+ }
62
+ :focus {
63
+ outline: none;
64
+ z-index: ${_zIndexes.Z_INDEXES.focus};
65
+ box-shadow: 0px 4px 12px ${_styles.COLORS.primary_500}, 0px 0px 8px ${_styles.COLORS.primary_500};
66
+ }
67
+
68
+ ${props => props.isDisabled ? disabledState : ''}
69
+ :hover {
70
+ background: ${_styles.COLORS.primary_20};
71
+ }
72
+ :active {
73
+ background: ${_styles.COLORS.primary_100};
74
+ }
75
+ `;
76
+ const HeaderIconContainer = exports.HeaderIconContainer = _styledComponents2.default.div`
77
+ margin-left: auto;
78
+ `;
79
+ const ItemBodyContainer = exports.ItemBodyContainer = _styledComponents2.default.div`
80
+ padding: 0px 24px;
81
+ margin: 12px 0;
82
+ background: ${_styles.COLORS.white};
83
+ `;
84
+ });
85
+ //# sourceMappingURL=styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","COLORS","neutral_100","disabledState","css","white","neutral_300","ItemHeaderContainer","neutral_20","Z_INDEXES","focus","primary_500","primary_20","primary_100","HeaderIconContainer","ItemBodyContainer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,2BAAOC,GAAI;AAC/C;AACA;AACA;AACA;AAJO,CAAA;AAOA,QAAMC,sBAAsB,WAAtBA,sBAAsB,GAAGF,2BAAOC,GAAwD;AACrG;AACA;AACA;AACA;AACA,mBAAoBE,KAAD,IAAYA,KAAK,CAALA,gBAAAA,GAA0B,aAAYC,eAAOC,WAA7CF,EAAAA,GAA6D,EAAI;AAChG,YAAaA,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,SAAW;AAN/D,CAAA;AASP,QAAMG,aAAa,GAAGC,qBAAI;AAC1B,gBAAgBH,eAAOI,KAAM;AAC7B,WAAWJ,eAAOK,WAAY;AAC9B;AACA;AACA,aAAaL,eAAOK,WAAY;AAChC;AANA,CAAA;AASO,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGV,2BAAOC,GAA6B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBG,eAAOO,UAAW;AAClC;AACA;AACA;AACA;AACA;AACA,eAAeC,oBAAUC,KAAM;AAC/B,+BAA+BT,eAAOU,WAAY,iBAAgBV,eAAOU,WAAY;AACrF;AACA;AACA,IAAKX,KAAD,IAAYA,KAAK,CAALA,UAAAA,GAAAA,aAAAA,GAAmC,EAAI;AACvD;AACA,kBAAkBC,eAAOW,UAAW;AACpC;AACA;AACA,kBAAkBX,eAAOY,WAAY;AACrC;AAvBO,CAAA;AA0BA,QAAMC,mBAAmB,WAAnBA,mBAAmB,GAAGjB,2BAAOC,GAAI;AAC9C;AADO,CAAA;AAIA,QAAMiB,iBAAiB,WAAjBA,iBAAiB,GAAGlB,2BAAOC,GAAI;AAC5C;AACA;AACA,gBAAgBG,eAAOI,KAAM;AAHtB,CAAA","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; isDisabled: boolean }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};\n`;\n\nconst disabledState = css`\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n`;\n\nexport const ItemHeaderContainer = styled.div<{ isDisabled: boolean }>`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n background: ${COLORS.neutral_20};\n svg:last-child {\n margin-left: auto;\n }\n :focus {\n outline: none;\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px ${COLORS.primary_500}, 0px 0px 8px ${COLORS.primary_500};\n }\n\n ${(props) => (props.isDisabled ? disabledState : '')}\n :hover {\n background: ${COLORS.primary_20};\n }\n :active {\n background: ${COLORS.primary_100};\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div`\n padding: 0px 24px;\n margin: 12px 0;\n background: ${COLORS.white};\n`;\n"],"file":"styles.js"}
@@ -87,7 +87,6 @@
87
87
  list,
88
88
  placeholder,
89
89
  onSelect,
90
- setDropdownMenuValues,
91
90
  initalValue,
92
91
  disableSorting,
93
92
  messageOnNoResults,
@@ -108,9 +107,7 @@
108
107
  activeValidationMessage,
109
108
  autofilledMessage,
110
109
  size,
111
- margin = '4px 0',
112
- dropdownMenuValues,
113
- minWidth
110
+ margin = '4px 0'
114
111
  }) => {
115
112
  const [isOpen, setIsOpen] = React.useState(false);
116
113
  const [isLoading, setIsLoading] = React.useState(false);
@@ -149,12 +146,11 @@
149
146
  };
150
147
 
151
148
  React.useEffect(() => {
152
- if (initalValue || dropdownMenuValues) {
153
- const initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
154
- setInput(initValue);
149
+ if (initalValue) {
150
+ setInput(initalValue);
155
151
  setRestartFilter(true);
156
152
  }
157
- }, [initalValue, dropdownMenuValues]);
153
+ }, [initalValue]);
158
154
  React.useEffect(() => {
159
155
  document.addEventListener('keypress', handleKeyPress);
160
156
  return () => {
@@ -180,8 +176,7 @@
180
176
  className: size ? size : '',
181
177
  locked: locked,
182
178
  disabled: disabled,
183
- margin: margin,
184
- minWidth: minWidth
179
+ margin: margin
185
180
  }, /*#__PURE__*/React.createElement(_CommonStyling.StyledField, {
186
181
  ref: styledFieldRef,
187
182
  className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
@@ -247,8 +242,8 @@
247
242
  setIsOpen: customSetIsOpen,
248
243
  messageOnNoResults: messageOnNoResults ?? '',
249
244
  isButton: isButton || false,
250
- selectedValues: dropdownMenuValues ?? selectedValues,
251
- setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
245
+ selectedValues: selectedValues,
246
+ setSelectedValues: setSelectedValues,
252
247
  id: `${id}_dropdowncontent`
253
248
  })), activeValidationMessage && /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
254
249
  size: "20px",
@@ -274,7 +269,6 @@
274
269
  maxHeight: _propTypes2.default.string,
275
270
  placeholder: _propTypes2.default.string,
276
271
  onSelect: _propTypes2.default.func,
277
- setDropdownMenuValues: _propTypes2.default.func,
278
272
  initalValue: _propTypes2.default.string,
279
273
  disableSorting: _propTypes2.default.bool,
280
274
  messageOnNoResults: _propTypes2.default.string,
@@ -283,8 +277,7 @@
283
277
  isButton: _propTypes2.default.bool,
284
278
  activeValidationMessage: _propTypes2.default.string,
285
279
  autofilledMessage: _propTypes2.default.string,
286
- margin: _propTypes2.default.string,
287
- dropdownMenuValues: _propTypes2.default.arrayOf(_propTypes2.default.string)
280
+ margin: _propTypes2.default.string
288
281
  };
289
282
  exports.default = BasicDropdown;
290
283
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["id","list","itemsType","action","actionLabel","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","margin","dropdownMenuValues","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","minWidth","React","styledFieldRef","handleKeyPress","e","setFocused","setIsOpen","handleValueSelect","values","setRestartFilter","setInput","initValue","document","setIsLoading","customSetIsOpen","isOpen","getDisplayItems","input","val","listDisplayLabels","item","l","size","isLoading","Size","COLORS","neutral_600","actionVariant","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n id: string;\n list: DropdownItem[];\n itemsType?: 'normal' | 'checkbox' | 'radio';\n action?: () => void;\n actionLabel?: string;\n actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n actionIcon?: React.ReactNode;\n actionLoading?: boolean;\n actionDisabled?: boolean;\n pinTopItem?: boolean;\n multiSelect?: boolean;\n scrollable?: boolean;\n maxHeight?: string;\n placeholder?: string;\n onSelect?: (value: string[]) => void;\n setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n initalValue?: string;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n locked?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n dropdownMenuValues?: string[];\n minWidth?: number;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n id,\n list,\n placeholder,\n onSelect,\n setDropdownMenuValues,\n initalValue,\n disableSorting,\n messageOnNoResults,\n itemsType = 'normal',\n action,\n actionLabel,\n actionVariant,\n actionIcon,\n actionLoading,\n actionDisabled,\n pinTopItem,\n multiSelect,\n scrollable = true,\n maxHeight,\n disabled,\n locked,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n margin = '4px 0',\n dropdownMenuValues,\n minWidth,\n}: DropdownFilterProps) => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<boolean>(false);\n const [input, setInput] = React.useState<string>('');\n const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n const [focused, setFocused] = React.useState<number | null>(null);\n const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n /*\n if (!items.includes(input)) {\n setInput('');\n setPlaceholderSearch(placeholder || '');\n } */\n\n const handleKeyPress = (e: any) => {\n if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n if (e.keyCode === 13) {\n setFocused(0);\n setIsOpen(!isOpen);\n } else if (e.keyCode === 40) {\n setFocused(0);\n setIsOpen(!isOpen);\n }\n }\n };\n\n const handleValueSelect = (values: string[]) => {\n setRestartFilter(true);\n setInput(values.join(', '));\n onSelect && onSelect(values);\n //don't close dropdown on item select if have custom action or multiselect\n if (actionLabel || multiSelect) return;\n\n setIsOpen(false);\n setFocused(null);\n };\n\n React.useEffect(() => {\n if (initalValue || dropdownMenuValues) {\n const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n setInput(initValue);\n setRestartFilter(true);\n }\n }, [initalValue, dropdownMenuValues]);\n\n React.useEffect(() => {\n document.addEventListener('keypress', handleKeyPress);\n return () => {\n document.removeEventListener('keypress', handleKeyPress);\n };\n });\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [input]);\n\n const customSetIsOpen = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const getDisplayItems = () => {\n const values = input.split(',').map((val) => val.trim());\n const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n return listDisplayLabels.join(', ');\n };\n\n return (\n <>\n <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n <StyledField\n ref={styledFieldRef}\n className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n onClick={() => {\n if (!locked || !disabled) {\n setIsOpen(!isOpen);\n }\n }}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n locked={locked || false}\n showValidationMessage={!!activeValidationMessage}\n placeholder={placeholderSearch}\n isPlaceholder={!input}>\n <InputField\n type=\"search\"\n readOnly\n placeholder={placeholderSearch}\n value={getDisplayItems()}\n className={size ? `${size} value` : 'value'}\n onClick={(e: any) => {\n if (!locked && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n }\n }}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n />\n {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n </div>\n </StyledField>\n {!locked && !disabled && (\n <DropdownContent\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {}),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n actionDisabled: actionDisabled,\n scrollable: scrollable,\n onValueUpdate: handleValueSelect,\n items: list,\n multiSelect: multiSelect,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n }}\n focused={focused}\n setFocused={setFocused}\n size={size ?? Size.Small}\n filter={''}\n hideOnClickOutside={true}\n isOpen={isOpen}\n setIsOpen={customSetIsOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n isButton={isButton || false}\n selectedValues={dropdownMenuValues ?? selectedValues}\n setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n id={`${id}_dropdowncontent`}\n />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n <span>{activeValidationMessage}</span>\n </WarningMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage>\n <Information size=\"20px\" color={COLORS.neutral_600} />\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
1
+ {"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["id","list","itemsType","action","actionLabel","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","margin","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","React","styledFieldRef","handleKeyPress","e","setFocused","setIsOpen","handleValueSelect","values","setRestartFilter","setInput","document","setIsLoading","customSetIsOpen","isOpen","getDisplayItems","input","val","listDisplayLabels","item","l","size","isLoading","Size","COLORS","neutral_600","actionVariant","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n id: string;\n list: DropdownItem[];\n itemsType?: 'normal' | 'checkbox' | 'radio';\n action?: () => void;\n actionLabel?: string;\n actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n actionIcon?: React.ReactNode;\n actionLoading?: boolean;\n actionDisabled?: boolean;\n pinTopItem?: boolean;\n multiSelect?: boolean;\n scrollable?: boolean;\n maxHeight?: string;\n placeholder?: string;\n onSelect?: (value: string[]) => void;\n initalValue?: string;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n locked?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n id,\n list,\n placeholder,\n onSelect,\n initalValue,\n disableSorting,\n messageOnNoResults,\n itemsType = 'normal',\n action,\n actionLabel,\n actionVariant,\n actionIcon,\n actionLoading,\n actionDisabled,\n pinTopItem,\n multiSelect,\n scrollable = true,\n maxHeight,\n disabled,\n locked,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n margin = '4px 0',\n}: DropdownFilterProps) => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<boolean>(false);\n const [input, setInput] = React.useState<string>('');\n const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n const [focused, setFocused] = React.useState<number | null>(null);\n const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n /*\n if (!items.includes(input)) {\n setInput('');\n setPlaceholderSearch(placeholder || '');\n } */\n\n const handleKeyPress = (e: any) => {\n if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n if (e.keyCode === 13) {\n setFocused(0);\n setIsOpen(!isOpen);\n } else if (e.keyCode === 40) {\n setFocused(0);\n setIsOpen(!isOpen);\n }\n }\n };\n\n const handleValueSelect = (values: string[]) => {\n setRestartFilter(true);\n setInput(values.join(', '));\n onSelect && onSelect(values);\n //don't close dropdown on item select if have custom action or multiselect\n if (actionLabel || multiSelect) return;\n\n setIsOpen(false);\n setFocused(null);\n };\n\n React.useEffect(() => {\n if (initalValue) {\n setInput(initalValue);\n setRestartFilter(true);\n }\n }, [initalValue]);\n\n React.useEffect(() => {\n document.addEventListener('keypress', handleKeyPress);\n return () => {\n document.removeEventListener('keypress', handleKeyPress);\n };\n });\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [input]);\n\n const customSetIsOpen = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const getDisplayItems = () => {\n const values = input.split(',').map((val) => val.trim());\n const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n return listDisplayLabels.join(', ');\n };\n\n return (\n <>\n <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\n <StyledField\n ref={styledFieldRef}\n className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n onClick={() => {\n if (!locked || !disabled) {\n setIsOpen(!isOpen);\n }\n }}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n locked={locked || false}\n showValidationMessage={!!activeValidationMessage}\n placeholder={placeholderSearch}\n isPlaceholder={!input}>\n <InputField\n type=\"search\"\n readOnly\n placeholder={placeholderSearch}\n value={getDisplayItems()}\n className={size ? `${size} value` : 'value'}\n onClick={(e: any) => {\n if (!locked && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n }\n }}\n tabIndex={disabled || locked ? -1 : 0}\n disabled={disabled || false}\n />\n {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n </div>\n </StyledField>\n {!locked && !disabled && (\n <DropdownContent\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {}),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n actionDisabled: actionDisabled,\n scrollable: scrollable,\n onValueUpdate: handleValueSelect,\n items: list,\n multiSelect: multiSelect,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n }}\n focused={focused}\n setFocused={setFocused}\n size={size ?? Size.Small}\n filter={''}\n hideOnClickOutside={true}\n isOpen={isOpen}\n setIsOpen={customSetIsOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n isButton={isButton || false}\n selectedValues={selectedValues}\n setSelectedValues={setSelectedValues}\n id={`${id}_dropdowncontent`}\n />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n <span>{activeValidationMessage}</span>\n </WarningMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage>\n <Information size=\"20px\" color={COLORS.neutral_600} />\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}