@jobber/components 6.103.2-JOB-140609-9051081.26 → 6.103.2-JOB-140609-8386817.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/Autocomplete/Autocomplete.types.d.ts +1 -1
  2. package/dist/Checkbox/Checkbox.types.d.ts +1 -1
  3. package/dist/Checkbox/index.cjs +3 -2
  4. package/dist/Checkbox/index.mjs +3 -2
  5. package/dist/FormField/FormFieldTypes.d.ts +1 -219
  6. package/dist/FormField/hooks/useFormFieldWrapperStyles.d.ts +7 -2
  7. package/dist/InputDate/index.cjs +4 -12
  8. package/dist/InputDate/index.mjs +4 -12
  9. package/dist/InputDate/useInputDateActivatorActions.d.ts +4 -8
  10. package/dist/InputEmail/InputEmail.types.d.ts +3 -6
  11. package/dist/InputEmail/index.cjs +4 -5
  12. package/dist/InputEmail/index.mjs +4 -5
  13. package/dist/InputNumber/InputNumber.rebuilt.types.d.ts +2 -6
  14. package/dist/InputNumber/index.cjs +1 -4
  15. package/dist/InputNumber/index.mjs +1 -4
  16. package/dist/InputPhoneNumber/InputPhoneNumber.types.d.ts +2 -5
  17. package/dist/InputPhoneNumber/index.cjs +3 -5
  18. package/dist/InputPhoneNumber/index.mjs +3 -5
  19. package/dist/InputText/InputText.d.ts +2 -2
  20. package/dist/InputText/InputText.types.d.ts +3 -6
  21. package/dist/InputText/index.cjs +36 -7
  22. package/dist/InputText/index.mjs +37 -8
  23. package/dist/InputTime/InputTime.types.d.ts +2 -2
  24. package/dist/InputTime/hooks/useInputTimeActions.d.ts +16 -0
  25. package/dist/InputTime/index.cjs +56 -31
  26. package/dist/InputTime/index.mjs +57 -32
  27. package/dist/Select/Select.types.d.ts +1 -1
  28. package/dist/Select/index.cjs +2 -1
  29. package/dist/Select/index.mjs +2 -1
  30. package/dist/Tabs-es.js +1 -1
  31. package/dist/debounce-es.js +1 -1
  32. package/dist/sharedHelpers/types.d.ts +235 -0
  33. package/dist/useScrollToActive-es.js +1 -1
  34. package/package.json +2 -2
@@ -1,5 +1,5 @@
1
1
  import type { CSSProperties, Key, Ref, RefObject } from "react";
2
- import type { AriaInputProps } from "../FormField/FormFieldTypes";
2
+ import type { AriaInputProps } from "../sharedHelpers/types";
3
3
  import type { FormFieldProps } from "../FormField";
4
4
  import type { InputTextRebuiltProps, InputTextRef } from "../InputText";
