@laerdal/life-react-components 1.3.1 → 1.3.2-dev.1.full

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 (19) hide show
  1. package/dist/esm/Button/Button.js +8 -53
  2. package/dist/esm/Button/Button.js.map +1 -1
  3. package/dist/esm/Dropdown/ChipDropdownInput.js +2 -2
  4. package/dist/esm/Dropdown/ChipDropdownInput.js.map +1 -1
  5. package/dist/esm/Modals/__tests__/Modal.test.js +154 -0
  6. package/dist/esm/Modals/__tests__/Modal.test.js.map +1 -0
  7. package/dist/js/Button/Button.js +6 -12
  8. package/dist/js/Button/Button.js.map +1 -1
  9. package/dist/js/Dropdown/ChipDropdownInput.js +1 -3
  10. package/dist/js/Dropdown/ChipDropdownInput.js.map +1 -1
  11. package/dist/js/Modals/__tests__/Modal.test.js +231 -0
  12. package/dist/js/Modals/__tests__/Modal.test.js.map +1 -0
  13. package/dist/umd/Button/Button.js +8 -53
  14. package/dist/umd/Button/Button.js.map +1 -1
  15. package/dist/umd/Dropdown/ChipDropdownInput.js +2 -2
  16. package/dist/umd/Dropdown/ChipDropdownInput.js.map +1 -1
  17. package/dist/umd/Modals/__tests__/Modal.test.js +173 -0
  18. package/dist/umd/Modals/__tests__/Modal.test.js.map +1 -0
  19. package/package.json +1 -1
