@ntbjs/react-components 1.3.0-rc.52 → 1.3.0-rc.53

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.
@@ -8,7 +8,7 @@ var ResizeObserver = require('resize-observer-polyfill');
8
8
  var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-d361b5fa.js');
9
9
  var styled = require('styled-components');
10
10
  var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
11
- var Instructions = require('./Instructions-f996c3a8.js');
11
+ var Instructions = require('./Instructions-ea85d8f8.js');
12
12
  var Alert = require('./Alert-1b2ff6dd.js');
13
13
  var Badge = require('./Badge-e055db69.js');
14
14
  var Popover = require('./Popover-c1a29454.js');
@@ -24,11 +24,11 @@ var ActionButton = require('./ActionButton-f84f83eb.js');
24
24
  require('./Button-eafd62c9.js');
25
25
  require('./Checkbox-acd15d02.js');
26
26
  require('./CompactAutocompleteSelect-4be1521f.js');
27
- require('./CompactStarRating-71e54f17.js');
27
+ require('./CompactStarRating-a9082843.js');
28
28
  require('./CompactTextInput-f9f49740.js');
29
29
  require('./MultiSelect-d6294329.js');
30
30
  require('./Radio-abb11971.js');
31
- require('./TextArea-5bff1145.js');
31
+ require('./TextArea-0ef76397.js');
32
32
  require('./TextInput-75a84b3c.js');
33
33
  require('./Switch-66cd66ab.js');
34
34
  var ContextMenuItem = require('./ContextMenuItem-50de2150.js');
@@ -59,7 +59,7 @@ function SvgStar(props) {
59
59
  })));
60
60
  }
61
61
 
62
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
62
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
63
63
  var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
64
64
  return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
65
65
  }, function (props) {
@@ -91,7 +91,7 @@ var SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDe
91
91
  }, function (props) {
92
92
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
93
93
  });
94
- var starsWidth = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.66%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n padding-left: 8px;\n box-sizing: border-box;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n }\n &&:hover:not(:focus) {\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
94
+ var starsWidth = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.66%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n padding-left: 8px;\n box-sizing: border-box;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n }\n &&:hover:not(:focus) {\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n }\n\n ", "\n"])), function (props) {
95
95
  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
96
96
  }, function (props) {
97
97
  return props.type === 'success' && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
@@ -113,8 +113,12 @@ var starsWidth = styled__default["default"].div.attrs(defaultTheme.applyDefaultT
113
113
  return props.type === 'warning' && !props.readOnly && props.theme.themeProp('background', '#806403', '#FFFEBF');
114
114
  }, function (props) {
115
115
  return props.type === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
116
+ }, function (props) {
117
+ return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n ", "\n "])), function (props) {
118
+ return props.theme.themeProp('border-color', 'rgba(0, 0, 0, 0)', props.theme.getColor('white'));
119
+ });
116
120
  });
117
- var Star = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = 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\n ", "\n"])), function (props) {
121
+ var Star = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = 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\n ", "\n"])), function (props) {
118
122
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
119
123
  }, function (props) {
120
124
  return props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -123,11 +127,11 @@ var Star = styled__default["default"].button.attrs(defaultTheme.applyDefaultThem
123
127
  }, function (props) {
124
128
  return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
125
129
  }, function (props) {
126
- return props.readOnly && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
130
+ return props.readOnly && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
127
131
  }, function (props) {
128
- return props.disabled && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
132
+ return props.disabled && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
129
133
  });
130
- var StarFill = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = 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\n ", "\n"])), function (props) {
134
+ var StarFill = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = 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\n ", "\n"])), function (props) {
131
135
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
132
136
  }, function (props) {
133
137
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -136,11 +140,11 @@ var StarFill = styled__default["default"].button.attrs(defaultTheme.applyDefault
136
140
  }, function (props) {
137
141
  return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
138
142
  }, function (props) {
139
- return props.readOnly && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
143
+ return props.readOnly && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
140
144
  }, function (props) {
141
- return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
145
+ return props.disabled && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
142
146
  });