5
5
  /**
@@ -1,6 +1,6 @@
1
1
  import type { ReactElement, ReactNode } from "react";
2
2
  import type { XOR } from "ts-xor";
3
- import type { AriaInputProps, FocusEvents } from "../FormField/FormFieldTypes";
3
+ import type { AriaInputProps, FocusEvents } from "../sharedHelpers/types";
4
4
  export interface BaseCheckboxProps extends AriaInputProps, FocusEvents<HTMLInputElement> {
5
5
  /**
6
6
  * Determines if the checkbox is checked or not.
@@ -54,9 +54,10 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
54
54
  } }));
55
55
  }
56
56
 
57
- const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, ariaLabel, ariaDescribedBy, ariaInvalid, ariaRequired, }, ref) {
57
+ const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, ariaLabel, ariaDescribedBy, ariaRequired, }, ref) {
58
58
  const descriptionIdentifier = React.useId();
59
59
  const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
60
+ const isInvalid = Boolean(invalid);
60
61
  const inputClassName = classnames(styles.input, {
61
62
  [styles.indeterminate]: indeterminate,
62
63
  });
@@ -71,7 +72,7 @@ const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ chec
71
72
  React.createElement("label", { className: wrapperClassName },
72
73
  React.createElement("span", { className: styles.checkHolder },
73
74
  React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy ||
74
- (description ? descriptionIdentifier : undefined), "aria-invalid": ariaInvalid, "aria-required": ariaRequired, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
75
+ (description ? descriptionIdentifier : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": ariaRequired, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
75
76
  React.createElement("span", { className: styles.checkBox },
76
77
  React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
77
78
  labelContent && React.createElement("span", { className: styles.label }, labelContent)),
@@ -52,9 +52,10 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
52
52
  } }));
53
53
  }
54
54
 
55
- const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, ariaLabel, ariaDescribedBy, ariaInvalid, ariaRequired, }, ref) {
55
+ const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, ariaLabel, ariaDescribedBy, ariaRequired, }, ref) {
56
56
  const descriptionIdentifier = useId();
57
57
  const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
58
+ const isInvalid = Boolean(invalid);
58
59
  const inputClassName = classnames(styles.input, {
59
60
  [styles.indeterminate]: indeterminate,
60
61
  });
@@ -69,7 +70,7 @@ const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, d
69
70
  React__default.createElement("label", { className: wrapperClassName },
70
71
  React__default.createElement("span", { className: styles.checkHolder },
71
72
  React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy ||
72
- (description ? descriptionIdentifier : undefined), "aria-invalid": ariaInvalid, "aria-required": ariaRequired, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
73
+ (description ? descriptionIdentifier : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": ariaRequired, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
73
74
  React__default.createElement("span", { className: styles.checkBox },
74
75
  React__default.createElement(Icon, { name: iconName, color: "surface" }))),
75
76
  labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
@@ -1,4 +1,4 @@
1
- import type { AriaAttributes, ChangeEvent, ReactNode, RefObject } from "react";
1
+ import type { ChangeEvent, ReactNode, RefObject } from "react";
2
2
  import type React from "react";
3
3
  import type { RegisterOptions } from "react-hook-form";
4
4
  import type { XOR } from "ts-xor";
@@ -7,222 +7,6 @@ import type { IconNames } from "../Icon";
7
7
  export type FormFieldTypes = "text" | "password" | "number" | "time" | "textarea" | "select" | "tel" | "email";
8
8
  export type KeyBoardTypes = "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
9
9
  export type AutocompleteTypes = "one-time-code" | "address-line1" | "address-line2";
10
- /**
11
- * Core ARIA attributes for input elements.
12
- * Uses camelCase naming for consistency with React props pattern.
13
- * Based on React's canonical ARIA type definitions.
14
- */
15
- export interface AriaInputProps {
16
- /**
17
- * Defines a string value that labels the current element.
18
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label}
19
- */
20
- readonly ariaLabel?: AriaAttributes["aria-label"];
21
- /**
22
- * Identifies the element (or elements) that labels the current element.
23
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-labelledby}
24
- */
25
- readonly ariaLabelledBy?: AriaAttributes["aria-labelledby"];
26
- /**
27
- * Identifies the element (or elements) that describes the object.
28
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-describedby}
29
- */
30
- readonly ariaDescribedBy?: AriaAttributes["aria-describedby"];
31
- /**
32
- * Identifies the element (or elements) that provide a detailed, extended description.
33
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-details}
34
- */
35
- readonly ariaDetails?: AriaAttributes["aria-details"];
36
- /**
37
- * ID of the currently active descendant element.
38
- * Used for composite widgets like combobox or listbox.
39
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant}
40
- */
41
- readonly ariaActiveDescendant?: AriaAttributes["aria-activedescendant"];
42
- /**
43
- * Indicates the entered value does not conform to the format expected.
44
- * Supports boolean or specific error types: "grammar" | "spelling".
45
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-invalid}
46
- */
47
- readonly ariaInvalid?: AriaAttributes["aria-invalid"];
48
- /**
49
- * Indicates the element that controls the current element.
50
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls}
51
- */
52
- readonly ariaControls?: AriaAttributes["aria-controls"];
53
- /**
54
- * Indicates whether the element is expanded or collapsed.
55
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded}
56
- */
57
- readonly ariaExpanded?: AriaAttributes["aria-expanded"];
58
- /**
59
- * Indicates the type of autocomplete interaction.
60
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete}
61
- */
62
- readonly ariaAutocomplete?: AriaAttributes["aria-autocomplete"];
63
- /**
64
- * Indicates that user input is required before form submission.
65
- * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-required}
66
- */
67
- readonly ariaRequired?: AriaAttributes["aria-required"];
68
- }
69
- /**
70
- * Focus event handlers for input elements.
71
- * Generic interface that can be specialized for different element types.
72
- */
73
- export interface FocusEvents<Target = HTMLElement> {
74
- /**
75
- * Focus event handler.
76
- */
77
- readonly onFocus?: (event: React.FocusEvent<Target>) => void;
78
- /**
79
- * Blur event handler.
80
- */
81
- readonly onBlur?: (event: React.FocusEvent<Target>) => void;
82
- }
83
- /**
84
- * Keyboard event handlers for input elements.
85
- * Generic interface that can be specialized for different element types.
86
- */
87
- export interface KeyboardEvents<Target = HTMLElement> {
88
- /**
89
- * Key down event handler.
90
- */
91
- readonly onKeyDown?: (event: React.KeyboardEvent<Target>) => void;
92
- /**
93
- * Key up event handler.
94
- */
95
- readonly onKeyUp?: (event: React.KeyboardEvent<Target>) => void;
96
- }
97
- /**
98
- * Curated set of HTML input attributes for rebuilt input components.
99
- * This provides a whitelist of standard HTML/React props we want to support,
100
- * avoiding the issues of extending React.InputHTMLAttributes directly.
101
- * Note: Event handlers and ARIA attributes are separate - use FocusEvents, KeyboardEvents, and AriaInputProps.
102
- */
103
- export interface HTMLInputBaseProps extends AriaInputProps {
104
- /**
105
- * The unique identifier for the input element.
106
- */
107
- readonly id?: string;
108
- /**
109
- * The name attribute for the input element.
110
- */
111
- readonly name?: string;
112
- /**
113
- * Placeholder text that appears when the input is empty.
114
- */
115
- readonly placeholder?: string;
116
- /**
117
- * Whether the input is disabled.
118
- */
119
- readonly disabled?: boolean;
120
- /**
121
- * Whether the input is required.
122
- */
123
- readonly required?: boolean;
124
- /**
125
- * Whether the input is read-only (HTML standard casing).
126
- */
127
- readonly readOnly?: boolean;
128
- /**
129
- * Whether the input should be auto-focused (React casing).
130
- */
131
- readonly autoFocus?: boolean;
132
- /**
133
- * Autocomplete behavior for the input (React casing, string values only).
134
- * Use standard HTML autocomplete values or "on"/"off".
135
- */
136
- readonly autoComplete?: string;
137
- /**
138
- * Maximum character length for the input (HTML validation only).
139
- * Note: In v2, this does NOT affect the visual width of the component.
140
- * Use CSS or the size prop for width control.
141
- */
142
- readonly maxLength?: number;
143
- /**
144
- * Minimum character length for the input.
145
- */
146
- readonly minLength?: number;
147
- /**
148
- * Maximum numerical value (for number inputs).
149
- */
150
- readonly max?: number | string;
151
- /**
152
- * Minimum numerical value (for number inputs).
153
- */
154
- readonly min?: number | string;
155
- /**
156
- * Validation pattern (regex) for the input.
157
- */
158
- readonly pattern?: string;
159
- /**
160
- * Input mode hint for virtual keyboards.
161
- */
162
- readonly inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
163
- /**
164
- * Role attribute for accessibility.
165
- */
166
- readonly role?: string;
167
- /**
168
- * Tab index for keyboard navigation.
169
- */
170
- readonly tabIndex?: number;
171
- }
172
- /**
173
- * Common props shared across all rebuilt input components.
174
- * These are Atlantis-specific features not part of standard HTML inputs.
175
- */
176
- export interface RebuiltInputCommonProps {
177
- /**
178
- * Error message to display. This also highlights the field red.
179
- */
180
- readonly error?: string;
181
- /**
182
- * Highlights the field red to indicate an error.
183
- */
184
- readonly invalid?: boolean;
185
- /**
186
- * Show a spinner to indicate loading.
187
- */
188
- readonly loading?: boolean;
189
- /**
190
- * Add a clear action on the input that clears the value.
191
- */
192
- readonly clearable?: Clearable;
193
- /**
194
- * Adjusts the interface to either have small or large spacing.
195
- */
196
- readonly size?: "small" | "large";
197
- /**
198
- * Adjusts the form field to go inline with content.
199
- */
200
- readonly inline?: boolean;
201
- /**
202
- * Determines the alignment of the text inside the input.
203
- */
204
- readonly align?: "center" | "right";
205
- /**
206
- * Adds a prefix label and icon to the field.
207
- */
208
- readonly prefix?: Affix;
209
- /**
210
- * Adds a suffix label and icon with an optional action to the field.
211
- */
212
- readonly suffix?: XOR<Affix, Suffix>;
213
- /**
214
- * Further description of the input, can be used for a hint.
215
- */
216
- readonly description?: ReactNode;
217
- /**
218
- * Children elements to render inside the component.
219
- */
220
- readonly children?: ReactNode;
221
- /**
222
- * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
223
- */
224
- readonly version: 2;
225
- }
226
10
  export interface FieldActionsRef {
227
11
  setValue(value: string | number): void;
228
12
  }
