@jobber/components 6.10.1 → 6.10.2

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 (3) hide show
  1. package/dist/InputText-cjs.js +44 -27
  2. package/dist/InputText-es.js +44 -27
  3. package/package.json +2 -2
package/dist/InputText-cjs.js CHANGED
@@ -38,14 +38,7 @@ function InputTextInternal(props, ref) {
38
38
  }
39
39
  },
40
40
  }));
41
- useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
42
- if (inputRef &&
43
- inputRef.current instanceof HTMLTextAreaElement &&
44
- wrapperRef &&
45
- wrapperRef.current instanceof HTMLDivElement) {
46
- resize(inputRef.current, wrapperRef.current);
47
- }
48
- }, [inputRef.current, wrapperRef.current]);
41
+ const resize = useAutoResize(inputRef, wrapperRef, rowRange, props.value);
49
42
  return (React.createElement(FormField.FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
50
43
  function handleChange(newValue) {
51
44
  props.onChange && props.onChange(newValue);
@@ -67,25 +60,6 @@ function InputTextInternal(props, ref) {
67
60
  return { min: props.rows, max: props.rows };
68
61
  }
69
62
  }
70
- function resize(textArea, wrapper) {
71
- if (rowRange.min === rowRange.max)
72
- return;
73
- textArea.style.flexBasis = "auto";
74
- wrapper.style.height = "auto";
75
- textArea.style.flexBasis = textAreaHeight(textArea) + "px";
76
- }
77
- function textAreaHeight(textArea) {
78
- const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
79
- const maxHeight = rowRange.max * parseFloat(lineHeight) +
80
- parseFloat(borderTopWidth) +
81
- parseFloat(borderBottomWidth) +
82
- parseFloat(paddingTop) +
83
- parseFloat(paddingBottom);
84
- const scrollHeight = textArea.scrollHeight +
85
- parseFloat(borderTopWidth) +
86
- parseFloat(borderBottomWidth);
87
- return Math.min(scrollHeight, maxHeight);
88
- }
89
63
  function insertText(text) {
90
64
  var _a;
91
65
  const input = inputRef.current;
@@ -108,5 +82,48 @@ function insertAtCursor(input, newText) {
108
82
  input.selectionStart = input.selectionEnd = start + newText.length;
109
83
  input.focus();
110
84
  }
85
+ function useAutoResize(inputRef, wrapperRef, rowRange, value) {
86
+ useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
87
+ if (inputRef &&
88
+ inputRef.current instanceof HTMLTextAreaElement &&
89
+ wrapperRef &&
90
+ wrapperRef.current instanceof HTMLDivElement) {
91
+ resize(inputRef.current, wrapperRef.current);
92
+ }
93
+ }, [inputRef.current, wrapperRef.current]);
94
+ // When the consumer passes a new controlled value, we need to recheck the size.
95
+ // The timeout ensures the DOM has a enough time to render the new text before
96
+ // we access the height.
97
+ useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
98
+ setTimeout(() => {
99
+ if (inputRef &&
100
+ inputRef.current instanceof HTMLTextAreaElement &&
101
+ wrapperRef &&
102
+ wrapperRef.current instanceof HTMLDivElement) {
103
+ resize(inputRef.current, wrapperRef.current);
104
+ }
105
+ }, 0);
106
+ }, [value]);
107
+ function resize(textArea, wrapper) {
108
+ if (rowRange.min === rowRange.max)
109
+ return;
110
+ textArea.style.flexBasis = "auto";
111
+ wrapper.style.height = "auto";
112
+ textArea.style.flexBasis = textAreaHeight(textArea) + "px";
113
+ }
114
+ function textAreaHeight(textArea) {
115
+ const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
116
+ const maxHeight = rowRange.max * parseFloat(lineHeight) +
117
+ parseFloat(borderTopWidth) +
118
+ parseFloat(borderBottomWidth) +
119
+ parseFloat(paddingTop) +
120
+ parseFloat(paddingBottom);
121
+ const scrollHeight = textArea.scrollHeight +
122
+ parseFloat(borderTopWidth) +
123
+ parseFloat(borderBottomWidth);
124
+ return Math.min(scrollHeight, maxHeight);
125
+ }
126
+ return resize;
127
+ }
111
128
 
112
129
  exports.InputText = InputText;
package/dist/InputText-es.js CHANGED
@@ -36,14 +36,7 @@ function InputTextInternal(props, ref) {
36
36
  }
