@ntbjs/react-components 1.1.0-beta.4 → 1.1.0-beta.41

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 (40) hide show
  1. package/Alert-fcc0bb50.js +62 -0
  2. package/{AssetGallery-3696cf3c.js → AssetGallery-f082c487.js} +17 -29
  3. package/{AssetPreviewTopBar-777c726a.js → AssetPreviewTopBar-020a6f96.js} +1 -1
  4. package/{AutocompleteSelect-46dbe1eb.js → AutocompleteSelect-8ebb82de.js} +21 -11
  5. package/{Badge-86593df4.js → Badge-34ad2850.js} +1 -1
  6. package/{Button-01371eb4.js → Button-32e38cc9.js} +2 -2
  7. package/{CompactStarRating-f9997240.js → CompactStarRating-f05e7414.js} +43 -30
  8. package/{CompactTextInput-15118df5.js → CompactTextInput-04cc82f6.js} +7 -6
  9. package/{ContextMenu-a68d4f28.js → ContextMenu-59c2a64f.js} +1 -1
  10. package/Instructions-02b4209b.js +228 -0
  11. package/{MultiSelect-1568f6e9.js → MultiSelect-873f707d.js} +6 -2
  12. package/{Popover-616682bf.js → Popover-de874e41.js} +1 -6
  13. package/{Tab-06b7a58d.js → Tab-075c8c0a.js} +1 -1
  14. package/{Tabs-cfbf45fe.js → Tabs-6584e003.js} +2 -2
  15. package/{TextArea-8a0bd754.js → TextArea-af6a812d.js} +4 -4
  16. package/{Tooltip-860530ff.js → Tooltip-e7f59097.js} +12 -10
  17. package/data/Alert/index.js +10 -0
  18. package/data/Badge/index.js +1 -1
  19. package/data/Popover/index.js +2 -1
  20. package/data/Tab/index.js +1 -1
  21. package/data/Tabs/index.js +2 -2
  22. package/data/Tooltip/index.js +12 -0
  23. package/data/index.js +10 -7
  24. package/inputs/AutocompleteSelect/index.js +2 -2
  25. package/inputs/Button/index.js +4 -3
  26. package/inputs/CompactStarRating/index.js +1 -1
  27. package/inputs/CompactTextInput/index.js +8 -6
  28. package/inputs/MultiSelect/index.js +2 -2
  29. package/inputs/TextArea/index.js +1 -1
  30. package/inputs/index.js +15 -13
  31. package/package.json +2 -2
  32. package/{react-select-creatable.esm-efe1e1ae.js → react-select-creatable.esm-eb462367.js} +14 -8
  33. package/shift-away-subtle-0bdd3b0d.js +9 -0
  34. package/warning-circle-24522402.js +41 -0
  35. package/widgets/AssetGallery/index.js +17 -14
  36. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +1 -1
  37. package/widgets/ContextMenu/ContextMenuItem/index.js +1 -3
  38. package/widgets/ContextMenu/index.js +1 -1
  39. package/widgets/Instructions/index.js +22 -0
  40. package/widgets/index.js +20 -15
