@ntbjs/react-components 1.1.0-beta.6 → 1.1.0-beta.61

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 (57) hide show
  1. package/{ActionButton-90485300.js → ActionButton-c3f5ed94.js} +1 -1
  2. package/Alert-3e4f8be1.js +62 -0
  3. package/{AssetGallery-fa38a287.js → AssetGallery-c80b2a20.js} +24 -36
  4. package/{AssetPreviewTopBar-777c726a.js → AssetPreviewTopBar-449e6019.js} +5 -3
  5. package/{AutocompleteSelect-e2063407.js → AutocompleteSelect-57a324e3.js} +30 -13
  6. package/{Badge-34ad2850.js → Badge-9bcebe96.js} +1 -1
  7. package/{Button-a5327c37.js → Button-dd271c4b.js} +3 -3
  8. package/{Checkbox-50f1f3c7.js → Checkbox-012bbd3f.js} +3 -3
  9. package/{CompactStarRating-f9997240.js → CompactStarRating-942afff1.js} +49 -32
  10. package/{CompactTextInput-8c9b061b.js → CompactTextInput-e9c99aa3.js} +43 -17
  11. package/{ContextMenu-59c2a64f.js → ContextMenu-d088833b.js} +1 -1
  12. package/{InputGroup-66dd343c.js → InputGroup-09ce9572.js} +1 -1
  13. package/Instructions-e96905c7.js +221 -0
  14. package/{MultiSelect-e4868f52.js → MultiSelect-5b008b32.js} +66 -46
  15. package/{Popover-616682bf.js → Popover-11df9750.js} +2 -7
  16. package/{Radio-0b46b2a8.js → Radio-0594409d.js} +1 -1
  17. package/{SectionSeparator-12aff748.js → SectionSeparator-225719cd.js} +1 -1
  18. package/{Switch-aa384260.js → Switch-cd165c8c.js} +1 -1
  19. package/{Tab-fc380f0b.js → Tab-bd0f3345.js} +11 -6
  20. package/{Tabs-d6f0aaf5.js → Tabs-cfc35dc0.js} +49 -11
  21. package/{TextArea-8a0bd754.js → TextArea-6dad1bbe.js} +19 -9
  22. package/{TextInput-e4c6d536.js → TextInput-a1083be3.js} +1 -1
  23. package/{Tooltip-860530ff.js → Tooltip-f4f9ab8f.js} +16 -11
  24. package/data/Alert/index.js +10 -0
  25. package/data/Badge/index.js +2 -2
  26. package/data/Popover/index.js +3 -2
  27. package/data/Tab/index.js +2 -2
  28. package/data/Tabs/index.js +3 -3
  29. package/data/Tooltip/index.js +12 -0
  30. package/data/index.js +11 -8
  31. package/{defaultTheme-870f7df1.js → defaultTheme-50f2b88f.js} +17 -0
  32. package/inputs/ActionButton/index.js +2 -2
  33. package/inputs/AutocompleteSelect/index.js +3 -3
  34. package/inputs/Button/index.js +5 -4
  35. package/inputs/Checkbox/index.js +2 -2
  36. package/inputs/CompactStarRating/index.js +2 -2
  37. package/inputs/CompactTextInput/index.js +9 -7
  38. package/inputs/MultiSelect/index.js +4 -3
  39. package/inputs/Radio/index.js +2 -2
  40. package/inputs/Switch/index.js +2 -2
  41. package/inputs/TextArea/index.js +2 -2
  42. package/inputs/TextInput/index.js +2 -2
  43. package/inputs/index.js +21 -19
  44. package/layout/InputGroup/index.js +2 -2
  45. package/layout/SectionSeparator/index.js +2 -2
  46. package/layout/index.js +3 -3
  47. package/package.json +3 -3
  48. package/{react-select-creatable.esm-9283eec1.js → react-select-creatable.esm-2f23d6c6.js} +133 -43
  49. package/shift-away-subtle-cfdf1dbe.js +9 -0
  50. package/warning-circle-24522402.js +41 -0
  51. package/widgets/AssetGallery/index.js +23 -20
  52. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -2
  53. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -4
  54. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +1 -1
  55. package/widgets/ContextMenu/index.js +2 -2
  56. package/widgets/Instructions/index.js +22 -0
  57. package/widgets/index.js +26 -21
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
 
