@jobber/components 6.11.0 → 6.11.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.
- package/dist/Autocomplete/index.cjs +2 -11
- package/dist/Autocomplete/index.mjs +2 -11
- package/dist/Autocomplete-cjs.js +2 -2
- package/dist/Autocomplete-es.js +1 -1
- package/dist/Chips/InternalChipDismissible/hooks/index.cjs +2 -2
- package/dist/Chips/InternalChipDismissible/hooks/index.mjs +2 -2
- package/dist/Chips/InternalChipDismissible/index.cjs +2 -2
- package/dist/Chips/InternalChipDismissible/index.mjs +2 -2
- package/dist/Chips/index.cjs +2 -2
- package/dist/Chips/index.mjs +2 -2
- package/dist/DataList/DataList.types.d.ts +1 -1
- package/dist/DataList/components/DataListSearch/index.cjs +1 -10
- package/dist/DataList/components/DataListSearch/index.mjs +1 -10
- package/dist/DataList/index.cjs +1 -8
- package/dist/DataList/index.mjs +1 -8
- package/dist/DataListSearch-cjs.js +2 -2
- package/dist/DataListSearch-es.js +1 -1
- package/dist/DataListTotalCount-cjs.js +3 -1
- package/dist/DataListTotalCount-es.js +3 -1
- package/dist/DatePicker/index.cjs +2 -3
- package/dist/DatePicker/index.mjs +2 -3
- package/dist/DatePicker-cjs.js +781 -2
- package/dist/DatePicker-es.js +781 -3
- package/dist/FormField/FormFieldTypes.d.ts +3 -3
- package/dist/FormField/hooks/useFormFieldWrapperStyles.d.ts +3 -3
- package/dist/FormField-cjs.js +2 -5
- package/dist/FormField-es.js +3 -3
- package/dist/InputDate/index.cjs +15 -16
- package/dist/InputDate/index.mjs +15 -16
- package/dist/InputDate-cjs.js +2 -3
- package/dist/InputDate-es.js +1 -2
- package/dist/InputText/InputText.d.ts +20 -10
- package/dist/InputText/index.cjs +8 -263
- package/dist/InputText/index.d.ts +1 -5
- package/dist/InputText/index.mjs +7 -266
- package/dist/InputText-cjs.js +129 -0
- package/dist/InputText-es.js +127 -0
- package/dist/List/index.cjs +2 -2
- package/dist/List/index.mjs +2 -2
- package/dist/_baseEach-cjs.js +12 -12
- package/dist/_baseEach-es.js +2 -2
- package/dist/_baseFlatten-cjs.js +2 -2
- package/dist/_baseFlatten-es.js +1 -1
- package/dist/{_baseGet-cjs.js → _getAllKeys-cjs.js} +181 -181
- package/dist/{_baseGet-es.js → _getAllKeys-es.js} +183 -183
- package/dist/index.cjs +3 -4
- package/dist/index.mjs +2 -3
- package/dist/isTypedArray-es.js +1 -1
- package/dist/useScrollToActive-cjs.js +3 -3
- package/dist/useScrollToActive-es.js +1 -1
- package/package.json +2 -2
- package/dist/InputText/InputText.rebuilt.d.ts +0 -3
- package/dist/InputText/InputText.types.d.ts +0 -71
- package/dist/InputText/useInputTextActions.d.ts +0 -16
- package/dist/InputText/useInputTextFormField.d.ts +0 -347
- package/dist/InputText/useTextAreaResize.d.ts +0 -14
- package/dist/omit-cjs.js +0 -783
- package/dist/omit-es.js +0 -781
package/dist/InputText/index.mjs
CHANGED
|
@@ -1,276 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import 'react-hook-form';
|
|
1
|
+
export { I as InputText } from '../InputText-es.js';
|
|
2
|
+
import 'react';
|
|
3
|
+
import '../useSafeLayoutEffect-es.js';
|
|
4
|
+
import '../FormField-es.js';
|
|
6
5
|
import 'framer-motion';
|
|
7
6
|
import '@jobber/design';
|
|
8
7
|
import 'classnames';
|
|
9
|
-
import 'react-router-dom';
|
|
10
|
-
import { o as omit } from '../omit-es.js';
|
|
11
8
|
import '../Button-es.js';
|
|
9
|
+
import 'react-router-dom';
|
|
12
10
|
import '../Icon-es.js';
|
|
13
11
|
import '../Typography-es.js';
|
|
14
12
|
import '../Text-es.js';
|
|
15
13
|
import '../useFormFieldFocus-es.js';
|
|
16
14
|
import '../InputValidation-es.js';
|
|
17
15
|
import '../Spinner-es.js';
|
|
18
|
-
import '../
|
|
19
|
-
import '
|
|
20
|
-
import '../isTypedArray-es.js';
|
|
21
|
-
import '../isObjectLike-es.js';
|
|
22
|
-
import '../identity-es.js';
|
|
23
|
-
import '../_getTag-es.js';
|
|
24
|
-
import '../isSymbol-es.js';
|
|
25
|
-
import '../keysIn-es.js';
|
|
26
|
-
import '../_baseAssignValue-es.js';
|
|
27
|
-
import '../_baseFlatten-es.js';
|
|
28
|
-
import '../_setToString-es.js';
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.
|
|
32
|
-
*/
|
|
33
|
-
function useTextAreaResize({ rows, value, inputRef, wrapperRef, }) {
|
|
34
|
-
const rowRange = getRowRange(rows);
|
|
35
|
-
useSafeLayoutEffect_1(() => {
|
|
36
|
-
if (inputRef &&
|
|
37
|
-
inputRef.current instanceof HTMLTextAreaElement &&
|
|
38
|
-
wrapperRef &&
|
|
39
|
-
wrapperRef.current instanceof HTMLDivElement) {
|
|
40
|
-
resize();
|
|
41
|
-
}
|
|
42
|
-
}, [inputRef.current, wrapperRef.current]);
|
|
43
|
-
// When the consumer passes a new controlled value, we need to recheck the size.
|
|
44
|
-
// The timeout ensures the DOM has a enough time to render the new text before
|
|
45
|
-
// we access the height.
|
|
46
|
-
useSafeLayoutEffect_1(() => {
|
|
47
|
-
setTimeout(() => {
|
|
48
|
-
if (inputRef &&
|
|
49
|
-
inputRef.current instanceof HTMLTextAreaElement &&
|
|
50
|
-
wrapperRef &&
|
|
51
|
-
wrapperRef.current instanceof HTMLDivElement) {
|
|
52
|
-
resize();
|
|
53
|
-
}
|
|
54
|
-
}, 0);
|
|
55
|
-
}, [value]);
|
|
56
|
-
function resize() {
|
|
57
|
-
if (inputRef &&
|
|
58
|
-
inputRef.current instanceof HTMLTextAreaElement &&
|
|
59
|
-
wrapperRef &&
|
|
60
|
-
(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
|
|
61
|
-
if (rowRange.min === rowRange.max)
|
|
62
|
-
return;
|
|
63
|
-
inputRef.current.style.flexBasis = "auto";
|
|
64
|
-
wrapperRef.current.style.height = "auto";
|
|
65
|
-
inputRef.current.style.flexBasis =
|
|
66
|
-
textAreaHeight(inputRef.current) + "px";
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
function textAreaHeight(textArea) {
|
|
70
|
-
const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
|
|
71
|
-
const maxHeight = rowRange.max * parseFloat(lineHeight) +
|
|
72
|
-
parseFloat(borderTopWidth) +
|
|
73
|
-
parseFloat(borderBottomWidth) +
|
|
74
|
-
parseFloat(paddingTop) +
|
|
75
|
-
parseFloat(paddingBottom);
|
|
76
|
-
const scrollHeight = textArea.scrollHeight +
|
|
77
|
-
parseFloat(borderTopWidth) +
|
|
78
|
-
parseFloat(borderBottomWidth);
|
|
79
|
-
return Math.min(scrollHeight, maxHeight);
|
|
80
|
-
}
|
|
81
|
-
return { resize, rowRange };
|
|
82
|
-
}
|
|
83
|
-
function getRowRange(rows) {
|
|
84
|
-
if (rows === undefined) {
|
|
85
|
-
return { min: 3, max: 3 };
|
|
86
|
-
}
|
|
87
|
-
else if (typeof rows === "object") {
|
|
88
|
-
return { min: rows.min, max: rows.max };
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
return { min: rows, max: rows };
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
function InputTextInternal(props, ref) {
|
|
96
|
-
const inputRef = useRef(null);
|
|
97
|
-
const actionsRef = useRef(null);
|
|
98
|
-
const wrapperRef = useRef(null);
|
|
99
|
-
const { resize, rowRange } = useTextAreaResize({
|
|
100
|
-
rows: props.rows,
|
|
101
|
-
value: props.value,
|
|
102
|
-
inputRef,
|
|
103
|
-
wrapperRef,
|
|
104
|
-
});
|
|
105
|
-
useImperativeHandle(ref, () => ({
|
|
106
|
-
insert: (text) => {
|
|
107
|
-
insertText(text);
|
|
108
|
-
},
|
|
109
|
-
blur: () => {
|
|
110
|
-
const input = inputRef.current;
|
|
111
|
-
if (input) {
|
|
112
|
-
input.blur();
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
focus: () => {
|
|
116
|
-
const input = inputRef.current;
|
|
117
|
-
if (input) {
|
|
118
|
-
input.focus();
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
scrollIntoView: arg => {
|
|
122
|
-
const input = inputRef.current;
|
|
123
|
-
if (input) {
|
|
124
|
-
input.scrollIntoView(arg);
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
|
-
}));
|
|
128
|
-
return (React.createElement(FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
|
|
129
|
-
function handleChange(newValue) {
|
|
130
|
-
props.onChange && props.onChange(newValue);
|
|
131
|
-
resize();
|
|
132
|
-
}
|
|
133
|
-
function insertText(text) {
|
|
134
|
-
var _a;
|
|
135
|
-
const input = inputRef.current;
|
|
136
|
-
if (input) {
|
|
137
|
-
insertAtCursor(input, text);
|
|
138
|
-
const newValue = input.value;
|
|
139
|
-
(_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(newValue);
|
|
140
|
-
props.onChange && props.onChange(newValue);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
const InputText$1 = forwardRef(InputTextInternal);
|
|
145
|
-
function insertAtCursor(input, newText) {
|
|
146
|
-
const start = input.selectionStart || 0;
|
|
147
|
-
const end = input.selectionEnd || 0;
|
|
148
|
-
const text = input.value;
|
|
149
|
-
const before = text.substring(0, start);
|
|
150
|
-
const after = text.substring(end, text.length);
|
|
151
|
-
input.value = before + newText + after;
|
|
152
|
-
input.selectionStart = input.selectionEnd = start + newText.length;
|
|
153
|
-
input.focus();
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
|
|
158
|
-
* DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
|
|
159
|
-
*/
|
|
160
|
-
function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, }) {
|
|
161
|
-
function handleClear() {
|
|
162
|
-
var _a;
|
|
163
|
-
handleBlur();
|
|
164
|
-
onChange && onChange("");
|
|
165
|
-
(_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
166
|
-
}
|
|
167
|
-
function handleChange(event) {
|
|
168
|
-
const newValue = event.currentTarget.value;
|
|
169
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
|
|
170
|
-
}
|
|
171
|
-
function handleKeyDown(event) {
|
|
172
|
-
if (!onEnter)
|
|
173
|
-
return;
|
|
174
|
-
if (event.key !== "Enter")
|
|
175
|
-
return;
|
|
176
|
-
if (event.shiftKey || event.ctrlKey)
|
|
177
|
-
return;
|
|
178
|
-
event.preventDefault();
|
|
179
|
-
onEnter && onEnter(event);
|
|
180
|
-
}
|
|
181
|
-
function handleFocus(event) {
|
|
182
|
-
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
183
|
-
}
|
|
184
|
-
function handleBlur(event) {
|
|
185
|
-
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
186
|
-
}
|
|
187
|
-
return {
|
|
188
|
-
handleClear,
|
|
189
|
-
handleChange,
|
|
190
|
-
handleKeyDown,
|
|
191
|
-
handleFocus,
|
|
192
|
-
handleBlur,
|
|
193
|
-
};
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* Provides the props for the html fields rendered by the html input.
|
|
198
|
-
* DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
|
|
199
|
-
*/
|
|
200
|
-
function useInputTextFormField(_a) {
|
|
201
|
-
var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = __rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
|
|
202
|
-
const descriptionIdentifier = `descriptionUUID--${id}`;
|
|
203
|
-
const fieldProps = Object.assign(Object.assign(Object.assign({ id, className: styles.input, name, disabled: rest.disabled, inputMode: rest.inputMode, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }, (description &&
|
|
204
|
-
!inline && { "aria-describedby": descriptionIdentifier })), { "aria-invalid": rest["aria-invalid"] || error || rest.invalid ? true : undefined, autoFocus: rest.autoFocus, invalid: error || rest.invalid ? "true" : undefined, onKeyDown: handleKeyDown }), rest);
|
|
205
|
-
return { fieldProps, descriptionIdentifier };
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRefs) {
|
|
209
|
-
var _a, _b, _c;
|
|
210
|
-
const inputTextRef = React.useRef(null);
|
|
211
|
-
const wrapperRef = React.useRef(null);
|
|
212
|
-
const legacyPropHelper = Object.assign(Object.assign({}, props), { version: 1 });
|
|
213
|
-
const id = useId();
|
|
214
|
-
const { rowRange } = useTextAreaResize({
|
|
215
|
-
rows: props.rows,
|
|
216
|
-
value: props.value,
|
|
217
|
-
inputRef: inputTextRef,
|
|
218
|
-
wrapperRef: wrapperRef,
|
|
219
|
-
});
|
|
220
|
-
const type = props.multiline ? "textarea" : "text";
|
|
221
|
-
const { inputStyle } = useFormFieldWrapperStyles(legacyPropHelper);
|
|
222
|
-
const { name } = useAtlantisFormFieldName({
|
|
223
|
-
nameProp: props.name,
|
|
224
|
-
id: props.id || id,
|
|
225
|
-
});
|
|
226
|
-
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputTextActions({
|
|
227
|
-
onChange: props.onChange,
|
|
228
|
-
onBlur: props.onBlur,
|
|
229
|
-
onFocus: props.onFocus,
|
|
230
|
-
onEnter: props.onEnter,
|
|
231
|
-
inputRef: inputTextRef,
|
|
232
|
-
});
|
|
233
|
-
const inputProps = omit(props, [
|
|
234
|
-
"onChange",
|
|
235
|
-
"onBlur",
|
|
236
|
-
"onFocus",
|
|
237
|
-
"onEnter",
|
|
238
|
-
"size",
|
|
239
|
-
"placeholder",
|
|
240
|
-
"multiline",
|
|
241
|
-
"prefix",
|
|
242
|
-
"suffix",
|
|
243
|
-
"version",
|
|
244
|
-
]);
|
|
245
|
-
const { fieldProps, descriptionIdentifier } = useInputTextFormField(Object.assign(Object.assign({}, inputProps), { id,
|
|
246
|
-
name,
|
|
247
|
-
handleChange,
|
|
248
|
-
handleBlur,
|
|
249
|
-
handleFocus,
|
|
250
|
-
handleKeyDown }));
|
|
251
|
-
return (React.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autoFocus, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
|
|
252
|
-
React.createElement(React.Fragment, null,
|
|
253
|
-
type === "textarea" ? (React.createElement(TextArea, { fieldProps: fieldProps, rowRange: rowRange, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })) : (React.createElement(TextInput, { fieldProps: fieldProps, inputRefs: [inputRefs, inputTextRef], value: props.value, inputStyle: inputStyle })),
|
|
254
|
-
React.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
|
|
255
|
-
props.children)));
|
|
256
|
-
});
|
|
257
|
-
function TextArea({ fieldProps, rowRange, inputRefs, value, inputStyle, }) {
|
|
258
|
-
return (React.createElement("textarea", Object.assign({}, fieldProps, { rows: rowRange.min, ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
|
|
259
|
-
}
|
|
260
|
-
function TextInput({ fieldProps, inputRefs, value, inputStyle, }) {
|
|
261
|
-
return (React.createElement("input", Object.assign({}, fieldProps, { ref: mergeRefs(inputRefs), className: inputStyle, value: value })));
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
function isNewInputTextProps(props) {
|
|
265
|
-
return props.version === 2;
|
|
266
|
-
}
|
|
267
|
-
const InputText = forwardRef(function InputTextShim(props, ref) {
|
|
268
|
-
if (isNewInputTextProps(props)) {
|
|
269
|
-
return (React.createElement(InputTextSPAR, Object.assign({}, props, { ref: ref })));
|
|
270
|
-
}
|
|
271
|
-
else {
|
|
272
|
-
return (React.createElement(InputText$1, Object.assign({}, props, { ref: ref })));
|
|
273
|
-
}
|
|
274
|
-
});
|
|
275
|
-
|
|
276
|
-
export { InputText };
|
|
16
|
+
import '../tslib.es6-es.js';
|
|
17
|
+
import 'react-hook-form';
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
|
|
5
|
+
var FormField = require('./FormField-cjs.js');
|
|
6
|
+
require('./tslib.es6-cjs.js');
|
|
7
|
+
require('react-hook-form');
|
|
8
|
+
require('framer-motion');
|
|
9
|
+
require('@jobber/design');
|
|
10
|
+
require('classnames');
|
|
11
|
+
require('react-router-dom');
|
|
12
|
+
|
|
13
|
+
function InputTextInternal(props, ref) {
|
|
14
|
+
const inputRef = React.useRef(null);
|
|
15
|
+
const actionsRef = React.useRef(null);
|
|
16
|
+
const wrapperRef = React.useRef(null);
|
|
17
|
+
const rowRange = getRowRange();
|
|
18
|
+
React.useImperativeHandle(ref, () => ({
|
|
19
|
+
insert: (text) => {
|
|
20
|
+
insertText(text);
|
|
21
|
+
},
|
|
22
|
+
blur: () => {
|
|
23
|
+
const input = inputRef.current;
|
|
24
|
+
if (input) {
|
|
25
|
+
input.blur();
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
focus: () => {
|
|
29
|
+
const input = inputRef.current;
|
|
30
|
+
if (input) {
|
|
31
|
+
input.focus();
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
scrollIntoView: arg => {
|
|
35
|
+
const input = inputRef.current;
|
|
36
|
+
if (input) {
|
|
37
|
+
input.scrollIntoView(arg);
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
}));
|
|
41
|
+
const resize = useAutoResize(inputRef, wrapperRef, rowRange, props.value);
|
|
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 })));
|
|
43
|
+
function handleChange(newValue) {
|
|
44
|
+
props.onChange && props.onChange(newValue);
|
|
45
|
+
if (inputRef &&
|
|
46
|
+
inputRef.current instanceof HTMLTextAreaElement &&
|
|
47
|
+
wrapperRef &&
|
|
48
|
+
(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
|
|
49
|
+
resize(inputRef.current, wrapperRef.current);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
function getRowRange() {
|
|
53
|
+
if (props.rows === undefined) {
|
|
54
|
+
return { min: 3, max: 3 };
|
|
55
|
+
}
|
|
56
|
+
else if (typeof props.rows === "object") {
|
|
57
|
+
return { min: props.rows.min, max: props.rows.max };
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
return { min: props.rows, max: props.rows };
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
function insertText(text) {
|
|
64
|
+
var _a;
|
|
65
|
+
const input = inputRef.current;
|
|
66
|
+
if (input) {
|
|
67
|
+
insertAtCursor(input, text);
|
|
68
|
+
const newValue = input.value;
|
|
69
|
+
(_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(newValue);
|
|
70
|
+
props.onChange && props.onChange(newValue);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
const InputText = React.forwardRef(InputTextInternal);
|
|
75
|
+
function insertAtCursor(input, newText) {
|
|
76
|
+
const start = input.selectionStart || 0;
|
|
77
|
+
const end = input.selectionEnd || 0;
|
|
78
|
+
const text = input.value;
|
|
79
|
+
const before = text.substring(0, start);
|
|
80
|
+
const after = text.substring(end, text.length);
|
|
81
|
+
input.value = before + newText + after;
|
|
82
|
+
input.selectionStart = input.selectionEnd = start + newText.length;
|
|
83
|
+
input.focus();
|
|
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
|
+
}
|
|
128
|
+
|
|
129
|
+
exports.InputText = InputText;
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
2
|
+
import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
|
|
3
|
+
import { e as FormField } from './FormField-es.js';
|
|
4
|
+
import './tslib.es6-es.js';
|
|
5
|
+
import 'react-hook-form';
|
|
6
|
+
import 'framer-motion';
|
|
7
|
+
import '@jobber/design';
|
|
8
|
+
import 'classnames';
|
|
9
|
+
import 'react-router-dom';
|
|
10
|
+
|
|
11
|
+
function InputTextInternal(props, ref) {
|
|
12
|
+
const inputRef = useRef(null);
|
|
13
|
+
const actionsRef = useRef(null);
|
|
14
|
+
const wrapperRef = useRef(null);
|
|
15
|
+
const rowRange = getRowRange();
|
|
16
|
+
useImperativeHandle(ref, () => ({
|
|
17
|
+
insert: (text) => {
|
|
18
|
+
insertText(text);
|
|
19
|
+
},
|
|
20
|
+
blur: () => {
|
|
21
|
+
const input = inputRef.current;
|
|
22
|
+
if (input) {
|
|
23
|
+
input.blur();
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
focus: () => {
|
|
27
|
+
const input = inputRef.current;
|
|
28
|
+
if (input) {
|
|
29
|
+
input.focus();
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
scrollIntoView: arg => {
|
|
33
|
+
const input = inputRef.current;
|
|
34
|
+
if (input) {
|
|
35
|
+
input.scrollIntoView(arg);
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
}));
|
|
39
|
+
const resize = useAutoResize(inputRef, wrapperRef, rowRange, props.value);
|
|
40
|
+
return (React.createElement(FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
|
|
41
|
+
function handleChange(newValue) {
|
|
42
|
+
props.onChange && props.onChange(newValue);
|
|
43
|
+
if (inputRef &&
|
|
44
|
+
inputRef.current instanceof HTMLTextAreaElement &&
|
|
45
|
+
wrapperRef &&
|
|
46
|
+
(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
|
|
47
|
+
resize(inputRef.current, wrapperRef.current);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
function getRowRange() {
|
|
51
|
+
if (props.rows === undefined) {
|
|
52
|
+
return { min: 3, max: 3 };
|
|
53
|
+
}
|
|
54
|
+
else if (typeof props.rows === "object") {
|
|
55
|
+
return { min: props.rows.min, max: props.rows.max };
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
return { min: props.rows, max: props.rows };
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
function insertText(text) {
|
|
62
|
+
var _a;
|
|
63
|
+
const input = inputRef.current;
|
|
64
|
+
if (input) {
|
|
65
|
+
insertAtCursor(input, text);
|
|
66
|
+
const newValue = input.value;
|
|
67
|
+
(_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(newValue);
|
|
68
|
+
props.onChange && props.onChange(newValue);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
const InputText = forwardRef(InputTextInternal);
|
|
73
|
+
function insertAtCursor(input, newText) {
|
|
74
|
+
const start = input.selectionStart || 0;
|
|
75
|
+
const end = input.selectionEnd || 0;
|
|
76
|
+
const text = input.value;
|
|
77
|
+
const before = text.substring(0, start);
|
|
78
|
+
const after = text.substring(end, text.length);
|
|
79
|
+
input.value = before + newText + after;
|
|
80
|
+
input.selectionStart = input.selectionEnd = start + newText.length;
|
|
81
|
+
input.focus();
|
|
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
|
+
}
|
|
126
|
+
|
|
127
|
+
export { InputText as I };
|
package/dist/List/index.cjs
CHANGED
|
@@ -8,9 +8,9 @@ require('../identity-cjs.js');
|
|
|
8
8
|
require('../isTypedArray-cjs.js');
|
|
9
9
|
require('../isObjectLike-cjs.js');
|
|
10
10
|
require('../_commonjsHelpers-cjs.js');
|
|
11
|
-
require('../
|
|
12
|
-
require('../_getTag-cjs.js');
|
|
11
|
+
require('../_getAllKeys-cjs.js');
|
|
13
12
|
require('../isSymbol-cjs.js');
|
|
13
|
+
require('../_getTag-cjs.js');
|
|
14
14
|
require('../_baseFor-cjs.js');
|
|
15
15
|
require('../_baseAssignValue-cjs.js');
|
|
16
16
|
require('../Typography-cjs.js');
|
package/dist/List/index.mjs
CHANGED
|
@@ -6,9 +6,9 @@ import '../identity-es.js';
|
|
|
6
6
|
import '../isTypedArray-es.js';
|
|
7
7
|
import '../isObjectLike-es.js';
|
|
8
8
|
import '../_commonjsHelpers-es.js';
|
|
9
|
-
import '../
|
|
10
|
-
import '../_getTag-es.js';
|
|
9
|
+
import '../_getAllKeys-es.js';
|
|
11
10
|
import '../isSymbol-es.js';
|
|
11
|
+
import '../_getTag-es.js';
|
|
12
12
|
import '../_baseFor-es.js';
|
|
13
13
|
import '../_baseAssignValue-es.js';
|
|
14
14
|
import '../Typography-es.js';
|
package/dist/_baseEach-cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var identity$1 = require('./identity-cjs.js');
|
|
4
4
|
var isObjectLike$1 = require('./isObjectLike-cjs.js');
|
|
5
|
-
var
|
|
5
|
+
var _getAllKeys = require('./_getAllKeys-cjs.js');
|
|
6
6
|
var _getTag = require('./_getTag-cjs.js');
|
|
7
7
|
var isTypedArray$1 = require('./isTypedArray-cjs.js');
|
|
8
8
|
var _commonjsHelpers = require('./_commonjsHelpers-cjs.js');
|
|
@@ -351,7 +351,7 @@ function equalByTag$1(object, other, tag, bitmask, customizer, equalFunc, stack)
|
|
|
351
351
|
|
|
352
352
|
var _equalByTag = equalByTag$1;
|
|
353
353
|
|
|
354
|
-
var getAllKeys =
|
|
354
|
+
var getAllKeys = _getAllKeys._getAllKeys;
|
|
355
355
|
|
|
356
356
|
/** Used to compose bitmasks for value comparisons. */
|
|
357
357
|
var COMPARE_PARTIAL_FLAG$3 = 1;
|
|
@@ -635,7 +635,7 @@ function isStrictComparable$2(value) {
|
|
|
635
635
|
var _isStrictComparable = isStrictComparable$2;
|
|
636
636
|
|
|
637
637
|
var isStrictComparable$1 = _isStrictComparable,
|
|
638
|
-
keys$1 =
|
|
638
|
+
keys$1 = _getAllKeys.keys_1;
|
|
639
639
|
|
|
640
640
|
/**
|
|
641
641
|
* Gets the property names, values, and compare flags of `object`.
|
|
@@ -704,7 +704,7 @@ function baseMatches$1(source) {
|
|
|
704
704
|
|
|
705
705
|
var _baseMatches = baseMatches$1;
|
|
706
706
|
|
|
707
|
-
var baseGet$1 =
|
|
707
|
+
var baseGet$1 = _getAllKeys._baseGet;
|
|
708
708
|
|
|
709
709
|
/**
|
|
710
710
|
* Gets the value at `path` of `object`. If the resolved value is
|
|
@@ -755,12 +755,12 @@ function baseHasIn$1(object, key) {
|
|
|
755
755
|
|
|
756
756
|
var _baseHasIn = baseHasIn$1;
|
|
757
757
|
|
|
758
|
-
var castPath =
|
|
758
|
+
var castPath = _getAllKeys._castPath,
|
|
759
759
|
isArguments = isTypedArray$1.isArguments_1,
|
|
760
760
|
isArray$1 = isTypedArray$1.isArray_1,
|
|
761
761
|
isIndex = identity$1._isIndex,
|
|
762
762
|
isLength = isTypedArray$1.isLength_1,
|
|
763
|
-
toKey$2 =
|
|
763
|
+
toKey$2 = _getAllKeys._toKey;
|
|
764
764
|
|
|
765
765
|
/**
|
|
766
766
|
* Checks if `path` exists on `object`.
|
|
@@ -833,10 +833,10 @@ var hasIn_1 = hasIn$1;
|
|
|
833
833
|
var baseIsEqual = _baseIsEqual,
|
|
834
834
|
get = get_1,
|
|
835
835
|
hasIn = hasIn_1,
|
|
836
|
-
isKey$1 =
|
|
836
|
+
isKey$1 = _getAllKeys._isKey,
|
|
837
837
|
isStrictComparable = _isStrictComparable,
|
|
838
838
|
matchesStrictComparable = _matchesStrictComparable,
|
|
839
|
-
toKey$1 =
|
|
839
|
+
toKey$1 = _getAllKeys._toKey;
|
|
840
840
|
|
|
841
841
|
/** Used to compose bitmasks for value comparisons. */
|
|
842
842
|
var COMPARE_PARTIAL_FLAG = 1,
|
|
@@ -880,7 +880,7 @@ function baseProperty$1(key) {
|
|
|
880
880
|
|
|
881
881
|
var _baseProperty = baseProperty$1;
|
|
882
882
|
|
|
883
|
-
var baseGet =
|
|
883
|
+
var baseGet = _getAllKeys._baseGet;
|
|
884
884
|
|
|
885
885
|
/**
|
|
886
886
|
* A specialized version of `baseProperty` which supports deep paths.
|
|
@@ -899,8 +899,8 @@ var _basePropertyDeep = basePropertyDeep$1;
|
|
|
899
899
|
|
|
900
900
|
var baseProperty = _baseProperty,
|
|
901
901
|
basePropertyDeep = _basePropertyDeep,
|
|
902
|
-
isKey =
|
|
903
|
-
toKey =
|
|
902
|
+
isKey = _getAllKeys._isKey,
|
|
903
|
+
toKey = _getAllKeys._toKey;
|
|
904
904
|
|
|
905
905
|
/**
|
|
906
906
|
* Creates a function that returns the value at `path` of a given object.
|
|
@@ -963,7 +963,7 @@ function baseIteratee(value) {
|
|
|
963
963
|
var _baseIteratee = baseIteratee;
|
|
964
964
|
|
|
965
965
|
var baseFor = _baseFor._baseFor,
|
|
966
|
-
keys =
|
|
966
|
+
keys = _getAllKeys.keys_1;
|
|
967
967
|
|
|
968
968
|
/**
|
|
969
969
|
* The base implementation of `_.forOwn` without support for iteratee shorthands.
|
package/dist/_baseEach-es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { f as _MapCache, c as _Uint8Array, e as eq_1, b as _Stack, a as _isIndex, i as identity_1 } from './identity-es.js';
|
|
2
2
|
import { b as _Symbol, a as isObjectLike_1, i as isObject_1 } from './isObjectLike-es.js';
|
|
3
|
-
import {
|
|
3
|
+
import { c as _getAllKeys, k as keys_1, b as _baseGet, d as _castPath, e as _toKey, f as _isKey } from './_getAllKeys-es.js';
|
|
4
4
|
import { a as _getTag } from './_getTag-es.js';
|
|
5
|
-
import { c as isBufferExports, d as isTypedArray_1, a as isArray_1, i as isArguments_1,
|
|
5
|
+
import { c as isBufferExports, d as isTypedArray_1, a as isArray_1, i as isArguments_1, l as isLength_1, b as isArrayLike_1 } from './isTypedArray-es.js';
|
|
6
6
|
import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
|
|
7
7
|
import { _ as _baseFor } from './_baseFor-es.js';
|
|
8
8
|
|
package/dist/_baseFlatten-cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _getAllKeys = require('./_getAllKeys-cjs.js');
|
|
4
4
|
var isObjectLike = require('./isObjectLike-cjs.js');
|
|
5
5
|
var isTypedArray = require('./isTypedArray-cjs.js');
|
|
6
6
|
|
|
@@ -25,7 +25,7 @@ function isFlattenable$1(value) {
|
|
|
25
25
|
|
|
26
26
|
var _isFlattenable = isFlattenable$1;
|
|
27
27
|
|
|
28
|
-
var arrayPush =
|
|
28
|
+
var arrayPush = _getAllKeys._arrayPush,
|
|
29
29
|
isFlattenable = _isFlattenable;
|
|
30
30
|
|
|
31
31
|
/**
|