@sproutsocial/racine 11.3.1-beta-deps.4 → 11.4.0-input-beta.0
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.
- package/CHANGELOG.md +22 -0
- package/__flow__/Button/__snapshots__/index.test.js.snap +511 -0
- package/__flow__/Button/index.js +0 -2
- package/__flow__/Button/index.stories.js +67 -51
- package/__flow__/Button/index.test.js +113 -0
- package/__flow__/Button/styles.js +1 -1
- package/__flow__/EmptyState/index.test.js +1 -1
- package/__flow__/Input/index.js +185 -66
- package/__flow__/Input/index.stories.js +65 -0
- package/__flow__/Input/index.test.js +227 -1
- package/__flow__/Input/styles.js +1 -1
- package/__flow__/Link/index.js +2 -1
- package/__flow__/Menu/__snapshots__/index.test.js.snap +2 -2
- package/__flow__/TokenInput/index.js +1 -1
- package/__flow__/setupTests.js +1 -1
- package/__flow__/systemProps/tests/__snapshots__/layout.test.js.snap +14 -0
- package/__flow__/systemProps/tests/layout.test.js +9 -0
- package/__flow__/themes/dark/theme.js +3 -0
- package/__flow__/themes/light/theme.js +3 -0
- package/__flow__/types/theme.colors.flow.js +3 -0
- package/commonjs/Button/index.js +0 -1
- package/commonjs/Button/styles.js +0 -1
- package/commonjs/DatePicker/styles.js +1 -5
- package/commonjs/Input/index.js +125 -31
- package/commonjs/Input/styles.js +1 -1
- package/commonjs/Menu/index.js +10 -10
- package/commonjs/Modal/styles.js +1 -5
- package/commonjs/Toast/index.js +14 -14
- package/commonjs/Toast/styles.js +2 -5
- package/commonjs/TokenInput/index.js +1 -1
- package/commonjs/themes/dark/theme.js +4 -1
- package/commonjs/themes/light/theme.js +4 -1
- package/dist/themes/dark/dark.scss +4 -1
- package/dist/themes/light/light.scss +4 -1
- package/lib/Button/index.js +0 -1
- package/lib/Button/styles.js +0 -1
- package/lib/DatePicker/styles.js +1 -5
- package/lib/Input/index.js +118 -31
- package/lib/Input/styles.js +1 -1
- package/lib/Menu/index.js +10 -11
- package/lib/Modal/styles.js +1 -5
- package/lib/Toast/index.js +14 -14
- package/lib/Toast/styles.js +1 -5
- package/lib/TokenInput/index.js +1 -1
- package/lib/themes/dark/theme.js +4 -1
- package/lib/themes/light/theme.js +4 -1
- package/package.json +20 -25
- package/bin/buildNpm.js +0 -58
package/lib/Input/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "innerRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance"];
|
|
1
|
+
var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
|
|
2
2
|
|
|
3
3
|
function _extends() { _extends = 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.apply(this, arguments); }
|
|
4
4
|
|
|
@@ -10,6 +10,69 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
|
|
|
10
10
|
|
|
11
11
|
import * as React from "react";
|
|
12
12
|
import Container, { Accessory } from "./styles";
|
|
13
|
+
import Button from "../Button";
|
|
14
|
+
import Icon from "../Icon";
|
|
15
|
+
import styled from "styled-components";
|
|
16
|
+
var InputContext = /*#__PURE__*/React.createContext({});
|
|
17
|
+
var StyledButton = styled(Button).withConfig({
|
|
18
|
+
displayName: "Input__StyledButton",
|
|
19
|
+
componentId: "sc-1ck1dnm-0"
|
|
20
|
+
})(["&:hover,&:active{color:", ";}"], function (props) {
|
|
21
|
+
return props.theme.utils.interact(props.theme.colors.icon.base);
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
var ClearButton = function ClearButton() {
|
|
25
|
+
var _React$useContext = React.useContext(InputContext),
|
|
26
|
+
onClear = _React$useContext.onClear,
|
|
27
|
+
handleClear = _React$useContext.handleClear,
|
|
28
|
+
clearButtonLabel = _React$useContext.clearButtonLabel,
|
|
29
|
+
hasValue = _React$useContext.hasValue,
|
|
30
|
+
inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
if (!hasValue) {
|
|
34
|
+
return null;
|
|
35
|
+
} // Log a warning and hide the button when no onClear callback is provided.
|
|
36
|
+
// If we called handleClear with no onClear prop, all the button would do is focus the Input.
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
if (!onClear) {
|
|
40
|
+
console.warn("Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton.");
|
|
41
|
+
return null;
|
|
42
|
+
} // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
if (!clearButtonLabel) {
|
|
46
|
+
console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
|
|
47
|
+
} // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
|
|
48
|
+
// This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
var py = inputSize === "small" ? 100 : undefined;
|
|
52
|
+
var px = inputSize === "small" ? 200 : undefined;
|
|
53
|
+
var buttonSize = inputSize === "small" ? "default" : inputSize;
|
|
54
|
+
return /*#__PURE__*/React.createElement(StyledButton, {
|
|
55
|
+
onClick: handleClear,
|
|
56
|
+
size: buttonSize,
|
|
57
|
+
py: py,
|
|
58
|
+
px: px,
|
|
59
|
+
title: clearButtonLabel || "Clear",
|
|
60
|
+
ariaLabel: clearButtonLabel || "Clear",
|
|
61
|
+
color: "icon.base"
|
|
62
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
63
|
+
name: "circlex"
|
|
64
|
+
}));
|
|
65
|
+
}; // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
|
|
66
|
+
// regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
var isClearButton = function isClearButton(elem) {
|
|
70
|
+
if (elem != null && elem.type) {
|
|
71
|
+
return elem.type.displayName === "Input.ClearButton";
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
return false;
|
|
75
|
+
};
|
|
13
76
|
|
|
14
77
|
var Input = /*#__PURE__*/function (_React$Component) {
|
|
15
78
|
_inheritsLoose(Input, _React$Component);
|
|
@@ -24,39 +87,38 @@ var Input = /*#__PURE__*/function (_React$Component) {
|
|
|
24
87
|
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
|
25
88
|
|
|
26
89
|
_this.handleBlur = function (e) {
|
|
27
|
-
|
|
28
|
-
|
|
90
|
+
return _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
_this.handleClear = function (e) {
|
|
94
|
+
// Only attempt to focus the input if the ref is an object. It won't work for refs that are functions.
|
|
95
|
+
if (typeof _this.props.innerRef === "object") {
|
|
96
|
+
var _this$props$innerRef$;
|
|
97
|
+
|
|
98
|
+
(_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
|
|
29
99
|
}
|
|
100
|
+
|
|
101
|
+
_this.props.onClear == null ? void 0 : _this.props.onClear(e);
|
|
30
102
|
};
|
|
31
103
|
|
|
32
104
|
_this.handleChange = function (e) {
|
|
33
|
-
|
|
34
|
-
_this.props.onChange(e, e.currentTarget.value);
|
|
35
|
-
}
|
|
105
|
+
return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
|
|
36
106
|
};
|
|
37
107
|
|
|
38
108
|
_this.handleFocus = function (e) {
|
|
39
|
-
|
|
40
|
-
_this.props.onFocus(e);
|
|
41
|
-
}
|
|
109
|
+
return _this.props.onFocus == null ? void 0 : _this.props.onFocus(e);
|
|
42
110
|
};
|
|
43
111
|
|
|
44
112
|
_this.handleKeyDown = function (e) {
|
|
45
|
-
|
|
46
|
-
_this.props.onKeyDown(e, e.currentTarget.value);
|
|
47
|
-
}
|
|
113
|
+
return _this.props.onKeyDown == null ? void 0 : _this.props.onKeyDown(e, e.currentTarget.value);
|
|
48
114
|
};
|
|
49
115
|
|
|
50
116
|
_this.handleKeyUp = function (e) {
|
|
51
|
-
|
|
52
|
-
_this.props.onKeyUp(e, e.currentTarget.value);
|
|
53
|
-
}
|
|
117
|
+
return _this.props.onKeyUp == null ? void 0 : _this.props.onKeyUp(e, e.currentTarget.value);
|
|
54
118
|
};
|
|
55
119
|
|
|
56
120
|
_this.handlePaste = function (e) {
|
|
57
|
-
|
|
58
|
-
_this.props.onPaste(e, e.currentTarget.value);
|
|
59
|
-
}
|
|
121
|
+
return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
|
|
60
122
|
};
|
|
61
123
|
|
|
62
124
|
return _this;
|
|
@@ -83,9 +145,11 @@ var Input = /*#__PURE__*/function (_React$Component) {
|
|
|
83
145
|
maxLength = _this$props.maxLength,
|
|
84
146
|
ariaLabel = _this$props.ariaLabel,
|
|
85
147
|
ariaDescribedby = _this$props.ariaDescribedby,
|
|
148
|
+
clearButtonLabel = _this$props.clearButtonLabel,
|
|
86
149
|
innerRef = _this$props.innerRef,
|
|
87
150
|
onBlur = _this$props.onBlur,
|
|
88
151
|
onChange = _this$props.onChange,
|
|
152
|
+
onClear = _this$props.onClear,
|
|
89
153
|
onFocus = _this$props.onFocus,
|
|
90
154
|
onKeyDown = _this$props.onKeyDown,
|
|
91
155
|
onKeyUp = _this$props.onKeyUp,
|
|
@@ -95,25 +159,44 @@ var Input = /*#__PURE__*/function (_React$Component) {
|
|
|
95
159
|
_this$props$qa = _this$props.qa,
|
|
96
160
|
qa = _this$props$qa === void 0 ? {} : _this$props$qa,
|
|
97
161
|
appearance = _this$props.appearance,
|
|
98
|
-
|
|
162
|
+
size = _this$props.size,
|
|
163
|
+
rest = _objectWithoutPropertiesLoose(_this$props, _excluded); // Convert autoComplete from a boolean prop to a string value.
|
|
164
|
+
|
|
99
165
|
|
|
100
166
|
var autoCompleteValue = undefined;
|
|
101
167
|
|
|
102
168
|
if (autoComplete !== undefined) {
|
|
103
169
|
autoCompleteValue = autoComplete ? "on" : "off";
|
|
104
|
-
}
|
|
170
|
+
} // Add default elemBefore and elemAfter elements if type is search.
|
|
105
171
|
|
|
172
|
+
|
|
173
|
+
var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(Icon, {
|
|
174
|
+
name: "search",
|
|
175
|
+
ariaHidden: true,
|
|
176
|
+
color: "icon.base"
|
|
177
|
+
}) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
|
|
178
|
+
|
|
179
|
+
var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
|
|
106
180
|
return /*#__PURE__*/React.createElement(Container, _extends({
|
|
107
|
-
hasBeforeElement: !!
|
|
108
|
-
hasAfterElement: !!
|
|
181
|
+
hasBeforeElement: !!elementBefore,
|
|
182
|
+
hasAfterElement: !!elementAfter,
|
|
109
183
|
disabled: disabled,
|
|
110
184
|
invalid: !!isInvalid,
|
|
111
185
|
warning: hasWarning,
|
|
112
|
-
appearance: appearance
|
|
113
|
-
|
|
114
|
-
|
|
186
|
+
appearance: appearance,
|
|
187
|
+
size: size // $FlowIssue - upgrade v0.112.0
|
|
188
|
+
|
|
189
|
+
}, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
|
|
190
|
+
value: {
|
|
191
|
+
handleClear: this.handleClear,
|
|
192
|
+
hasValue: !!value,
|
|
193
|
+
clearButtonLabel: clearButtonLabel,
|
|
194
|
+
onClear: onClear,
|
|
195
|
+
size: size
|
|
196
|
+
}
|
|
197
|
+
}, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
|
|
115
198
|
before: true
|
|
116
|
-
},
|
|
199
|
+
}, elementBefore), /*#__PURE__*/React.createElement("input", _extends({
|
|
117
200
|
"aria-invalid": !!isInvalid,
|
|
118
201
|
"aria-label": ariaLabel,
|
|
119
202
|
"aria-describedby": ariaDescribedby,
|
|
@@ -138,9 +221,10 @@ var Input = /*#__PURE__*/function (_React$Component) {
|
|
|
138
221
|
"data-qa-input": name || "",
|
|
139
222
|
"data-qa-input-isdisabled": disabled === true,
|
|
140
223
|
"data-qa-input-isrequired": required === true
|
|
141
|
-
}, qa, inputProps)),
|
|
142
|
-
after: true
|
|
143
|
-
|
|
224
|
+
}, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(Accessory, {
|
|
225
|
+
after: true,
|
|
226
|
+
isClearButton: isClearButton(elementAfter)
|
|
227
|
+
}, elementAfter)));
|
|
144
228
|
};
|
|
145
229
|
|
|
146
230
|
return Input;
|
|
@@ -151,6 +235,9 @@ Input.defaultProps = {
|
|
|
151
235
|
disabled: false,
|
|
152
236
|
type: "text",
|
|
153
237
|
size: "default",
|
|
154
|
-
appearance: "primary"
|
|
238
|
+
appearance: "primary",
|
|
239
|
+
innerRef: /*#__PURE__*/React.createRef()
|
|
155
240
|
};
|
|
156
|
-
|
|
241
|
+
Input.ClearButton = ClearButton;
|
|
242
|
+
Input.ClearButton.displayName = "Input.ClearButton";
|
|
243
|
+
export default Input;
|
package/lib/Input/styles.js
CHANGED
|
@@ -73,7 +73,7 @@ export var Accessory = styled.div.withConfig({
|
|
|
73
73
|
}, function (props) {
|
|
74
74
|
return props.before && css(["left:", ";"], props.theme.space[350]);
|
|
75
75
|
}, function (props) {
|
|
76
|
-
return props.after && css(["right:", ";"], props.theme.space[350]);
|
|
76
|
+
return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
|
|
77
77
|
});
|
|
78
78
|
Container.displayName = "InputContainer";
|
|
79
79
|
Accessory.displayName = "InputAccessory";
|
package/lib/Menu/index.js
CHANGED
|
@@ -232,14 +232,6 @@ export var MenuRadio = function MenuRadio(props) {
|
|
|
232
232
|
role: MENU_ITEM_ROLES.RADIO
|
|
233
233
|
}, props));
|
|
234
234
|
};
|
|
235
|
-
|
|
236
|
-
var _StyledText = styled(Text).withConfig({
|
|
237
|
-
displayName: "Menu___StyledText",
|
|
238
|
-
componentId: "sc-1p3rdnp-0"
|
|
239
|
-
})(["", ""], function (p) {
|
|
240
|
-
return p._css;
|
|
241
|
-
});
|
|
242
|
-
|
|
243
235
|
export var MenuGroup = function MenuGroup(_ref2) {
|
|
244
236
|
var children = _ref2.children,
|
|
245
237
|
title = _ref2.title,
|
|
@@ -259,7 +251,7 @@ export var MenuGroup = function MenuGroup(_ref2) {
|
|
|
259
251
|
fontWeight: 600,
|
|
260
252
|
mt: 350,
|
|
261
253
|
color: "text.headline",
|
|
262
|
-
_css: isDisabled && disabled
|
|
254
|
+
$_css: isDisabled && disabled
|
|
263
255
|
}, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
|
|
264
256
|
p: 300,
|
|
265
257
|
role: "group"
|
|
@@ -402,7 +394,7 @@ Menu.Divider.displayName = "Menu.Divider";
|
|
|
402
394
|
Menu.FilterInput.displayName = "Menu.FilterInput";
|
|
403
395
|
var CustomPopoutContent = styled(Popout.Content).withConfig({
|
|
404
396
|
displayName: "Menu__CustomPopoutContent",
|
|
405
|
-
componentId: "sc-1p3rdnp-
|
|
397
|
+
componentId: "sc-1p3rdnp-0"
|
|
406
398
|
})(["padding:0;margin-left:0;margin-right:0;"]);
|
|
407
399
|
export var MenuButton = function MenuButton(_ref5) {
|
|
408
400
|
var content = _ref5.content,
|
|
@@ -456,4 +448,11 @@ export var MenuButton = function MenuButton(_ref5) {
|
|
|
456
448
|
}
|
|
457
449
|
}), children)));
|
|
458
450
|
};
|
|
459
|
-
export default Menu;
|
|
451
|
+
export default Menu;
|
|
452
|
+
|
|
453
|
+
var _StyledText = styled(Text).withConfig({
|
|
454
|
+
displayName: "Menu___StyledText",
|
|
455
|
+
componentId: "sc-1p3rdnp-1"
|
|
456
|
+
})(["", ""], function (p) {
|
|
457
|
+
return p.$_css;
|
|
458
|
+
});
|
package/lib/Modal/styles.js
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
var _templateObject;
|
|
2
|
-
|
|
3
1
|
var _excluded = ["className"];
|
|
4
2
|
|
|
5
|
-
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
6
|
-
|
|
7
3
|
function _extends() { _extends = 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.apply(this, arguments); }
|
|
8
4
|
|
|
9
5
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
@@ -38,7 +34,7 @@ function ReactModalAdapter(_ref) {
|
|
|
38
34
|
}, props));
|
|
39
35
|
}
|
|
40
36
|
|
|
41
|
-
export var Body = createGlobalStyle(
|
|
37
|
+
export var Body = createGlobalStyle([".ReactModal__Body--open{overflow:hidden;}"]); // eslint-disable-next-line prettier/prettier
|
|
42
38
|
|
|
43
39
|
export var Container = styled(ReactModalAdapter).withConfig({
|
|
44
40
|
displayName: "styles__Container",
|
package/lib/Toast/index.js
CHANGED
|
@@ -63,26 +63,14 @@ export function toast(options) {
|
|
|
63
63
|
});
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
var _StyledBox = _styled(Box).withConfig({
|
|
67
|
-
displayName: "Toast___StyledBox",
|
|
68
|
-
componentId: "sc-1vii3dq-0"
|
|
69
|
-
})(["", ""], function (p) {
|
|
70
|
-
return p._css;
|
|
71
|
-
});
|
|
72
|
-
|
|
73
66
|
var IconBox = function IconBox(props) {
|
|
74
67
|
return /*#__PURE__*/React.createElement(_StyledBox, _extends({
|
|
75
68
|
display: "inline-block"
|
|
76
69
|
}, props, {
|
|
77
|
-
_css: "line-height: 1;"
|
|
70
|
+
$_css: "line-height: 1;"
|
|
78
71
|
}));
|
|
79
72
|
};
|
|
80
73
|
|
|
81
|
-
var _StyledBox2 = _styled(Box).withConfig({
|
|
82
|
-
displayName: "Toast___StyledBox2",
|
|
83
|
-
componentId: "sc-1vii3dq-1"
|
|
84
|
-
})(["transform:translateY(1px);"]);
|
|
85
|
-
|
|
86
74
|
var Toast = function Toast(_ref) {
|
|
87
75
|
var content = _ref.content,
|
|
88
76
|
theme = _ref.theme,
|
|
@@ -120,4 +108,16 @@ var Toast = function Toast(_ref) {
|
|
|
120
108
|
}))));
|
|
121
109
|
};
|
|
122
110
|
|
|
123
|
-
export default ToastContainer;
|
|
111
|
+
export default ToastContainer;
|
|
112
|
+
|
|
113
|
+
var _StyledBox = _styled(Box).withConfig({
|
|
114
|
+
displayName: "Toast___StyledBox",
|
|
115
|
+
componentId: "sc-1vii3dq-0"
|
|
116
|
+
})(["", ""], function (p) {
|
|
117
|
+
return p.$_css;
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
var _StyledBox2 = _styled(Box).withConfig({
|
|
121
|
+
displayName: "Toast___StyledBox2",
|
|
122
|
+
componentId: "sc-1vii3dq-1"
|
|
123
|
+
})(["transform:translateY(1px);"]);
|
package/lib/Toast/styles.js
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
var _templateObject;
|
|
2
|
-
|
|
3
|
-
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
4
|
-
|
|
5
1
|
import styled, { createGlobalStyle } from "styled-components";
|
|
6
2
|
import Box from "../Box";
|
|
7
3
|
import Icon from "../Icon"; // $FlowIssue
|
|
@@ -27,7 +23,7 @@ export var CustomIcon = styled(Icon).withConfig({
|
|
|
27
23
|
}, function (p) {
|
|
28
24
|
return p.customColor ? undefined : p.theme.colors.icon[p.type];
|
|
29
25
|
});
|
|
30
|
-
export var GlobalToastStyles = createGlobalStyle(
|
|
26
|
+
export var GlobalToastStyles = createGlobalStyle(["", " .Toastify__toast:last-of-type{margin-bottom:0;}.Toastify-container-overrides{padding:0;width:360px;}.Toastify-toast-overrides{padding:0;min-height:0;border-radius:2px;}.Toastify__toast-container--bottom-right{bottom:", ";right:", ";}@media only screen and (max-width:480px){.Toastify-container-overrides{min-width:initial;}}"], toastStyles, function (p) {
|
|
31
27
|
return p.theme.space[400];
|
|
32
28
|
}, function (p) {
|
|
33
29
|
return p.theme.space[400];
|
package/lib/TokenInput/index.js
CHANGED
|
@@ -284,7 +284,7 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
|
|
|
284
284
|
"aria-invalid": !!isInvalid,
|
|
285
285
|
"aria-label": ariaLabel,
|
|
286
286
|
autoFocus: autoFocus,
|
|
287
|
-
|
|
287
|
+
autoComplete: autocomplete,
|
|
288
288
|
disabled: disabled,
|
|
289
289
|
id: id,
|
|
290
290
|
name: name,
|
package/lib/themes/dark/theme.js
CHANGED
|
@@ -159,7 +159,10 @@ var colors = _extends({}, lightTheme.colors, {
|
|
|
159
159
|
subtext: COLORS.COLOR_NEUTRAL_300,
|
|
160
160
|
body: COLORS.COLOR_NEUTRAL_100,
|
|
161
161
|
inverse: COLORS.COLOR_NEUTRAL_900,
|
|
162
|
-
error: COLORS.COLOR_RED_400
|
|
162
|
+
error: COLORS.COLOR_RED_400,
|
|
163
|
+
background: {
|
|
164
|
+
highlight: COLORS.COLOR_YELLOW_900
|
|
165
|
+
}
|
|
163
166
|
},
|
|
164
167
|
icon: {
|
|
165
168
|
base: COLORS.COLOR_NEUTRAL_100,
|
|
@@ -157,7 +157,10 @@ var colors = _extends({
|
|
|
157
157
|
subtext: COLORS.COLOR_NEUTRAL_700,
|
|
158
158
|
body: COLORS.COLOR_NEUTRAL_800,
|
|
159
159
|
inverse: COLORS.COLOR_NEUTRAL_0,
|
|
160
|
-
error: COLORS.COLOR_RED_800
|
|
160
|
+
error: COLORS.COLOR_RED_800,
|
|
161
|
+
background: {
|
|
162
|
+
highlight: COLORS.COLOR_YELLOW_200
|
|
163
|
+
}
|
|
161
164
|
},
|
|
162
165
|
icon: {
|
|
163
166
|
base: COLORS.COLOR_NEUTRAL_800,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/racine",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.4.0-input-beta.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"__flow__",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"lodash.curry": "^4.1.1",
|
|
70
70
|
"lodash.uniqueid": "^4.0.1",
|
|
71
71
|
"lru-memoize": "^1.1.0",
|
|
72
|
-
"mutationobserver-shim": "^0.3.
|
|
72
|
+
"mutationobserver-shim": "^0.3.3",
|
|
73
73
|
"polished": "^3.4.1",
|
|
74
74
|
"raw-loader": "^3.0.0",
|
|
75
75
|
"react-focus-lock": "^2.0.3",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
},
|
|
85
85
|
"devDependencies": {
|
|
86
86
|
"@babel/cli": "^7.5.5",
|
|
87
|
-
"@babel/core": "^7.
|
|
87
|
+
"@babel/core": "^7.4.5",
|
|
88
88
|
"@babel/plugin-proposal-class-properties": "^7.4.4",
|
|
89
89
|
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
|
|
90
90
|
"@babel/preset-env": "^7.8.0",
|
|
@@ -99,27 +99,23 @@
|
|
|
99
99
|
"@sproutsocial/seeds-networkcolor": "^2.9.0",
|
|
100
100
|
"@sproutsocial/seeds-space": "^0.4.7",
|
|
101
101
|
"@sproutsocial/seeds-typography": "^3.0.1",
|
|
102
|
-
"@storybook/addon-a11y": "^6.
|
|
103
|
-
"@storybook/addon-actions": "^6.
|
|
104
|
-
"@storybook/addon-
|
|
105
|
-
"@storybook/addon-
|
|
106
|
-
"@storybook/addon-
|
|
107
|
-
"@storybook/
|
|
108
|
-
"@storybook/addons": "^6.4.19",
|
|
102
|
+
"@storybook/addon-a11y": "^6.1.11",
|
|
103
|
+
"@storybook/addon-actions": "^6.3.8",
|
|
104
|
+
"@storybook/addon-knobs": "^6.1.11",
|
|
105
|
+
"@storybook/addon-storysource": "^6.1.11",
|
|
106
|
+
"@storybook/addon-viewport": "^6.1.11",
|
|
107
|
+
"@storybook/addons": "^6.1.11",
|
|
109
108
|
"@storybook/react": "^6.4.19",
|
|
110
|
-
"@storybook/theming": "^6.
|
|
111
|
-
"@testing-library/jest-dom": "^5.16.4",
|
|
109
|
+
"@storybook/theming": "^6.1.11",
|
|
112
110
|
"@testing-library/react": "^11.2.2",
|
|
113
111
|
"@testing-library/user-event": "^13.0.0",
|
|
114
|
-
"@univision/babel-plugin-styled-components": "^1.10.9",
|
|
115
|
-
"axios": "^0.26.1",
|
|
116
112
|
"babel-core": "^7.0.0-bridge",
|
|
117
113
|
"babel-eslint": "10.1.0",
|
|
118
|
-
"babel-jest": "
|
|
119
|
-
"babel-loader": "8.
|
|
114
|
+
"babel-jest": "26.1.0",
|
|
115
|
+
"babel-loader": "8.0.6",
|
|
120
116
|
"babel-plugin-inline-import": "^3.0.0",
|
|
121
117
|
"babel-plugin-polished": "^1.1.0",
|
|
122
|
-
"babel-plugin-styled-components": "^
|
|
118
|
+
"babel-plugin-styled-components": "^1.10.0",
|
|
123
119
|
"babel-polyfill": "^6.26.0",
|
|
124
120
|
"chalk": "^2.3.2",
|
|
125
121
|
"chokidar": "^3.0.2",
|
|
@@ -141,8 +137,9 @@
|
|
|
141
137
|
"identity-obj-proxy": "^3.0.0",
|
|
142
138
|
"inquirer": "^6.4.1",
|
|
143
139
|
"is-glob": "^4.0.1",
|
|
144
|
-
"jest": "
|
|
145
|
-
"jest-axe": "
|
|
140
|
+
"jest": "26.1.0",
|
|
141
|
+
"jest-axe": "3.4.0",
|
|
142
|
+
"jest-dom": "^3.5.0",
|
|
146
143
|
"jest-styled-components": "7.0.0-beta.1",
|
|
147
144
|
"jscodeshift": "^0.6.4",
|
|
148
145
|
"json-to-scss": "^1.6.2",
|
|
@@ -151,15 +148,15 @@
|
|
|
151
148
|
"npm-run-all": "^4.1.2",
|
|
152
149
|
"outdent": "^0.7.0",
|
|
153
150
|
"pify": "^4.0.1",
|
|
154
|
-
"playroom": "^0.
|
|
151
|
+
"playroom": "^0.22.2",
|
|
155
152
|
"prettier": "^2.0.5",
|
|
156
153
|
"prop-types": "^15.6.1",
|
|
157
154
|
"react": "16.12.0",
|
|
158
155
|
"react-dates": "^21.8.0",
|
|
159
156
|
"react-dom": "16.12.0",
|
|
160
157
|
"rimraf": "^2.6.3",
|
|
161
|
-
"storybook-dark-mode": "^1.0.
|
|
162
|
-
"styled-components": "
|
|
158
|
+
"storybook-dark-mode": "^1.0.7",
|
|
159
|
+
"styled-components": "5.0.0-rc.2",
|
|
163
160
|
"stylelint": "^13.8.0",
|
|
164
161
|
"stylelint-config-recommended": "^2.2.0",
|
|
165
162
|
"stylelint-config-styled-components": "^0.1.1",
|
|
@@ -181,15 +178,13 @@
|
|
|
181
178
|
"prop-types": "^15.0.0",
|
|
182
179
|
"react": "^16.2.0",
|
|
183
180
|
"react-dates": "^21.8.0",
|
|
184
|
-
"
|
|
185
|
-
"styled-components": "^5.2.3"
|
|
181
|
+
"styled-components": "^5.0.0-rc.2"
|
|
186
182
|
},
|
|
187
183
|
"resolutions": {
|
|
188
184
|
"lodash": "^4.17.21",
|
|
189
185
|
"react-popper/create-react-context": "^0.3.0"
|
|
190
186
|
},
|
|
191
187
|
"jest": {
|
|
192
|
-
"testEnvironment": "jsdom",
|
|
193
188
|
"setupFilesAfterEnv": [
|
|
194
189
|
"<rootDir>/src/setupTests.js"
|
|
195
190
|
],
|
package/bin/buildNpm.js
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This file handles the generation of an .npmrc with Jfrog credentials during the CI process.
|
|
3
|
-
* It replicates the local configuration requirements of a developer running `yarn` on their machine
|
|
4
|
-
* If run locally please do not commit your auth credentials
|
|
5
|
-
*/
|
|
6
|
-
const fs = require("fs");
|
|
7
|
-
const https = require("https");
|
|
8
|
-
const { exit } = require("process");
|
|
9
|
-
|
|
10
|
-
const { ARTIFACTORY_KEY, CI } = process.env;
|
|
11
|
-
|
|
12
|
-
// Check if we're in CI context, otherwise skip the process
|
|
13
|
-
if (!CI) {
|
|
14
|
-
exit();
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
const options = {
|
|
18
|
-
hostname: "sproutsocial.jfrog.io",
|
|
19
|
-
path: "/artifactory/api/npm/auth",
|
|
20
|
-
method: "GET",
|
|
21
|
-
headers: {
|
|
22
|
-
"X-JFrog-Art-Api": ARTIFACTORY_KEY,
|
|
23
|
-
},
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const req = https.request(options, (res) => {
|
|
27
|
-
console.log(`statusCode: ${res.statusCode}`);
|
|
28
|
-
|
|
29
|
-
// Call our auth endpoint with environment credentials
|
|
30
|
-
res.on("data", (data) => {
|
|
31
|
-
// Writes out an .npmrc file with the response
|
|
32
|
-
fs.writeFile(".npmrc", data, (err) => {
|
|
33
|
-
if (err) console.log(err);
|
|
34
|
-
else {
|
|
35
|
-
console.log(".npmrc generated successfully!");
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
// Once the file is created we append the registry info
|
|
40
|
-
fs.appendFile(
|
|
41
|
-
".npmrc",
|
|
42
|
-
"registry=https://sproutsocial.jfrog.io/artifactory/api/npm/npm_virtual",
|
|
43
|
-
function (err) {
|
|
44
|
-
if (err) throw err;
|
|
45
|
-
console.log("Registry Config Added!");
|
|
46
|
-
}
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
// Finally, we set permissions for the file so that netlify recognizes it
|
|
50
|
-
fs.chmodSync(".npmrc", "0600");
|
|
51
|
-
});
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
req.on("error", (error) => {
|
|
55
|
-
console.error(error);
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
req.end();
|