@ntbjs/react-components 1.3.0-rc.7 → 1.3.0-rc.71

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 (77) hide show
  1. package/.eslintrc +7 -8
  2. package/{ActionButton-46735b89.js → ActionButton-5bc79370.js} +19 -16
  3. package/{Alert-13b75102.js → Alert-edd9f6a7.js} +20 -24
  4. package/{AssetGallery-de5aaeb9.js → AssetAction-3dfb975f.js} +611 -654
  5. package/AssetPreviewTopBar-6eaa7df8.js +104 -0
  6. package/{Badge-757b0a39.js → Badge-00b2f311.js} +28 -49
  7. package/{Button-49f82b31.js → Button-82e91acb.js} +97 -88
  8. package/{Checkbox-68dc38a8.js → Checkbox-c441fdba.js} +32 -37
  9. package/{CompactAutocompleteSelect-26a9cd1a.js → CompactAutocompleteSelect-a8ccfcad.js} +95 -127
  10. package/{CompactStarRating-4ad1ccd5.js → CompactStarRating-3fa89ec7.js} +85 -98
  11. package/CompactTextInput-ee126f63.js +364 -0
  12. package/{ContextMenu-4ec3d9f3.js → ContextMenu-9645746f.js} +6 -6
  13. package/{ContextMenuItem-ba2b697e.js → ContextMenuItem-ae252503.js} +22 -26
  14. package/InfoCard-005063b4.js +86 -0
  15. package/{InputGroup-49fbc423.js → InputGroup-3598e37c.js} +6 -6
  16. package/{Instructions-6009d3e3.js → Instructions-46e49829.js} +99 -83
  17. package/{MultiLevelCheckboxSelect-be76fb10.js → MultiLevelCheckboxSelect-375c4785.js} +103 -165
  18. package/{MultiSelect-efd60232.js → MultiSelect-0bdad346.js} +78 -108
  19. package/{Popover-569cd272.js → Popover-f00121a3.js} +41 -40
  20. package/ProgressBar-7d31fd95.js +154 -0
  21. package/{Radio-32d0513a.js → Radio-758fd8f3.js} +21 -22
  22. package/{SectionSeparator-259a22ed.js → SectionSeparator-43e1647d.js} +6 -6
  23. package/{Switch-4a41585f.js → Switch-26547abb.js} +25 -27
  24. package/{Tab-f499ecbc.js → Tab-d3ee0a3b.js} +7 -7
  25. package/{Tabs-bfe19f77.js → Tabs-243c5e0b.js} +26 -46
  26. package/TextArea-b16e166b.js +364 -0
  27. package/{TextInput-0d109708.js → TextInput-70cb3df7.js} +55 -62
  28. package/{Tooltip-66daf6e3.js → Tooltip-7dc4676b.js} +13 -13
  29. package/{VerificationStatusIcon-d5bfb67a.js → VerificationStatusIcon-f3c44ef8.js} +20 -30
  30. package/arrow-forward-d7c77ae3.js +37 -0
  31. package/{close-ebf2f3cf.js → close-1751121a.js} +8 -12
  32. package/data/Alert/index.js +2 -2
  33. package/data/Badge/index.js +2 -2
  34. package/data/Popover/index.js +3 -3
  35. package/data/Tab/index.js +2 -2
  36. package/data/Tabs/index.js +3 -3
  37. package/data/Tooltip/index.js +3 -3
  38. package/data/index.js +9 -9
  39. package/{defaultTheme-ea44e34a.js → defaultTheme-24ea5c47.js} +213 -261
  40. package/edit-note-cefe2215.js +37 -0
  41. package/{expand-more-94585605.js → expand-more-d74e2bd2.js} +8 -12
  42. package/icons/arrow-forward.svg +3 -0
  43. package/icons/index.js +2 -0
  44. package/inputs/ActionButton/index.js +2 -2
  45. package/inputs/Button/index.js +6 -6
  46. package/inputs/Checkbox/index.js +2 -2
  47. package/inputs/CompactAutocompleteSelect/index.js +13 -13
  48. package/inputs/CompactStarRating/index.js +10 -10
  49. package/inputs/CompactTextInput/index.js +11 -11
  50. package/inputs/MultiSelect/index.js +4 -4
  51. package/inputs/Radio/index.js +2 -2
  52. package/inputs/Switch/index.js +2 -2
  53. package/inputs/TextArea/index.js +11 -11
  54. package/inputs/TextInput/index.js +3 -3
  55. package/inputs/index.js +28 -28
  56. package/layout/InputGroup/index.js +2 -2
  57. package/layout/SectionSeparator/index.js +2 -2
  58. package/layout/index.js +3 -3
  59. package/package.json +5 -3
  60. package/{react-select-creatable.esm-2f23d6c6.js → react-select-creatable.esm-09b1be95.js} +1421 -1287
  61. package/{shift-away-subtle-0bed9a3c.js → shift-away-subtle-dce50395.js} +1 -1
  62. package/ssr/index.js +1 -3
  63. package/styles/config.scss +3 -0
  64. package/widgets/AssetGallery/index.js +37 -32
  65. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
  66. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
  67. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +6 -6
  68. package/widgets/ContextMenu/index.js +2 -2
  69. package/widgets/InfoCard/index.js +11 -0
  70. package/widgets/Instructions/index.js +16 -17
  71. package/widgets/ProgressBar/index.js +11 -0
  72. package/widgets/index.js +42 -35
  73. package/AssetPreviewTopBar-912c3469.js +0 -99
  74. package/CompactTextInput-c8bee455.js +0 -349
  75. package/TextArea-41089240.js +0 -375
  76. package/edit-note-c47d292e.js +0 -41
  77. package/warning-circle-24522402.js +0 -41
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
3
+ var defaultTheme = require('./defaultTheme-24ea5c47.js');
4
4
  var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var styled = require('styled-components');