@@ -0,0 +1,62 @@
1
+ 'use strict';
2
+
3
+ var defaultTheme = require('./defaultTheme-870f7df1.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;
@@ -7,22 +7,24 @@ var TextInput = require('./TextInput-e4c6d536.js');
7
7
  var ResizeObserver = require('resize-observer-polyfill');
8
8
  var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
9
9
  var ActionButton = require('./ActionButton-90485300.js');
10
- require('./AutocompleteSelect-46dbe1eb.js');
11
- require('./Button-01371eb4.js');
10
+ require('./AutocompleteSelect-8ebb82de.js');
11
+ require('./Button-32e38cc9.js');
12
12
  require('./Checkbox-50f1f3c7.js');
13
- require('./CompactStarRating-f9997240.js');
14
- require('./CompactTextInput-15118df5.js');
15
- require('./MultiSelect-1568f6e9.js');
13
+ require('./CompactStarRating-f05e7414.js');
14
+ require('./CompactTextInput-04cc82f6.js');
15
+ require('./MultiSelect-873f707d.js');
16
16
  require('./Radio-0b46b2a8.js');
17
- require('./TextArea-8a0bd754.js');
17
+ require('./TextArea-af6a812d.js');
18
18
  require('./Switch-aa384260.js');
19
- require('./Popover-616682bf.js');
20
- var Tooltip = require('./Tooltip-860530ff.js');
21
- require('./Tab-06b7a58d.js');
22
- require('./Tabs-cfbf45fe.js');
23
- require('./Badge-86593df4.js');
19
+ require('./Alert-fcc0bb50.js');
20
+ require('./Badge-34ad2850.js');
21
+ require('./Popover-de874e41.js');
22
+ require('./Tab-075c8c0a.js');
23
+ require('./Tabs-6584e003.js');
24
+ var Tooltip = require('./Tooltip-e7f59097.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: {
@@ -32,7 +32,7 @@ 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'));
@@ -6,7 +6,7 @@ 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-efe1e1ae.js');
9
+ var reactSelectCreatable_esm = require('./react-select-creatable.esm-eb462367.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')));
@@ -226,7 +226,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
226
226
  switch (actionMeta.action) {
227
227
  case 'create-option':
228
228
  if (onUpdateCallback) {
229
- onUpdateCallback(actionMeta.action, actionMeta.option);
229
+ onUpdateCallback(actionMeta.action, selected.value);
230
230
  }
231
231
 
232
232
  if (loadOptions) {
@@ -238,7 +238,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
238
238
 
239
239
  case 'select-option':
240
240
  if (onUpdateCallback) {
241
- onUpdateCallback(actionMeta.action, actionMeta.option);
241
+ onUpdateCallback(actionMeta.action, selected.value);
242
242
  }
243
243
 
244
244
  setSelected(selected);
@@ -246,7 +246,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
246
246
 
247
247
  case 'remove-value':
248
248
  if (onUpdateCallback) {
249
- onUpdateCallback(actionMeta.action, actionMeta.removedValue);
249
+ onUpdateCallback(actionMeta.action, selected.value);
250
250
  }
251
251
 
252
252
  setSelected(selected);
@@ -254,7 +254,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
254
254
 
255
255
  case 'pop-value':
256
256
  if (onUpdateCallback) {
257
- onUpdateCallback(actionMeta.action, actionMeta.removedValue);
257
+ onUpdateCallback(actionMeta.action, selected.value);
258
258
  }
259
259
 
260
260
  setSelected(selected);
@@ -262,7 +262,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
262
262
 
263
263
  case 'deselect-option':
264
264
  if (onUpdateCallback) {
265
- onUpdateCallback(actionMeta.action, actionMeta.option);
265
+ onUpdateCallback(actionMeta.action, selected.value);
266
266
  }
267
267
 
268
268
  setSelected(selected);
@@ -274,7 +274,7 @@ var AutocompleteSelect = React__default['default'].forwardRef(function Autocompl
274
274
 
275
275
  default:
276
276
  if (onUpdateCallback) {
277
- onUpdateCallback(actionMeta.action, actionMeta.option);
277
+ onUpdateCallback(actionMeta.action, selected.value);
278
278
  }
279
279
 
280
280
  setSelected(selected);
@@ -298,7 +298,7 @@ AutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
298
298
  label: defaultTheme.PropTypes.string,
299
299
  placeholder: defaultTheme.PropTypes.string,
300
300
  availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
301
- selectedOption: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
301
+ selectedOption: defaultTheme.PropTypes.object,
302
302
  loadOptions: defaultTheme.PropTypes.func,
303
303
  loadingMessageFunc: defaultTheme.PropTypes.func,
304
304
  createNewOptionMessageFunc: defaultTheme.PropTypes.func,
@@ -326,9 +326,11 @@ AutocompleteSelect.defaultProps = {
326
326
  };
327
327
 
328
328
  var Option = function Option(props) {
329
- return React__default['default'].createElement(Option$1, defaultTheme._extends({
329
+ return !props.data.link ? React__default['default'].createElement(Option$1, defaultTheme._extends({
330
330
  className: "menu-item"
331
- }, props));
331
+ }, props)) : React__default['default'].createElement(Option$1, props, React__default['default'].createElement("a", {
332
+ href: props.data.link
333
+ }, props.data.icon, props.label));
332
334
  };
333
335
 
334
336
  var SingleValue = function SingleValue(props) {
@@ -337,6 +339,14 @@ var SingleValue = function SingleValue(props) {
337
339
  }, props));
338
340
  };
339
341
 
342
+ Option.propTypes = process.env.NODE_ENV !== "production" ? {
343
+ data: defaultTheme.PropTypes.shape({
344
+ icon: defaultTheme.PropTypes.node,
345
+ link: defaultTheme.PropTypes.string
346
+ }),
347
+ label: defaultTheme.PropTypes.string
348
+ } : {};
349
+
340
350
  var DropdownIndicator = function DropdownIndicator(props) {
341
351
  return React__default['default'].createElement(DropdownIndicator$1, defaultTheme._extends({
342
352
  className: "dropdown-indicator"
@@ -129,7 +129,7 @@ var Badge = React__default['default'].forwardRef(function Badge(_ref, forwardedR
129
129
  }, badgeContent));
130
130
  });
131
131
  Badge.propTypes = process.env.NODE_ENV !== "production" ? {
132
- badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]).isRequired,
132
+ badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]),
133
133
  children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.node, defaultTheme.PropTypes.string]),