@@ -0,0 +1,62 @@
1
+ 'use strict';
2
+
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
+ var React = require('react');
5
+ var styled = require('styled-components');
6
+
7
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
+
9
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
+
12
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
13
+ var Alert$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 17px 30px;\n svg {\n width: 12px;\n padding-right: 5px;\n }\n\n ", "\n\n ", "\n\n ", ";\n\n ", ";\n"])), function (props) {
14
+ return props.warning && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
15
+ }, function (props) {
16
+ return props.error && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200')));
17
+ }, function (props) {
18
+ return props.align === 'left' && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n text-align: left;\n "])));
19
+ }, function (props) {
20
+ return props.align === 'center' && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n text-align: center;\n "])));
21
+ });
22
+ var AlertRender = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n"])));
23
+
24
+ var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedRef) {
25
+ var warning = _ref.warning,
26
+ error = _ref.error,
27
+ alertMessage = _ref.alertMessage,
28
+ align = _ref.align,
29
+ icon = _ref.icon,
30
+ props = defaultTheme._objectWithoutProperties(_ref, ["warning", "error", "alertMessage", "align", "icon"]);
31
+
32
+ var boxRender = function boxRender(warning, error) {
33
+ if (warning) {
34
+ return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
35
+ } else if (error) {
36
+ return React__default['default'].createElement(AlertRender, null, icon, " ", alertMessage);
37
+ }
38
+ };
39
+
40
+ return React__default['default'].createElement(Alert$1, defaultTheme._extends({
41
+ ref: forwardedRef,
42
+ alertMessage: alertMessage,
43
+ warning: warning,
44
+ error: error,
45
+ align: align
46
+ }, props), boxRender(warning, error));
47
+ });
48
+ Alert.propTypes = process.env.NODE_ENV !== "production" ? {
49
+ warning: defaultTheme.PropTypes.bool,
50
+ error: defaultTheme.PropTypes.bool,
51
+ icon: defaultTheme.PropTypes.element,
52
+ align: defaultTheme.PropTypes.oneOf(['left', 'center']),
53
+ alertMessage: defaultTheme.PropTypes.string
54
+ } : {};
55
+ Alert.defaultProps = {
56
+ warning: false,
57
+ error: false,
58
+ align: 'left',
59
+ alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.'
60
+ };
61
+
62
+ exports.Alert = Alert;
@@ -1,28 +1,30 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var lodash = require('lodash');
6
- var TextInput = require('./TextInput-e4c6d536.js');
6
+ var TextInput = require('./TextInput-a1083be3.js');
7
7
  var ResizeObserver = require('resize-observer-polyfill');
8
8
  var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
9
- var ActionButton = require('./ActionButton-90485300.js');
10
- require('./AutocompleteSelect-e2063407.js');
11
- require('./Button-a5327c37.js');
12
- require('./Checkbox-50f1f3c7.js');
13
- require('./CompactStarRating-f9997240.js');
14
- require('./CompactTextInput-8c9b061b.js');
15
- require('./MultiSelect-e4868f52.js');
16
- require('./Radio-0b46b2a8.js');
17
- require('./TextArea-8a0bd754.js');
18
- require('./Switch-aa384260.js');
19
- require('./Popover-616682bf.js');
20
- var Tooltip = require('./Tooltip-860530ff.js');
21
- require('./Tab-fc380f0b.js');
22
- require('./Tabs-d6f0aaf5.js');
23
- require('./Badge-34ad2850.js');
9
+ var ActionButton = require('./ActionButton-c3f5ed94.js');
10
+ require('./AutocompleteSelect-57a324e3.js');
11
+ require('./Button-dd271c4b.js');
12
+ require('./Checkbox-012bbd3f.js');
13
+ require('./CompactStarRating-942afff1.js');
14
+ require('./CompactTextInput-e9c99aa3.js');
15
+ require('./MultiSelect-5b008b32.js');
16
+ require('./Radio-0594409d.js');
17
+ require('./TextArea-6dad1bbe.js');
18
+ require('./Switch-cd165c8c.js');
19
+ require('./Alert-3e4f8be1.js');
20
+ require('./Badge-9bcebe96.js');
21
+ require('./Popover-11df9750.js');
22
+ require('./Tab-bd0f3345.js');
23
+ require('./Tabs-cfc35dc0.js');
24
+ var Tooltip = require('./Tooltip-f4f9ab8f.js');
24
25
  var styled = require('styled-components');