package/dist/esm/Modals/__tests__/Modal.test.js ADDED
@@ -0,0 +1,154 @@
1
+ import React from 'react';
2
+ import { render } from '@testing-library/react';
3
+ import 'jest-styled-components';
4
+ import { ModalDialog } from '..';
5
+ import { Size, SystemIcons } from '../..';
6
+ describe('<ModalDialog />', () => {
7
+ let mountingDiv;
8
+ beforeEach(() => {
9
+ //being rendered as a React.Portal we need to have the 'root' div defined
10
+ mountingDiv = document.createElement('div');
11
+ mountingDiv.id = 'root';
12
+ document.body.appendChild(mountingDiv);
13
+ });
14
+ afterEach(() => {
15
+ document.body.removeChild(mountingDiv);
16
+ });
17
+ it('Check modal not rendered when isModalOpen is false', async () => {
18
+ const {
19
+ container,
20
+ getByText
21
+ } = render( /*#__PURE__*/React.createElement(ModalDialog, {
22
+ key: "smallModalWithoutImage",
23
+ closeModalAndClearInput: () => {},
24
+ title: 'Header',
25
+ size: Size.Small,
26
+ isModalOpen: false,
27
+ closeAction: () => {},
28
+ submitAction: () => {}
29
+ })); //check modal portal not exists when modal not opened
30
+
31
+ expect(container.querySelector('.ReactModalPortal')).toBeNull();
32
+ });
33
+ it('Check modal visible, title and footer buttons displayed correctly', async () => {
34
+ const {
35
+ container,
36
+ getByText
37
+ } = render( /*#__PURE__*/React.createElement(ModalDialog, {
38
+ key: "smallModalWithoutImage",
39
+ closeModalAndClearInput: () => {},
40
+ title: 'Header',
41
+ size: Size.Small,
42
+ isModalOpen: true,
43
+ closeAction: () => {},
44
+ submitAction: () => {},
45
+ buttons: [{
46
+ action: () => {},
47
+ text: 'Close',
48
+ variant: 'tertiary'
49
+ }, {
50
+ action: () => {},
51
+ text: 'Save'
52
+ }]
53
+ })); //check modal portal defined
54
+
55
+ expect(container.querySelector('.ReactModalPortal')).toBeDefined(); //Check header and footer buttons
56
+
57
+ expect(getByText('Header')).toBeDefined();
58
+ expect(getByText('Close')).toBeDefined();
59
+ expect(getByText('Save')).toBeDefined();
60
+ });
61
+ it('Check tooltip, and link displayed without right footer buttons', async () => {
62
+ const {
63
+ baseElement,
64
+ getByText
65
+ } = render( /*#__PURE__*/React.createElement(ModalDialog, {
66
+ key: "smallModalWithoutImage",
67
+ closeModalAndClearInput: () => {},
68
+ title: 'Header',
69
+ size: Size.Small,
70
+ isModalOpen: true,
71
+ closeAction: () => {},
72
+ submitAction: () => {},
73
+ tooltip: 'some test tooltip',
74
+ leftFooterAction: {
75
+ id: 'test-link',
76
+ actionType: 'hyperlink',
77
+ text: 'Link',
78
+ href: 'http://test.com',
79
+ icon: /*#__PURE__*/React.createElement(React.Fragment, null),
80
+ variant: 'default'
81
+ }
82
+ })); //check tooltip displayed
83
+
84
+ expect(getByText('some test tooltip').textContent).toBeDefined(); //check footer link displayed
85
+
86
+ expect(getByText('Link').children).toBeDefined();
87
+ });
88
+ it('Check note and footer note displayed', async () => {
89
+ const {
90
+ baseElement,
91
+ getByText
92
+ } = render( /*#__PURE__*/React.createElement(ModalDialog, {
93
+ key: "smallModalWithoutImage",
94
+ closeModalAndClearInput: () => {},
95
+ title: 'Header',
96
+ size: Size.Small,
97
+ isModalOpen: true,
98
+ closeAction: () => {},
99
+ submitAction: () => {},
100
+ leftFooterAction: {
101
+ id: 'test-note',
102
+ actionType: 'note',
103
+ text: 'Test note',
104
+ icon: /*#__PURE__*/React.createElement(SystemIcons.Information, null)
105
+ },
106
+ note: 'Message text',
107
+ state: 'critical'
108
+ })); //check footer note text displayed
109
+
110
+ expect(getByText('Test note').textContent).toBeDefined(); //check note section added
111
+
112
+ expect(baseElement.querySelectorAll('section')?.length).toEqual(4); //check note message displayed
113
+
114
+ expect(getByText('Message text').children).toBeDefined();
115
+ });
116
+ it('Check back button and close icon displayed', async () => {
117
+ const {
118
+ baseElement,
119
+ getByText,
120
+ container
121
+ } = render( /*#__PURE__*/React.createElement(ModalDialog, {
122
+ key: "smallModalWithoutImage",
123
+ closeModalAndClearInput: () => {},
124
+ title: 'Header',
125
+ size: Size.Small,
126
+ backButton: () => {},
127
+ isModalOpen: true,
128
+ closeAction: () => {},
129
+ submitAction: () => {}
130
+ })); //only 2 svg elements should be found in the header of the modal
131
+
132
+ expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);
133
+ });
134
+ it('Check modal body displayed', async () => {
135
+ const {
136
+ baseElement,
137
+ getByText,
138
+ container
139
+ } = render( /*#__PURE__*/React.createElement(ModalDialog, {
140
+ key: "smallModalWithoutImage",
141
+ closeModalAndClearInput: () => {},
142
+ title: 'Header',
143
+ size: Size.Small,
144
+ isModalOpen: true,
145
+ closeAction: () => {},
146
+ submitAction: () => {}
147
+ }, /*#__PURE__*/React.createElement("span", null, "Inner modal text"))); //Check all dialog sections are displayed
148
+
149
+ expect(baseElement.querySelectorAll('section')?.length).toEqual(3); //Check that the second section (modal body) has the correct text
150
+
151
+ expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');
152
+ });
153
+ });
154
+ //# sourceMappingURL=Modal.test.js.map
package/dist/esm/Modals/__tests__/Modal.test.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/Modals/__tests__/Modal.test.tsx"],"names":["React","render","ModalDialog","Size","SystemIcons","describe","mountingDiv","beforeEach","document","createElement","id","body","appendChild","afterEach","removeChild","it","container","getByText","Small","expect","querySelector","toBeNull","action","text","variant","toBeDefined","baseElement","actionType","href","icon","textContent","children","querySelectorAll","length","toEqual"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { ModalDialog } from '..';\nimport { COLORS, Size, SystemIcons } from '../..';\n\ndescribe('<ModalDialog />', () => {\n let mountingDiv: HTMLElement;\n\n beforeEach(() => {\n //being rendered as a React.Portal we need to have the 'root' div defined\n mountingDiv = document.createElement('div');\n mountingDiv.id = 'root';\n document.body.appendChild(mountingDiv);\n });\n\n afterEach(() => {\n document.body.removeChild(mountingDiv);\n });\n\n it('Check modal not rendered when isModalOpen is false', async () => {\n const { container, getByText } = render(\n <ModalDialog\n key=\"smallModalWithoutImage\"\n closeModalAndClearInput={() => {}}\n title={'Header'}\n size={Size.Small}\n isModalOpen={false}\n closeAction={() => {}}\n submitAction={() => {}}\n />,\n );\n //check modal portal not exists when modal not opened\n expect(container.querySelector('.ReactModalPortal')).toBeNull();\n });\n\n it('Check modal visible, title and footer buttons displayed correctly', async () => {\n const { container, getByText } = render(\n <ModalDialog\n key=\"smallModalWithoutImage\"\n closeModalAndClearInput={() => {}}\n title={'Header'}\n size={Size.Small}\n isModalOpen={true}\n closeAction={() => {}}\n submitAction={() => {}}\n buttons={[\n {\n action: () => {},\n text: 'Close',\n variant: 'tertiary',\n },\n {\n action: () => {},\n text: 'Save',\n },\n ]}\n />,\n );\n //check modal portal defined\n expect(container.querySelector('.ReactModalPortal')).toBeDefined();\n //Check header and footer buttons\n expect(getByText('Header')).toBeDefined();\n expect(getByText('Close')).toBeDefined();\n expect(getByText('Save')).toBeDefined();\n });\n\n it('Check tooltip, and link displayed without right footer buttons', async () => {\n const { baseElement, getByText } = render(\n <ModalDialog\n key=\"smallModalWithoutImage\"\n closeModalAndClearInput={() => {}}\n title={'Header'}\n size={Size.Small}\n isModalOpen={true}\n closeAction={() => {}}\n submitAction={() => {}}\n tooltip={'some test tooltip'}\n leftFooterAction={{ id: 'test-link', actionType: 'hyperlink', text: 'Link', href: 'http://test.com', icon: <></>, variant: 'default' }}\n />,\n );\n //check tooltip displayed\n expect(getByText('some test tooltip').textContent).toBeDefined();\n //check footer link displayed\n expect(getByText('Link').children).toBeDefined();\n });\n\n it('Check note and footer note displayed', async () => {\n const { baseElement, getByText } = render(\n <ModalDialog\n key=\"smallModalWithoutImage\"\n closeModalAndClearInput={() => {}}\n title={'Header'}\n size={Size.Small}\n isModalOpen={true}\n closeAction={() => {}}\n submitAction={() => {}}\n leftFooterAction={{ id: 'test-note', actionType: 'note', text: 'Test note', icon: <SystemIcons.Information /> }}\n note={'Message text'}\n state={'critical'}\n />,\n );\n //check footer note text displayed\n expect(getByText('Test note').textContent).toBeDefined();\n //check note section added\n expect(baseElement.querySelectorAll('section')?.length).toEqual(4);\n //check note message displayed\n expect(getByText('Message text').children).toBeDefined();\n });\n\n it('Check back button and close icon displayed', async () => {\n const { baseElement, getByText, container } = render(\n <ModalDialog\n key=\"smallModalWithoutImage\"\n closeModalAndClearInput={() => {}}\n title={'Header'}\n size={Size.Small}\n backButton={() => {}}\n isModalOpen={true}\n closeAction={() => {}}\n submitAction={() => {}}\n />,\n );\n //only 2 svg elements should be found in the header of the modal\n expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);\n });\n\n it('Check modal body displayed', async () => {\n const { baseElement, getByText, container } = render(\n <ModalDialog\n key=\"smallModalWithoutImage\"\n closeModalAndClearInput={() => {}}\n title={'Header'}\n size={Size.Small}\n isModalOpen={true}\n closeAction={() => {}}\n submitAction={() => {}}>\n <span>Inner modal text</span>\n </ModalDialog>,\n );\n //Check all dialog sections are displayed\n expect(baseElement.querySelectorAll('section')?.length).toEqual(3);\n //Check that the second section (modal body) has the correct text\n expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');\n });\n});\n"],"file":"Modal.test.js"}
package/dist/js/Button/Button.js CHANGED
@@ -82,7 +82,7 @@ var tabbedHereStyle = function tabbedHereStyle(variant, colorTheme) {
82
82
  }
