@cloudflare/component-textarea 4.0.0 → 4.1.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/Textarea.d.ts +68 -66
  3. package/es/Textarea.js +9 -8
  4. package/lib/Textarea.js +9 -8
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 28979c96a3: Add compact prop
8
+
3
9
  ## 4.0.0
4
10
 
5
11
  ### Patch Changes
package/dist/Textarea.d.ts CHANGED
@@ -1,28 +1,58 @@
1
1
  /// <reference types="react" />
2
2
  declare const Textarea: import("react").ComponentType<{
3
+ is?: string | undefined;
4
+ name?: string | undefined;
5
+ disabled?: boolean | undefined;
6
+ color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
3
7
  form?: string | undefined;
4
8
  slot?: string | undefined;
5
9
  style?: import("react").CSSProperties | undefined;
6
10
  title?: string | undefined;
7
11
  children?: import("react").ReactNode;
8
- id?: string | undefined;
9
- key?: import("react").Key | null | undefined;
10
- onClick?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
11
- onMouseEnter?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
12
- onMouseLeave?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
13
- draggable?: (boolean | "true" | "false") | undefined;
14
- onDragStart?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
15
- onDrag?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
16
- onDragEnd?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
12
+ value?: string | number | readonly string[] | undefined;
13
+ defaultChecked?: boolean | undefined;
14
+ defaultValue?: string | number | readonly string[] | undefined;
15
+ suppressContentEditableWarning?: boolean | undefined;
16
+ suppressHydrationWarning?: boolean | undefined;
17
+ dangerouslySetInnerHTML?: {
18
+ __html: string;
19
+ } | undefined;
20
+ accessKey?: string | undefined;
17
21
  className?: string | undefined;
18
- color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
22
+ contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
23
+ contextMenu?: string | undefined;
24
+ dir?: string | undefined;
25
+ draggable?: (boolean | "true" | "false") | undefined;
26
+ id?: string | undefined;
19
27
  lang?: string | undefined;
20
- name?: string | undefined;
21
- role?: string | undefined;
28
+ placeholder?: string | undefined;
29
+ spellCheck?: (boolean | "true" | "false") | undefined;
22
30
  tabIndex?: number | undefined;
31
+ inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
32
+ radioGroup?: string | undefined;
33
+ role?: string | undefined;
34
+ about?: string | undefined;
35
+ datatype?: string | undefined;
36
+ inlist?: any;
37
+ prefix?: string | undefined;
38
+ property?: string | undefined;
39
+ resource?: string | undefined;
40
+ typeof?: string | undefined;
41
+ vocab?: string | undefined;
42
+ autoCapitalize?: string | undefined;
43
+ autoCorrect?: string | undefined;
44
+ autoSave?: string | undefined;
45
+ itemProp?: string | undefined;
46
+ itemScope?: boolean | undefined;
47
+ itemType?: string | undefined;
48
+ itemID?: string | undefined;
49
+ itemRef?: string | undefined;
50
+ results?: number | undefined;
51
+ security?: string | undefined;
52
+ unselectable?: "on" | "off" | undefined;
23
53
  'aria-activedescendant'?: string | undefined;
24
54
  'aria-atomic'?: boolean | "true" | "false" | undefined;
25
- 'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
55
+ 'aria-autocomplete'?: "inline" | "none" | "list" | "both" | undefined;
26
56
  'aria-busy'?: boolean | "true" | "false" | undefined;
27
57
  'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
28
58
  'aria-colcount'?: number | undefined;
@@ -38,7 +68,7 @@ declare const Textarea: import("react").ComponentType<{
38
68
  'aria-expanded'?: boolean | "true" | "false" | undefined;
39
69
  'aria-flowto'?: string | undefined;
40
70
  'aria-grabbed'?: boolean | "true" | "false" | undefined;
41
- 'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
71
+ 'aria-haspopup'?: boolean | "menu" | "dialog" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
42
72
  'aria-hidden'?: boolean | "true" | "false" | undefined;
43
73
  'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
44
74
  'aria-keyshortcuts'?: string | undefined;
@@ -68,9 +98,19 @@ declare const Textarea: import("react").ComponentType<{
68
98
  'aria-valuemin'?: number | undefined;
69
99
  'aria-valuenow'?: number | undefined;
70
100
  'aria-valuetext'?: string | undefined;
71
- dangerouslySetInnerHTML?: {
72
- __html: string;
73
- } | undefined;
101
+ autoFocus?: boolean | undefined;
102
+ autoComplete?: string | undefined;
103
+ maxLength?: number | undefined;
104
+ minLength?: number | undefined;
105
+ readOnly?: boolean | undefined;
106
+ required?: boolean | undefined;
107
+ cols?: number | undefined;
108
+ dirName?: string | undefined;
109
+ rows?: number | undefined;
110
+ wrap?: string | undefined;
111
+ key?: import("react").Key | null | undefined;
112
+ hidden?: boolean | undefined;
113
+ translate?: "yes" | "no" | undefined;
74
114
  onCopy?: import("react").ClipboardEventHandler<HTMLTextAreaElement> | undefined;
75
115
  onCopyCapture?: import("react").ClipboardEventHandler<HTMLTextAreaElement> | undefined;
76
116
  onCut?: import("react").ClipboardEventHandler<HTMLTextAreaElement> | undefined;
@@ -155,12 +195,15 @@ declare const Textarea: import("react").ComponentType<{
155
195
  onWaitingCapture?: import("react").ReactEventHandler<HTMLTextAreaElement> | undefined;
156
196
  onAuxClick?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
157
197
  onAuxClickCapture?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
198
+ onClick?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
158
199
  onClickCapture?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
159
200
  onContextMenu?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
160
201
  onContextMenuCapture?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
161
202
  onDoubleClick?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
162
203
  onDoubleClickCapture?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
204
+ onDrag?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
163
205
  onDragCapture?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
206
+ onDragEnd?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
164
207
  onDragEndCapture?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
165
208
  onDragEnter?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
166
209
  onDragEnterCapture?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
@@ -170,11 +213,14 @@ declare const Textarea: import("react").ComponentType<{
170
213
  onDragLeaveCapture?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
171
214
  onDragOver?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
172
215
  onDragOverCapture?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
216
+ onDragStart?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
173
217
  onDragStartCapture?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
174
218
  onDrop?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
175
219
  onDropCapture?: import("react").DragEventHandler<HTMLTextAreaElement> | undefined;
176
220
  onMouseDown?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
177
221
  onMouseDownCapture?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
222
+ onMouseEnter?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
223
+ onMouseLeave?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
178
224
  onMouseMove?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
179
225
  onMouseMoveCapture?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
180
226
  onMouseOut?: import("react").MouseEventHandler<HTMLTextAreaElement> | undefined;
@@ -225,52 +271,7 @@ declare const Textarea: import("react").ComponentType<{
225
271
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLTextAreaElement> | undefined;
226
272
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLTextAreaElement> | undefined;
227
273
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLTextAreaElement> | undefined;
228
- dir?: string | undefined;
229
- is?: string | undefined;
230
- disabled?: boolean | undefined;
231
- value?: string | number | readonly string[] | undefined;
232
- defaultChecked?: boolean | undefined;
233
- defaultValue?: string | number | readonly string[] | undefined;
234
- suppressContentEditableWarning?: boolean | undefined;
235
- suppressHydrationWarning?: boolean | undefined;
236
- accessKey?: string | undefined;
237
- contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
238
- contextMenu?: string | undefined;
239
- placeholder?: string | undefined;
240
- spellCheck?: (boolean | "true" | "false") | undefined;
241
- inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
242
- radioGroup?: string | undefined;
243
- about?: string | undefined;
244
- datatype?: string | undefined;
245
- inlist?: any;
246
- prefix?: string | undefined;
247
- property?: string | undefined;
248
- resource?: string | undefined;
249
- typeof?: string | undefined;
250
- vocab?: string | undefined;
251
- autoCapitalize?: string | undefined;
252
- autoCorrect?: string | undefined;
253
- autoSave?: string | undefined;
254
- itemProp?: string | undefined;
255
- itemScope?: boolean | undefined;
256
- itemType?: string | undefined;
257
- itemID?: string | undefined;
258
- itemRef?: string | undefined;
259
- results?: number | undefined;
260
- security?: string | undefined;
261
- unselectable?: "on" | "off" | undefined;
262
- autoFocus?: boolean | undefined;
263
- autoComplete?: string | undefined;
264
- maxLength?: number | undefined;
265
- minLength?: number | undefined;
266
- readOnly?: boolean | undefined;
267
- required?: boolean | undefined;
268
- cols?: number | undefined;
269
- dirName?: string | undefined;
270
- rows?: number | undefined;
271
- wrap?: string | undefined;
272
- hidden?: boolean | undefined;
273
- translate?: "no" | "yes" | undefined;
274
+ borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
274
275
  p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
275
276
  height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;
276
277
  width?: import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | undefined;
@@ -279,7 +280,6 @@ declare const Textarea: import("react").ComponentType<{
279
280
  fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
280
281
  fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
281
282
  textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
282
- borderColor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
283
283
  margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
284
284
  marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
285
285
  marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
@@ -338,13 +338,15 @@ declare const Textarea: import("react").ComponentType<{
338
338
  flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
339
339
  flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
340
340
  flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
341
+ gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
341
342
  invalid?: boolean | undefined;
343
+ compact?: boolean | undefined;
342
344
  innerRef?: import("react").Ref<HTMLTextAreaElement> | undefined;
343
345
  gridColumnSpan?: number | number[] | "end" | "all" | undefined;
344
346
  gridColumnPad?: number | number[] | undefined;
345
347
  gridRowSpan?: number | number[] | undefined;
346
348
  gridRowPad?: number | number[] | undefined;
347
- gridAlign?: ("end" | "start" | "center" | "stretch") | undefined;
348
- gridJustify?: ("end" | "start" | "center" | "stretch") | undefined;
349
+ gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
350
+ gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
349
351
  }>;
350
352
  export default Textarea;
package/es/Textarea.js CHANGED
@@ -11,7 +11,8 @@ var Textarea = createStyledComponent(_ref => {
11
11
  var {
12
12
  theme,
13
13
  invalid,
14
- disabled
14
+ disabled,
15
+ compact
15
16
  } = _ref;
16
17
  return _objectSpread(_objectSpread({
17
18
  height: 'initial',
@@ -21,18 +22,17 @@ var Textarea = createStyledComponent(_ref => {
21
22
  resize: 'initial',
22
23
  zIndex: 0,
23
24
  width: '100%',
24
- paddingTop: 2,
25
- paddingBottom: 2,
26
- paddingLeft: 2,
27
- paddingRight: 2,
28
- marginBotton: 3,
25
+ px: compact ? "".concat(theme.space[1] * 1.5, "px") : theme.space[2],
26
+ py: compact ? "".concat(theme.space[1], "px") : "".concat(theme.space[2], "px"),
27
+ marginBottom: 3,
29
28
  verticalAlign: 'middle'
30
29
  }, theme.mixins.focus({
31
30
  invalid,
32
31
  border: true
33
32
  })), theme.mixins.input({
34
33
  invalid,
35
- disabled
34
+ disabled,
35
+ compact
36
36
  }));
37
37
  }, 'textarea');
38
38
  Textarea.propTypes = {
@@ -51,6 +51,7 @@ Textarea.propTypes = {
51
51
  // Element does not exist on the server
52
52
  current: typeof Element === 'undefined' ? PropTypes.func : PropTypes.instanceOf(Element)
53
53
  })]),
54
- tabIndex: PropTypes.number
54
+ tabIndex: PropTypes.number,
55
+ compact: PropTypes.bool
55
56
  };
56
57
  export default Textarea;
package/lib/Textarea.js CHANGED
@@ -22,7 +22,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
22
22
  var Textarea = (0, _styleContainer.createStyledComponent)(function (_ref) {
23
23
  var theme = _ref.theme,
24
24
  invalid = _ref.invalid,
25
- disabled = _ref.disabled;
25
+ disabled = _ref.disabled,
26
+ compact = _ref.compact;
26
27
  return _objectSpread(_objectSpread({
27
28
  height: 'initial',
28
29
  lineHeight: 'initial',
@@ -31,18 +32,17 @@ var Textarea = (0, _styleContainer.createStyledComponent)(function (_ref) {
31
32
  resize: 'initial',
32
33
  zIndex: 0,
33
34
  width: '100%',
34
- paddingTop: 2,
35
- paddingBottom: 2,
36
- paddingLeft: 2,
37
- paddingRight: 2,
38
- marginBotton: 3,
35
+ px: compact ? "".concat(theme.space[1] * 1.5, "px") : theme.space[2],
36
+ py: compact ? "".concat(theme.space[1], "px") : "".concat(theme.space[2], "px"),
37
+ marginBottom: 3,
39
38
  verticalAlign: 'middle'
40
39
  }, theme.mixins.focus({
41
40
  invalid: invalid,
42
41
  border: true
43
42
  })), theme.mixins.input({
44
43
  invalid: invalid,
45
- disabled: disabled
44
+ disabled: disabled,
45
+ compact: compact
46
46
  }));
47
47
  }, 'textarea');
48
48
  Textarea.propTypes = {
@@ -63,7 +63,8 @@ Textarea.propTypes = {
63
63
  // Element does not exist on the server
64
64
  current: typeof Element === 'undefined' ? _propTypes.default.func : _propTypes.default.instanceOf(Element)
65
65
  })]),
66
- tabIndex: _propTypes.default.number
66
+ tabIndex: _propTypes.default.number,
67
+ compact: _propTypes.default.bool
67
68
  };
68
69
  var _default = Textarea;
69
70
  exports.default = _default;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudflare/component-textarea",
3
3
  "description": "Cloudflare Textarea Component",
4
- "version": "4.0.0",
4
+ "version": "4.1.0",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "Cloudflare UI Developers <ui-devs@cloudflare.com>",