25
26
  var polished = require('polished');
27
+ var warningCircle = require('./warning-circle-24522402.js');
26
28
 
27
29
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
28
30
 
@@ -153,29 +155,15 @@ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme
153
155
  var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
154
156
  var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
155
157
 
156
- function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
158
+ function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
157
159
 
158
- var _ref$6 = /*#__PURE__*/React__namespace.createElement("path", {
160
+ var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
159
161
  fill: "currentColor",
160
162
  d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
161
163
  fillOpacity: 0.9
162
164
  });
163
165
 
164
166
  function SvgCheckCircleFilled(props) {
165
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
166
- xmlns: "http://www.w3.org/2000/svg",
167
- viewBox: "0 0 24 24"
168
- }, props), _ref$6);
169
- }
170
-
171
- function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
172
-
173
- var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
174
- fill: "currentColor",
175
- d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
176
- });
177
-
178
- function SvgWarningCircle(props) {
179
167
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
180
168
  xmlns: "http://www.w3.org/2000/svg",
181
169
  viewBox: "0 0 24 24"
@@ -509,7 +497,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
509
497
  }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
510
498
  title: asset.note.title,
511
499
  assetTitle: asset.title
512
- }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
500
+ }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
513
501
  selected: selected
514
502
  }, React__default['default'].createElement(SvgCheckCircleFilled, {
515
503
  onClick: onSelectClick
@@ -808,7 +796,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
808
796
  ref: cardRef
809
797
  }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(Note, {
810
798
  title: asset.note.title
811
- }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
799
+ }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(warningCircle.SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
812
800
  "data-id": "ss"
813
801
  }, asset.previewUrl && renderPreview(asset)), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
814
802
  style: {
@@ -1124,7 +1112,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
1124
1112
  var minTranslateYPlusHeight = yOffset - containerOffset - bufferTop;
1125
1113
  var maxTranslateY = yOffset - containerOffset + scrollerHeight + bufferBottom;
1126
1114
  var finalizedAssets = calculatedAssets.current.map(function (asset) {
1127
- if (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY) {
1115
+ if (scrollElement.self == window && (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY)) {
1128
1116
  asset.layout.show = false;
1129
1117
  } else {
1130
1118
  asset.layout.show = true;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
  var close = require('./close-ebf2f3cf.js');
@@ -32,14 +32,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
32
32
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
33
33
 
34
34
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
35
- var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: 1px solid;\n clip-path: inset(0px 0px -10px 0px);\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n"])), function (props) {
35
+ var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: 1px solid;\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n"])), function (props) {
36
36
  return props.theme.primaryFontFamily;
37
37
  }, function (props) {
38
38
  return props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));
39
39
  }, function (props) {
40
40
  return props.shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9');
41
41
  });
42
- var BackButtonContainer = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n font-size: 1.125rem;\n color: inherit;\n\n &:hover {\n cursor: pointer;\n }\n\n > svg {\n height: 24px;\n margin-right: 16px;\n width: 24px;\n }\n"])));
42
+ var BackButtonContainer = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n font-size: 1.125rem;\n ", ";\n\n &:hover {\n cursor: pointer;\n }\n\n > svg {\n height: 24px;\n margin-right: 16px;\n width: 24px;\n }\n"])), function (props) {
43
+ return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
44
+ });
43
45
  var LeftText = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1.125rem;\n margin-left: 16px;\n\n ", ";\n"])), function (props) {
44
46
  return props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