83
83
  };
84
84
 
85
- var Primary = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n box-shadow: none !important;\n color: ", ";\n }\n ", "\n &.focus-state {\n ", ";\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n }\n"])), function (props) {
85
+ var Primary = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n box-shadow: none !important;\n color: ", ";\n }\n ", "\n &.focus-state {\n ", ";\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
86
86
  return props.size === _types.Size.Large ? '56px' : '48px';
87
87
  }, function (props) {
88
88
  return props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white);
@@ -138,15 +138,9 @@ var Primary = _styledComponents.default.button(_templateObject5 || (_templateObj
138
138
  return props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300;
139
139
  }, function (props) {
140
140
  return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
141
- }, function (props) {
142
- return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
143
- }, function (props) {
144
- return props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300;
145
- }, function (props) {
146
- return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
147
141
  });
148
142
 
149
- var Secondary = (0, _styledComponents.default)(Primary)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n div.button-content {\n color: ", ";\n border-color: ", ";\n background-color: transparent;\n div svg path {\n fill: ", ";\n }\n }\n\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n background-color: white;\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ", ";\n border-color: ", ";\n background-color: transparent;\n div {\n svg {\n path {\n fill: ", ";\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: white;\n color: ", ";\n border-color: ", ";\n background-color: transparent;\n div {\n svg {\n path {\n fill: ", ";\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ", ";\n border-color: ", ";\n cursor: not-allowed;\n }\n ", "\n &.focus-state {\n ", ";\n\n }\n"])), function (props) {
143
+ var Secondary = (0, _styledComponents.default)(Primary)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n div.button-content {\n color: ", ";\n border-color: ", ";\n background-color: transparent;\n div svg path {\n fill: ", ";\n }\n }\n\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n }\n\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ", ";\n border-color: ", ";\n background-color: transparent;\n div {\n svg {\n path {\n fill: ", ";\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ", ";\n border-color: ", ";\n background-color: transparent;\n div {\n svg {\n path {\n fill: ", ";\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ", ";\n border-color: ", ";\n }\n ", "\n\n &:focus,\n &.focus-state {\n ", ";\n }\n"])), function (props) {
150
144
  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
151
145
  }, function (props) {
152
146
  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
@@ -173,7 +167,7 @@ var Secondary = (0, _styledComponents.default)(Primary)(_templateObject6 || (_te
173
167
  }, function (props) {
174
168
  return tabbedHereStyle('secondary', props === null || props === void 0 ? void 0 : props.colorTheme);
175
169
  });
176
- var Tertiary = (0, _styledComponents.default)(Primary)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n div.button-content {\n color: ", ";\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ", ";\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n div {\n svg {\n path {\n fill: ", ";\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n div {\n svg {\n path {\n fill: ", ";\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ", ";\n border-color: transparent;\n cursor: not-allowed;\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ", ";\n border-color: transparent !important;\n cursor: not-allowed;\n }\n ", "\n &.focus-state {\n ", ";\n }\n"])), function (props) {
170
+ var Tertiary = (0, _styledComponents.default)(Primary)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n div.button-content {\n color: ", ";\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ", ";\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n div {\n svg {\n path {\n fill: ", ";\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n div {\n svg {\n path {\n fill: ", ";\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ", ";\n border-color: transparent !important;\n }\n ", "\n &.focus-state {\n ", ";\n }\n"])), function (props) {
177
171
  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary_500;
178
172
  }, function (props) {
179
173
  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary;
@@ -193,13 +187,13 @@ var Tertiary = (0, _styledComponents.default)(Primary)(_templateObject7 || (_tem
193
187
  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100;
194
188
  }, function (props) {
195
189
  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800;
196
- }, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, function (props) {
190
+ }, _styles.COLORS.neutral_300, function (props) {
197
191
  return props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '';
198
192
  }, function (props) {
199
193
  return tabbedHereStyle('tertiary', props === null || props === void 0 ? void 0 : props.colorTheme);
200
194
  });
201
- var Correct = (0, _styledComponents.default)(Primary)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n div.button-content {\n color: white;\n border-color: ", ";\n background-color: ", ";\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n }\n"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_800, _styles.COLORS.correct_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
202
- var Critical = (0, _styledComponents.default)(Primary)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n div.button-content {\n color: white;\n border-color: ", ";\n background-color: ", ";\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n }\n"])), _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_800, _styles.COLORS.critical_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
195
+ var Correct = (0, _styledComponents.default)(Primary)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n div.button-content {\n color: white;\n border-color: ", ";\n background-color: ", ";\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_800, _styles.COLORS.correct_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
196
+ var Critical = (0, _styledComponents.default)(Primary)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n div.button-content {\n color: white;\n border-color: ", ";\n background-color: ", ";\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ", ";\n background-color: ", ";\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_800, _styles.COLORS.critical_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
203
197
 
204
198
  var Button = function Button(_ref) {
205
199
  var _ref$children = _ref.children,
package/dist/js/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","css","COLORS","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","Small","width","minWidth","Medium","iconOnly","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","type","testId","disabled","icon","loading","renderProps","supressFocusRef","React","useRef","useState","setTabbedHere","renderContent","className","e","current","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { Size } from '../types';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n switch (variant) {\n case 'primary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\n }\n `;\n case 'secondary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n }\n `;\n case 'tertiary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n }\n `;\n\n default:\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n }\n `;\n }\n};\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n box-shadow: none !important;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n background-color: white;\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: white;\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent;\n cursor: not-allowed;\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n tabbedHere?: boolean;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator></LoadingIndicator>}\n </>\n );\n\n // Let's render button\n switch (variant) {\n case 'primary':\n return (\n <Primary\n {...renderProps}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n case 'secondary':\n return (\n <Secondary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n iconOnly={!children}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Secondary>\n );\n case 'tertiary':\n return (\n <Tertiary\n {...renderProps}\n disabled={disabled}\n type={type}\n flatEdge={flatEdge}\n size={size}\n width={width}\n iconOnly={!children}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Tertiary>\n );\n case 'correct':\n return (\n <Correct\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n iconOnly={!children}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Correct>\n );\n case 'critical':\n return (\n <Critical\n {...renderProps}\n disabled={disabled}\n flatEdge={flatEdge}\n iconOnly={!children}\n type={type}\n size={size}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Critical>\n );\n default:\n return (\n <Primary\n {...renderProps}\n flatEdge={flatEdge}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n }\n};\n\nexport default Button;\n"],"file":"Button.js"}
1
+ {"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","css","COLORS","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","Small","width","minWidth","Medium","iconOnly","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","type","testId","disabled","icon","loading","renderProps","supressFocusRef","React","useRef","useState","setTabbedHere","renderContent","className","e","current","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { Size } from '../types';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n switch (variant) {\n case 'primary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\n }\n `;\n case 'secondary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n }\n `;\n case 'tertiary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n }\n `;\n\n default:\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n }\n `;\n }\n};\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n box-shadow: none !important;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n }\n\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n\n &:focus,\n &.focus-state {\n ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n tabbedHere?: boolean;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator></LoadingIndicator>}\n </>\n );\n\n // Let's render button\n switch (variant) {\n case 'primary':\n return (\n <Primary\n {...renderProps}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n case 'secondary':\n return (\n <Secondary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n iconOnly={!children}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Secondary>\n );\n case 'tertiary':\n return (\n <Tertiary\n {...renderProps}\n disabled={disabled}\n type={type}\n flatEdge={flatEdge}\n size={size}\n width={width}\n iconOnly={!children}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Tertiary>\n );\n case 'correct':\n return (\n <Correct\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n iconOnly={!children}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Correct>\n );\n case 'critical':\n return (\n <Critical\n {...renderProps}\n disabled={disabled}\n flatEdge={flatEdge}\n iconOnly={!children}\n type={type}\n size={size}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Critical>\n );\n default:\n return (\n <Primary\n {...renderProps}\n flatEdge={flatEdge}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n }\n};\n\nexport default Button;\n"],"file":"Button.js"}
package/dist/js/Dropdown/ChipDropdownInput.js CHANGED
@@ -238,9 +238,7 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
238
238
 
239
239
  if (!restartFilter && value !== '') {
240
240
  options = options.filter(function (option) {
241
- var _option$secondaryLabe;
242
-
243
- return option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 || option.secondaryLabel && ((_option$secondaryLabe = option.secondaryLabel) === null || _option$secondaryLabe === void 0 ? void 0 : _option$secondaryLabe.toUpperCase().indexOf(value.toUpperCase())) !== -1;
241
+ return option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1;
244
242
  });
245
243
  }
246
244
 
package/dist/js/Dropdown/ChipDropdownInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","StyledChipInputContainer","ChipInputContainer","COLORS","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","ComponentTextStyle","Regular","black","StyledDropdownButton","DropdownButton","Loading","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","excludeIcon","loading","maxSelectedItems","React","useState","givenList","setGivenList","chips","setChips","value","setValue","dropdownIsOpen","setDropdownIsOpen","currentSearchResult","setCurrentSearchResult","restartFilter","setRestartFilter","focused","setFocused","chipInput","useRef","styledFieldRef","useEffect","newList","map","e","label","addChip","newChip","current","onAddChip","event","keyCode","find","preventDefault","onRemoveChip","length","index","elementToAdd","newChips","splice","onEditChip","text","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","o","includes","handleValueUpdate","focus","handleKeyPress","contains","target","matches","c","toLowerCase","handleClickOutside","document","addEventListener","removeEventListener","dropdownItems","x","displayLabel","noteLabel","stopPropagation","chip","l","undefined","Size","Medium","Small","neutral_600","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","critical_500","isButton","autofilledMessage"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from '../Chips/index';\nimport { Search, TechnicalWarning, User } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer } from '../Chips/ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { Size } from '../types';\nimport { ChipInputProps } from '../Chips/ChipTypes';\nimport { DropdownButton } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentMStyling, ComponentXXSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst Wrapper = styled.div`\n position: relative;\n display: inline-block;\n width: 100%;\n min-width: 344px;\n`;\n\nconst StyledChipInputContainer = styled(ChipInputContainer)`\n padding: 2px 2px 2px 48px !important;\n min-height: 56px;\n max-height: 176px;\n overflow-y: auto;\n box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};\n\n .medium {\n margin-right: 8px !important;\n }\n .SearchIcon {\n position: absolute;\n left: 18px;\n top: 18px;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n }\n\n &.invalid {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n }\n &.alreadyInOrganization {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n }\n\n &.empty:hover {\n -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n }\n\n &.inputHasFocus {\n -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n }\n &:hover {\n -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_500};\n border-radius: 8px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_700};\n cursor: pointer;\n }\n`;\n\nconst ChipInput = styled.input`\n height: 40px;\n width: auto;\n display: inline-flex;\n border: none;\n outline: none;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n color: ${COLORS.black} !important;\n background-color: inherit;\n`;\n\nconst StyledDropdownButton = styled(DropdownButton)`\n display: flex;\n width: 98%;\n margin-left: 3px;\n svg {\n margin: auto 0 auto 0;\n }\n`;\n\nconst Loading = styled.div`\n margin: auto 16px auto auto !important;\n height: 20px;\n div {\n height: 20px;\n }\n`;\n\ninterface List {\n label: string;\n secondaryLabel?: string;\n value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n list: List[] | string[];\n onInputChange?: (input: string) => void;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n isButton?: boolean;\n autofilledMessage?: string;\n suggestion?: List;\n excludeIcon?: boolean;\n loading?: boolean;\n maxSelectedItems?: number;\n}\n\nconst ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps> = ({\n list,\n onInputChange,\n disableSorting,\n messageOnNoResults,\n values,\n inputId,\n variants,\n placeholder,\n validationType,\n validationMessage,\n onValueChange,\n suggestion,\n excludeIcon,\n loading,\n maxSelectedItems,\n}: ChipDropdownInputProps) => {\n // Initiate states\n const [givenList, setGivenList] = React.useState<List[]>([]);\n const [chips, setChips] = React.useState<string[]>([]);\n const [value, setValue] = React.useState<string>('');\n const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n const [currentSearchResult, setCurrentSearchResult] = React.useState<List[]>();\n const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n const [focused, setFocused] = React.useState<number | null>(null);\n\n // Initiate refs\n const chipInput = React.useRef<any>();\n const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n /**\n * Sets initial values for the chips.\n */\n React.useEffect(() => {\n // Let's add initial chip values\n setChips(values);\n }, [values]);\n\n /**\n * Convert string[] to List[] if necessary\n */\n React.useEffect(() => {\n if (typeof list[0] === 'string') {\n const newList: List[] = (list as string[]).map((e: string) => ({ label: e, value: e }));\n setGivenList(newList);\n } else {\n setGivenList(list as List[]);\n }\n }, [list]);\n\n const addChip = (newChip: string) => {\n // Let's add the chip\n setChips([...chips, newChip]);\n onValueChange([...chips, newChip]);\n\n // Let's clear the old value\n chipInput.current.value = '';\n setValue('');\n };\n\n /**\n * Adds a chip to the chip list.\n * @param event - Event handler from the key down event.\n */\n const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n // Let's trigger only on enter, comma and space key press\n if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n if (!givenList.find((e) => e.value === value)) {\n setValue('');\n return;\n }\n // Let's prevent default action - adding new key to the value\n event.preventDefault();\n\n addChip(value);\n }\n if (event.keyCode === 8 && value === '') {\n onRemoveChip(chips.length - 1);\n }\n };\n\n /**\n * Removes a specific chip from the chip list.\n * @param index - Index of the chip that needs to be removed.\n * @param elementToAdd - Element which needs to be added in the deleted element place.\n */\n const onRemoveChip = (index: number, elementToAdd?: string): void => {\n // Let's copy the chips\n const newChips = [...chips];\n\n // Let's delete the chip\n // If necessary, let's replace it with a different chip\n if (elementToAdd) {\n newChips.splice(index, 1, elementToAdd);\n } else {\n newChips.splice(index, 1);\n }\n\n // Let's update the chip list\n setChips([...newChips]);\n onValueChange([...newChips]);\n };\n\n /**\n * Changes a status of the chip to edit.\n * @param text - Text of the chip that is being edited.\n * @param index - Index of the chip in the array.\n */\n const onEditChip = (text: string, index: number): void => {\n // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n if (chipInput.current.value !== '') {\n // Let's replace the chip\n onRemoveChip(index, chipInput.current.value);\n } else {\n // Let's just remove the chip\n onRemoveChip(index);\n }\n\n // Let's update the text value of input field\n chipInput.current.value = text;\n setValue(text);\n };\n\n React.useEffect(() => {\n let options = [...givenList];\n if (!restartFilter && value !== '') {\n options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n }\n if (!disableSorting) {\n options = options.sort();\n }\n options = options.filter((o) => !chips.includes(o.value));\n setCurrentSearchResult(options);\n }, [value, givenList, chips]);\n\n const handleValueUpdate = (values: string[]) => {\n setRestartFilter(true);\n addChip(values[0]);\n chipInput?.current?.focus();\n }\n\n const handleKeyPress = (e: any) => {\n if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n if (e.keyCode === 13) {\n const matches = currentSearchResult?.filter((c) => c.value.toLowerCase() === value.toLowerCase());\n if (matches?.length === 1 /*&& onSelect*/) {\n addChip(matches[0].value);\n //onSelect(chips);\n } else if (e.target.value === suggestion?.label) {\n addChip(e.target.value);\n }\n\n setDropdownIsOpen(!dropdownIsOpen);\n if (matches?.length === 0) {\n setValue('');\n }\n } else if (e.keyCode === 40) {\n setDropdownIsOpen(!dropdownIsOpen);\n }\n }\n };\n\n const handleClickOutside = (e: any) => {\n if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {\n if (dropdownIsOpen) {\n setDropdownIsOpen(false);\n if (!givenList.find((e) => e.value === value)) {\n setValue('');\n }\n }\n }\n };\n\n React.useEffect(() => {\n document.addEventListener('keypress', handleKeyPress);\n document.addEventListener('click', handleClickOutside);\n return () => {\n document.removeEventListener('keypress', handleKeyPress);\n document.removeEventListener('click', handleClickOutside);\n };\n });\n\n /**\n * Return Chip Input component.\n */\n\n let dropdownItems: DropdownItem[] = [];\n if(currentSearchResult)\n dropdownItems = currentSearchResult.map(x => ({ value: x.value, displayLabel: x.label, noteLabel: x.secondaryLabel }));\n \n if(suggestion && !chips.includes(suggestion.value))\n dropdownItems = [{ value: suggestion.value, displayLabel: suggestion.label, noteLabel: suggestion.secondaryLabel, suggestion: true }, ...dropdownItems];\n\n return (\n <Wrapper>\n <StyledChipInputContainer\n id={inputId}\n onClick={(e: any) => {\n e.stopPropagation();\n setDropdownIsOpen(true);\n chipInput.current.focus();\n }}\n className={validationType}\n ref={styledFieldRef}>\n <Search size=\"24px\" className=\"SearchIcon\" />\n {chips?.map((chip: string, index: number) => (\n <InputChip\n icon={givenList.find((l: List) => l.value === chip) ? 'User' : undefined}\n size={Size.Medium}\n variant={variants && variants?.length && variants[index] ? variants[index] : 'normal'}\n text={chip}\n onRemove={() => onRemoveChip(index)}\n onClick={() => onEditChip(chip, index)}\n key={`chip_${index}`}></InputChip>\n ))}\n\n <ChipInput\n type=\"text\"\n onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n setRestartFilter(false);\n setDropdownIsOpen(true);\n if (onInputChange) {\n onInputChange(event.target.value || '');\n }\n }}\n onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n onAddChip(event);\n }}\n placeholder={placeholder && chips?.length === 0 ? placeholder : ''}\n onClick={(e: any) => {\n e.stopPropagation();\n setDropdownIsOpen(true);\n }}\n onFocus={() => {\n setDropdownIsOpen(true);\n }}\n ref={chipInput}\n />\n {loading ? (\n <Loading>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n </Loading>\n ) : null}\n </StyledChipInputContainer>\n {(!maxSelectedItems || (maxSelectedItems && chips.length < maxSelectedItems)) && (\n <DropdownContent \n customizationProps={{\n action: () => {},\n pinTopItem: true,\n \n itemsType: 'normal',\n scrollable: true,\n actionLabel: '',\n multiSelect: false,\n onValueUpdate: handleValueUpdate,\n items: dropdownItems\n }}\n focused={focused}\n setFocused={setFocused}\n hideOnClickOutside={false}\n selectedValues={[]}\n messageOnNoResults={messageOnNoResults ?? ''}\n setSelectedValues={() => {}}\n isOpen={dropdownIsOpen}\n setIsOpen={setDropdownIsOpen}\n filter={''}\n isButton={false} \n id={`${inputId}_dropdowncontent`} />\n )}\n\n {/* If there is an error, let's render the error */}\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n};\n\nexport default ChipDropdownInput;\n"],"file":"ChipDropdownInput.js"}
1
+ {"version":3,"sources":["../../../src/Dropdown/ChipDropdownInput.tsx"],"names":["Wrapper","styled","div","StyledChipInputContainer","ChipInputContainer","COLORS","neutral_400","primary_100","critical_400","warning_400","primary_600","primary_800","primary_700","white","neutral_500","neutral_700","ChipInput","input","ComponentTextStyle","Regular","black","StyledDropdownButton","DropdownButton","Loading","ChipDropdownInput","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationType","validationMessage","onValueChange","suggestion","excludeIcon","loading","maxSelectedItems","React","useState","givenList","setGivenList","chips","setChips","value","setValue","dropdownIsOpen","setDropdownIsOpen","currentSearchResult","setCurrentSearchResult","restartFilter","setRestartFilter","focused","setFocused","chipInput","useRef","styledFieldRef","useEffect","newList","map","e","label","addChip","newChip","current","onAddChip","event","keyCode","find","preventDefault","onRemoveChip","length","index","elementToAdd","newChips","splice","onEditChip","text","options","filter","option","toUpperCase","indexOf","sort","o","includes","handleValueUpdate","focus","handleKeyPress","contains","target","matches","c","toLowerCase","handleClickOutside","document","addEventListener","removeEventListener","dropdownItems","x","displayLabel","noteLabel","secondaryLabel","stopPropagation","chip","l","undefined","Size","Medium","Small","neutral_600","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items","critical_500","isButton","autofilledMessage"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport { InputChip } from '../Chips/index';\nimport { Search, TechnicalWarning, User } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, ErrorMessage } from '../InputFields/styling';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ChipInputContainer } from '../Chips/ChipStyles';\n\n/**\n * Import custom types.\n */\nimport { Size } from '../types';\nimport { ChipInputProps } from '../Chips/ChipTypes';\nimport { DropdownButton } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentMStyling, ComponentXXSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst Wrapper = styled.div`\n position: relative;\n display: inline-block;\n width: 100%;\n min-width: 344px;\n`;\n\nconst StyledChipInputContainer = styled(ChipInputContainer)`\n padding: 2px 2px 2px 48px !important;\n min-height: 56px;\n max-height: 176px;\n overflow-y: auto;\n box-shadow: 0px 0px 0px 1px ${COLORS.neutral_400};\n\n .medium {\n margin-right: 8px !important;\n }\n .SearchIcon {\n position: absolute;\n left: 18px;\n top: 18px;\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n }\n\n &.invalid {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n }\n &.alreadyInOrganization {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n }\n\n &.empty:hover {\n -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n box-shadow: 0px 0px 0px 2px ${COLORS.primary_600};\n }\n\n &.inputHasFocus {\n -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: 0px 0px 0px 2px ${COLORS.primary_800};\n }\n &:hover {\n -webkit-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n -moz-box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n box-shadow: 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n cursor: pointer;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: ${COLORS.white};\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_500};\n border-radius: 8px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_700};\n cursor: pointer;\n }\n`;\n\nconst ChipInput = styled.input`\n height: 40px;\n width: auto;\n display: inline-flex;\n border: none;\n outline: none;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n color: ${COLORS.black} !important;\n background-color: inherit;\n`;\n\nconst StyledDropdownButton = styled(DropdownButton)`\n display: flex;\n width: 98%;\n margin-left: 3px;\n svg {\n margin: auto 0 auto 0;\n }\n`;\n\nconst Loading = styled.div`\n margin: auto 16px auto auto !important;\n height: 20px;\n div {\n height: 20px;\n }\n`;\n\ninterface List {\n label: string;\n secondaryLabel?: string;\n value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n list: List[] | string[];\n onInputChange?: (input: string) => void;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n isButton?: boolean;\n autofilledMessage?: string;\n suggestion?: List;\n excludeIcon?: boolean;\n loading?: boolean;\n maxSelectedItems?: number;\n}\n\nconst ChipDropdownInput: React.FunctionComponent<ChipDropdownInputProps> = ({\n list,\n onInputChange,\n disableSorting,\n messageOnNoResults,\n values,\n inputId,\n variants,\n placeholder,\n validationType,\n validationMessage,\n onValueChange,\n suggestion,\n excludeIcon,\n loading,\n maxSelectedItems,\n}: ChipDropdownInputProps) => {\n // Initiate states\n const [givenList, setGivenList] = React.useState<List[]>([]);\n const [chips, setChips] = React.useState<string[]>([]);\n const [value, setValue] = React.useState<string>('');\n const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n const [currentSearchResult, setCurrentSearchResult] = React.useState<List[]>();\n const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n const [focused, setFocused] = React.useState<number | null>(null);\n\n // Initiate refs\n const chipInput = React.useRef<any>();\n const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n /**\n * Sets initial values for the chips.\n */\n React.useEffect(() => {\n // Let's add initial chip values\n setChips(values);\n }, [values]);\n\n /**\n * Convert string[] to List[] if necessary\n */\n React.useEffect(() => {\n if (typeof list[0] === 'string') {\n const newList: List[] = (list as string[]).map((e: string) => ({ label: e, value: e }));\n setGivenList(newList);\n } else {\n setGivenList(list as List[]);\n }\n }, [list]);\n\n const addChip = (newChip: string) => {\n // Let's add the chip\n setChips([...chips, newChip]);\n onValueChange([...chips, newChip]);\n\n // Let's clear the old value\n chipInput.current.value = '';\n setValue('');\n };\n\n /**\n * Adds a chip to the chip list.\n * @param event - Event handler from the key down event.\n */\n const onAddChip = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n // Let's trigger only on enter, comma and space key press\n if ((event.keyCode === 13 || event.keyCode === 32 || event.keyCode === 188) && value) {\n if (!givenList.find((e) => e.value === value)) {\n setValue('');\n return;\n }\n // Let's prevent default action - adding new key to the value\n event.preventDefault();\n\n addChip(value);\n }\n if (event.keyCode === 8 && value === '') {\n onRemoveChip(chips.length - 1);\n }\n };\n\n /**\n * Removes a specific chip from the chip list.\n * @param index - Index of the chip that needs to be removed.\n * @param elementToAdd - Element which needs to be added in the deleted element place.\n */\n const onRemoveChip = (index: number, elementToAdd?: string): void => {\n // Let's copy the chips\n const newChips = [...chips];\n\n // Let's delete the chip\n // If necessary, let's replace it with a different chip\n if (elementToAdd) {\n newChips.splice(index, 1, elementToAdd);\n } else {\n newChips.splice(index, 1);\n }\n\n // Let's update the chip list\n setChips([...newChips]);\n onValueChange([...newChips]);\n };\n\n /**\n * Changes a status of the chip to edit.\n * @param text - Text of the chip that is being edited.\n * @param index - Index of the chip in the array.\n */\n const onEditChip = (text: string, index: number): void => {\n // Let's check if we have to add value as a chip (in case we have entered something in the input field)\n if (chipInput.current.value !== '') {\n // Let's replace the chip\n onRemoveChip(index, chipInput.current.value);\n } else {\n // Let's just remove the chip\n onRemoveChip(index);\n }\n\n // Let's update the text value of input field\n chipInput.current.value = text;\n setValue(text);\n };\n\n React.useEffect(() => {\n var options = [...givenList];\n if (!restartFilter && value !== '') {\n options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1);\n }\n if (!disableSorting) {\n options = options.sort();\n }\n options = options.filter((o) => !chips.includes(o.value));\n setCurrentSearchResult(options);\n }, [value, givenList, chips]);\n\n const handleValueUpdate = (values: string[]) => {\n setRestartFilter(true);\n addChip(values[0]);\n chipInput?.current?.focus();\n }\n\n const handleKeyPress = (e: any) => {\n if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n if (e.keyCode === 13) {\n const matches = currentSearchResult?.filter((c) => c.value.toLowerCase() === value.toLowerCase());\n if (matches?.length === 1 /*&& onSelect*/) {\n addChip(matches[0].value);\n //onSelect(chips);\n } else if (e.target.value === suggestion?.label) {\n addChip(e.target.value);\n }\n\n setDropdownIsOpen(!dropdownIsOpen);\n if (matches?.length === 0) {\n setValue('');\n }\n } else if (e.keyCode === 40) {\n setDropdownIsOpen(!dropdownIsOpen);\n }\n }\n };\n\n const handleClickOutside = (e: any) => {\n if (styledFieldRef?.current && !styledFieldRef.current.contains(e.target)) {\n if (dropdownIsOpen) {\n setDropdownIsOpen(false);\n if (!givenList.find((e) => e.value === value)) {\n setValue('');\n }\n }\n }\n };\n\n React.useEffect(() => {\n document.addEventListener('keypress', handleKeyPress);\n document.addEventListener('click', handleClickOutside);\n return () => {\n document.removeEventListener('keypress', handleKeyPress);\n document.removeEventListener('click', handleClickOutside);\n };\n });\n\n /**\n * Return Chip Input component.\n */\n\n let dropdownItems: DropdownItem[] = [];\n if(currentSearchResult)\n dropdownItems = currentSearchResult.map(x => ({ value: x.value, displayLabel: x.label, noteLabel: x.secondaryLabel }));\n \n if(suggestion && !chips.includes(suggestion.value))\n dropdownItems = [{ value: suggestion.value, displayLabel: suggestion.label, noteLabel: suggestion.secondaryLabel, suggestion: true }, ...dropdownItems];\n\n return (\n <Wrapper>\n <StyledChipInputContainer\n id={inputId}\n onClick={(e: any) => {\n e.stopPropagation();\n setDropdownIsOpen(true);\n chipInput.current.focus();\n }}\n className={validationType}\n ref={styledFieldRef}>\n <Search size=\"24px\" className=\"SearchIcon\" />\n {chips?.map((chip: string, index: number) => (\n <InputChip\n icon={givenList.find((l: List) => l.value === chip) ? 'User' : undefined}\n size={Size.Medium}\n variant={variants && variants?.length && variants[index] ? variants[index] : 'normal'}\n text={chip}\n onRemove={() => onRemoveChip(index)}\n onClick={() => onEditChip(chip, index)}\n key={`chip_${index}`}></InputChip>\n ))}\n\n <ChipInput\n type=\"text\"\n onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value);\n setRestartFilter(false);\n setDropdownIsOpen(true);\n if (onInputChange) {\n onInputChange(event.target.value || '');\n }\n }}\n onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n onAddChip(event);\n }}\n placeholder={placeholder && chips?.length === 0 ? placeholder : ''}\n onClick={(e: any) => {\n e.stopPropagation();\n setDropdownIsOpen(true);\n }}\n onFocus={() => {\n setDropdownIsOpen(true);\n }}\n ref={chipInput}\n />\n {loading ? (\n <Loading>\n <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n </Loading>\n ) : null}\n </StyledChipInputContainer>\n {(!maxSelectedItems || (maxSelectedItems && chips.length < maxSelectedItems)) && (\n <DropdownContent \n customizationProps={{\n action: () => {},\n pinTopItem: true,\n \n itemsType: 'normal',\n scrollable: true,\n actionLabel: '',\n multiSelect: false,\n onValueUpdate: handleValueUpdate,\n items: dropdownItems\n }}\n focused={focused}\n setFocused={setFocused}\n hideOnClickOutside={false}\n selectedValues={[]}\n messageOnNoResults={messageOnNoResults ?? ''}\n setSelectedValues={() => {}}\n isOpen={dropdownIsOpen}\n setIsOpen={setDropdownIsOpen}\n filter={''}\n isButton={false} \n id={`${inputId}_dropdowncontent`} />\n )}\n\n {/* If there is an error, let's render the error */}\n {validationMessage && validationType === 'warning' ? (\n <WarningMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_500} />\n <span>{validationMessage}</span>\n </WarningMessage>\n ) : (\n validationType === 'error' && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )\n )}\n </Wrapper>\n );\n};\n\nexport default ChipDropdownInput;\n"],"file":"ChipDropdownInput.js"}