@jobber/components 6.104.1 → 6.105.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/Autocomplete.types.d.ts +2 -0
- package/dist/Autocomplete/components/MenuList.d.ts +2 -1
- package/dist/Autocomplete/components/PersistentRegion.d.ts +2 -1
- package/dist/Autocomplete/hooks/useAutocompleteListNav.d.ts +2 -1
- package/dist/Autocomplete/index.cjs +86 -32
- package/dist/Autocomplete/index.mjs +87 -33
- package/dist/Autocomplete/tests/Autocomplete.setup.d.ts +13 -0
- package/dist/Autocomplete/useAutocomplete.d.ts +1 -0
- package/dist/Autocomplete/utils/interactionUtils.d.ts +14 -0
- package/dist/Checkbox/Checkbox.rebuilt.d.ts +2 -1
- package/dist/Checkbox/Checkbox.types.d.ts +40 -3
- package/dist/Checkbox/index.cjs +2 -2
- package/dist/Checkbox/index.mjs +2 -2
- package/dist/DatePicker-es.js +1 -1
- package/dist/InputEmail/InputEmail.types.d.ts +2 -2
- package/dist/InputEmail/hooks/useInputEmailActions.d.ts +8 -3
- package/dist/InputEmail/index.cjs +28 -3
- package/dist/InputEmail/index.mjs +28 -3
- package/dist/InputNumber/InputNumber.rebuilt.types.d.ts +2 -2
- package/dist/InputNumber/index.cjs +1 -1
- package/dist/InputNumber/index.mjs +1 -1
- package/dist/InputPhoneNumber/InputPhoneNumber.types.d.ts +2 -2
- package/dist/InputPhoneNumber/hooks/useInputPhoneActions.d.ts +8 -3
- package/dist/InputPhoneNumber/index.cjs +29 -3
- package/dist/InputPhoneNumber/index.mjs +29 -3
- package/dist/InputText/InputText.types.d.ts +2 -2
- package/dist/InputText/index.cjs +28 -3
- package/dist/InputText/index.mjs +28 -3
- package/dist/InputText/useInputTextActions.d.ts +8 -3
- package/dist/InputTime/InputTime.types.d.ts +2 -2
- package/dist/InputTime/hooks/useInputTimeActions.d.ts +8 -3
- package/dist/InputTime/index.cjs +28 -3
- package/dist/InputTime/index.mjs +28 -3
- package/dist/floating-ui.react-cjs.js +115 -0
- package/dist/floating-ui.react-es.js +115 -1
- package/dist/sharedHelpers/types.d.ts +26 -0
- package/dist/styles.css +3 -0
- package/package.json +2 -2
|
@@ -35,7 +35,7 @@ function InputEmail$1(props) {
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, }) {
|
|
38
|
+
function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
|
|
39
39
|
function handleClear() {
|
|
40
40
|
var _a;
|
|
41
41
|
onChange === null || onChange === void 0 ? void 0 : onChange("");
|
|
@@ -65,6 +65,21 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
|
|
|
65
65
|
function handleKeyUp(event) {
|
|
66
66
|
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
|
|
67
67
|
}
|
|
68
|
+
function handleClick(event) {
|
|
69
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
70
|
+
}
|
|
71
|
+
function handleMouseDown(event) {
|
|
72
|
+
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
|
|
73
|
+
}
|
|
74
|
+
function handleMouseUp(event) {
|
|
75
|
+
onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
|
|
76
|
+
}
|
|
77
|
+
function handlePointerDown(event) {
|
|
78
|
+
onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
|
|
79
|
+
}
|
|
80
|
+
function handlePointerUp(event) {
|
|
81
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
|
|
82
|
+
}
|
|
68
83
|
return {
|
|
69
84
|
handleClear,
|
|
70
85
|
handleChange,
|
|
@@ -72,6 +87,11 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
|
|
|
72
87
|
handleKeyUp,
|
|
73
88
|
handleFocus,
|
|
74
89
|
handleBlur,
|
|
90
|
+
handleClick,
|
|
91
|
+
handleMouseDown,
|
|
92
|
+
handleMouseUp,
|
|
93
|
+
handlePointerDown,
|
|
94
|
+
handlePointerUp,
|
|
75
95
|
};
|
|
76
96
|
}
|
|
77
97
|
|
|
@@ -96,13 +116,18 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
|
|
|
96
116
|
nameProp: props.name,
|
|
97
117
|
id,
|
|
98
118
|
});
|
|
99
|
-
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, } = useInputEmailActions({
|
|
119
|
+
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputEmailActions({
|
|
100
120
|
onChange: props.onChange,
|
|
101
121
|
onBlur: props.onBlur,
|
|
102
122
|
onFocus: props.onFocus,
|
|
103
123
|
onKeyDown: props.onKeyDown,
|
|
104
124
|
onKeyUp: props.onKeyUp,
|
|
105
125
|
onEnter: props.onEnter,
|
|
126
|
+
onClick: props.onClick,
|
|
127
|
+
onMouseDown: props.onMouseDown,
|
|
128
|
+
onMouseUp: props.onMouseUp,
|
|
129
|
+
onPointerDown: props.onPointerDown,
|
|
130
|
+
onPointerUp: props.onPointerUp,
|
|
106
131
|
inputRef,
|
|
107
132
|
});
|
|
108
133
|
const descriptionIdentifier = `descriptionUUID--${id}`;
|
|
@@ -110,7 +135,7 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
|
|
|
110
135
|
const isInvalid = Boolean(props.error || props.invalid);
|
|
111
136
|
const dataAttrs = filterDataAttributes.filterDataAttributes(props);
|
|
112
137
|
return (React.createElement(FormField.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
|
|
113
|
-
React.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
|
|
138
|
+
React.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
|
|
114
139
|
React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
|
|
115
140
|
});
|
|
116
141
|
|
|
@@ -33,7 +33,7 @@ function InputEmail$1(props) {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, }) {
|
|
36
|
+
function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
|
|
37
37
|
function handleClear() {
|
|
38
38
|
var _a;
|
|
39
39
|
onChange === null || onChange === void 0 ? void 0 : onChange("");
|
|
@@ -63,6 +63,21 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
|
|
|
63
63
|
function handleKeyUp(event) {
|
|
64
64
|
onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
|
|
65
65
|
}
|
|
66
|
+
function handleClick(event) {
|
|
67
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
68
|
+
}
|
|
69
|
+
function handleMouseDown(event) {
|
|
70
|
+
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
|
|
71
|
+
}
|
|
72
|
+
function handleMouseUp(event) {
|
|
73
|
+
onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
|
|
74
|
+
}
|
|
75
|
+
function handlePointerDown(event) {
|
|
76
|
+
onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
|
|
77
|
+
}
|
|
78
|
+
function handlePointerUp(event) {
|
|
79
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
|
|
80
|
+
}
|
|
66
81
|
return {
|
|
67
82
|
handleClear,
|
|
68
83
|
handleChange,
|
|
@@ -70,6 +85,11 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
|
|
|
70
85
|
handleKeyUp,
|
|
71
86
|
handleFocus,
|
|
72
87
|
handleBlur,
|
|
88
|
+
handleClick,
|
|
89
|
+
handleMouseDown,
|
|
90
|
+
handleMouseUp,
|
|
91
|
+
handlePointerDown,
|
|
92
|
+
handlePointerUp,
|
|
73
93
|
};
|
|
74
94
|
}
|
|
75
95
|
|
|
@@ -94,13 +114,18 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
|
|
|
94
114
|
nameProp: props.name,
|
|
95
115
|
id,
|
|
96
116
|
});
|
|
97
|
-
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, } = useInputEmailActions({
|
|
117
|
+
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputEmailActions({
|
|
98
118
|
onChange: props.onChange,
|
|
99
119
|
onBlur: props.onBlur,
|
|
100
120
|
onFocus: props.onFocus,
|
|
101
121
|
onKeyDown: props.onKeyDown,
|
|
102
122
|
onKeyUp: props.onKeyUp,
|
|
103
123
|
onEnter: props.onEnter,
|
|
124
|
+
onClick: props.onClick,
|
|
125
|
+
onMouseDown: props.onMouseDown,
|
|
126
|
+
onMouseUp: props.onMouseUp,
|
|
127
|
+
onPointerDown: props.onPointerDown,
|
|
128
|
+
onPointerUp: props.onPointerUp,
|
|
104
129
|
inputRef,
|
|
105
130
|
});
|
|
106
131
|
const descriptionIdentifier = `descriptionUUID--${id}`;
|
|
@@ -108,7 +133,7 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
|
|
|
108
133
|
const isInvalid = Boolean(props.error || props.invalid);
|
|
109
134
|
const dataAttrs = filterDataAttributes(props);
|
|
110
135
|
return (React__default.createElement(FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
|
|
111
|
-
React__default.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
|
|
136
|
+
React__default.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
|
|
112
137
|
React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
|
|
113
138
|
});
|
|
114
139
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
|
-
import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
2
|
+
import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
3
3
|
export type InputNumberVersion = 1 | 2 | undefined;
|
|
4
|
-
export interface InputNumberRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "clearable" | "suffix" | "prefix"> {
|
|
4
|
+
export interface InputNumberRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "clearable" | "suffix" | "prefix"> {
|
|
5
5
|
readonly defaultValue?: number;
|
|
6
6
|
readonly formatOptions?: Intl.NumberFormatOptions;
|
|
7
7
|
readonly maxValue?: number;
|
|
@@ -2744,7 +2744,7 @@ const InputNumberRebuilt = React.forwardRef((props, ref) => {
|
|
|
2744
2744
|
const { align, description, disabled, error, inline, invalid, placeholder, readOnly, showMiniLabel = true, size, minValue, maxValue } = props, ariaNumberFieldProps = tslib_es6.__rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readOnly", "showMiniLabel", "size", "minValue", "maxValue"]);
|
|
2745
2745
|
const dataAttrs = filterDataAttributes.filterDataAttributes(props);
|
|
2746
2746
|
const stringDescription = typeof description === "string";
|
|
2747
|
-
return (React.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
|
|
2747
|
+
return (React.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onClick: props.onClick, onMouseDown: props.onMouseDown, onMouseUp: props.onMouseUp, onPointerDown: props.onPointerDown, onPointerUp: props.onPointerUp, onChange: handleChange }),
|
|
2748
2748
|
React.createElement($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: classnames(styles.wrapper, align && styles[align], invalid && styles.invalid, disabled && styles.disabled) },
|
|
2749
2749
|
React.createElement("div", { className: styles.horizontalWrapper },
|
|
2750
2750
|
React.createElement("div", { className: classnames(styles.inputWrapper, disabled && styles.disabled, !showMiniLabel && styles.hideLabel, size && styles[size]) },
|
|
@@ -2742,7 +2742,7 @@ const InputNumberRebuilt = forwardRef((props, ref) => {
|
|
|
2742
2742
|
const { align, description, disabled, error, inline, invalid, placeholder, readOnly, showMiniLabel = true, size, minValue, maxValue } = props, ariaNumberFieldProps = __rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readOnly", "showMiniLabel", "size", "minValue", "maxValue"]);
|
|
2743
2743
|
const dataAttrs = filterDataAttributes(props);
|
|
2744
2744
|
const stringDescription = typeof description === "string";
|
|
2745
|
-
return (React__default.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onChange: handleChange }),
|
|
2745
|
+
return (React__default.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, minValue: minValue, maxValue: maxValue, onBlur: e => { var _a; return (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onFocus: e => { var _a; return (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e); }, onClick: props.onClick, onMouseDown: props.onMouseDown, onMouseUp: props.onMouseUp, onPointerDown: props.onPointerDown, onPointerUp: props.onPointerUp, onChange: handleChange }),
|
|
2746
2746
|
React__default.createElement($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: classnames(styles.wrapper, align && styles[align], invalid && styles.invalid, disabled && styles.disabled) },
|
|
2747
2747
|
React__default.createElement("div", { className: styles.horizontalWrapper },
|
|
2748
2748
|
React__default.createElement("div", { className: classnames(styles.inputWrapper, disabled && styles.disabled, !showMiniLabel && styles.hideLabel, size && styles[size]) },
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { InputMaskProps } from "./InputMask";
|
|
2
2
|
import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
|
|
3
|
-
import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
3
|
+
import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
4
4
|
export interface InputPhoneNumberLegacyProps extends Omit<CommonFormFieldProps, "align">, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "validations" | "readonly" | "prefix" | "suffix"> {
|
|
5
5
|
readonly value: string;
|
|
6
6
|
readonly onChange: (value: string) => void;
|
|
@@ -16,7 +16,7 @@ export interface InputPhoneNumberLegacyProps extends Omit<CommonFormFieldProps,
|
|
|
16
16
|
*/
|
|
17
17
|
readonly required?: boolean;
|
|
18
18
|
}
|
|
19
|
-
export interface InputPhoneNumberRebuiltProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, RebuiltInputCommonProps {
|
|
19
|
+
export interface InputPhoneNumberRebuiltProps extends Omit<HTMLInputBaseProps, "type" | "maxLength" | "minLength">, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, RebuiltInputCommonProps {
|
|
20
20
|
/**
|
|
21
21
|
* The current value of the input.
|
|
22
22
|
*/
|
|
@@ -1,16 +1,21 @@
|
|
|
1
|
-
import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
|
|
1
|
+
import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
|
|
2
2
|
import type { InputPhoneNumberRebuiltProps } from "../InputPhoneNumber.types";
|
|
3
|
-
export interface useInputPhoneActionsProps extends Pick<InputPhoneNumberRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown"> {
|
|
3
|
+
export interface useInputPhoneActionsProps extends Pick<InputPhoneNumberRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
|
|
4
4
|
inputRef?: React.RefObject<HTMLInputElement>;
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
7
|
* Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
|
|
8
8
|
* 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.
|
|
9
9
|
*/
|
|
10
|
-
export declare function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }: useInputPhoneActionsProps): {
|
|
10
|
+
export declare function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }: useInputPhoneActionsProps): {
|
|
11
11
|
handleClear: () => void;
|
|
12
12
|
handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
13
13
|
handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
|
|
14
14
|
handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
|
|
15
15
|
handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
|
|
16
|
+
handleClick: (event: MouseEvent<HTMLInputElement>) => void;
|
|
17
|
+
handleMouseDown: (event: MouseEvent<HTMLInputElement>) => void;
|
|
18
|
+
handleMouseUp: (event: MouseEvent<HTMLInputElement>) => void;
|
|
19
|
+
handlePointerDown: (event: PointerEvent<HTMLInputElement>) => void;
|
|
20
|
+
handlePointerUp: (event: PointerEvent<HTMLInputElement>) => void;
|
|
16
21
|
};
|
|
@@ -113,7 +113,7 @@ const DEFAULT_PATTERN = "(***) ***-****";
|
|
|
113
113
|
* Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
|
|
114
114
|
* 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.
|
|
115
115
|
*/
|
|
116
|
-
function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }) {
|
|
116
|
+
function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
|
|
117
117
|
function handleClear() {
|
|
118
118
|
var _a;
|
|
119
119
|
onChange && onChange("");
|
|
@@ -140,12 +140,32 @@ function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown,
|
|
|
140
140
|
function handleBlur(event) {
|
|
141
141
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
142
142
|
}
|
|
143
|
+
function handleClick(event) {
|
|
144
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
145
|
+
}
|
|
146
|
+
function handleMouseDown(event) {
|
|
147
|
+
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
|
|
148
|
+
}
|
|
149
|
+
function handleMouseUp(event) {
|
|
150
|
+
onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
|
|
151
|
+
}
|
|
152
|
+
function handlePointerDown(event) {
|
|
153
|
+
onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
|
|
154
|
+
}
|
|
155
|
+
function handlePointerUp(event) {
|
|
156
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
|
|
157
|
+
}
|
|
143
158
|
return {
|
|
144
159
|
handleClear,
|
|
145
160
|
handleChange,
|
|
146
161
|
handleFocus,
|
|
147
162
|
handleBlur,
|
|
148
163
|
handleKeyDown,
|
|
164
|
+
handleClick,
|
|
165
|
+
handleMouseDown,
|
|
166
|
+
handleMouseUp,
|
|
167
|
+
handlePointerDown,
|
|
168
|
+
handlePointerUp,
|
|
149
169
|
};
|
|
150
170
|
}
|
|
151
171
|
|
|
@@ -177,11 +197,17 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
|
|
|
177
197
|
strict: false,
|
|
178
198
|
onChange: props.onChange,
|
|
179
199
|
});
|
|
180
|
-
const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, } = useInputPhoneActions({
|
|
200
|
+
const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputPhoneActions({
|
|
181
201
|
onChange: maskedOnChange,
|
|
182
202
|
onBlur: props.onBlur,
|
|
183
203
|
onFocus: props.onFocus,
|
|
184
204
|
onEnter: props.onEnter,
|
|
205
|
+
onKeyDown: props.onKeyDown,
|
|
206
|
+
onClick: props.onClick,
|
|
207
|
+
onMouseDown: props.onMouseDown,
|
|
208
|
+
onMouseUp: props.onMouseUp,
|
|
209
|
+
onPointerDown: props.onPointerDown,
|
|
210
|
+
onPointerUp: props.onPointerUp,
|
|
185
211
|
inputRef: inputPhoneNumberRef,
|
|
186
212
|
});
|
|
187
213
|
const descriptionIdentifier = `descriptionUUID--${id}`, descriptionVisible = props.description && !props.inline;
|
|
@@ -192,7 +218,7 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
|
|
|
192
218
|
[styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
|
|
193
219
|
}), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
|
|
194
220
|
? descriptionIdentifier
|
|
195
|
-
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown }, dataAttrs)),
|
|
221
|
+
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }, dataAttrs)),
|
|
196
222
|
React.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),
|
|
197
223
|
React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
|
|
198
224
|
});
|
|
@@ -111,7 +111,7 @@ const DEFAULT_PATTERN = "(***) ***-****";
|
|
|
111
111
|
* Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
|
|
112
112
|
* 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.
|
|
113
113
|
*/
|
|
114
|
-
function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, }) {
|
|
114
|
+
function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
|
|
115
115
|
function handleClear() {
|
|
116
116
|
var _a;
|
|
117
117
|
onChange && onChange("");
|
|
@@ -138,12 +138,32 @@ function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown,
|
|
|
138
138
|
function handleBlur(event) {
|
|
139
139
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
140
140
|
}
|
|
141
|
+
function handleClick(event) {
|
|
142
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
143
|
+
}
|
|
144
|
+
function handleMouseDown(event) {
|
|
145
|
+
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
|
|
146
|
+
}
|
|
147
|
+
function handleMouseUp(event) {
|
|
148
|
+
onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
|
|
149
|
+
}
|
|
150
|
+
function handlePointerDown(event) {
|
|
151
|
+
onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
|
|
152
|
+
}
|
|
153
|
+
function handlePointerUp(event) {
|
|
154
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
|
|
155
|
+
}
|
|
141
156
|
return {
|
|
142
157
|
handleClear,
|
|
143
158
|
handleChange,
|
|
144
159
|
handleFocus,
|
|
145
160
|
handleBlur,
|
|
146
161
|
handleKeyDown,
|
|
162
|
+
handleClick,
|
|
163
|
+
handleMouseDown,
|
|
164
|
+
handleMouseUp,
|
|
165
|
+
handlePointerDown,
|
|
166
|
+
handlePointerUp,
|
|
147
167
|
};
|
|
148
168
|
}
|
|
149
169
|
|
|
@@ -175,11 +195,17 @@ const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a,
|
|
|
175
195
|
strict: false,
|
|
176
196
|
onChange: props.onChange,
|
|
177
197
|
});
|
|
178
|
-
const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, } = useInputPhoneActions({
|
|
198
|
+
const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputPhoneActions({
|
|
179
199
|
onChange: maskedOnChange,
|
|
180
200
|
onBlur: props.onBlur,
|
|
181
201
|
onFocus: props.onFocus,
|
|
182
202
|
onEnter: props.onEnter,
|
|
203
|
+
onKeyDown: props.onKeyDown,
|
|
204
|
+
onClick: props.onClick,
|
|
205
|
+
onMouseDown: props.onMouseDown,
|
|
206
|
+
onMouseUp: props.onMouseUp,
|
|
207
|
+
onPointerDown: props.onPointerDown,
|
|
208
|
+
onPointerUp: props.onPointerUp,
|
|
183
209
|
inputRef: inputPhoneNumberRef,
|
|
184
210
|
});
|
|
185
211
|
const descriptionIdentifier = `descriptionUUID--${id}`, descriptionVisible = props.description && !props.inline;
|
|
@@ -190,7 +216,7 @@ const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a,
|
|
|
190
216
|
[styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
|
|
191
217
|
}), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
|
|
192
218
|
? descriptionIdentifier
|
|
193
|
-
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown }, dataAttrs)),
|
|
219
|
+
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }, dataAttrs)),
|
|
194
220
|
React__default.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),
|
|
195
221
|
React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
|
|
196
222
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { XOR } from "ts-xor";
|
|
2
2
|
import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
|
|
3
|
-
import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
3
|
+
import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
4
4
|
export interface RowRange {
|
|
5
5
|
min: number;
|
|
6
6
|
max: number;
|
|
@@ -22,7 +22,7 @@ export type InputTextVersion = 1 | 2 | undefined;
|
|
|
22
22
|
* Experimental version 2 of the InputText component.
|
|
23
23
|
* Do not use unless you have talked with Atlantis first.
|
|
24
24
|
*/
|
|
25
|
-
export interface InputTextRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, RebuiltInputCommonProps, InputLengthConstraint {
|
|
25
|
+
export interface InputTextRebuiltProps extends HTMLInputBaseProps, MouseEvents<HTMLInputElement | HTMLTextAreaElement>, FocusEvents<HTMLInputElement | HTMLTextAreaElement>, KeyboardEvents<HTMLInputElement | HTMLTextAreaElement>, RebuiltInputCommonProps, InputLengthConstraint {
|
|
26
26
|
/**
|
|
27
27
|
* Use this when you're expecting a long answer.
|
|
28
28
|
*/
|
package/dist/InputText/index.cjs
CHANGED
|
@@ -148,7 +148,7 @@ function insertAtCursor(input, newText) {
|
|
|
148
148
|
* Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
|
|
149
149
|
* 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.
|
|
150
150
|
*/
|
|
151
|
-
function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, }) {
|
|
151
|
+
function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onPointerDown, onPointerUp, onClick, }) {
|
|
152
152
|
function handleClear() {
|
|
153
153
|
var _a;
|
|
154
154
|
onChange && onChange("");
|
|
@@ -178,6 +178,21 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onK
|
|
|
178
178
|
function handleBlur(event) {
|
|
179
179
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
180
180
|
}
|
|
181
|
+
function handleMouseDown(event) {
|
|
182
|
+
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
|
|
183
|
+
}
|
|
184
|
+
function handleMouseUp(event) {
|
|
185
|
+
onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
|
|
186
|
+
}
|
|
187
|
+
function handlePointerDown(event) {
|
|
188
|
+
onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
|
|
189
|
+
}
|
|
190
|
+
function handlePointerUp(event) {
|
|
191
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
|
|
192
|
+
}
|
|
193
|
+
function handleClick(event) {
|
|
194
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
195
|
+
}
|
|
181
196
|
return {
|
|
182
197
|
handleClear,
|
|
183
198
|
handleChange,
|
|
@@ -185,6 +200,11 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onK
|
|
|
185
200
|
handleKeyUp,
|
|
186
201
|
handleFocus,
|
|
187
202
|
handleBlur,
|
|
203
|
+
handleMouseDown,
|
|
204
|
+
handleMouseUp,
|
|
205
|
+
handlePointerDown,
|
|
206
|
+
handlePointerUp,
|
|
207
|
+
handleClick,
|
|
188
208
|
};
|
|
189
209
|
}
|
|
190
210
|
|
|
@@ -214,10 +234,15 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
|
|
|
214
234
|
nameProp: props.name,
|
|
215
235
|
id: id,
|
|
216
236
|
});
|
|
217
|
-
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, } = useInputTextActions({
|
|
237
|
+
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, handleClick, } = useInputTextActions({
|
|
218
238
|
onChange: props.onChange,
|
|
219
239
|
onBlur: props.onBlur,
|
|
220
240
|
onFocus: props.onFocus,
|
|
241
|
+
onMouseDown: props.onMouseDown,
|
|
242
|
+
onMouseUp: props.onMouseUp,
|
|
243
|
+
onPointerDown: props.onPointerDown,
|
|
244
|
+
onPointerUp: props.onPointerUp,
|
|
245
|
+
onClick: props.onClick,
|
|
221
246
|
onKeyDown: props.onKeyDown,
|
|
222
247
|
onKeyUp: props.onKeyUp,
|
|
223
248
|
onEnter: props.onEnter,
|
|
@@ -231,7 +256,7 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
|
|
|
231
256
|
const commonInputProps = Object.assign({ id,
|
|
232
257
|
name, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
|
|
233
258
|
? descriptionIdentifier
|
|
234
|
-
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: FormField.mergeRefs([inputRef, inputTextRef]) }, dataAttrs);
|
|
259
|
+
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: FormField.mergeRefs([inputRef, inputTextRef]) }, dataAttrs);
|
|
235
260
|
return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, 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", maxLength: props.maxLength, 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 },
|
|
236
261
|
React.createElement(React.Fragment, null,
|
|
237
262
|
props.multiline ? (React.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),
|
package/dist/InputText/index.mjs
CHANGED
|
@@ -146,7 +146,7 @@ function insertAtCursor(input, newText) {
|
|
|
146
146
|
* Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
|
|
147
147
|
* 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.
|
|
148
148
|
*/
|
|
149
|
-
function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, }) {
|
|
149
|
+
function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onPointerDown, onPointerUp, onClick, }) {
|
|
150
150
|
function handleClear() {
|
|
151
151
|
var _a;
|
|
152
152
|
onChange && onChange("");
|
|
@@ -176,6 +176,21 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onK
|
|
|
176
176
|
function handleBlur(event) {
|
|
177
177
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
178
178
|
}
|
|
179
|
+
function handleMouseDown(event) {
|
|
180
|
+
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
|
|
181
|
+
}
|
|
182
|
+
function handleMouseUp(event) {
|
|
183
|
+
onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
|
|
184
|
+
}
|
|
185
|
+
function handlePointerDown(event) {
|
|
186
|
+
onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
|
|
187
|
+
}
|
|
188
|
+
function handlePointerUp(event) {
|
|
189
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
|
|
190
|
+
}
|
|
191
|
+
function handleClick(event) {
|
|
192
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
193
|
+
}
|
|
179
194
|
return {
|
|
180
195
|
handleClear,
|
|
181
196
|
handleChange,
|
|
@@ -183,6 +198,11 @@ function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onK
|
|
|
183
198
|
handleKeyUp,
|
|
184
199
|
handleFocus,
|
|
185
200
|
handleBlur,
|
|
201
|
+
handleMouseDown,
|
|
202
|
+
handleMouseUp,
|
|
203
|
+
handlePointerDown,
|
|
204
|
+
handlePointerUp,
|
|
205
|
+
handleClick,
|
|
186
206
|
};
|
|
187
207
|
}
|
|
188
208
|
|
|
@@ -212,10 +232,15 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRef) {
|
|
|
212
232
|
nameProp: props.name,
|
|
213
233
|
id: id,
|
|
214
234
|
});
|
|
215
|
-
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, } = useInputTextActions({
|
|
235
|
+
const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, handleClick, } = useInputTextActions({
|
|
216
236
|
onChange: props.onChange,
|
|
217
237
|
onBlur: props.onBlur,
|
|
218
238
|
onFocus: props.onFocus,
|
|
239
|
+
onMouseDown: props.onMouseDown,
|
|
240
|
+
onMouseUp: props.onMouseUp,
|
|
241
|
+
onPointerDown: props.onPointerDown,
|
|
242
|
+
onPointerUp: props.onPointerUp,
|
|
243
|
+
onClick: props.onClick,
|
|
219
244
|
onKeyDown: props.onKeyDown,
|
|
220
245
|
onKeyUp: props.onKeyUp,
|
|
221
246
|
onEnter: props.onEnter,
|
|
@@ -229,7 +254,7 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRef) {
|
|
|
229
254
|
const commonInputProps = Object.assign({ id,
|
|
230
255
|
name, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
|
|
231
256
|
? descriptionIdentifier
|
|
232
|
-
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: mergeRefs([inputRef, inputTextRef]) }, dataAttrs);
|
|
257
|
+
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: mergeRefs([inputRef, inputTextRef]) }, dataAttrs);
|
|
233
258
|
return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, 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", maxLength: props.maxLength, 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 },
|
|
234
259
|
React__default.createElement(React__default.Fragment, null,
|
|
235
260
|
props.multiline ? (React__default.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React__default.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),
|
|
@@ -1,17 +1,22 @@
|
|
|
1
|
-
import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
|
|
1
|
+
import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
|
|
2
2
|
import type { InputTextRebuiltProps } from "./InputText.types";
|
|
3
|
-
export interface useInputTextActionsProps extends Pick<InputTextRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp"> {
|
|
3
|
+
export interface useInputTextActionsProps extends Pick<InputTextRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp" | "onClick"> {
|
|
4
4
|
inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
7
|
* Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
|
|
8
8
|
* 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.
|
|
9
9
|
*/
|
|
10
|
-
export declare function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, }: useInputTextActionsProps): {
|
|
10
|
+
export declare function useInputTextActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onPointerDown, onPointerUp, onClick, }: useInputTextActionsProps): {
|
|
11
11
|
handleClear: () => void;
|
|
12
12
|
handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
13
13
|
handleKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
14
14
|
handleKeyUp: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
15
15
|
handleFocus: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
16
16
|
handleBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
17
|
+
handleMouseDown: (event: MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
18
|
+
handleMouseUp: (event: MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
19
|
+
handlePointerDown: (event: PointerEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
20
|
+
handlePointerUp: (event: PointerEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
21
|
+
handleClick: (event: MouseEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
17
22
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
|
|
2
|
-
import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
2
|
+
import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
3
3
|
export interface InputTimeProps extends Pick<CommonFormFieldProps, "id" | "align" | "description" | "disabled" | "invalid" | "inline" | "loading" | "name" | "onValidation" | "placeholder" | "size" | "clearable">, Pick<FormFieldProps, "maxLength" | "readonly" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations"> {
|
|
4
4
|
/**
|
|
5
5
|
* Intial value of the input. Only use this when you need to prepopulate the
|
|
@@ -19,7 +19,7 @@ export interface InputTimeProps extends Pick<CommonFormFieldProps, "id" | "align
|
|
|
19
19
|
export interface InputTimeLegacyProps extends InputTimeProps {
|
|
20
20
|
version?: 1;
|
|
21
21
|
}
|
|
22
|
-
export interface InputTimeRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, RebuiltInputCommonProps, Pick<InputTimeProps, "value" | "onChange"> {
|
|
22
|
+
export interface InputTimeRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, RebuiltInputCommonProps, Pick<InputTimeProps, "value" | "onChange"> {
|
|
23
23
|
/**
|
|
24
24
|
* Maximum numerical or date value.
|
|
25
25
|
*/
|
|
@@ -1,16 +1,21 @@
|
|
|
1
|
-
import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
|
|
1
|
+
import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
|
|
2
2
|
import type { InputTimeRebuiltProps } from "../InputTime.types";
|
|
3
|
-
export interface UseInputTimeActionsProps extends Pick<InputTimeRebuiltProps, "onChange" | "onFocus" | "onBlur" | "onKeyDown"> {
|
|
3
|
+
export interface UseInputTimeActionsProps extends Pick<InputTimeRebuiltProps, "onChange" | "onFocus" | "onBlur" | "onKeyDown" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
|
|
4
4
|
readonly value?: Date;
|
|
5
5
|
readonly readOnly?: boolean;
|
|
6
6
|
readonly disabled?: boolean;
|
|
7
7
|
readonly inputRef?: React.RefObject<HTMLInputElement | null>;
|
|
8
8
|
}
|
|
9
|
-
export declare function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, }: UseInputTimeActionsProps): {
|
|
9
|
+
export declare function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }: UseInputTimeActionsProps): {
|
|
10
10
|
handleChangeEvent: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
11
11
|
handleChange: (newValue: string) => void;
|
|
12
12
|
handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
|
|
13
13
|
handleClear: () => void;
|
|
14
14
|
handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
|
|
15
15
|
handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
|
|
16
|
+
handleClick: (event: MouseEvent<HTMLInputElement>) => void;
|
|
17
|
+
handleMouseDown: (event: MouseEvent<HTMLInputElement>) => void;
|
|
18
|
+
handleMouseUp: (event: MouseEvent<HTMLInputElement>) => void;
|
|
19
|
+
handlePointerDown: (event: PointerEvent<HTMLInputElement>) => void;
|
|
20
|
+
handlePointerUp: (event: PointerEvent<HTMLInputElement>) => void;
|
|
16
21
|
};
|