37
37
  },
38
38
  }));
39
- useSafeLayoutEffect_1(() => {
40
- if (inputRef &&
41
- inputRef.current instanceof HTMLTextAreaElement &&
42
- wrapperRef &&
43
- wrapperRef.current instanceof HTMLDivElement) {
44
- resize(inputRef.current, wrapperRef.current);
45
- }
46
- }, [inputRef.current, wrapperRef.current]);
39
+ const resize = useAutoResize(inputRef, wrapperRef, rowRange, props.value);
47
40
  return (React.createElement(FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
48
41
  function handleChange(newValue) {
49
42
  props.onChange && props.onChange(newValue);
@@ -65,25 +58,6 @@ function InputTextInternal(props, ref) {
65
58
  return { min: props.rows, max: props.rows };
66
59
  }
67
60
  }
68
- function resize(textArea, wrapper) {
69
- if (rowRange.min === rowRange.max)
70
- return;
71
- textArea.style.flexBasis = "auto";
72
- wrapper.style.height = "auto";
73
- textArea.style.flexBasis = textAreaHeight(textArea) + "px";
74
- }
75
- function textAreaHeight(textArea) {
76
- const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
77
- const maxHeight = rowRange.max * parseFloat(lineHeight) +
78
- parseFloat(borderTopWidth) +
79
- parseFloat(borderBottomWidth) +
80
- parseFloat(paddingTop) +
81
- parseFloat(paddingBottom);
82
- const scrollHeight = textArea.scrollHeight +
83
- parseFloat(borderTopWidth) +
84
- parseFloat(borderBottomWidth);
85
- return Math.min(scrollHeight, maxHeight);
86
- }
87
61
  function insertText(text) {
88
62
  var _a;
89
63
  const input = inputRef.current;
@@ -106,5 +80,48 @@ function insertAtCursor(input, newText) {
106
80
  input.selectionStart = input.selectionEnd = start + newText.length;
107
81
  input.focus();
108
82
  }
83
+ function useAutoResize(inputRef, wrapperRef, rowRange, value) {
84
+ useSafeLayoutEffect_1(() => {
85
+ if (inputRef &&
86
+ inputRef.current instanceof HTMLTextAreaElement &&
87
+ wrapperRef &&
88
+ wrapperRef.current instanceof HTMLDivElement) {
89
+ resize(inputRef.current, wrapperRef.current);
90
+ }
91
+ }, [inputRef.current, wrapperRef.current]);
92
+ // When the consumer passes a new controlled value, we need to recheck the size.
93
+ // The timeout ensures the DOM has a enough time to render the new text before
94
+ // we access the height.
95
+ useSafeLayoutEffect_1(() => {
96
+ setTimeout(() => {
97
+ if (inputRef &&
98
+ inputRef.current instanceof HTMLTextAreaElement &&
99
+ wrapperRef &&
100
+ wrapperRef.current instanceof HTMLDivElement) {
101
+ resize(inputRef.current, wrapperRef.current);
102
+ }
103
+ }, 0);
104
+ }, [value]);
105
+ function resize(textArea, wrapper) {
106
+ if (rowRange.min === rowRange.max)
107
+ return;
108
+ textArea.style.flexBasis = "auto";
109
+ wrapper.style.height = "auto";
110
+ textArea.style.flexBasis = textAreaHeight(textArea) + "px";
111
+ }
112
+ function textAreaHeight(textArea) {
113
+ const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
114
+ const maxHeight = rowRange.max * parseFloat(lineHeight) +
115
+ parseFloat(borderTopWidth) +
116
+ parseFloat(borderBottomWidth) +
117
+ parseFloat(paddingTop) +
118
+ parseFloat(paddingBottom);
119
+ const scrollHeight = textArea.scrollHeight +
120
+ parseFloat(borderTopWidth) +
121
+ parseFloat(borderBottomWidth);
122
+ return Math.min(scrollHeight, maxHeight);
123
+ }
124
+ return resize;
125
+ }
109
126
 
110
127
  export { InputText as I };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "6.10.1",
3
+ "version": "6.10.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -487,5 +487,5 @@
487
487
  "> 1%",
488
488
  "IE 10"
489
489
  ],
490
- "gitHead": "66c7c1bed940d34bb5b55b39316b93f734dbca82"
490
+ "gitHead": "6a37cbc30b363891e52735ac997d4007f255c7b9"
491
491
  }