@jobber/components 6.104.1 → 6.105.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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/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/sharedHelpers/types.d.ts +26 -0
- package/package.json +2 -2
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<
|
|
2
|
+
export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxCoreProps & import("../sharedHelpers/types").AriaInputProps & import("../sharedHelpers/types").FocusEvents<HTMLInputElement> & import("../sharedHelpers/types").MouseEvents<HTMLInputElement> & Pick<import("../sharedHelpers/types").HTMLInputBaseProps, "id" | "name" | "disabled"> & Pick<import("../sharedHelpers/types").RebuiltInputCommonProps, "version"> & {
|
|
3
3
|
label?: string | React.ReactElement;
|
|
4
4
|
description?: React.ReactNode;
|
|
5
|
+
invalid?: boolean;
|
|
5
6
|
onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
|
|
6
7
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import type { ReactElement, ReactNode } from "react";
|
|
2
2
|
import type { XOR } from "ts-xor";
|
|
3
|
-
import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
4
|
-
|
|
3
|
+
import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
|
|
4
|
+
/**
|
|
5
|
+
* Shared checkbox-specific props used by both legacy and rebuilt versions
|
|
6
|
+
*/
|
|
7
|
+
export interface CheckboxCoreProps {
|
|
5
8
|
/**
|
|
6
9
|
* Determines if the checkbox is checked or not.
|
|
7
10
|
*/
|
|
@@ -22,10 +25,39 @@ export interface BaseCheckboxProps extends AriaInputProps, FocusEvents<HTMLInput
|
|
|
22
25
|
* Value of the checkbox.
|
|
23
26
|
*/
|
|
24
27
|
readonly value?: string;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Base props for legacy checkbox
|
|
31
|
+
*/
|
|
32
|
+
export interface BaseCheckboxProps extends CheckboxCoreProps {
|
|
33
|
+
/**
|
|
34
|
+
* Disables the checkbox.
|
|
35
|
+
*/
|
|
36
|
+
readonly disabled?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Checkbox input name
|
|
39
|
+
*/
|
|
40
|
+
readonly name?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Further description of the label
|
|
43
|
+
*/
|
|
44
|
+
readonly description?: ReactNode;
|
|
45
|
+
/**
|
|
46
|
+
* ID for the checkbox input
|
|
47
|
+
*/
|
|
48
|
+
readonly id?: string;
|
|
25
49
|
/**
|
|
26
50
|
* Called when the checkbox value changes
|
|
27
51
|
*/
|
|
28
52
|
onChange?(newValue: boolean): void;
|
|
53
|
+
/**
|
|
54
|
+
* Called when the checkbox is focused
|
|
55
|
+
*/
|
|
56
|
+
onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
|
|
57
|
+
/**
|
|
58
|
+
* Called when the checkbox loses focus
|
|
59
|
+
*/
|
|
60
|
+
onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
|
|
29
61
|
}
|
|
30
62
|
interface CheckboxLabelProps extends BaseCheckboxProps {
|
|
31
63
|
/**
|
|
@@ -39,7 +71,7 @@ interface CheckboxChildrenProps extends BaseCheckboxProps {
|
|
|
39
71
|
*/
|
|
40
72
|
readonly children?: ReactElement;
|
|
41
73
|
}
|
|
42
|
-
export type CheckboxRebuiltProps =
|
|
74
|
+
export type CheckboxRebuiltProps = CheckboxCoreProps & AriaInputProps & FocusEvents<HTMLInputElement> & MouseEvents<HTMLInputElement> & Pick<HTMLInputBaseProps, "id" | "name" | "disabled"> & Pick<RebuiltInputCommonProps, "version"> & {
|
|
43
75
|
/**
|
|
44
76
|
* Label that shows up beside the checkbox.
|
|
45
77
|
* String will be rendered with the default markup.
|
|
@@ -52,9 +84,14 @@ export type CheckboxRebuiltProps = Omit<BaseCheckboxProps, "label" | "descriptio
|
|
|
52
84
|
* ReactElement will be rendered with provided positioning.
|
|
53
85
|
*/
|
|
54
86
|
description?: ReactNode;
|
|
87
|
+
/**
|
|
88
|
+
* Whether the checkbox is invalid
|
|
89
|
+
*/
|
|
90
|
+
invalid?: boolean;
|
|
55
91
|
/**
|
|
56
92
|
* Called when the checkbox value changes.
|
|
57
93
|
* Includes the change event as a second argument.
|
|
94
|
+
* This is the recommended event handler to access the new value.
|
|
58
95
|
*/
|
|
59
96
|
onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
|
|
60
97
|
};
|
package/dist/Checkbox/index.cjs
CHANGED
|
@@ -56,7 +56,7 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal(props, ref) {
|
|
59
|
-
const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, } = props;
|
|
59
|
+
const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, invalid, } = props;
|
|
60
60
|
const descriptionIdentifier = React.useId();
|
|
61
61
|
const descriptionVisible = Boolean(description);
|
|
62
62
|
const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
|
|
@@ -77,7 +77,7 @@ const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal(props,
|
|
|
77
77
|
React.createElement("span", { className: styles.checkHolder },
|
|
78
78
|
React.createElement("input", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
|
|
79
79
|
? descriptionIdentifier
|
|
80
|
-
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, dataAttrs)),
|
|
80
|
+
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp }, dataAttrs)),
|
|
81
81
|
React.createElement("span", { className: styles.checkBox },
|
|
82
82
|
React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
|
|
83
83
|
labelContent && React.createElement("span", { className: styles.label }, labelContent)),
|
package/dist/Checkbox/index.mjs
CHANGED
|
@@ -54,7 +54,7 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
|
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal(props, ref) {
|
|
57
|
-
const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, } = props;
|
|
57
|
+
const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, invalid, } = props;
|
|
58
58
|
const descriptionIdentifier = useId();
|
|
59
59
|
const descriptionVisible = Boolean(description);
|
|
60
60
|
const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
|
|
@@ -75,7 +75,7 @@ const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal(props, ref)
|
|
|
75
75
|
React__default.createElement("span", { className: styles.checkHolder },
|
|
76
76
|
React__default.createElement("input", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
|
|
77
77
|
? descriptionIdentifier
|
|
78
|
-
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, dataAttrs)),
|
|
78
|
+
: props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp }, dataAttrs)),
|
|
79
79
|
React__default.createElement("span", { className: styles.checkBox },
|
|
80
80
|
React__default.createElement(Icon, { name: iconName, color: "surface" }))),
|
|
81
81
|
labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
|
|
@@ -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 type InputEmailLegacyProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
|
|
4
4
|
export declare const validationMessage = "Please enter a valid email";
|
|
5
5
|
export type InputEmailVersion = 1 | 2 | undefined;
|
|
@@ -7,7 +7,7 @@ export type InputEmailVersion = 1 | 2 | undefined;
|
|
|
7
7
|
* Experimental version 2 of the InputEmail component.
|
|
8
8
|
* Do not use unless you have talked with Atlantis first.
|
|
9
9
|
*/
|
|
10
|
-
export interface InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, RebuiltInputCommonProps {
|
|
10
|
+
export interface InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, RebuiltInputCommonProps {
|
|
11
11
|
/**
|
|
12
12
|
* The current value of the input.
|
|
13
13
|
*/
|
|
@@ -1,13 +1,18 @@
|
|
|
1
|
-
import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
|
|
1
|
+
import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
|
|
2
2
|
import type { InputEmailRebuiltProps } from "../InputEmail.types";
|
|
3
|
-
export interface UseInputEmailActionsProps extends Pick<InputEmailRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp"> {
|
|
3
|
+
export interface UseInputEmailActionsProps extends Pick<InputEmailRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
|
|
4
4
|
inputRef?: React.RefObject<HTMLInputElement>;
|
|
5
5
|
}
|
|
6
|
-
export declare function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, }: UseInputEmailActionsProps): {
|
|
6
|
+
export declare function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }: UseInputEmailActionsProps): {
|
|
7
7
|
handleClear: () => void;
|
|
8
8
|
handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
9
9
|
handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
|
|
10
10
|
handleKeyUp: (event: KeyboardEvent<HTMLInputElement>) => void;
|
|
11
11
|
handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
|
|
12
12
|
handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
|
|
13
|
+
handleClick: (event: MouseEvent<HTMLInputElement>) => void;
|
|
14
|
+
handleMouseDown: (event: MouseEvent<HTMLInputElement>) => void;
|
|
15
|
+
handleMouseUp: (event: MouseEvent<HTMLInputElement>) => void;
|
|
16
|
+
handlePointerDown: (event: PointerEvent<HTMLInputElement>) => void;
|
|
17
|
+
handlePointerUp: (event: PointerEvent<HTMLInputElement>) => void;
|
|
13
18
|
};
|
|
@@ -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
|
};
|
package/dist/InputTime/index.cjs
CHANGED
|
@@ -205,7 +205,7 @@ function timeStringToDate(timeString, baseDate) {
|
|
|
205
205
|
}
|
|
206
206
|
}
|
|
207
207
|
|
|
208
|
-
function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, }) {
|
|
208
|
+
function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
|
|
209
209
|
function handleChangeEvent(event) {
|
|
210
210
|
handleChange(event.target.value);
|
|
211
211
|
}
|
|
@@ -232,6 +232,21 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
|
|
|
232
232
|
function handleKeyDown(event) {
|
|
233
233
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
234
234
|
}
|
|
235
|
+
function handleClick(event) {
|
|
236
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
237
|
+
}
|
|
238
|
+
function handleMouseDown(event) {
|
|
239
|
+
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
|
|
240
|
+
}
|
|
241
|
+
function handleMouseUp(event) {
|
|
242
|
+
onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
|
|
243
|
+
}
|
|
244
|
+
function handlePointerDown(event) {
|
|
245
|
+
onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
|
|
246
|
+
}
|
|
247
|
+
function handlePointerUp(event) {
|
|
248
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
|
|
249
|
+
}
|
|
235
250
|
return {
|
|
236
251
|
handleChangeEvent,
|
|
237
252
|
handleChange,
|
|
@@ -239,6 +254,11 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
|
|
|
239
254
|
handleClear,
|
|
240
255
|
handleFocus,
|
|
241
256
|
handleKeyDown,
|
|
257
|
+
handleClick,
|
|
258
|
+
handleMouseDown,
|
|
259
|
+
handleMouseUp,
|
|
260
|
+
handlePointerDown,
|
|
261
|
+
handlePointerUp,
|
|
242
262
|
};
|
|
243
263
|
}
|
|
244
264
|
|
|
@@ -249,7 +269,7 @@ function InputTimeRebuilt(_a) {
|
|
|
249
269
|
const generatedId = React.useId();
|
|
250
270
|
const id = props.id || generatedId;
|
|
251
271
|
const { inputStyle } = FormField.useFormFieldWrapperStyles(props);
|
|
252
|
-
const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, } = useInputTimeActions({
|
|
272
|
+
const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
|
|
253
273
|
onChange,
|
|
254
274
|
value,
|
|
255
275
|
readOnly,
|
|
@@ -258,6 +278,11 @@ function InputTimeRebuilt(_a) {
|
|
|
258
278
|
onFocus: props.onFocus,
|
|
259
279
|
onBlur: props.onBlur,
|
|
260
280
|
onKeyDown: props.onKeyDown,
|
|
281
|
+
onClick: props.onClick,
|
|
282
|
+
onMouseDown: props.onMouseDown,
|
|
283
|
+
onMouseUp: props.onMouseUp,
|
|
284
|
+
onPointerDown: props.onPointerDown,
|
|
285
|
+
onPointerUp: props.onPointerUp,
|
|
261
286
|
});
|
|
262
287
|
const { setTypedTime } = useTimePredict({
|
|
263
288
|
value,
|
|
@@ -276,7 +301,7 @@ function InputTimeRebuilt(_a) {
|
|
|
276
301
|
const descriptionVisible = props.description && !props.inline;
|
|
277
302
|
const isInvalid = Boolean(props.error || props.invalid);
|
|
278
303
|
return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
|
|
279
|
-
React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: inputStyle, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
|
|
304
|
+
React.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: inputStyle, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
|
|
280
305
|
}
|
|
281
306
|
function useInputTimeRefs(inputRef) {
|
|
282
307
|
const internalRef = React.useRef(null);
|
package/dist/InputTime/index.mjs
CHANGED
|
@@ -203,7 +203,7 @@ function timeStringToDate(timeString, baseDate) {
|
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, }) {
|
|
206
|
+
function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKeyDown, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
|
|
207
207
|
function handleChangeEvent(event) {
|
|
208
208
|
handleChange(event.target.value);
|
|
209
209
|
}
|
|
@@ -230,6 +230,21 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
|
|
|
230
230
|
function handleKeyDown(event) {
|
|
231
231
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
232
232
|
}
|
|
233
|
+
function handleClick(event) {
|
|
234
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
235
|
+
}
|
|
236
|
+
function handleMouseDown(event) {
|
|
237
|
+
onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
|
|
238
|
+
}
|
|
239
|
+
function handleMouseUp(event) {
|
|
240
|
+
onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
|
|
241
|
+
}
|
|
242
|
+
function handlePointerDown(event) {
|
|
243
|
+
onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
|
|
244
|
+
}
|
|
245
|
+
function handlePointerUp(event) {
|
|
246
|
+
onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
|
|
247
|
+
}
|
|
233
248
|
return {
|
|
234
249
|
handleChangeEvent,
|
|
235
250
|
handleChange,
|
|
@@ -237,6 +252,11 @@ function useInputTimeActions({ onChange, value, inputRef, onFocus, onBlur, onKey
|
|
|
237
252
|
handleClear,
|
|
238
253
|
handleFocus,
|
|
239
254
|
handleKeyDown,
|
|
255
|
+
handleClick,
|
|
256
|
+
handleMouseDown,
|
|
257
|
+
handleMouseUp,
|
|
258
|
+
handlePointerDown,
|
|
259
|
+
handlePointerUp,
|
|
240
260
|
};
|
|
241
261
|
}
|
|
242
262
|
|
|
@@ -247,7 +267,7 @@ function InputTimeRebuilt(_a) {
|
|
|
247
267
|
const generatedId = useId();
|
|
248
268
|
const id = props.id || generatedId;
|
|
249
269
|
const { inputStyle } = useFormFieldWrapperStyles(props);
|
|
250
|
-
const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, } = useInputTimeActions({
|
|
270
|
+
const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
|
|
251
271
|
onChange,
|
|
252
272
|
value,
|
|
253
273
|
readOnly,
|
|
@@ -256,6 +276,11 @@ function InputTimeRebuilt(_a) {
|
|
|
256
276
|
onFocus: props.onFocus,
|
|
257
277
|
onBlur: props.onBlur,
|
|
258
278
|
onKeyDown: props.onKeyDown,
|
|
279
|
+
onClick: props.onClick,
|
|
280
|
+
onMouseDown: props.onMouseDown,
|
|
281
|
+
onMouseUp: props.onMouseUp,
|
|
282
|
+
onPointerDown: props.onPointerDown,
|
|
283
|
+
onPointerUp: props.onPointerUp,
|
|
259
284
|
});
|
|
260
285
|
const { setTypedTime } = useTimePredict({
|
|
261
286
|
value,
|
|
@@ -274,7 +299,7 @@ function InputTimeRebuilt(_a) {
|
|
|
274
299
|
const descriptionVisible = props.description && !props.inline;
|
|
275
300
|
const isInvalid = Boolean(props.error || props.invalid);
|
|
276
301
|
return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: props.name, error: props.error || "", identifier: id, descriptionIdentifier: descriptionIdentifier, invalid: props.invalid, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: "time", readonly: readOnly, placeholder: props.placeholder, value: dateToTimeString(value), wrapperRef: wrapperRef },
|
|
277
|
-
React__default.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: inputStyle, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
|
|
302
|
+
React__default.createElement("input", Object.assign({ ref: mergedRef, type: "time", name: props.name, className: inputStyle, id: id, disabled: props.disabled, readOnly: readOnly, autoComplete: autoComplete, autoFocus: props.autoFocus, max: props.max, min: props.min, value: dateToTimeString(value), onChange: handleChangeEvent, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputTime-input", "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"] }, dataAttrs))));
|
|
278
303
|
}
|
|
279
304
|
function useInputTimeRefs(inputRef) {
|
|
280
305
|
const internalRef = useRef(null);
|
|
@@ -82,6 +82,32 @@ export interface FocusEvents<Target = HTMLElement> {
|
|
|
82
82
|
*/
|
|
83
83
|
readonly onBlur?: (event: React.FocusEvent<Target>) => void;
|
|
84
84
|
}
|
|
85
|
+
/**
|
|
86
|
+
* Mouse event handlers for input elements.
|
|
87
|
+
* Generic interface that can be specialized for different element types.
|
|
88
|
+
*/
|
|
89
|
+
export interface MouseEvents<Target = HTMLElement> {
|
|
90
|
+
/**
|
|
91
|
+
* Mouse down event handler.
|
|
92
|
+
*/
|
|
93
|
+
readonly onMouseDown?: (event: React.MouseEvent<Target>) => void;
|
|
94
|
+
/**
|
|
95
|
+
* Mouse up event handler.
|
|
96
|
+
*/
|
|
97
|
+
readonly onMouseUp?: (event: React.MouseEvent<Target>) => void;
|
|
98
|
+
/**
|
|
99
|
+
* Pointer down event handler.
|
|
100
|
+
*/
|
|
101
|
+
readonly onPointerDown?: (event: React.PointerEvent<Target>) => void;
|
|
102
|
+
/**
|
|
103
|
+
* Pointer up event handler.
|
|
104
|
+
*/
|
|
105
|
+
readonly onPointerUp?: (event: React.PointerEvent<Target>) => void;
|
|
106
|
+
/**
|
|
107
|
+
* Click event handler.
|
|
108
|
+
*/
|
|
109
|
+
readonly onClick?: (event: React.MouseEvent<Target>) => void;
|
|
110
|
+
}
|
|
85
111
|
/**
|
|
86
112
|
* Keyboard event handlers for input elements.
|
|
87
113
|
* Generic interface that can be specialized for different element types.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.105.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -538,5 +538,5 @@
|
|
|
538
538
|
"> 1%",
|
|
539
539
|
"IE 10"
|
|
540
540
|
],
|
|
541
|
-
"gitHead": "
|
|
541
|
+
"gitHead": "928e7dfed0ad62e2c9e54e94a84d04bb2e686b6e"
|
|
542
542
|
}
|