@jobber/components 6.11.0 → 6.11.1
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/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/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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ChangeEvent, ReactNode, RefObject } from "react";
|
|
2
2
|
import { RegisterOptions } from "react-hook-form";
|
|
3
3
|
import { XOR } from "ts-xor";
|
|
4
4
|
import { Clearable } from "@jobber/hooks/src/useShowClear";
|
|
@@ -156,11 +156,11 @@ export interface FormFieldProps extends CommonFormFieldProps {
|
|
|
156
156
|
/**
|
|
157
157
|
* Focus callback.
|
|
158
158
|
*/
|
|
159
|
-
onFocus?(
|
|
159
|
+
onFocus?(): void;
|
|
160
160
|
/**
|
|
161
161
|
* Blur callback.
|
|
162
162
|
*/
|
|
163
|
-
onBlur?(
|
|
163
|
+
onBlur?(): void;
|
|
164
164
|
onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
|
|
165
165
|
/**
|
|
166
166
|
* Exclusively for textareas. Specifies the visible height of a textarea.
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { RefObject } from "react";
|
|
2
2
|
import { FormFieldProps } from "../FormFieldTypes";
|
|
3
3
|
export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "max" | "maxLength" | "type" | "disabled" | "inline"> {
|
|
4
|
-
readonly error
|
|
5
|
-
suffixRef
|
|
6
|
-
prefixRef
|
|
4
|
+
readonly error: string;
|
|
5
|
+
suffixRef: RefObject<HTMLDivElement>;
|
|
6
|
+
prefixRef: RefObject<HTMLDivElement>;
|
|
7
7
|
}
|
|
8
8
|
export interface LabelPadding {
|
|
9
9
|
paddingLeft: number | string | undefined;
|
package/dist/FormField-cjs.js
CHANGED
|
@@ -132,8 +132,8 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
|
|
|
132
132
|
setLabelStyle(getAffixPaddding({
|
|
133
133
|
value,
|
|
134
134
|
type,
|
|
135
|
-
prefixWidth: ((_a = prefixRef
|
|
136
|
-
suffixWidth: ((_b = suffixRef
|
|
135
|
+
prefixWidth: ((_a = prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
|
|
136
|
+
suffixWidth: ((_b = suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
|
|
137
137
|
}));
|
|
138
138
|
}, [value]);
|
|
139
139
|
return {
|
|
@@ -451,10 +451,7 @@ function setAutocomplete(autocompleteSetting) {
|
|
|
451
451
|
}
|
|
452
452
|
|
|
453
453
|
exports.FormField = FormField;
|
|
454
|
-
exports.FormFieldPostFix = FormFieldPostFix;
|
|
455
454
|
exports.FormFieldWrapper = FormFieldWrapper;
|
|
456
|
-
exports.mergeRefs = mergeRefs;
|
|
457
|
-
exports.styles = styles$1;
|
|
458
455
|
exports.useAtlantisFormField = useAtlantisFormField;
|
|
459
456
|
exports.useAtlantisFormFieldActions = useAtlantisFormFieldActions;
|
|
460
457
|
exports.useAtlantisFormFieldName = useAtlantisFormFieldName;
|
package/dist/FormField-es.js
CHANGED
|
@@ -130,8 +130,8 @@ function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, e
|
|
|
130
130
|
setLabelStyle(getAffixPaddding({
|
|
131
131
|
value,
|
|
132
132
|
type,
|
|
133
|
-
prefixWidth: ((_a = prefixRef
|
|
134
|
-
suffixWidth: ((_b = suffixRef
|
|
133
|
+
prefixWidth: ((_a = prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
|
|
134
|
+
suffixWidth: ((_b = suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
|
|
135
135
|
}));
|
|
136
136
|
}, [value]);
|
|
137
137
|
return {
|
|
@@ -448,4 +448,4 @@ function setAutocomplete(autocompleteSetting) {
|
|
|
448
448
|
return autocompleteSetting;
|
|
449
449
|
}
|
|
450
450
|
|
|
451
|
-
export { FormFieldWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, useFormFieldWrapperStyles as d, FormField as e,
|
|
451
|
+
export { FormFieldWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, useFormFieldWrapperStyles as d, FormField as e, useAtlantisFormField as u };
|
package/dist/InputDate/index.cjs
CHANGED
|
@@ -1,39 +1,38 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var InputDate = require('../InputDate-cjs.js');
|
|
4
|
-
require('../
|
|
4
|
+
require('../DatePicker-cjs.js');
|
|
5
|
+
require('react');
|
|
6
|
+
require('classnames');
|
|
7
|
+
require('../index-cjs.js');
|
|
5
8
|
require('../_commonjsHelpers-cjs.js');
|
|
6
|
-
require('
|
|
9
|
+
require('react-dom');
|
|
10
|
+
require('react-popper');
|
|
11
|
+
require('../useRefocusOnActivator-cjs.js');
|
|
12
|
+
require('../Typography-cjs.js');
|
|
13
|
+
require('../Button-cjs.js');
|
|
14
|
+
require('react-router-dom');
|
|
15
|
+
require('../Icon-cjs.js');
|
|
16
|
+
require('@jobber/design');
|
|
17
|
+
require('../_getAllKeys-cjs.js');
|
|
7
18
|
require('../isTypedArray-cjs.js');
|
|
8
19
|
require('../isObjectLike-cjs.js');
|
|
20
|
+
require('../isSymbol-cjs.js');
|
|
9
21
|
require('../identity-cjs.js');
|
|
10
22
|
require('../_getTag-cjs.js');
|
|
11
|
-
require('../isSymbol-cjs.js');
|
|
12
23
|
require('../keysIn-cjs.js');
|
|
13
24
|
require('../_baseAssignValue-cjs.js');
|
|
14
25
|
require('../_baseFlatten-cjs.js');
|
|
15
26
|
require('../_setToString-cjs.js');
|
|
16
|
-
require('
|
|
27
|
+
require('../AtlantisContext-cjs.js');
|
|
17
28
|
require('../FormField-cjs.js');
|
|
18
29
|
require('framer-motion');
|
|
19
|
-
require('@jobber/design');
|
|
20
|
-
require('classnames');
|
|
21
|
-
require('../Button-cjs.js');
|
|
22
|
-
require('react-router-dom');
|
|
23
|
-
require('../Icon-cjs.js');
|
|
24
|
-
require('../Typography-cjs.js');
|
|
25
30
|
require('../Text-cjs.js');
|
|
26
31
|
require('../useFormFieldFocus-cjs.js');
|
|
27
32
|
require('../InputValidation-cjs.js');
|
|
28
33
|
require('../Spinner-cjs.js');
|
|
29
34
|
require('../tslib.es6-cjs.js');
|
|
30
35
|
require('react-hook-form');
|
|
31
|
-
require('../DatePicker-cjs.js');
|
|
32
|
-
require('../index-cjs.js');
|
|
33
|
-
require('react-dom');
|
|
34
|
-
require('react-popper');
|
|
35
|
-
require('../useRefocusOnActivator-cjs.js');
|
|
36
|
-
require('../AtlantisContext-cjs.js');
|
|
37
36
|
|
|
38
37
|
|
|
39
38
|
|
package/dist/InputDate/index.mjs
CHANGED
|
@@ -1,34 +1,33 @@
|
|
|
1
1
|
export { I as InputDate } from '../InputDate-es.js';
|
|
2
|
-
import '../
|
|
2
|
+
import '../DatePicker-es.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
import 'classnames';
|
|
5
|
+
import '../index-es.js';
|
|
3
6
|
import '../_commonjsHelpers-es.js';
|
|
4
|
-
import '
|
|
7
|
+
import 'react-dom';
|
|
8
|
+
import 'react-popper';
|
|
9
|
+
import '../useRefocusOnActivator-es.js';
|
|
10
|
+
import '../Typography-es.js';
|
|
11
|
+
import '../Button-es.js';
|
|
12
|
+
import 'react-router-dom';
|
|
13
|
+
import '../Icon-es.js';
|
|
14
|
+
import '@jobber/design';
|
|
15
|
+
import '../_getAllKeys-es.js';
|
|
5
16
|
import '../isTypedArray-es.js';
|
|
6
17
|
import '../isObjectLike-es.js';
|
|
18
|
+
import '../isSymbol-es.js';
|
|
7
19
|
import '../identity-es.js';
|
|
8
20
|
import '../_getTag-es.js';
|
|
9
|
-
import '../isSymbol-es.js';
|
|
10
21
|
import '../keysIn-es.js';
|
|
11
22
|
import '../_baseAssignValue-es.js';
|
|
12
23
|
import '../_baseFlatten-es.js';
|
|
13
24
|
import '../_setToString-es.js';
|
|
14
|
-
import '
|
|
25
|
+
import '../AtlantisContext-es.js';
|
|
15
26
|
import '../FormField-es.js';
|
|
16
27
|
import 'framer-motion';
|
|
17
|
-
import '@jobber/design';
|
|
18
|
-
import 'classnames';
|
|
19
|
-
import '../Button-es.js';
|
|
20
|
-
import 'react-router-dom';
|
|
21
|
-
import '../Icon-es.js';
|
|
22
|
-
import '../Typography-es.js';
|
|
23
28
|
import '../Text-es.js';
|
|
24
29
|
import '../useFormFieldFocus-es.js';
|
|
25
30
|
import '../InputValidation-es.js';
|
|
26
31
|
import '../Spinner-es.js';
|
|
27
32
|
import '../tslib.es6-es.js';
|
|
28
33
|
import 'react-hook-form';
|
|
29
|
-
import '../DatePicker-es.js';
|
|
30
|
-
import '../index-es.js';
|
|
31
|
-
import 'react-dom';
|
|
32
|
-
import 'react-popper';
|
|
33
|
-
import '../useRefocusOnActivator-es.js';
|
|
34
|
-
import '../AtlantisContext-es.js';
|
package/dist/InputDate-cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var DatePicker = require('./DatePicker-cjs.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var FormField = require('./FormField-cjs.js');
|
|
6
6
|
require('./tslib.es6-cjs.js');
|
|
@@ -9,13 +9,12 @@ require('framer-motion');
|
|
|
9
9
|
require('@jobber/design');
|
|
10
10
|
require('classnames');
|
|
11
11
|
require('react-router-dom');
|
|
12
|
-
var DatePicker = require('./DatePicker-cjs.js');
|
|
13
12
|
|
|
14
13
|
function InputDate(inputProps) {
|
|
15
14
|
const formFieldActionsRef = React.useRef(null);
|
|
16
15
|
return (React.createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
|
|
17
16
|
const { onChange, onClick, value } = activatorProps;
|
|
18
|
-
const newActivatorProps =
|
|
17
|
+
const newActivatorProps = DatePicker.omit(activatorProps, ["activator"]);
|
|
19
18
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
20
19
|
const suffix = inputProps.showIcon !== false
|
|
21
20
|
? {
|
package/dist/InputDate-es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { o as omit } from './
|
|
1
|
+
import { D as DatePicker, o as omit } from './DatePicker-es.js';
|
|
2
2
|
import React, { useRef, useState, useEffect } from 'react';
|
|
3
3
|
import { e as FormField } from './FormField-es.js';
|
|
4
4
|
import './tslib.es6-es.js';
|
|
@@ -7,7 +7,6 @@ import 'framer-motion';
|
|
|
7
7
|
import '@jobber/design';
|
|
8
8
|
import 'classnames';
|
|
9
9
|
import 'react-router-dom';
|
|
10
|
-
import { D as DatePicker } from './DatePicker-es.js';
|
|
11
10
|
|
|
12
11
|
function InputDate(inputProps) {
|
|
13
12
|
const formFieldActionsRef = useRef(null);
|
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { XOR } from "ts-xor";
|
|
3
|
+
export interface RowRange {
|
|
4
|
+
min: number;
|
|
5
|
+
max: number;
|
|
6
|
+
}
|
|
7
|
+
export interface InputTextRef {
|
|
8
|
+
insert(text: string): void;
|
|
9
|
+
blur(): void;
|
|
10
|
+
focus(): void;
|
|
11
|
+
scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
|
|
12
|
+
}
|
|
3
13
|
export declare const InputText: React.ForwardRefExoticComponent<({
|
|
4
14
|
readonly multiline: true;
|
|
5
|
-
readonly rows?: (number |
|
|
15
|
+
readonly rows?: (number | RowRange) | undefined;
|
|
6
16
|
readonly align?: ("center" | "right") | undefined;
|
|
7
17
|
readonly description?: string | undefined;
|
|
8
18
|
readonly disabled?: boolean | undefined;
|
|
@@ -15,10 +25,10 @@ export declare const InputText: React.ForwardRefExoticComponent<({
|
|
|
15
25
|
readonly placeholder?: string | undefined;
|
|
16
26
|
readonly size?: ("small" | "large") | undefined;
|
|
17
27
|
readonly value?: (string | number | Date) | undefined;
|
|
18
|
-
readonly clearable?: import("@jobber/hooks/src").Clearable | undefined;
|
|
28
|
+
readonly clearable?: import("@jobber/hooks/src/useShowClear").Clearable | undefined;
|
|
19
29
|
version?: 1 | undefined;
|
|
20
|
-
onFocus?: ((
|
|
21
|
-
onBlur?: ((
|
|
30
|
+
onFocus?: (() => void) | undefined;
|
|
31
|
+
onBlur?: (() => void) | undefined;
|
|
22
32
|
readonly toolbar?: React.ReactNode;
|
|
23
33
|
readonly defaultValue?: (string | Date) | undefined;
|
|
24
34
|
readonly prefix?: import("../FormField").Affix | undefined;
|
|
@@ -27,7 +37,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
|
|
|
27
37
|
inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
|
|
28
38
|
readonly keyboard?: ("numeric" | "decimal") | undefined;
|
|
29
39
|
readonly maxLength?: number | undefined;
|
|
30
|
-
readonly suffix?:
|
|
40
|
+
readonly suffix?: XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
|
|
31
41
|
onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
|
|
32
42
|
readonly readonly?: boolean | undefined;
|
|
33
43
|
readonly validations?: import("react-hook-form").RegisterOptions | undefined;
|
|
@@ -47,10 +57,10 @@ export declare const InputText: React.ForwardRefExoticComponent<({
|
|
|
47
57
|
readonly placeholder?: string | undefined;
|
|
48
58
|
readonly size?: ("small" | "large") | undefined;
|
|
49
59
|
readonly value?: (string | number | Date) | undefined;
|
|
50
|
-
readonly clearable?: import("@jobber/hooks/src").Clearable | undefined;
|
|
60
|
+
readonly clearable?: import("@jobber/hooks/src/useShowClear").Clearable | undefined;
|
|
51
61
|
version?: 1 | undefined;
|
|
52
|
-
onFocus?: ((
|
|
53
|
-
onBlur?: ((
|
|
62
|
+
onFocus?: (() => void) | undefined;
|
|
63
|
+
onBlur?: (() => void) | undefined;
|
|
54
64
|
readonly toolbar?: React.ReactNode;
|
|
55
65
|
readonly defaultValue?: (string | Date) | undefined;
|
|
56
66
|
readonly prefix?: import("../FormField").Affix | undefined;
|
|
@@ -59,7 +69,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
|
|
|
59
69
|
inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
|
|
60
70
|
readonly keyboard?: ("numeric" | "decimal") | undefined;
|
|
61
71
|
readonly maxLength?: number | undefined;
|
|
62
|
-
readonly suffix?:
|
|
72
|
+
readonly suffix?: XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
|
|
63
73
|
onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
|
|
64
74
|
readonly readonly?: boolean | undefined;
|
|
65
75
|
readonly validations?: import("react-hook-form").RegisterOptions | undefined;
|
package/dist/InputText/index.cjs
CHANGED
|
@@ -1,278 +1,23 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
require('react-hook-form');
|
|
3
|
+
var InputText = require('../InputText-cjs.js');
|
|
4
|
+
require('react');
|
|
5
|
+
require('../useSafeLayoutEffect-cjs.js');
|
|
6
|
+
require('../FormField-cjs.js');
|
|
8
7
|
require('framer-motion');
|
|
9
8
|
require('@jobber/design');
|
|
10
9
|
require('classnames');
|
|
11
|
-
require('react-router-dom');
|
|
12
|
-
var omit = require('../omit-cjs.js');
|
|
13
10
|
require('../Button-cjs.js');
|
|
11
|
+
require('react-router-dom');
|
|
14
12
|
require('../Icon-cjs.js');
|
|
15
13
|
require('../Typography-cjs.js');
|
|
16
14
|
require('../Text-cjs.js');
|
|
17
15
|
require('../useFormFieldFocus-cjs.js');
|
|
18
16
|
require('../InputValidation-cjs.js');
|
|
19
17
|
require('../Spinner-cjs.js');
|
|
20
|
-
require('../
|
|
21
|
-
require('
|
|
22
|
-
require('../isTypedArray-cjs.js');
|
|
23
|
-
require('../isObjectLike-cjs.js');
|
|
24
|
-
require('../identity-cjs.js');
|
|
25
|
-
require('../_getTag-cjs.js');
|
|
26
|
-
require('../isSymbol-cjs.js');
|
|
27
|
-
require('../keysIn-cjs.js');
|
|
28
|
-
require('../_baseAssignValue-cjs.js');
|
|
29
|
-
require('../_baseFlatten-cjs.js');
|
|
30
|
-
require('../_setToString-cjs.js');
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.
|
|
34
|
-
*/
|
|
35
|
-
function useTextAreaResize({ rows, value, inputRef, wrapperRef, }) {
|
|
36
|
-
const rowRange = getRowRange(rows);
|
|
37
|
-
useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
|
|
38
|
-
if (inputRef &&
|
|
39
|
-
inputRef.current instanceof HTMLTextAreaElement &&
|
|
40
|
-
wrapperRef &&
|
|
41
|
-
wrapperRef.current instanceof HTMLDivElement) {
|
|
42
|
-
resize();
|
|
43
|
-
}
|
|
44
|
-
}, [inputRef.current, wrapperRef.current]);
|
|
45
|
-
// When the consumer passes a new controlled value, we need to recheck the size.
|
|
46
|
-
// The timeout ensures the DOM has a enough time to render the new text before
|
|
47
|
-
// we access the height.
|
|
48
|
-
useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
|
|
49
|
-
setTimeout(() => {
|
|
50
|
-
if (inputRef &&
|
|
51
|
-
inputRef.current instanceof HTMLTextAreaElement &&
|
|
52
|
-
wrapperRef &&
|
|
53
|
-
wrapperRef.current instanceof HTMLDivElement) {
|
|
54
|
-
resize();
|
|
55
|
-
}
|
|
56
|
-
}, 0);
|
|
57
|
-
}, [value]);
|
|
58
|
-
function resize() {
|
|
59
|
-
if (inputRef &&
|
|
60
|
-
inputRef.current instanceof HTMLTextAreaElement &&
|
|
61
|
-
wrapperRef &&
|
|
62
|
-
(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
|
|
63
|
-
if (rowRange.min === rowRange.max)
|
|
64
|
-
return;
|
|
65
|
-
inputRef.current.style.flexBasis = "auto";
|
|
66
|
-
wrapperRef.current.style.height = "auto";
|
|
67
|
-
inputRef.current.style.flexBasis =
|
|
68
|
-
textAreaHeight(inputRef.current) + "px";
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
function textAreaHeight(textArea) {
|
|
72
|
-
const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
|
|
73
|
-
const maxHeight = rowRange.max * parseFloat(lineHeight) +
|
|
74
|
-
parseFloat(borderTopWidth) +
|
|
75
|
-
parseFloat(borderBottomWidth) +
|
|
76
|
-
parseFloat(paddingTop) +
|
|
77
|
-
parseFloat(paddingBottom);
|
|
78
|
-
const scrollHeight = textArea.scrollHeight +
|
|
79
|
-
parseFloat(borderTopWidth) +
|
|
80
|
-
parseFloat(borderBottomWidth);
|
|
81
|
-
return Math.min(scrollHeight, maxHeight);
|
|
82
|
-
}
|
|
83
|
-
return { resize, rowRange };
|
|
84
|
-
}
|
|
85
|
-
function getRowRange(rows) {
|
|
86
|
-
if (rows === undefined) {
|
|
87
|
-
return { min: 3, max: 3 };
|
|
88
|
-
}
|
|
89
|
-
else if (typeof rows === "object") {
|
|
90
|
-
return { min: rows.min, max: rows.max };
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
return { min: rows, max: rows };
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
function InputTextInternal(props, ref) {
|
|
98
|
-
const inputRef = React.useRef(null);
|
|
99
|
-
const actionsRef = React.useRef(null);
|
|
100
|
-
const wrapperRef = React.useRef(null);
|
|
101
|
-
const { resize, rowRange } = useTextAreaResize({
|
|
102
|
-
rows: props.rows,
|
|
103
|
-
value: props.value,
|
|
104
|
-
inputRef,
|
|
105
|
-
wrapperRef,
|
|
106
|
-
});
|
|
107
|
-
React.useImperativeHandle(ref, () => ({
|
|
108
|
-
insert: (text) => {
|
|
109
|
-
insertText(text);
|
|
110
|
-
},
|
|
111
|
-
blur: () => {
|
|
112
|
-
const input = inputRef.current;
|
|
113
|
-
if (input) {
|
|
114
|
-
input.blur();
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
focus: () => {
|
|
118
|
-
const input = inputRef.current;
|
|
119
|
-
if (input) {
|
|
120
|
-
input.focus();
|
|
121
|
-
}
|
|
122
|
-
},
|
|
123
|
-
scrollIntoView: arg => {
|
|
124
|
-
const input = inputRef.current;
|
|
125
|
-
if (input) {
|
|
126
|
-
input.scrollIntoView(arg);
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
}));
|
|
130
|
-
return (React.createElement(FormField.FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
|
|
131
|
-
function handleChange(newValue) {
|
|
132
|
-
props.onChange && props.onChange(newValue);
|
|
133
|
-
resize();
|
|
134
|
-
}
|
|
135
|
-
function insertText(text) {
|
|
136
|
-
var _a;
|
|
137
|
-
const input = inputRef.current;
|
|
138
|
-
if (input) {
|
|
139
|
-
insertAtCursor(input, text);
|
|
140
|
-
const newValue = input.value;
|
|
141
|
-
(_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(newValue);
|
|
142
|
-
props.onChange && props.onChange(newValue);
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
const InputText$1 = React.forwardRef(InputTextInternal);
|
|
147
|
-
function insertAtCursor(input, newText) {
|
|
148
|
-
const start = input.selectionStart || 0;
|
|
149
|
-
const end = input.selectionEnd || 0;
|
|
150
|
-
const text = input.value;
|
|
151
|
-
const before = text.substring(0, start);
|
|
152
|
-
const after = text.substring(end, text.length);
|
|
153
|
-
input.value = before + newText + after;
|
|
154
|
-
input.selectionStart = input.selectionEnd = start + newText.length;
|
|
155
|
-
input.focus();
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
/**
|
|
159
|
-
* Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
|
|
160
|
-
* 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.
|
|
161
|
-
*/
|
|
162
|
-
function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, }) {
|
|
163
|
-
function handleClear() {
|
|
164
|
-
var _a;
|
|
165
|
-
handleBlur();
|
|
166
|
-
onChange && onChange("");
|
|
167
|
-
(_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
168
|
-
}
|
|
169
|
-
function handleChange(event) {
|
|
170
|
-
const newValue = event.currentTarget.value;
|
|
171
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
|
|
172
|
-
}
|
|
173
|
-
function handleKeyDown(event) {
|
|
174
|
-
if (!onEnter)
|
|
175
|
-
return;
|
|
176
|
-
if (event.key !== "Enter")
|
|
177
|
-
return;
|
|
178
|
-
if (event.shiftKey || event.ctrlKey)
|
|
179
|
-
return;
|
|
180
|
-
event.preventDefault();
|
|
181
|
-
onEnter && onEnter(event);
|
|
182
|
-
}
|
|
183
|
-
function handleFocus(event) {
|
|
184
|
-
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
185
|
-
}
|
|
186
|
-
function handleBlur(event) {
|
|
187
|
-
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
188
|
-
}
|
|
189
|
-
return {
|
|
190
|
-
handleClear,
|
|
191
|
-
handleChange,
|
|
192
|
-
handleKeyDown,
|
|
193
|
-
handleFocus,
|
|
194
|
-
handleBlur,
|
|
195
|
-
};
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
/**
|
|
199
|
-
* Provides the props for the html fields rendered by the html input.
|
|
200
|
-
* 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.
|
|
201
|
-
*/
|
|
202
|
-
function useInputTextFormField(_a) {
|
|
203
|
-
var { id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = tslib_es6.__rest(_a, ["id", "name", "description", "inline", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
|
|
204
|
-
const descriptionIdentifier = `descriptionUUID--${id}`;
|
|
205
|
-
const fieldProps = Object.assign(Object.assign(Object.assign({ id, className: FormField.styles.input, name, disabled: rest.disabled, inputMode: rest.inputMode, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }, (description &&
|
|
206
|
-
!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);
|
|
207
|
-
return { fieldProps, descriptionIdentifier };
|
|
208
|
-
}
|
|
18
|
+
require('../tslib.es6-cjs.js');
|
|
19
|
+
require('react-hook-form');
|
|
209
20
|
|
|
210
|
-
const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRefs) {
|
|
211
|
-
var _a, _b, _c;
|
|
212
|
-
const inputTextRef = React.useRef(null);
|
|
213
|
-
const wrapperRef = React.useRef(null);
|
|
214
|
-
const legacyPropHelper = Object.assign(Object.assign({}, props), { version: 1 });
|
|
215
|
-
const id = React.useId();
|
|
216
|
-
const { rowRange } = useTextAreaResize({
|
|
217
|
-
rows: props.rows,
|
|
218
|
-
value: props.value,
|
|
219
|
-
inputRef: inputTextRef,
|
|
220
|
-
wrapperRef: wrapperRef,
|
|
221
|
-
});
|
|
222
|
-
const type = props.multiline ? "textarea" : "text";
|
|
223
|
-
const { inputStyle } = FormField.useFormFieldWrapperStyles(legacyPropHelper);
|
|
224
|
-
const { name } = FormField.useAtlantisFormFieldName({
|
|
225
|
-
nameProp: props.name,
|
|
226
|
-
id: props.id || id,
|
|
227
|
-
});
|
|
228
|
-
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } = useInputTextActions({
|
|
229
|
-
onChange: props.onChange,
|
|
230
|
-
onBlur: props.onBlur,
|
|
231
|
-
onFocus: props.onFocus,
|
|
232
|
-
onEnter: props.onEnter,
|
|
233
|
-
inputRef: inputTextRef,
|
|
234
|
-
});
|
|
235
|
-
const inputProps = omit.omit(props, [
|
|
236
|
-
"onChange",
|
|
237
|
-
"onBlur",
|
|
238
|
-
"onFocus",
|
|
239
|
-
"onEnter",
|
|
240
|
-
"size",
|
|
241
|
-
"placeholder",
|
|
242
|
-
"multiline",
|
|
243
|
-
"prefix",
|
|
244
|
-
"suffix",
|
|
245
|
-
"version",
|
|
246
|
-
]);
|
|
247
|
-
const { fieldProps, descriptionIdentifier } = useInputTextFormField(Object.assign(Object.assign({}, inputProps), { id,
|
|
248
|
-
name,
|
|
249
|
-
handleChange,
|
|
250
|
-
handleBlur,
|
|
251
|
-
handleFocus,
|
|
252
|
-
handleKeyDown }));
|
|
253
|
-
return (React.createElement(FormField.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 },
|
|
254
|
-
React.createElement(React.Fragment, null,
|
|
255
|
-
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 })),
|
|
256
|
-
React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
|
|
257
|
-
props.children)));
|
|
258
|
-
});
|
|
259
|
-
function TextArea({ fieldProps, rowRange, inputRefs, value, inputStyle, }) {
|
|
260
|
-
return (React.createElement("textarea", Object.assign({}, fieldProps, { rows: rowRange.min, ref: FormField.mergeRefs(inputRefs), className: inputStyle, value: value })));
|
|
261
|
-
}
|
|
262
|
-
function TextInput({ fieldProps, inputRefs, value, inputStyle, }) {
|
|
263
|
-
return (React.createElement("input", Object.assign({}, fieldProps, { ref: FormField.mergeRefs(inputRefs), className: inputStyle, value: value })));
|
|
264
|
-
}
|
|
265
21
|
|
|
266
|
-
function isNewInputTextProps(props) {
|
|
267
|
-
return props.version === 2;
|
|
268
|
-
}
|
|
269
|
-
const InputText = React.forwardRef(function InputTextShim(props, ref) {
|
|
270
|
-
if (isNewInputTextProps(props)) {
|
|
271
|
-
return (React.createElement(InputTextSPAR, Object.assign({}, props, { ref: ref })));
|
|
272
|
-
}
|
|
273
|
-
else {
|
|
274
|
-
return (React.createElement(InputText$1, Object.assign({}, props, { ref: ref })));
|
|
275
|
-
}
|
|
276
|
-
});
|
|
277
22
|
|
|
278
|
-
exports.InputText = InputText;
|
|
23
|
+
exports.InputText = InputText.InputText;
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { InputTextPropOptions, InputTextRebuiltProps, InputTextRef } from "./InputText.types";
|
|
3
|
-
export type InputTextProps = InputTextPropOptions | InputTextRebuiltProps;
|
|
4
|
-
export declare const InputText: React.ForwardRefExoticComponent<InputTextProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | InputTextRef>>;
|
|
5
|
-
export { InputTextRef };
|
|
1
|
+
export { InputText, InputTextRef } from "./InputText";
|