45
47
  });
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var lodash = require('lodash');
7
7
  var styled = require('styled-components');
8
8
  var Select = require('react-select');
9
- var reactSelectCreatable_esm = require('./react-select-creatable.esm-9283eec1.js');
9
+ var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js');
10
10
  var reactSelectAsyncPaginate = require('react-select-async-paginate');
11
11
  var close = require('./close-ebf2f3cf.js');
12
12
  var expandMore = require('./expand-more-94585605.js');
@@ -52,7 +52,7 @@ var Control = styled__default['default'](Select.components.Control).attrs(defaul
52
52
  }, function (props) {
53
53
  return props.error && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
54
54
  });
55
- var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n && {\n min-height: 22px;\n height: 22px;\n display: flex;\n align-items: center;\n padding: 6px;\n cursor: pointer;\n ", "\n ", "\n ", "\n ", "\n }\n"])), function (props) {
55
+ var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n && {\n min-height: 22px;\n height: 22px;\n display: flex;\n align-items: center;\n padding: 6px;\n cursor: pointer;\n ", "\n ", "\n ", "\n ", "\n }\n svg {\n width: 15px;\n margin: 0 9px 0 0;\n }\n a {\n display: flex;\n text-decoration: none;\n color: inherit;\n }\n"])), function (props) {
56
56
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
57
57
  }, function (props) {
58
58
  return props.isFocused && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
@@ -110,8 +110,9 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
110
110
  readOnly = _ref.readOnly,
111
111
  disabled = _ref.disabled,
112
112
  error = _ref.error,
113
+ hidden = _ref.hidden,
113
114
  warning = _ref.warning,
114
- props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "disabled", "error", "warning"]);
115
+ props = defaultTheme._objectWithoutProperties(_ref, ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "disabled", "error", "hidden", "warning"]);
115
116
 
116
117
  var _useState = React.useState(nanoid.nanoid()),
117
118
  _useState2 = defaultTheme._slicedToArray(_useState, 1),
@@ -226,7 +227,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
226
227
  switch (actionMeta.action) {
227
228
  case 'create-option':
228
229
  if (onUpdateCallback) {
229
- onUpdateCallback(actionMeta.action, actionMeta.option);
230
+ onUpdateCallback(actionMeta.action, selected.value);
230
231
  }
231
232
 
232
233
  if (loadOptions) {
@@ -238,7 +239,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
238
239
 
239
240
  case 'select-option':
240
241
  if (onUpdateCallback) {
241
- onUpdateCallback(actionMeta.action, actionMeta.option);
242
+ onUpdateCallback(actionMeta.action, selected.value);
242
243
  }
243
244
 
244
245
  setSelected(selected);
@@ -246,7 +247,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
246
247
 
247
248
  case 'remove-value':
248
249
  if (onUpdateCallback) {
249
- onUpdateCallback(actionMeta.action, actionMeta.removedValue);
250
+ onUpdateCallback(actionMeta.action, selected.value);
250
251
  }
251
252
 
252
253
  setSelected(selected);
@@ -254,7 +255,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
254
255
 
255
256
  case 'pop-value':
256
257
  if (onUpdateCallback) {
257
- onUpdateCallback(actionMeta.action, actionMeta.removedValue);
258
+ onUpdateCallback(actionMeta.action, selected.value);
258
259
  }
259
260
 
260
261
  setSelected(selected);
@@ -262,7 +263,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
262
263
 
263
264
  case 'deselect-option':
264
265
  if (onUpdateCallback) {
265
- onUpdateCallback(actionMeta.action, actionMeta.option);
266
+ onUpdateCallback(actionMeta.action, selected.value);
266
267
  }
267
268
 
268
269
  setSelected(selected);
@@ -274,7 +275,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
274
275
 
275
276
  default:
276
277
  if (onUpdateCallback) {
277
- onUpdateCallback(actionMeta.action, actionMeta.option);
278
+ onUpdateCallback(actionMeta.action, selected.value);
278
279
  }
279
280
 
280
281
  setSelected(selected);
@@ -282,6 +283,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
282
283
  }
283
284
  }
