@ntbjs/react-components 1.1.0-beta.8 → 1.1.0-beta.80

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 (60) hide show
  1. package/{ActionButton-90485300.js → ActionButton-c3f5ed94.js} +1 -1
  2. package/Alert-3e4f8be1.js +62 -0
  3. package/{AssetGallery-65c65f88.js → AssetGallery-6824b3cc.js} +25 -51
  4. package/{AssetPreviewTopBar-020a6f96.js → AssetPreviewTopBar-449e6019.js} +4 -2
  5. package/{Badge-34ad2850.js → Badge-9bcebe96.js} +1 -1
  6. package/{Button-01371eb4.js → Button-432f87c6.js} +3 -3
  7. package/{Checkbox-50f1f3c7.js → Checkbox-012bbd3f.js} +3 -3
  8. package/{AutocompleteSelect-b5e60c29.js → CompactAutocompleteSelect-160b1620.js} +103 -47
  9. package/{CompactStarRating-f9997240.js → CompactStarRating-53593d92.js} +93 -34
  10. package/{CompactTextInput-8c9b061b.js → CompactTextInput-9980612c.js} +94 -31
  11. package/{ContextMenu-a68d4f28.js → ContextMenu-d088833b.js} +2 -2
  12. package/{InputGroup-66dd343c.js → InputGroup-09ce9572.js} +1 -1
  13. package/Instructions-34009106.js +231 -0
  14. package/{MultiSelect-f8acbbfd.js → MultiSelect-9729cedf.js} +62 -46
  15. package/{Popover-616682bf.js → Popover-d3a4b72e.js} +9 -16
  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-bf42275e.js} +66 -13
  21. package/TextArea-b2af91e6.js +343 -0
  22. package/{TextInput-e4c6d536.js → TextInput-a1083be3.js} +1 -1
  23. package/{Tooltip-860530ff.js → Tooltip-f4f9ab8f.js} +16 -11
  24. package/check-circle-filled-1640873e.js +42 -0
  25. package/data/Alert/index.js +10 -0
  26. package/data/Badge/index.js +2 -2
  27. package/data/Popover/index.js +4 -3
  28. package/data/Tab/index.js +2 -2
  29. package/data/Tabs/index.js +3 -3
  30. package/data/Tooltip/index.js +12 -0
  31. package/data/index.js +11 -8
  32. package/{defaultTheme-870f7df1.js → defaultTheme-50f2b88f.js} +17 -0
  33. package/inputs/ActionButton/index.js +2 -2
  34. package/inputs/Button/index.js +5 -4
  35. package/inputs/Checkbox/index.js +2 -2
  36. package/inputs/CompactAutocompleteSelect/index.js +19 -0
  37. package/inputs/CompactStarRating/index.js +3 -2
  38. package/inputs/CompactTextInput/index.js +10 -7
  39. package/inputs/MultiSelect/index.js +4 -3
  40. package/inputs/Radio/index.js +2 -2
  41. package/inputs/Switch/index.js +2 -2
  42. package/inputs/TextArea/index.js +3 -2
  43. package/inputs/TextInput/index.js +2 -2
  44. package/inputs/index.js +28 -25
  45. package/layout/InputGroup/index.js +2 -2
  46. package/layout/SectionSeparator/index.js +2 -2
  47. package/layout/index.js +3 -3
  48. package/package.json +3 -3
  49. package/{react-select-creatable.esm-1d40bee7.js → react-select-creatable.esm-4c3da560.js} +135 -45
  50. package/shift-away-subtle-cfdf1dbe.js +9 -0
  51. package/warning-circle-24522402.js +41 -0
  52. package/widgets/AssetGallery/index.js +28 -24
  53. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -2
  54. package/widgets/ContextMenu/ContextMenuItem/index.js +3 -5
  55. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +1 -1
  56. package/widgets/ContextMenu/index.js +2 -2
  57. package/widgets/Instructions/index.js +23 -0
  58. package/widgets/index.js +31 -25
  59. package/TextArea-8a0bd754.js +0 -213
  60. package/inputs/AutocompleteSelect/index.js +0 -18