@@ -374,8 +158,6 @@ export interface FormFieldProps extends CommonFormFieldProps {
374
158
  */
375
159
  readonly suffix?: XOR<Affix, Suffix>;
376
160
  /**
377
- * Simplified onChange handler that only provides the new value.
378
- * @param newValue
379
161
  * Specifies the minimum numerical or date value that a user can type
380
162
  */
381
163
  readonly min?: number;
@@ -1,7 +1,12 @@
1
1
  import type { RefObject } from "react";
2
2
  import type { FormFieldProps } from "../FormFieldTypes";
3
- export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "max" | "maxLength" | "type" | "disabled" | "inline"> {
3
+ export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "maxLength" | "type" | "disabled" | "inline"> {
4
4
  readonly error?: string;
5
+ /**
6
+ * Maximum numerical or date value
7
+ * In v2 components, this is typically undefined.
8
+ */
9
+ readonly max?: number | string;
5
10
  suffixRef?: RefObject<HTMLDivElement>;
6
11
  prefixRef?: RefObject<HTMLDivElement>;
7
12
  showMiniLabel?: boolean;
@@ -18,7 +23,7 @@ export declare function useFormFieldWrapperStyles({ size, align, placeholder, va
18
23
  wrapperClasses: string;
19
24
  containerClasses: string;
20
25
  wrapperInlineStyle: {
21
- [x: string]: number | undefined;
26
+ [x: string]: string | number | undefined;
22
27
  };
23
28
  labelStyle: LabelPadding;
24
29
  setLabelStyle: import("react").Dispatch<import("react").SetStateAction<LabelPadding>>;
@@ -79,26 +79,18 @@ function InputDate$1(inputProps) {
79
79
  } }));
80
80
  }
81
81
 
82
- /**
83
- * Combines the actions on the InputDate such as onChange, onFocus, onBlur to forward event handler passed to the InputDate component to the DatePicker component.
84
- * 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.
85
- */
86
82
  function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
87
83
  const [isFocused, setIsFocused] = React.useState(false);
88
- function handleChange(_, event) {
84
+ function handleChange(_newValue, event) {
89
85
  onChange === null || onChange === void 0 ? void 0 : onChange(event);
90
86
  }
91
87
  function handleFocus(event) {
92
- if (event) {
93
- onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
94
- }
88
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
95
89
  setIsFocused(true);
96
90
  }
97
91
  function handleBlur(event) {
92
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
98
93
  setIsFocused(false);
99
- if (event) {
100
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
101
- }
102
94
  }
103
95
  return {
104
96
  handleBlur,
@@ -139,7 +131,7 @@ const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
139
131
  return (
140
132
  // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
141
133
  React.createElement("div", { onClick: onClick },
142
- React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-invalid": activatorProps.ariaInvalid === "true" ? true : false, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
134
+ React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
143
135
  var _a, _b;
144
136
  if (props.showIcon === false && event.key === "ArrowDown") {
145
137
  (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
@@ -77,26 +77,18 @@ function InputDate$1(inputProps) {
77
77
  } }));
78
78
  }
79
79
 
80
- /**
81
- * Combines the actions on the InputDate such as onChange, onFocus, onBlur to forward event handler passed to the InputDate component to the DatePicker component.
82
- * 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.
83
- */
84
80
  function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
85
81
  const [isFocused, setIsFocused] = useState(false);
86
- function handleChange(_, event) {
82
+ function handleChange(_newValue, event) {
87
83
  onChange === null || onChange === void 0 ? void 0 : onChange(event);
88
84
  }
89
85
  function handleFocus(event) {
90
- if (event) {
91
- onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
92
- }
86
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
93
87
  setIsFocused(true);
94
88
  }
95
89
  function handleBlur(event) {
90
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
96
91
  setIsFocused(false);
97
- if (event) {
98
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
99
- }
100
92
  }
101
93
  return {
102
94
  handleBlur,
@@ -137,7 +129,7 @@ const InputDateRebuilt = forwardRef((props, forwardedRef) => {
137
129
  return (
138
130
  // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
139
131
  React__default.createElement("div", { onClick: onClick },
140
- React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-invalid": activatorProps.ariaInvalid === "true" ? true : false, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
132
+ React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
141
133
  var _a, _b;
142
134
  if (props.showIcon === false && event.key === "ArrowDown") {
143
135
  (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);
@@ -1,16 +1,12 @@
1
- import type { ChangeEvent, FocusEvent } from "react";
1
+ import type { ChangeEvent } from "react";
2
2
  import type { InputDateRebuiltProps } from "./InputDate.types";
3
3
  import type { DatePickerActivatorProps } from "../DatePicker/DatePickerActivator";
4
4
  export interface useInputDateActivatorActionsProps extends Pick<InputDateRebuiltProps, "onFocus" | "onBlur"> {
5
5
  onChange: DatePickerActivatorProps["onChange"];
6
6
  }
7
- /**
8
- * Combines the actions on the InputDate such as onChange, onFocus, onBlur to forward event handler passed to the InputDate component to the DatePicker component.
9
- * 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.
10
- */
11
7
  export declare function useInputDateActivatorActions({ onChange, onBlur, onFocus, }: useInputDateActivatorActionsProps): {
12
- handleBlur: (event?: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
13
- handleChange: (_: unknown, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
14
- handleFocus: (event?: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
8
+ handleBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
9
+ handleChange: (_newValue: string, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
10
+ handleFocus: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
15
11
  isFocused: boolean;
16
12
  };
@@ -1,4 +1,5 @@
1
- import type { CommonFormFieldProps, FocusEvents, FormFieldProps, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../FormField";
1
+ import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
2
+ import type { FocusEvents, HTMLInputBaseProps, InputLengthConstraint, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
2
3
  export type InputEmailLegacyProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
3
4
  export declare const validationMessage = "Please enter a valid email";
4
5
  export type InputEmailVersion = 1 | 2 | undefined;
@@ -6,7 +7,7 @@ export type InputEmailVersion = 1 | 2 | undefined;
6
7
  * Experimental version 2 of the InputEmail component.
7
8
  * Do not use unless you have talked with Atlantis first.
8
9
  */
9
- export interface InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, RebuiltInputCommonProps {
10
+ export interface InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, RebuiltInputCommonProps, InputLengthConstraint {
10
11
  /**
11
12
  * The current value of the input.
12
13
  */
@@ -21,8 +22,4 @@ export interface InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<
21
22
  * are being held.
22
23
  */
23
24
  readonly onEnter?: FormFieldProps["onEnter"];
24
- /**
25
- * @deprecated Use `id` instead. This prop will be removed in a future version.
26
- */
27
- readonly identifier?: string;
28
25
  }
@@ -37,7 +37,6 @@ function InputEmail$1(props) {
37
37
  function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
38
38
  function handleClear() {
39
39
  var _a;
40
- // Don't call blur handler when programmatically clearing
41
40
  onChange === null || onChange === void 0 ? void 0 : onChange("");
42
41
  (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
43
42
  }
@@ -74,7 +73,7 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
74
73
  const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, ref) {
75
74
  var _a, _b, _c;
76
75
  const generatedId = React.useId();
77
- const id = props.identifier || props.id || generatedId;
76
+ const id = props.id || generatedId;
78
77
  const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : React.useRef(null);
79
78
  const wrapperRef = React.useRef(null);
80
79
  const { inputStyle } = FormField.useFormFieldWrapperStyles({
@@ -85,7 +84,7 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
85
84
  value: props.value,
86
85
  invalid: props.invalid,
87
86
  error: props.error,
88
- maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
87
+ maxLength: props.maxLength,
89
88
  disabled: props.disabled,
90
89
  placeholder: props.placeholder,
91
90
  });
@@ -103,9 +102,9 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
103
102
  });
104
103
  const descriptionIdentifier = `descriptionUUID--${id}`;
105
104
  const hasDescription = props.description && !props.inline;
106
- const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
105
+ const isInvalid = Boolean(props.error || props.invalid);
107
106
  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, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, autofocus: props.autoFocus, name: name },
108
- React.createElement("input", { id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, "data-testid": "ATL-InputEmail-input" }),
107
+ React.createElement("input", { 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, maxLength: props.maxLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, "data-testid": "ATL-InputEmail-input" }),
109
108
  React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
110
109
  props.children));
111
110
  });
@@ -35,7 +35,6 @@ function InputEmail$1(props) {
35
35
  function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
36
36
  function handleClear() {
37
37
  var _a;
38
- // Don't call blur handler when programmatically clearing
39
38
  onChange === null || onChange === void 0 ? void 0 : onChange("");
40
39
  (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
41
40
  }
@@ -72,7 +71,7 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
72
71
  const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
73
72
  var _a, _b, _c;
74
73
  const generatedId = useId();
75
- const id = props.identifier || props.id || generatedId;
74
+ const id = props.id || generatedId;
76
75
  const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : useRef(null);
77
76
  const wrapperRef = useRef(null);
78
77
  const { inputStyle } = useFormFieldWrapperStyles({
@@ -83,7 +82,7 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
83
82
  value: props.value,
84
83
  invalid: props.invalid,
85
84
  error: props.error,
86
- maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
85
+ maxLength: props.maxLength,
87
86
  disabled: props.disabled,
88
87
  placeholder: props.placeholder,
89
88
  });
@@ -101,9 +100,9 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
101
100
  });
102
101
  const descriptionIdentifier = `descriptionUUID--${id}`;
103
102
  const hasDescription = props.description && !props.inline;
104
- const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
103
+ const isInvalid = Boolean(props.error || props.invalid);
105
104
  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, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, autofocus: props.autoFocus, name: name },
106
- React__default.createElement("input", { id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, "data-testid": "ATL-InputEmail-input" }),
105
+ React__default.createElement("input", { 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, maxLength: props.maxLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, "data-testid": "ATL-InputEmail-input" }),
107
106
  React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
108
107
  props.children));
109
108
  });
@@ -1,9 +1,9 @@
1
1
  import type { ReactNode } from "react";
2
2
  import type React from "react";
3
3
  import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
4
- import type { AriaInputProps, FocusEvents, KeyboardEvents } from "../FormField/FormFieldTypes";
4
+ import type { AriaInputProps, FocusEvents, InputConstraintProps, KeyboardEvents } from "../sharedHelpers/types";
5
5
  export type InputNumberVersion = 1 | 2 | undefined;
6
- export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "version">, AriaInputProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement> {
6
+ export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "version">, AriaInputProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, InputConstraintProps {
7
7
  readonly align?: "center" | "right";
8
8
  /**
9
9
  * HTML autocomplete attribute for browser autofill.
@@ -14,10 +14,6 @@ export interface InputNumberRebuiltProps extends Omit<CommonFormFieldProps, "ver
14
14
  readonly description?: ReactNode;
15
15
  readonly error?: string;
16
16
  readonly formatOptions?: Intl.NumberFormatOptions;
17
- /**
18
- * @deprecated Use `id` instead.
19
- */
20
- readonly identifier?: string;
21
17
  /**
22
18
  * The ID of the input element.
23
19
  */
@@ -2740,10 +2740,7 @@ const InputNumberRebuilt = React.forwardRef((props, ref) => {
2740
2740
  }
2741
2741
  },
2742
2742
  }));
2743
- const { align, description, disabled, error, inline, invalid, placeholder, readOnly, showMiniLabel = true, size, minValue, maxValue,
2744
- // Deprecated props (filter out to avoid spreading to React Aria)
2745
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2746
- identifier: _deprecatedIdentifier } = props, ariaNumberFieldProps = tslib_es6.__rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readOnly", "showMiniLabel", "size", "minValue", "maxValue", "identifier"]);
2743
+ 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"]);
2747
2744
  const stringDescription = typeof description === "string";
2748
2745
  return (React.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, id: props.id, 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 }),
2749
2746
  React.createElement($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: classnames(styles.wrapper, align && styles[align], invalid && styles.invalid, disabled && styles.disabled) },
@@ -2738,10 +2738,7 @@ const InputNumberRebuilt = forwardRef((props, ref) => {
2738
2738
  }
2739
2739
  },
2740
2740
  }));
2741
- const { align, description, disabled, error, inline, invalid, placeholder, readOnly, showMiniLabel = true, size, minValue, maxValue,
2742
- // Deprecated props (filter out to avoid spreading to React Aria)
2743
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2744
- identifier: _deprecatedIdentifier } = props, ariaNumberFieldProps = __rest(props, ["align", "description", "disabled", "error", "inline", "invalid", "placeholder", "readOnly", "showMiniLabel", "size", "minValue", "maxValue", "identifier"]);
2741
+ 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"]);
2745
2742
  const stringDescription = typeof description === "string";
2746
2743
  return (React__default.createElement($b91743d66a0ed188$export$63c5fa0b2fdccd2e, Object.assign({}, ariaNumberFieldProps, { className: classnames(styles.container, inline && styles.inline), formatOptions: mergedFormatOptions, id: props.id, 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
2744
  React__default.createElement($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: classnames(styles.wrapper, align && styles[align], invalid && styles.invalid, disabled && styles.disabled) },
@@ -1,5 +1,6 @@
1
1
  import type { InputMaskProps } from "./InputMask";
2
- import type { CommonFormFieldProps, FocusEvents, FormFieldProps, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../FormField";
2
+ import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
3
+ import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
3
4
  export interface InputPhoneNumberLegacyProps extends Omit<CommonFormFieldProps, "align">, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "validations" | "readonly" | "prefix" | "suffix"> {
4
5
  readonly value: string;
5
6
  readonly onChange: (value: string) => void;
@@ -37,9 +38,5 @@ export interface InputPhoneNumberRebuiltProps extends Omit<HTMLInputBaseProps, "
37
38
  * @default "(***) ***-****"
38
39
  */
39
40
  readonly pattern?: InputMaskProps["pattern"];
40
- /**
41
- * @deprecated Use `id` instead. This prop will be removed in a future version.
42
- */
43
- readonly identifier?: string;
44
41
  }
45
42
  export declare const DEFAULT_PATTERN = "(***) ***-****";