143
- styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n margin-left: auto;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
147
+ styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n margin-left: auto;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
144
148
  return props.type === 'success' ? 0 : 1;
145
149
  }, function (props) {
146
150
  return props.type === 'success' ? fadeOutCheck : fadeInCheck;
@@ -275,6 +279,7 @@ var CompactStarRating = React__default["default"].forwardRef(function CompactSta
275
279
  }, props), React__default["default"].createElement(labelWidth, {
276
280
  disabled: disabled
277
281
  }, label, React__default["default"].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default["default"].createElement(starsWidth, {
282
+ readOnly: readOnly,
278
283
  edit: edit,
279
284
  type: type
280
285
  }, stars.map(function (key) {
@@ -4,7 +4,7 @@ var defaultTheme = require('./defaultTheme-cd01e6c2.js');
4
4
  var lodash = require('lodash');
5
5
  var React = require('react');
6
6
  var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-4be1521f.js');
7
- var TextArea = require('./TextArea-5bff1145.js');
7
+ var TextArea = require('./TextArea-0ef76397.js');
8
8
  var styled = require('styled-components');
9
9
 
10
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -52,7 +52,7 @@ var InputIconContainer = styled__default["default"].div.attrs(defaultTheme.apply
52
52
  }, function (props) {
53
53
  return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
54
54
  });
55
- var TextInputField = styled__default["default"].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n transition: height 550ms ease-in-out; border-color 350ms;\n\n\n ", "\n\n\n\n ", "\n\n ", "\n\n ", "\n\n \n ", "\n\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n \n\n ", " \n\n \n \n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n ", "\n ", "\n\n }\n\n &:hover::placeholder {\n ", " \n ", " \n }\n\n &:focus::placeholder {\n ", " \n ", " \n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n\n ", "\n \n }\n"])), function (props) {
55
+ var TextInputField = styled__default["default"].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n transition: height 550ms ease-in-out; border-color 350ms;\n\n\n ", "\n\n\n\n ", "\n\n ", "\n\n ", "\n\n \n ", "\n\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n \n\n ", " \n\n \n \n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n \n ", "\n ", "\n ", "\n ", ";\n\n }\n\n &:hover::placeholder {\n ", " \n ", " \n }\n\n &:focus::placeholder {\n ", " \n ", " \n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n\n ", "\n \n }\n"])), function (props) {
56
56
  return props.borderRadius && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
57
57
  }, function (props) {
58
58
  return props.theme.themeProp('color', 'white', 'black');
@@ -106,7 +106,9 @@ var TextInputField = styled__default["default"].textarea.attrs(defaultTheme.appl
106
106
  return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
107
107
  }, InputIconContainer, function (props) {
108
108
  return props.type === 'success' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
109
- }, placeholderBaseStyle, warningPlaceholder, errorPlaceholder, warningPlaceholderHover, errorPlaceholderHover, warningPlaceholderHover, errorPlaceholderHover, function (props) {
109
+ }, placeholderBaseStyle, warningPlaceholder, errorPlaceholder, function (props) {
110
+ return props.placeholder && props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'), '!important');
111
+ }, warningPlaceholderHover, errorPlaceholderHover, warningPlaceholderHover, errorPlaceholderHover, function (props) {
110
112
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
111
113
  }, function (props) {
112
114
  return props.theme.themeProp('background', 'transparent', props.theme.getColor('white'));
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactStarRating = require('../../CompactStarRating-71e54f17.js');
3
+ var CompactStarRating = require('../../CompactStarRating-a9082843.js');
4
4
  require('../../defaultTheme-cd01e6c2.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-5bff1145.js');
3
+ var TextArea = require('../../TextArea-0ef76397.js');
4
4
  require('../../defaultTheme-cd01e6c2.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -6,11 +6,11 @@ var ActionButton = require('../ActionButton-f84f83eb.js');
6
6
  var Button = require('../Button-eafd62c9.js');
7
7
  var Checkbox = require('../Checkbox-acd15d02.js');
8
8
  var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-4be1521f.js');
9
- var CompactStarRating = require('../CompactStarRating-71e54f17.js');
9
+ var CompactStarRating = require('../CompactStarRating-a9082843.js');
10
10
  var CompactTextInput = require('../CompactTextInput-f9f49740.js');
11
11
  var MultiSelect = require('../MultiSelect-d6294329.js');
12
12
  var Radio = require('../Radio-abb11971.js');
13
- var TextArea = require('../TextArea-5bff1145.js');
13
+ var TextArea = require('../TextArea-0ef76397.js');
14
14
  var TextInput = require('../TextInput-75a84b3c.js');
15
15
  var Switch = require('../Switch-66cd66ab.js');
16
16
  var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-d361b5fa.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.3.0-rc.52",
3
+ "version": "1.3.0-rc.53",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetAction = require('../../AssetAction-927542de.js');
3
+ var AssetAction = require('../../AssetAction-ae261c75.js');
4
4
  require('../../defaultTheme-cd01e6c2.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -27,20 +27,20 @@ require('../../InputGroup-08332f2d.js');
27
27
  require('../../SectionSeparator-aeccca17.js');
28
28
  require('../../close-1751121a.js');
29
29
  require('react-lazy-load-image-component');
30
- require('../../Instructions-f996c3a8.js');
30
+ require('../../Instructions-ea85d8f8.js');
31
31
  require('../../CompactAutocompleteSelect-4be1521f.js');
32
32
  require('react-select');
33
33
  require('react-select-async-paginate');
34
34
  require('../../react-select-creatable.esm-9e24f67f.js');
35
35
  require('react-dom');
36
36
  require('../../expand-more-d74e2bd2.js');
37
- require('../../TextArea-5bff1145.js');
37
+ require('../../TextArea-0ef76397.js');
38
38
  require('@floating-ui/react');
39
39
  require('../../ContextMenu-1b7b7cec.js');
40
40
  require('../../AssetPreviewTopBar-08ca770d.js');
41
41
  require('../../ActionButton-f84f83eb.js');
42
42
  require('../../Button-eafd62c9.js');
43
- require('../../CompactStarRating-71e54f17.js');
43
+ require('../../CompactStarRating-a9082843.js');
44
44
  require('../../CompactTextInput-f9f49740.js');
45
45
  require('../../MultiSelect-d6294329.js');
46
46
  require('../../Radio-abb11971.js');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-f996c3a8.js');
3
+ var Instructions = require('../../Instructions-ea85d8f8.js');
4
4
  require('../../defaultTheme-cd01e6c2.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -24,7 +24,7 @@ require('../../react-select-creatable.esm-9e24f67f.js');
24
24
  require('react-dom');
25
25
  require('../../close-1751121a.js');
26
26
  require('../../expand-more-d74e2bd2.js');
27
- require('../../TextArea-5bff1145.js');
27
+ require('../../TextArea-0ef76397.js');
28
28
  require('../../useMergedRefs-b6d2f8fc.js');
29
29
  require('../../edit-note-cefe2215.js');
30
30
 
package/widgets/index.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetAction = require('../AssetAction-927542de.js');
5
+ var AssetAction = require('../AssetAction-ae261c75.js');
6
6
  var ContextMenu = require('../ContextMenu-1b7b7cec.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-08ca770d.js');
8
- var Instructions = require('../Instructions-f996c3a8.js');
8
+ var Instructions = require('../Instructions-ea85d8f8.js');
9
9
  require('../defaultTheme-cd01e6c2.js');
10
10
  require('styled-components');
11
11
  require('lodash');
@@ -41,11 +41,11 @@ require('react-select');
41
41
  require('react-select-async-paginate');
42
42
  require('../react-select-creatable.esm-9e24f67f.js');
43
43
  require('react-dom');
44
- require('../CompactStarRating-71e54f17.js');
44
+ require('../CompactStarRating-a9082843.js');
45
45
  require('../CompactTextInput-f9f49740.js');
46
46
  require('../MultiSelect-d6294329.js');
47
47
  require('../Radio-abb11971.js');
48
- require('../TextArea-5bff1145.js');
48
+ require('../TextArea-0ef76397.js');
49
49
  require('../Switch-66cd66ab.js');
50
50
  require('../ContextMenuItem-50de2150.js');
51
51