@@ -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,31 @@
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-b5e60c29.js');
11
- require('./Button-01371eb4.js');
12
- require('./Checkbox-50f1f3c7.js');
13
- require('./CompactStarRating-f9997240.js');
14
- require('./CompactTextInput-8c9b061b.js');
15
- require('./MultiSelect-f8acbbfd.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('./Button-432f87c6.js');
11
+ require('./Checkbox-012bbd3f.js');
12
+ require('./CompactAutocompleteSelect-160b1620.js');
13
+ require('./CompactStarRating-53593d92.js');
14
+ require('./CompactTextInput-9980612c.js');
15
+ require('./MultiSelect-9729cedf.js');
16
+ require('./Radio-0594409d.js');
17
+ require('./TextArea-b2af91e6.js');
18
+ require('./Switch-cd165c8c.js');
19
+ require('./Alert-3e4f8be1.js');
20
+ require('./Badge-9bcebe96.js');
21
+ require('./Popover-d3a4b72e.js');
22
+ require('./Tab-bd0f3345.js');
23
+ require('./Tabs-bf42275e.js');
24
+ var Tooltip = require('./Tooltip-f4f9ab8f.js');
24
25
  var styled = require('styled-components');
25
26
  var polished = require('polished');
27
+ var checkCircleFilled = require('./check-circle-filled-1640873e.js');
28
+ var warningCircle = require('./warning-circle-24522402.js');
26
29
 
27
30
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
28
31
 
@@ -153,35 +156,6 @@ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme
153
156
  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
157
  var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
155
158
 
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); }
157
-
158
- var _ref$6 = /*#__PURE__*/React__namespace.createElement("path", {
159
- fill: "currentColor",
160
- 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
- fillOpacity: 0.9
162
- });
163
-
164
- 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
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
180
- xmlns: "http://www.w3.org/2000/svg",
181
- viewBox: "0 0 24 24"
182
- }, props), _ref$5);
183
- }
184
-
185
159
  function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
186
160
 
187
161
  var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -509,9 +483,9 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
509
483
  }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
510
484
  title: asset.note.title,
511
485
  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, {
486
+ }, 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
487
  selected: selected
514
- }, React__default['default'].createElement(SvgCheckCircleFilled, {
488
+ }, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, {
515
489
  onClick: onSelectClick
516
490
  })), React__default['default'].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
517
491
  return React__default['default'].createElement(Tooltip.Tooltip, {
@@ -808,7 +782,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
808
782
  ref: cardRef
809
783
  }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(Note, {
810
784
  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, {
785
+ }, 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
786
  "data-id": "ss"
813
787
  }, asset.previewUrl && renderPreview(asset)), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
814
788
  style: {
@@ -826,7 +800,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
826
800
  as: SvgFile
827
801
  })), React__default['default'].createElement(InfoDescription, null, asset.description)), React__default['default'].createElement(Bottom, null, selectable && React__default['default'].createElement(BottomSelectButton, {
828
802
  selected: selected
829
- }, React__default['default'].createElement(SvgCheckCircleFilled, {
803
+ }, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, {
830
804
  onClick: onSelectClick
831
805
  })), React__default['default'].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
832
806
  return React__default['default'].createElement(Tooltip.Tooltip, {
@@ -1124,7 +1098,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
1124
1098
  var minTranslateYPlusHeight = yOffset - containerOffset - bufferTop;
1125
1099
  var maxTranslateY = yOffset - containerOffset + scrollerHeight + bufferBottom;
1126
1100
  var finalizedAssets = calculatedAssets.current.map(function (asset) {
1127
- if (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY) {
1101
+ if (scrollElement.self == window && (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY)) {
1128
1102
  asset.layout.show = false;
1129
1103
  } else {
1130
1104
  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');
@@ -39,7 +39,9 @@ var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.app
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,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-a68d4f28.js');
6
+ var Popover = require('./Popover-d3a4b72e.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,