@sproutsocial/racine 11.3.0-beta.4 → 11.3.0-beta.5

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 (4) hide show
  1. package/__flow__/Input/index.js +50 -14
  2. package/commonjs/Input/index.js +34 -15
  3. package/lib/Input/index.js +33 -15
  4. package/package.json +1 -1
package/__flow__/Input/index.js CHANGED
@@ -3,6 +3,7 @@ import * as React from "react";
3
3
  import Container, { Accessory } from "./styles";
4
4
  import Button from "../Button";
5
5
  import Icon from "../Icon";
6
+ import styled from "styled-components";
6
7
 
7
8
  type TypeProps = {
8
9
  /** ID of the form element, should match the "for" value of the associated label */
@@ -43,10 +44,11 @@ type TypeProps = {
43
44
  /** Props to spread onto the underlying input element */
44
45
  inputProps?: any,
45
46
  /** Used to get a reference to the underlying element */
46
- innerRef?: React.Ref<"input">,
47
+ innerRef?: {| current: HTMLInputElement | null |},
47
48
  onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
48
49
  onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
49
- /** Called on Input.ClearButton trigger. */
50
+ /** Input.ClearButton onClick callback. Required when using <Input type="search"/> or <Input.ClearButton/>.
51
+ The component handles returning focus to Input after onClear is called only. You must reset "value" yourself.*/
50
52
  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
51
53
  onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
52
54
  onKeyDown?: (
@@ -70,38 +72,70 @@ type TypeProps = {
70
72
  // Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,
71
73
  // regardless of whether it is manually included as elemAfter or automatically included for type="search" Inputs.
72
74
  type TypeInputContext = $Shape<{
75
+ onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
73
76
  handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
74
77
  clearButtonLabel: string,
75
78
  hasValue: boolean,
79
+ size: "large" | "small" | "default",
76
80
  }>;
77
81
 
78
82
  const InputContext = React.createContext<TypeInputContext>({});
79
83
 
84
+ const StyledButton = styled(Button)`
85
+ &:hover,
86
+ &:active {
87
+ color: ${(props) =>
88
+ props.theme.utils.interact(props.theme.colors.icon.base)};
89
+ }
90
+ `;
91
+
80
92
  const ClearButton = () => {
81
- const { handleClear, clearButtonLabel, hasValue, size } =
82
- React.useContext(InputContext);
93
+ const {
94
+ onClear,
95
+ handleClear,
96
+ clearButtonLabel,
97
+ hasValue,
98
+ size: inputSize,
99
+ } = React.useContext(InputContext);
83
100
 
84
101
  // Hide the button when there is no text to clear.
85
102
  if (!hasValue) {
86
103
  return null;
87
104
  }
88
105
 
89
- // Cut down the padding for size small Inputs so that the focus ring won't go outside the bounds of the Input.
90
- // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
91
- const py = size === "small" ? 100 : undefined;
92
- const px = size === "small" ? 200 : undefined;
93
- const buttonSize = size === "small" ? "default" : size;
106
+ // Log a warning and hide the button when no onClear callback is provided.
107
+ // If we called handleClear with no onClear prop, all the button would do is focus the Input.
108
+ if (!onClear) {
109
+ console.warn(
110
+ "Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton."
111
+ );
112
+ return null;
113
+ }
94
114
 
95
115
  // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
96
116
  if (!clearButtonLabel) {
97
117
  console.warn(
98
- "Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized label to Input."
118
+ "Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input."
99
119
  );
100
120
  }
121
+
122
+ // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
123
+ // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
124
+ const py = inputSize === "small" ? 100 : undefined;
125
+ const px = inputSize === "small" ? 200 : undefined;
126
+ const buttonSize = inputSize === "small" ? "default" : inputSize;
127
+
101
128
  return (
102
- <Button onClick={handleClear} size={buttonSize} py={py} px={px}>
103
- <Icon name="circlex" title={clearButtonLabel || "Clear"} />
104
- </Button>
129
+ <StyledButton
130
+ onClick={handleClear}
131
+ size={buttonSize}
132
+ py={py}
133
+ px={px}
134
+ title={clearButtonLabel || "Clear"}
135
+ color="icon.base"
136
+ >
137
+ <Icon name="circlex" />
138
+ </StyledButton>
105
139
  );
106
140
  };
107
141
 
@@ -121,6 +155,7 @@ class Input extends React.Component<TypeProps> {
121
155
  type: "text",
122
156
  size: "default",
123
157
  appearance: "primary",
158
+ innerRef: React.createRef<HTMLInputElement>(),
124
159
  };
125
160
 
126
161
  static ClearButton = ClearButton;
@@ -129,8 +164,8 @@ class Input extends React.Component<TypeProps> {
129
164
  this.props.onBlur?.(e);
130
165
 
131
166
  handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
167
+ this.props.innerRef.current?.focus();
132
168
  this.props.onClear?.(e);
133
- this.props.innerRef?.current?.focus();
134
169
  };
135
170
 
136
171
  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) =>
@@ -217,6 +252,7 @@ class Input extends React.Component<TypeProps> {
217
252
  handleClear: this.handleClear,
218
253
  hasValue: !!value,
219
254
  clearButtonLabel,
255
+ onClear,
220
256
  size,
221
257
  }}
222
258
  >
package/commonjs/Input/index.js CHANGED
@@ -11,6 +11,8 @@ var _Button = _interopRequireDefault(require("../Button"));
11
11
 
12
12
  var _Icon = _interopRequireDefault(require("../Icon"));
13
13
 
14
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
15
+
14
16
  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"];
15
17
 
16
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,37 +30,52 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
28
30
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
29
31
 
30
32
  var InputContext = /*#__PURE__*/React.createContext({});
33
+ var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
34
+ displayName: "Input__StyledButton",
35
+ componentId: "sc-1ck1dnm-0"
36
+ })(["&:hover,&:active{color:", ";}"], function (props) {
37
+ return props.theme.utils.interact(props.theme.colors.icon.base);
38
+ });
31
39
 