284
285
  };
286
+ if (hidden) return null;
285
287
  return React__default['default'].createElement(AutocompleteSelect$1, null, React__default['default'].createElement(InputContainer, null, label && React__default['default'].createElement(Label, {
286
288
  htmlFor: uniqueId
287
289
  }, label), loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableAutocompleteSelect, defaultTheme._extends({
@@ -298,12 +300,13 @@ AutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
298
300
  label: defaultTheme.PropTypes.string,
299
301
  placeholder: defaultTheme.PropTypes.string,
300
302
  availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
301
- selectedOption: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
303
+ selectedOption: defaultTheme.PropTypes.object,
302
304
  loadOptions: defaultTheme.PropTypes.func,
303
305
  loadingMessageFunc: defaultTheme.PropTypes.func,
304
306
  createNewOptionMessageFunc: defaultTheme.PropTypes.func,
305
307
  noOptionsMessageFunc: defaultTheme.PropTypes.func,
306
308
  readOnly: defaultTheme.PropTypes.bool,
309
+ hidden: defaultTheme.PropTypes.bool,
307
310
  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
308
311
  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
309
312
  onUpdateCallback: defaultTheme.PropTypes.func,
@@ -326,9 +329,11 @@ AutocompleteSelect.defaultProps = {
326
329
  };
327
330
 
328
331
  var Option = function Option(props) {
329
- return React__default['default'].createElement(Option$1, defaultTheme._extends({
332
+ return !props.data.link ? React__default['default'].createElement(Option$1, defaultTheme._extends({
330
333
  className: "menu-item"
331
- }, props));
334
+ }, props)) : React__default['default'].createElement(Option$1, props, React__default['default'].createElement("a", {
335
+ href: props.data.link
336
+ }, props.data.icon, props.label));
332
337
  };
333
338
 
334
339
  var SingleValue = function SingleValue(props) {
@@ -337,6 +342,14 @@ var SingleValue = function SingleValue(props) {
337
342
  }, props));
338
343
  };
339
344
 
345
+ Option.propTypes = process.env.NODE_ENV !== "production" ? {
346
+ data: defaultTheme.PropTypes.shape({
347
+ icon: defaultTheme.PropTypes.node,
348
+ link: defaultTheme.PropTypes.string
349
+ }),
350
+ label: defaultTheme.PropTypes.string
351
+ } : {};
352
+
340
353
  var DropdownIndicator = function DropdownIndicator(props) {
341
354
  return React__default['default'].createElement(DropdownIndicator$1, defaultTheme._extends({
342
355
  className: "dropdown-indicator"
@@ -355,4 +368,8 @@ var IndicatorSeparator = function IndicatorSeparator(props) {
355
368
  }, props));
356
369
  };
357
370
 
371
+ AutocompleteSelect.defaultProps = {
372
+ hidden: false
373
+ };
374
+
358
375
  exports.AutocompleteSelect = AutocompleteSelect;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
 
@@ -1,10 +1,10 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
- var Popover = require('./Popover-616682bf.js');
7
- var ContextMenu = require('./ContextMenu-59c2a64f.js');
6
+ var Popover = require('./Popover-11df9750.js');
7
+ var ContextMenu = require('./ContextMenu-d088833b.js');
8
8
  var expandMore = require('./expand-more-94585605.js');
9
9
 
10
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var styled = require('styled-components');
@@ -107,14 +107,14 @@ var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forw
107
107
  }, React__default['default'].createElement("path", {
108
108
  d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
109
109
  fill: "currentColor"
110
- }))), typeof label === 'string' && label.length > 0 && React__default['default'].createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
110
+ }))), (typeof label === 'string' && label.length > 0 || defaultTheme._typeof(label) === 'object') && React__default['default'].createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
111
111
  error: hasError
112
112
  }, descriptionText));
113
113
  });
114
114
  Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
115
115
  checked: defaultTheme.PropTypes.bool,
116
116
  defaultChecked: defaultTheme.PropTypes.bool,