134
134
  elevated: defaultTheme.PropTypes.bool,
135
135
  active: defaultTheme.PropTypes.bool,
@@ -3,8 +3,8 @@
3
3
  var defaultTheme = require('./defaultTheme-870f7df1.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-a68d4f28.js');
6
+ var Popover = require('./Popover-de874e41.js');
7
+ var ContextMenu = require('./ContextMenu-59c2a64f.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 }; }
@@ -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,19 @@ 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
+ getRatingProp = _ref.getRating,
112
+ props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "name", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly", "getRating"]);
109
113
 
110
114
  var stars = Array.from(Array(max).keys());
111
115
 
112
- var _useState = React.useState(defaultValue),
116
+ var _useState = React.useState(value || defaultValue),
113
117
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
114
118
  rating = _useState2[0],
115
119
  setRating = _useState2[1];
@@ -126,8 +130,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
126
130
 
127
131
  var inputRef = React.useRef();
128
132
  React.useEffect(function () {
129
- setRating(value);
130
- }, [value]);
133
+ setRating(value || defaultValue);
134
+ }, [value, defaultValue]);
131
135
  var hasError = React.useMemo(function () {
132
136
  if (lodash.isBoolean(error)) {
133
137
  return error;
@@ -143,20 +147,24 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
143
147
  return !lodash.isEmpty(warning);
144
148
  }, [warning]);
145
149
  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
150
+ if (lodash.isFunction(getRatingProp)) {
151
+ getRatingProp(rating);
152
+ }
153
+ }, [rating]);
154
+ React.useEffect(function () {
155
+ inputRef.current.value = String(rating);
156
+ onChange({
157
+ target: inputRef.current
150
158
  });
151
- ev2.simulated = true;
152
- inputRef.current.dispatchEvent(ev2);
153
159
  }, [rating]);
154
160
 