7
- var close = require('./close-ebf2f3cf.js');
7
+ var close = require('./close-1751121a.js');
8
8
  var Select = require('react-select');
9
- var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js');
9
+ var reactSelectCreatable_esm = require('./react-select-creatable.esm-09b1be95.js');
10
10
  var reactSelectAsyncPaginate = require('react-select-async-paginate');
11
11
 
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,32 +15,32 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
15
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
16
16
  var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
17
17
 
18
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
19
19
  var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
20
20
  var showMoreHeight = 114;
21
21
  var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 12px;\n font-weight: 400;\n position: relative;\n"])), function (props) {
22
22
  return props.theme.primaryFontFamily;
23
23
  });
24
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n"])), function (props) {
24
+ var Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n"])), function (props) {
25
25
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
26
26
  });
27
- var MultiSelect$1 = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
28
- var CreatableMultiSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
29
- var AsyncCreatableMultiSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
30
- var AsyncMultiSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
31
- var MultiSelectWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
32
- var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n && {\n align-items: flex-start;\n background: transparent;\n border: none;\n box-shadow: none;\n }\n\n :hover {\n cursor: ", ";\n }\n"])), function (props) {
27
+ var MultiSelect$1 = styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
28
+ var CreatableMultiSelect = styled__default["default"](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
29
+ var AsyncCreatableMultiSelect = styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
30
+ var AsyncMultiSelect = styled__default["default"](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
31
+ var MultiSelectWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
32
+ var Control = styled__default["default"](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n && {\n align-items: flex-start;\n background: transparent;\n border: none;\n box-shadow: none;\n }\n\n :hover {\n cursor: ", ";\n }\n"])), function (props) {
33
33
  return !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer';
34
34
  });
35
- var ValueContainer = styled__default['default'](Select.components.ValueContainer)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n && {\n align-items: flex-start;\n gap: 8px;\n padding: 0;\n\n max-height: ", " !important;\n\n ", "\n }\n"])), function (props) {
35
+ var ValueContainer = styled__default["default"](Select.components.ValueContainer)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n && {\n align-items: flex-start;\n gap: 8px;\n padding: 0;\n\n max-height: ", " !important;\n\n ", "\n }\n"])), function (props) {
36
36
  return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
37
37
  }, function (props) {
38
- return (props.error || props.warning) && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n border: 1px solid;\n border-radius: 3px;\n padding: 4px;\n\n border-color: ", ";\n "])), function (props) {
38
+ return (props.error || props.warning) && styled.css(_templateObject0 || (_templateObject0 = defaultTheme._taggedTemplateLiteral(["\n border: 1px solid;\n border-radius: 3px;\n padding: 4px;\n\n border-color: ", ";\n "])), function (props) {
39
39
  return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
40
40
  });
41
41
  });