117
- label: defaultTheme.PropTypes.string,
117
+ label: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]),
118
118
  disabled: defaultTheme.PropTypes.bool,
119
119
  readOnly: defaultTheme.PropTypes.bool,
120
120
  name: defaultTheme.PropTypes.string,
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
3
+ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
  var lodash = require('lodash');
@@ -31,21 +31,19 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
31
31
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
32
32
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
33
33
 
34
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
35
- var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n height: 24px;\n width: 100%;\n display: flex;\n align-items: center;\n\n ", "\n"])), function (props) {
34
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
35
+ var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n height: 24px;\n width: 100%;\n display: flex;\n align-items: center;\n\n input[type='number'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n"])), function (props) {
36
36
  return props.theme.primaryFontFamily;
37
- }, function (props) {
38
- return props.disabled && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
39
37
  });
40
- var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n width: 33.3%;\n display: flex;\n align-items: center;\n text-align: left;\n font: normal normal normal 14px/16px Roboto;\n letter-spacing: 0px;\n padding: 0;\n height: 19px;\n\n ", "\n"])), function (props) {
38
+ var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n width: 33.3%;\n display: flex;\n align-items: center;\n text-align: left;\n font: normal normal normal 14px/16px Roboto;\n letter-spacing: 0px;\n padding: 0;\n height: 19px;\n\n ", "\n"])), function (props) {
41
39
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
42
40
  });
43
- var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.6%;\n border-radius: 3px;\n height: 24px;\n\n ", "\n\n ", "\n"])), function (props) {
44
- return props.error && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
41
+ var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.6%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n\n ", "\n\n ", "\n"])), function (props) {
42
+ return props.error && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
45
43
  }, function (props) {
46
- return props.warning && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
44
+ return props.warning && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
47
45
  });
48
- var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n height: 12px;\n padding-left: 4px;\n transition: color 250ms;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
46
+ var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n height: 12px;\n padding-left: 4px;\n transition: color 250ms;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n"])), function (props) {
49
47
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
50
48
  }, function (props) {
51
49
  return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -53,8 +51,10 @@ var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultThem
53
51
  return props.warning && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
54
52
  }, function (props) {
55
53
  return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
54
+ }, function (props) {
55
+ return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
56
56
  });
57
- var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n height: 12px;\n padding-left: 4px;\n transition: color 250ms;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
57
+ var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n height: 12px;\n padding-left: 4px;\n transition: color 250ms;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n"])), function (props) {
58
58
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
59
59
  }, function (props) {
60
60
  return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -62,6 +62,8 @@ var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefault
62
62
  return props.warning && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
63
63
  }, function (props) {
64
64
  return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
65
+ }, function (props) {
66
+ return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
65
67
  });
66
68
 
67
69
  function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
@@ -99,17 +101,20 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
99
101
  max = _ref.max,
100
102
  defaultValue = _ref.defaultValue,
101
103
  value = _ref.value,
104
+ name = _ref.name,
102
105
  viewEmpty = _ref.viewEmpty,
103
106
  onChange = _ref.onChange,
104
107
  onBlur = _ref.onBlur,
105
108
  error = _ref.error,
106
109
  warning = _ref.warning,
107
110
  readOnly = _ref.readOnly,
108
- props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly"]);
111
+ hidden = _ref.hidden,
112
+ getRatingProp = _ref.getRating,
113
+ props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "name", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly", "hidden", "getRating"]);
109
114
 
110
115
  var stars = Array.from(Array(max).keys());
111
116
 
112
- var _useState = React.useState(defaultValue),
117
+ var _useState = React.useState(value || defaultValue),
113
118
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
114
119
  rating = _useState2[0],
115
120
  setRating = _useState2[1];
@@ -126,8 +131,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
126
131
 
127
132
  var inputRef = React.useRef();