32
40
  var ClearButton = function ClearButton() {
33
41
  var _React$useContext = React.useContext(InputContext),
42
+ onClear = _React$useContext.onClear,
34
43
  handleClear = _React$useContext.handleClear,
35
44
  clearButtonLabel = _React$useContext.clearButtonLabel,
36
45
  hasValue = _React$useContext.hasValue,
37
- size = _React$useContext.size; // Hide the button when there is no text to clear.
46
+ inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
38
47
 
39
48
 
40
49
  if (!hasValue) {
41
50
  return null;
42
- } // Cut down the padding for size small Inputs so that the focus ring won't go outside the bounds of the Input.
43
- // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
51
+ } // Log a warning and hide the button when no onClear callback is provided.
52
+ // If we called handleClear with no onClear prop, all the button would do is focus the Input.
44
53
 
45
54
 
46
- var py = size === "small" ? 100 : undefined;
47
- var px = size === "small" ? 200 : undefined;
48
- var buttonSize = size === "small" ? "default" : size; // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
55
+ if (!onClear) {
56
+ console.warn("Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton.");
57
+ return null;
58
+ } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
59
+
49
60
 
50
61
  if (!clearButtonLabel) {
51
- console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized label to Input.");
52
- }
62
+ console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
63
+ } // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
64
+ // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
65
+
53
66
 