42
- var MultiValueWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n }\n"])));
43
- var MultiValue = styled__default['default'](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n\n ", "\n\n ", "\n\n > div {\n align-items: center;\n display: flex;\n font-size: 12px;\n min-height: 26px;\n\n :first-of-type {\n padding: ", ";\n }\n\n :last-child:not(:only-child) {\n padding: 0 8px 0 5px;\n height: 100%;\n width: fit-content;\n }\n\n :last-child:not(:only-child):hover {\n background-color: ", ";\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n cursor: pointer;\n }\n\n svg {\n stroke: white;\n stroke-width: 2px;\n width: 8px;\n }\n\n :hover {\n cursor: pointer;\n }\n }\n"])), function (props) {
42
+ var MultiValueWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject1 || (_templateObject1 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n }\n"])));
43
+ var MultiValue = styled__default["default"](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n\n ", "\n\n ", "\n\n > div {\n align-items: center;\n display: flex;\n font-size: 12px;\n min-height: 26px;\n\n :first-of-type {\n padding: ", ";\n }\n\n :last-of-type:not(:only-child) {\n padding: 0 8px 0 5px;\n height: 100%;\n width: fit-content;\n }\n\n :last-of-type:not(:only-child):hover {\n background-color: ", ";\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n cursor: pointer;\n }\n\n svg {\n stroke: white;\n stroke-width: 2px;\n width: 8px;\n }\n\n :hover {\n cursor: pointer;\n }\n }\n"])), function (props) {
44
44
  return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'));
45
45
  }, function (props) {
46
46
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'));
@@ -49,148 +49,136 @@ var MultiValue = styled__default['default'](Select.components.MultiValue).attrs(
49
49
  }, function (props) {
50
50
  return props.theme.getColor('red-500');
51
51
  });
52
- var MultiValueRemove = styled__default['default'](Select.components.MultiValueRemove).attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral([""])));
53
- var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n align-self: center;\n font-size: ", ";\n min-width: 150px;\n\n ", "\n\n ", "\n }\n"])), function (props) {
52
+ var MultiValueRemove = styled__default["default"](Select.components.MultiValueRemove).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral([""])));
53
+ var Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n align-self: center;\n font-size: ", ";\n min-width: 150px;\n\n ", "\n\n ", "\n }\n"])), function (props) {
54
54
  return props.$focused ? '14px' : '12px';
55
55
  }, function (props) {
56
56
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
57
57
  }, function (props) {
58
- return !props.$focused && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n :before {\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n content: '", "';\n }\n "])), function (props) {
58
+ return !props.$focused && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n :before {\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n content: '", "';\n }\n "])), function (props) {
59
59
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
60
60
  }, function (props) {
61
61
  return props.edittext;
62
62
  });
63
63
  });
64
- var DropdownMenu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n font-size: 14px;\n\n ", "\n\n ", "\n"])), function (props) {
64
+ var DropdownMenu = styled__default["default"](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n font-size: 14px;\n\n ", "\n\n ", "\n"])), function (props) {
65
65
  return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'));
66
66
  }, function (props) {
67
67
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
68
68
  });
69
- var sharedOptionStyle = styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n\n :hover {\n cursor: pointer;\n }\n"])), function (props) {
70
- return props.isFocused && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
69
+ var sharedOptionStyle = styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n\n ", "\n\n :hover {\n cursor: pointer;\n }\n"])), function (props) {
70
+ return props.isFocused && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
71
71
  }, function (props) {
72
- return props.isSelected && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
72
+ return props.isSelected && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
73
73
  }, function (props) {
74
- return props.isFocused && props.isSelected && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
74
+ return props.isFocused && props.isSelected && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
75
75
  });
76
- var Option = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedOptionStyle);
77
- var SelectedOption$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n display: flex !important;\n justify-content: space-between;\n"])), sharedOptionStyle);
78
- var DropdownOptionDeleteIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n stroke-width: 1px;\n width: 8px;\n\n ", "\n"])), function (props) {
76
+ var Option = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedOptionStyle);
77
+ var SelectedOption$1 = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n display: flex !important;\n justify-content: space-between;\n"])), sharedOptionStyle);
78
+ var DropdownOptionDeleteIcon = styled__default["default"](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n stroke-width: 1px;\n width: 8px;\n\n ", "\n"])), function (props) {
79
79
  return props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
80
80
  });
81
- var ShowMoreWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n align-items: end;\n display: flex;\n flex-direction: column;\n height: 100%;\n left: 0;\n position: absolute;\n max-height: ", "px;\n top: 0;\n width: 100%;\n\n ", "\n\n :hover {\n cursor: pointer;\n text-decoration: underline;\n }\n"])), showMoreHeight + 16, function (props) {
81
+ var ShowMoreWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n align-items: end;\n display: flex;\n flex-direction: column;\n height: 100%;\n left: 0;\n position: absolute;\n max-height: ", "px;\n top: 0;\n width: 100%;\n\n ", "\n\n :hover {\n cursor: pointer;\n text-decoration: underline;\n }\n"])), showMoreHeight + 16, function (props) {
82
82
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'));
83
83
  });