155
161
  var starIconRender = function starIconRender(key) {
156
162
  if (rating > 0 && rating >= key + 1) {
157
163
  return React__default['default'].createElement(StarFill, {
158
164
  disabled: readOnly,
159
- onClick: function onClick() {
165
+ onClick: function onClick(event) {
166
+ event.preventDefault();
167
+
160
168
  if (key + 1 > 1) {
161
169
  return setRating(key + 1);
162
170
  } else if (key + 1 == 1) {
@@ -181,7 +189,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
181
189
  } else if (viewEmpty) {
182
190
  return React__default['default'].createElement(Star, {
183
191
  disabled: readOnly,
184
- onClick: function onClick() {
192
+ onClick: function onClick(event) {
193
+ event.preventDefault();
185
194
  setRating(key + 1);
186
195
  },
187
196
  onMouseEnter: function onMouseEnter() {
@@ -201,18 +210,20 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
201
210
  };
202
211
 
203
212
  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,
213
+ ref: forwardedRef,
209
214
  onChange: onChange,
210
215
  onBlur: onBlur
211
- }), React__default['default'].createElement(starsWidth, {
216
+ }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement(starsWidth, {
212
217
  error: hasError,
213
218
  warning: hasWarning
214
219
  }, stars.map(function (key) {
215
- return starIconRender(key);
220
+ return React__default['default'].createElement("div", {
221
+ key: key
222
+ }, React__default['default'].createElement("input", {
223
+ type: "number",
224
+ name: name,
225
+ ref: inputRef
226
+ }), starIconRender(key));
216
227
  })));
217
228
  });
218
229
  CompactStarRating.defaultProps = {
@@ -228,6 +239,7 @@ CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
228
239
  value: defaultTheme.PropTypes.number,
229
240
  defaultValue: defaultTheme.PropTypes.number,
230
241
  label: defaultTheme.PropTypes.string,
242
+ name: defaultTheme.PropTypes.string,
231
243
  icon: defaultTheme.PropTypes.element,
232
244
  iconFill: defaultTheme.PropTypes.element,
233
245
  max: defaultTheme.PropTypes.number,
@@ -236,7 +248,8 @@ CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
236
248
  onBlur: defaultTheme.PropTypes.func,
237
249
  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
238
250
  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
239
- readOnly: defaultTheme.PropTypes.bool
251
+ readOnly: defaultTheme.PropTypes.bool,
252
+ getRating: defaultTheme.PropTypes.func
240
253
  } : {};
241
254
 
242
255
  exports.CompactStarRating = CompactStarRating;
@@ -6,11 +6,12 @@ var nanoid = require('nanoid');
6
6
  var lodash = require('lodash');
7
7
  var styled = require('styled-components');
8
8
  var editNote = require('./edit-note-c47d292e.js');
9
- var Popover = require('./Popover-616682bf.js');
10
- var Tooltip = require('./Tooltip-860530ff.js');
11
- require('./Tab-06b7a58d.js');
12
- require('./Tabs-cfbf45fe.js');
13
- require('./Badge-86593df4.js');
9
+ require('./Alert-fcc0bb50.js');
10
+ require('./Badge-34ad2850.js');
11
+ var Popover = require('./Popover-de874e41.js');
12
+ require('./Tab-075c8c0a.js');
13
+ require('./Tabs-6584e003.js');
14
+ var Tooltip = require('./Tooltip-e7f59097.js');
14
15
 
15
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
17
 
@@ -61,7 +62,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
61
62
  }, function (props) {
62
63
  return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
63
64
  });
64
- var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n ", "\n padding: 1px 4px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n \n ", ";\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n }\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n & + ", " {\n opacity: 1;\n }\n }\n\n &&:focus {\n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n}\n\n ", "\n"])), function (props) {
65
+ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n ", "\n padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n }\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n & + ", " {\n opacity: 1;\n }\n }\n\n &&:focus {\n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
65
66
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
66
67
  }, function (props) {
67
68
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
@@ -25,7 +25,7 @@ var ContextMenu = React__default['default'].forwardRef(function ContextMenu(_ref
25
25
  }), children);
26
26
  });
27
27
  ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
28
- children: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.node).isRequired
28
+ children: defaultTheme.PropTypes.any
29
29
  } : {};
30
30
  ContextMenu.defaultProps = {};
31
31