128
133
  React.useEffect(function () {
129
- setRating(value);
130
- }, [value]);
134
+ setRating(value || defaultValue);
135
+ }, [value, defaultValue]);
131
136
  var hasError = React.useMemo(function () {
132
137
  if (lodash.isBoolean(error)) {
133
138
  return error;
@@ -143,20 +148,24 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
143
148
  return !lodash.isEmpty(warning);
144
149
  }, [warning]);
145
150
  React.useEffect(function () {
146
- var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
147
- nativeInputValueSetter.call(inputRef.current, String(rating));
148
- var ev2 = new Event('input', {
149
- bubbles: true
151
+ if (lodash.isFunction(getRatingProp)) {
152
+ getRatingProp(rating);
153
+ }
154
+ }, [rating]);
155
+ React.useEffect(function () {
156
+ inputRef.current.value = String(rating);
157
+ onChange({
158
+ target: inputRef.current
150
159
  });
151
- ev2.simulated = true;
152
- inputRef.current.dispatchEvent(ev2);
153
160
  }, [rating]);
154
161
 
155
162
  var starIconRender = function starIconRender(key) {
156
163
  if (rating > 0 && rating >= key + 1) {
157
164
  return React__default['default'].createElement(StarFill, {
158
165
  disabled: readOnly,
159
- onClick: function onClick() {
166
+ onClick: function onClick(event) {
167
+ event.preventDefault();
168
+
160
169
  if (key + 1 > 1) {
161
170
  return setRating(key + 1);
162
171
  } else if (key + 1 == 1) {
@@ -181,7 +190,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
181
190
  } else if (viewEmpty) {
182
191
  return React__default['default'].createElement(Star, {
183
192
  disabled: readOnly,
184
- onClick: function onClick() {
193
+ onClick: function onClick(event) {
194
+ event.preventDefault();
185
195
  setRating(key + 1);
186
196
  },
187
197
  onMouseEnter: function onMouseEnter() {
@@ -200,19 +210,22 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
200
210
  }
201
211
  };
202
212
 
213
+ if (hidden) return null;
203
214
  return React__default['default'].createElement(CompactStarRating$1, defaultTheme._extends({
204
- disabled: readOnly,
205
- ref: forwardedRef
206
- }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement("input", {
207
- type: "hidden",
208
- ref: inputRef,
215
+ ref: forwardedRef,
209
216
  onChange: onChange,
210
217
  onBlur: onBlur
211
- }), React__default['default'].createElement(starsWidth, {
218
+ }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement(starsWidth, {
212
219
  error: hasError,
213
220
  warning: hasWarning
214
221
  }, stars.map(function (key) {
215
- return starIconRender(key);
222
+ return React__default['default'].createElement("div", {
223
+ key: key
224
+ }, React__default['default'].createElement("input", {
225
+ type: "number",
226
+ name: name,
227
+ ref: inputRef
228
+ }), starIconRender(key));
216
229
  })));
217
230
  });
218
231
  CompactStarRating.defaultProps = {
@@ -222,12 +235,14 @@ CompactStarRating.defaultProps = {
222
235
  defaultValue: 0,
223
236
  viewEmpty: true,
224
237
  icon: React__default['default'].createElement(SvgStar, null),
225
- iconFill: React__default['default'].createElement(SvgStarFilled, null)
238
+ iconFill: React__default['default'].createElement(SvgStarFilled, null),
239
+ hidden: false
226
240
  };
227
241
  CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
228
242
  value: defaultTheme.PropTypes.number,
229
243
  defaultValue: defaultTheme.PropTypes.number,
230
244
  label: defaultTheme.PropTypes.string,
245
+ name: defaultTheme.PropTypes.string,
231
246
  icon: defaultTheme.PropTypes.element,
232
247
  iconFill: defaultTheme.PropTypes.element,
233
248
  max: defaultTheme.PropTypes.number,
@@ -236,7 +251,9 @@ CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
236
251
  onBlur: defaultTheme.PropTypes.func,
237
252
  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
238
253
  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
239
- readOnly: defaultTheme.PropTypes.bool
254
+ readOnly: defaultTheme.PropTypes.bool,
255
+ hidden: defaultTheme.PropTypes.bool,
256
+ getRating: defaultTheme.PropTypes.func
240
257
  } : {};
241
258
 
242
259
  exports.CompactStarRating = CompactStarRating;