84
- var ShowMoreOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n align-items: end;\n display: block;\n height: 100%;\n max-height: ", "px;\n left: 0;\n top: 0;\n width: 100%;\n\n ", "\n"])), showMoreHeight, function (props) {
84
+ var ShowMoreOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n align-items: end;\n display: block;\n height: 100%;\n max-height: ", "px;\n left: 0;\n top: 0;\n width: 100%;\n\n ", "\n"])), showMoreHeight, function (props) {
85
85
  return props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box');
86
86
  });
87
- var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n width: 100%;\n ", "\n"])), function (props) {
87
+ var ShowMoreText = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n width: 100%;\n ", "\n"])), function (props) {
88
88
  return props.theme.themeProp('background-color', '#121212', '#fefefe');
89
89
  });
90
- var ErrorMessage = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n font-size: 0.75rem;\n margin-top: 8px;\n padding: 0 12px;\n"])), function (props) {
90
+ var ErrorMessage = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n font-size: 0.75rem;\n margin-top: 8px;\n padding: 0 12px;\n"])), function (props) {
91
91
  return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
92
92
  });
93
93
 
94
- var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref, forwardedRef) {
94
+ var _excluded = ["label", "selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "hidden", "disabled", "error", "warning"];
95
+ var MultiSelect = React__default["default"].forwardRef(function MultiSelect(_ref, forwardedRef) {
95
96
  var label = _ref.label,
96
- selectedOptions = _ref.selectedOptions,
97
- availableOptions = _ref.availableOptions,
98
- loadOptions = _ref.loadOptions,
99
- loadingMessageFunc = _ref.loadingMessageFunc,
100
- onUpdateCallback = _ref.onUpdateCallback,
101
- editText = _ref.editText,
102
- createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
103
- noOptionsMessageFunc = _ref.noOptionsMessageFunc,
104
- onMultiValueClick = _ref.onMultiValueClick,
105
- showMore = _ref.showMore,
106
- showMoreText = _ref.showMoreText,
107
- displayTotalOnShowMore = _ref.displayTotalOnShowMore,
108
- creatable = _ref.creatable,
109
- readOnly = _ref.readOnly,
110
- hidden = _ref.hidden,
111
- disabled = _ref.disabled,
112
- error = _ref.error,
113
- warning = _ref.warning,
114
- props = defaultTheme._objectWithoutProperties(_ref, ["label", "selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "hidden", "disabled", "error", "warning"]);
115
-
97
+ selectedOptions = _ref.selectedOptions,
98
+ availableOptions = _ref.availableOptions,
99
+ loadOptions = _ref.loadOptions,
100
+ loadingMessageFunc = _ref.loadingMessageFunc,
101
+ onUpdateCallback = _ref.onUpdateCallback,
102
+ editText = _ref.editText,
103
+ createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
104
+ noOptionsMessageFunc = _ref.noOptionsMessageFunc,
105
+ onMultiValueClick = _ref.onMultiValueClick,
106
+ showMore = _ref.showMore,
107
+ showMoreText = _ref.showMoreText,
108
+ displayTotalOnShowMore = _ref.displayTotalOnShowMore,
109
+ creatable = _ref.creatable,
110
+ readOnly = _ref.readOnly,
111
+ hidden = _ref.hidden,
112
+ disabled = _ref.disabled,
113
+ error = _ref.error,
114
+ warning = _ref.warning,
115
+ props = defaultTheme._objectWithoutProperties(_ref, _excluded);
116
116
  var _useState = React.useState(nanoid.nanoid()),
117
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
118
- uniqueId = _useState2[0];
119
-
117
+ _useState2 = defaultTheme._slicedToArray(_useState, 1),
118
+ uniqueId = _useState2[0];
120
119
  var _useState3 = React.useState(selectedOptions),
121
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
122
- selected = _useState4[0],
123
- setSelected = _useState4[1];
124
-
120
+ _useState4 = defaultTheme._slicedToArray(_useState3, 2),
121
+ selected = _useState4[0],
122
+ setSelected = _useState4[1];
125
123
  var _useState5 = React.useState(false),
126
- _useState6 = defaultTheme._slicedToArray(_useState5, 2),
127
- focused = _useState6[0],
128
- setFocused = _useState6[1];
129
-
124
+ _useState6 = defaultTheme._slicedToArray(_useState5, 2),
125
+ focused = _useState6[0],
126
+ setFocused = _useState6[1];
130
127
  var _useState7 = React.useState(error || warning ? false : showMore),
131
- _useState8 = defaultTheme._slicedToArray(_useState7, 2),
132
- displayShowMore = _useState8[0],
133
- setDisplayShowMore = _useState8[1];
134
-
128
+ _useState8 = defaultTheme._slicedToArray(_useState7, 2),
129
+ displayShowMore = _useState8[0],
130
+ setDisplayShowMore = _useState8[1];
135
131
  var _useState9 = React.useState(0),
136
- _useState10 = defaultTheme._slicedToArray(_useState9, 2),
137
- cacheUnique = _useState10[0],
138
- setCacheUnique = _useState10[1];
139
-
132
+ _useState0 = defaultTheme._slicedToArray(_useState9, 2),
133
+ cacheUnique = _useState0[0],
134
+ setCacheUnique = _useState0[1];
140
135
  React.useEffect(function () {
141
136
  setSelected(selectedOptions);
142
137
  }, [selectedOptions]);
143
-
144
138
  var handleShowMoreClick = function handleShowMoreClick() {
145
139
  setDisplayShowMore(false);
146
140
  };
147
-
148
141
  var Control$1 = React.useMemo(function () {
149
142
  var ControlWrapper = function ControlWrapper(innerProps) {
150
- return React__default['default'].createElement(Control, defaultTheme._extends({
143
+ return React__default["default"].createElement(Control, defaultTheme._extends({
151
144
  className: "multi-select-control",
152
145
  readOnly: readOnly
153
146
  }, innerProps));
154
147
  };
155
-
156
148
  ControlWrapper.displayName = 'ControlWrapper';
157
149
  return ControlWrapper;
158
150
  }, []);
159
151
  var ValueContainer$1 = React.useMemo(function () {
160
152
  var ValueContainerWrapper = function ValueContainerWrapper(innerProps) {
161
- return React__default['default'].createElement(React__default['default'].Fragment, null, label && React__default['default'].createElement(Label, {
153
+ return React__default["default"].createElement(React__default["default"].Fragment, null, label && React__default["default"].createElement(Label, {
162
154
  htmlFor: uniqueId
163
- }, label), React__default['default'].createElement(ValueContainer, defaultTheme._extends({
155
+ }, label), React__default["default"].createElement(ValueContainer, defaultTheme._extends({
164
156
  showMore: displayShowMore,
165
157
  error: error,
166
158
  warning: warning,
167
159
  className: "multi-select-values-container"
168
160
  }, innerProps)));
169
161
  };
170
-
171
162
  ValueContainerWrapper.displayName = 'ValueContainerWrapper';
172
163
  return ValueContainerWrapper;
173
164
  }, [displayShowMore, error, warning]);
174
-
175
165
  var MultiValue$1 = function MultiValue$1(innerProps) {
176
- return React__default['default'].createElement(MultiValueWrapper, {
166
+ return React__default["default"].createElement(MultiValueWrapper, {
177
167
  className: "multi-value-wrapper",
178
168
  onMouseDown: function onMouseDown(e) {
179
169
  e.stopPropagation();
180
-
181
170
  if (onMultiValueClick && innerProps.data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
182
171
  onMultiValueClick(innerProps.data);
183
172
  }
184
173
  }
185
- }, React__default['default'].createElement(MultiValue, defaultTheme._extends({
174
+ }, React__default["default"].createElement(MultiValue, defaultTheme._extends({
186
175
  className: "multi-value",
187
176
  readOnly: readOnly
188
177
  }, innerProps)));
189
178
  };
190
-
191
179
  var Input$1 = React.useMemo(function () {
192
180
  var InputWrapper = function InputWrapper(innerProps) {
193
- return React__default['default'].createElement(Input, defaultTheme._extends({
181
+ return React__default["default"].createElement(Input, defaultTheme._extends({
194
182
  className: "multi-select-input",
195
183
  $focused: focused,
196
184
  edittext: editText
@@ -198,7 +186,6 @@ var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref
198
186
  isDisabled: readOnly || disabled
199
187
  }));
200
188
  };
201
-
202
189
  InputWrapper.displayName = 'InputWrapper';
203
190
  return InputWrapper;
204
191
  }, [focused]);
@@ -250,66 +237,53 @@ var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref
250
237
  if (onUpdateCallback) {
251
238
  onUpdateCallback(actionMeta.action, actionMeta.option);
252
239
  }
253
-
254
240
  if (loadOptions) {
255
241
  setCacheUnique(cacheUnique + 1);
256
242
  }
257
-
258
243
  setSelected(selectedOptions);
259
244
  break;
260
-
261
245
  case 'select-option':
262
246
  if (onUpdateCallback) {
263
247
  onUpdateCallback(actionMeta.action, actionMeta.option);
264
248
  }
265
-
266
249
  setSelected(selectedOptions);
267
250
  break;
268
-
269
251
  case 'remove-value':
270
252
  if (onUpdateCallback) {
271
253
  onUpdateCallback(actionMeta.action, actionMeta.removedValue);
272
254
  }
273
-
274
255
  setSelected(selectedOptions);
275
256
  break;
276
-
277
257
  case 'pop-value':
278
258
  if (onUpdateCallback) {
279
259
  onUpdateCallback(actionMeta.action, actionMeta.removedValue);
280
260
  }
281
-
282
261
  setSelected(selectedOptions);
283
262
  break;
284
-
285
263
  case 'deselect-option':
286
264
  if (onUpdateCallback) {
287
265
  onUpdateCallback(actionMeta.action, actionMeta.option);
288
266
  }
289
-
290
267
  setSelected(selectedOptions);
291
268
  break;
292
-
293
269
  case 'clear':
294
270
  break;
295
-
296
271
  default:
297
272
  if (onUpdateCallback) {
298
273
  onUpdateCallback(actionMeta.action, actionMeta.option);
299
274
  }
300
-
301
275
  setSelected(selectedOptions);
302
276
  break;
303
277
  }
304
278
  }
305
279
  };
306
280
  if (hidden) return null;
307
- return React__default['default'].createElement(MultiSelectWrapper, {
281
+ return React__default["default"].createElement(MultiSelectWrapper, {
308
282
  error: error,
309
283
  warning: warning
310
- }, loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default['default'].createElement(AsyncMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : creatable ? React__default['default'].createElement(CreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default['default'].createElement(MultiSelect$1, defaultTheme._extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React__default['default'].createElement(ShowMoreWrapper, {
284
+ }, loadOptions ? creatable ? React__default["default"].createElement(AsyncCreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default["default"].createElement(AsyncMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : creatable ? React__default["default"].createElement(CreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default["default"].createElement(MultiSelect$1, defaultTheme._extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React__default["default"].createElement(ShowMoreWrapper, {
311
285
  onClick: handleShowMoreClick
312
- }, React__default['default'].createElement(ShowMoreOverlay, null), React__default['default'].createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React__default['default'].createElement(ErrorMessage, {
286
+ }, React__default["default"].createElement(ShowMoreOverlay, null), React__default["default"].createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React__default["default"].createElement(ErrorMessage, {
313
287
  error: error,
314
288
  warning: warning
315
289
  }, error ? error : warning));
@@ -353,25 +327,21 @@ MultiSelect.defaultProps = {
353
327
  showMoreText: 'Show more',
354
328
  hidden: false
355
329
  };
356
-
357
330
  var _MultiValueRemove = function _MultiValueRemove(innerProps) {
358
- return React__default['default'].createElement(MultiValueRemove, innerProps, React__default['default'].createElement(close.SvgClose, {
331
+ return React__default["default"].createElement(MultiValueRemove, innerProps, React__default["default"].createElement(close.SvgClose, {
359
332
  className: "multi-value-remove-icon"
360
333
  }));
361
334
  };
362
-
363
335
  var Menu = function Menu(innerProps) {
364
- return React__default['default'].createElement(DropdownMenu, innerProps);
336
+ return React__default["default"].createElement(DropdownMenu, innerProps);
365
337
  };
366
-
367
338
  var _Option = function _Option(innerProps) {
368
- return React__default['default'].createElement(Option, defaultTheme._extends({
339
+ return React__default["default"].createElement(Option, defaultTheme._extends({
369
340
  className: "multi-select-dropdown-item"
370
341
  }, innerProps));
371
342
  };
372
-
373
343
  var SelectedOption = function SelectedOption(innerProps) {
374
- return React__default['default'].createElement(SelectedOption$1, innerProps, innerProps.label, React__default['default'].createElement(DropdownOptionDeleteIcon, null));
344
+ return React__default["default"].createElement(SelectedOption$1, innerProps, innerProps.label, React__default["default"].createElement(DropdownOptionDeleteIcon, null));
375
345
  };
376
346
 
377
347
  exports.MultiSelect = MultiSelect;
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
3
+ var defaultTheme = require('./defaultTheme-24ea5c47.js');
4
4
  var lodash = require('lodash');
5
5
  var React = require('react');
6
6
  var styled = require('styled-components');
7
7
  var polished = require('polished');
8
8
  var TippyTooltip = require('@tippyjs/react');
9
- require('./shift-away-subtle-0bed9a3c.js');
9
+ require('./shift-away-subtle-dce50395.js');
10
10
  var maxSize = require('popper-max-size-modifier');
11
11
 
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -16,9 +16,11 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
16
16
  var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
17
17
  var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
18
18
 
19
- var _templateObject, _templateObject2, _templateObject3;
20
- var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n line-height: inherit;\n max-height: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .tippy-content {\n padding: 0;\n max-height: inherit;\n\n > div {\n max-height: inherit;\n }\n }\n\n .tippy-arrow {\n ", "\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ", "\n }\n\n & > .tippy-arrow:after {\n top: -14.5px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ", "\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n"])), function (props) {
19
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
20
+ var Popover$1 = styled__default["default"](TippyTooltip__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n line-height: inherit;\n max-height: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .tippy-content {\n padding: 0;\n max-height: inherit;\n\n > div {\n max-height: inherit;\n }\n }\n\n .tippy-arrow {\n ", "\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ", "\n }\n\n & > .tippy-arrow:after {\n top: -14.5px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ", "\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n"])), function (props) {
21
21
  return props.theme.primaryFontFamily;
22
+ }, function (props) {
23
+ return props.maxWidth && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n max-width: ", ";\n "])), props.maxWidth);
22
24
  }, function (props) {
23
25
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
24
26
  }, function (props) {
@@ -26,13 +28,13 @@ var Popover$1 = styled__default['default'](TippyTooltip__default['default']).att
26
28
  }, function (props) {
27
29
  return props.theme.themeProp('border', "1px solid ".concat(props.theme.getColor('gray-800')), "1px solid ".concat(props.theme.getColor('gray-300')));
28
30
  }, function (props) {
29
- return props.contextMenu && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n border-radius: 4px;\n\n ", "\n\n ", "\n "])), function (props) {
31
+ return props.contextMenu && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n border-radius: 4px;\n\n ", "\n\n ", "\n "])), function (props) {
30
32
  return props.theme.themeProp('border', 'none', 'none');
31
33
  }, function (props) {
32
34
  return props.theme.themeProp('box-shadow', "none", "0 1px 6px ".concat(polished.rgba(props.theme.getColor('gray-900'), 0.3)));
33
35
  });
34
36
  }, function (props) {
35
- return props.contextMenuSublevel && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n &[data-placement^='right-start'],\n &[data-placement^='left-start'] {\n margin-top: -4px;\n }\n\n &[data-placement^='left'] {\n margin-right: -6px;\n }\n\n &[data-placement^='right'] {\n margin-left: -6px;\n }\n "])));
37
+ return props.contextMenuSublevel && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n &[data-placement^='right-start'],\n &[data-placement^='left-start'] {\n margin-top: -4px;\n }\n\n &[data-placement^='left'] {\n margin-right: -6px;\n }\n\n &[data-placement^='right'] {\n margin-left: -6px;\n }\n "])));
36
38
  }, function (props) {
37
39
  return props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'), 1);
38
40
  }, function (props) {
@@ -45,28 +47,40 @@ var Popover$1 = styled__default['default'](TippyTooltip__default['default']).att
45
47
  return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
46
48
  });
47
49
 
48
- var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
49
- var content = _ref.content,
50
- interactive = _ref.interactive,
51
- placement = _ref.placement,
52
- duration = _ref.duration,
53
- trigger = _ref.trigger,
54
- offset = _ref.offset,
55
- arrow = _ref.arrow,
56
- visible = _ref.visible,
57
- contextMenu = _ref.contextMenu,
58
- contextMenuSublevel = _ref.contextMenuSublevel,
59
- children = _ref.children,
60
- modifiers = _ref.modifiers,
61
- props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers"]);
62
-
50
+ var _excluded = ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers", "maxWidth"];
51
+ var Popover = React__default["default"].forwardRef(function Popover(_ref, ref) {
52
+ var _ref$content = _ref.content,
53
+ content = _ref$content === void 0 ? 'Tooltip' : _ref$content,
54
+ _ref$interactive = _ref.interactive,
55
+ interactive = _ref$interactive === void 0 ? true : _ref$interactive,
56
+ _ref$placement = _ref.placement,
57
+ placement = _ref$placement === void 0 ? 'bottom-end' : _ref$placement,
58
+ _ref$duration = _ref.duration,
59
+ duration = _ref$duration === void 0 ? 350 : _ref$duration,
60
+ _ref$trigger = _ref.trigger,
61
+ trigger = _ref$trigger === void 0 ? 'click focus' : _ref$trigger,
62
+ _ref$offset = _ref.offset,
63
+ offset = _ref$offset === void 0 ? [0, 8] : _ref$offset,
64
+ _ref$arrow = _ref.arrow,
65
+ arrow = _ref$arrow === void 0 ? true : _ref$arrow,
66
+ _ref$visible = _ref.visible,
67
+ visible = _ref$visible === void 0 ? undefined : _ref$visible,
68
+ _ref$contextMenu = _ref.contextMenu,
69
+ contextMenu = _ref$contextMenu === void 0 ? false : _ref$contextMenu,
70
+ _ref$contextMenuSuble = _ref.contextMenuSublevel,
71
+ contextMenuSublevel = _ref$contextMenuSuble === void 0 ? false : _ref$contextMenuSuble,
72
+ children = _ref.children,
73
+ _ref$modifiers = _ref.modifiers,
74
+ modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
75
+ _ref$maxWidth = _ref.maxWidth,
76
+ maxWidth = _ref$maxWidth === void 0 ? 'none' : _ref$maxWidth,
77
+ props = defaultTheme._objectWithoutProperties(_ref, _excluded);
63
78
  var errorOffset = React.useMemo(function () {
64
79
  return arrow ? 15 : 0;
65
80
  }, [arrow]);
66
81
  var isControlled = React.useMemo(function () {
67
82
  return lodash.isBoolean(visible);
68
83
  }, [visible]);
69
-
70
84
  var handleContextMenuItemClick = function handleContextMenuItemClick() {
71
85
  document.querySelectorAll('.context-menu-item:not(.opens-sublevel)').forEach(function (item) {
72
86
  return item.addEventListener('click', function () {
@@ -78,8 +92,7 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
78
92
  });
79
93
  });
80
94
  };
81
-
82
- return React__default['default'].createElement("div", null, React__default['default'].createElement(Popover$1, defaultTheme._extends({
95
+ return React__default["default"].createElement("div", null, React__default["default"].createElement(Popover$1, defaultTheme._extends({
83
96
  ref: ref,
84
97
  content: content,
85
98
  interactive: interactive,
@@ -91,7 +104,7 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
91
104
  arrow: contextMenu ? false : arrow,
92
105
  visible: visible,
93
106
  popperOptions: {
94
- modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default['default']), {}, {
107
+ modifiers: [defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, maxSize__default["default"]), {}, {
95
108
  options: {
96
109
  boundary: 'viewport',
97
110
  rootBoundary: 'viewport',
@@ -111,7 +124,8 @@ var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
111
124
  }
112
125
  }].concat(defaultTheme._toConsumableArray(modifiers))
113
126
  },
114
- onShown: contextMenu ? handleContextMenuItemClick : undefined
127
+ onShown: contextMenu ? handleContextMenuItemClick : undefined,
128
+ maxWidth: maxWidth
115
129
  }, props), children));
116
130
  });
117
131
  Popover.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -124,23 +138,10 @@ Popover.propTypes = process.env.NODE_ENV !== "production" ? {
124
138
  arrow: defaultTheme.PropTypes.bool,
125
139
  visible: defaultTheme.PropTypes.bool,
126
140
  modifiers: defaultTheme.PropTypes.array,
141
+ maxWidth: defaultTheme.PropTypes.string,
127
142
  contextMenu: defaultTheme.PropTypes.bool,
128
143
  contextMenuSublevel: defaultTheme.PropTypes.bool,
129
144
  children: defaultTheme.PropTypes.node.isRequired
130
145
  } : {};
131
- Popover.defaultProps = {
132
- content: 'Tooltip',
133
- interactive: true,
134
- placement: 'bottom-end',
135
- duration: 350,
136
- offset: [0, 8],
137
- maxWidth: 'none',
138
- trigger: 'click focus',
139
- arrow: true,
140
- visible: undefined,
141
- contextMenu: false,
142
- contextMenuSublevel: false,
143
- modifiers: []
144
- };
145
146
 
146
147
  exports.Popover = Popover;