54
- return /*#__PURE__*/React.createElement(_Button.default, {
67
+ var py = inputSize === "small" ? 100 : undefined;
68
+ var px = inputSize === "small" ? 200 : undefined;
69
+ var buttonSize = inputSize === "small" ? "default" : inputSize;
70
+ return /*#__PURE__*/React.createElement(StyledButton, {
55
71
  onClick: handleClear,
56
72
  size: buttonSize,
57
73
  py: py,
58
- px: px
74
+ px: px,
75
+ title: clearButtonLabel || "Clear",
76
+ color: "icon.base"
59
77
  }, /*#__PURE__*/React.createElement(_Icon.default, {
60
- name: "circlex",
61
- title: clearButtonLabel || "Clear"
78
+ name: "circlex"
62
79
  }));
63
80
  }; // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
64
81
  // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
@@ -89,10 +106,10 @@ var Input = /*#__PURE__*/function (_React$Component) {
89
106
  };
90
107
 
91
108
  _this.handleClear = function (e) {
92
- var _this$props$innerRef, _this$props$innerRef$;
109
+ var _this$props$innerRef$;
93
110
 
111
+ (_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
94
112
  _this.props.onClear == null ? void 0 : _this.props.onClear(e);
95
- (_this$props$innerRef = _this.props.innerRef) == null ? void 0 : (_this$props$innerRef$ = _this$props$innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
96
113
  };
97
114
 
98
115
  _this.handleChange = function (e) {
@@ -185,6 +202,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
185
202
  handleClear: this.handleClear,
186
203
  hasValue: !!value,
187
204
  clearButtonLabel: clearButtonLabel,
205
+ onClear: onClear,
188
206
  size: size
189
207
  }
190
208
  }, elementBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {
@@ -228,7 +246,8 @@ Input.defaultProps = {
228
246
  disabled: false,
229
247
  type: "text",
230
248
  size: "default",
231
- appearance: "primary"
249
+ appearance: "primary",
250
+ innerRef: /*#__PURE__*/React.createRef()
232
251
  };
233
252
  Input.ClearButton = ClearButton;
234
253
  Input.ClearButton.displayName = "Input.ClearButton";
package/lib/Input/index.js CHANGED
@@ -12,38 +12,54 @@ import * as React from "react";
12
12
  import Container, { Accessory } from "./styles";
13
13
  import Button from "../Button";
14
14
  import Icon from "../Icon";
15
+ import styled from "styled-components";
15
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
+ });
16
23
 
17
24
  var ClearButton = function ClearButton() {
18
25
  var _React$useContext = React.useContext(InputContext),
26
+ onClear = _React$useContext.onClear,
19
27
  handleClear = _React$useContext.handleClear,
20
28
  clearButtonLabel = _React$useContext.clearButtonLabel,
21
29
  hasValue = _React$useContext.hasValue,
22
- size = _React$useContext.size; // Hide the button when there is no text to clear.
30
+ inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
23
31
 
24
32
 
25
33
  if (!hasValue) {
26
34
  return null;
27
- } // Cut down the padding for size small Inputs so that the focus ring won't go outside the bounds of the Input.
28
- // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
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
+
29
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.
30
43
 
31
- var py = size === "small" ? 100 : undefined;
32
- var px = size === "small" ? 200 : undefined;
33
- var buttonSize = size === "small" ? "default" : size; // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
34
44
 
35
45
  if (!clearButtonLabel) {
36
- console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized label to Input.");
37
- }
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
+
38
50
 
39
- return /*#__PURE__*/React.createElement(Button, {
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, {
40
55
  onClick: handleClear,
41
56
  size: buttonSize,
42
57
  py: py,
43
- px: px
58
+ px: px,
59
+ title: clearButtonLabel || "Clear",
60
+ color: "icon.base"
44
61
  }, /*#__PURE__*/React.createElement(Icon, {
45
- name: "circlex",
46
- title: clearButtonLabel || "Clear"
62
+ name: "circlex"
47
63
  }));
48
64
  }; // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
49
65
  // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
@@ -74,10 +90,10 @@ var Input = /*#__PURE__*/function (_React$Component) {
74
90
  };
75
91
 
76
92
  _this.handleClear = function (e) {
77
- var _this$props$innerRef, _this$props$innerRef$;
93
+ var _this$props$innerRef$;
78
94
 
95
+ (_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
79
96
  _this.props.onClear == null ? void 0 : _this.props.onClear(e);
80
- (_this$props$innerRef = _this.props.innerRef) == null ? void 0 : (_this$props$innerRef$ = _this$props$innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
81
97
  };
82
98
 
83
99
  _this.handleChange = function (e) {
@@ -170,6 +186,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
170
186
  handleClear: this.handleClear,
171
187
  hasValue: !!value,
172
188
  clearButtonLabel: clearButtonLabel,
189
+ onClear: onClear,
173
190
  size: size
174
191
  }
175
192
  }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
@@ -213,7 +230,8 @@ Input.defaultProps = {
213
230
  disabled: false,
214
231
  type: "text",
215
232
  size: "default",
216
- appearance: "primary"
233
+ appearance: "primary",
234
+ innerRef: /*#__PURE__*/React.createRef()
217
235
  };
218
236
  Input.ClearButton = ClearButton;
219
237
  Input.ClearButton.displayName = "Input.ClearButton";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "11.3.0-beta.4",
3
+ "version": "11.3.0-beta.5",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "__flow__",