@jobber/components 7.11.3 → 7.12.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.
Files changed (49) hide show
  1. package/dist/Autocomplete/index.cjs +1 -0
  2. package/dist/Autocomplete/index.mjs +1 -0
  3. package/dist/DataList/components/DataListSearch/index.cjs +1 -0
  4. package/dist/DataList/components/DataListSearch/index.mjs +1 -0
  5. package/dist/DataList/index.cjs +1 -0
  6. package/dist/DataList/index.mjs +1 -0
  7. package/dist/DataTable/index.cjs +1 -0
  8. package/dist/DataTable/index.mjs +1 -0
  9. package/dist/FormField/index.cjs +2 -1
  10. package/dist/FormField/index.mjs +2 -1
  11. package/dist/FormField-cjs.js +2 -1
  12. package/dist/FormField-es.js +2 -1
  13. package/dist/InputDate/index.cjs +1 -0
  14. package/dist/InputDate/index.mjs +1 -0
  15. package/dist/InputEmail/InputEmail.d.ts +2 -2
  16. package/dist/InputEmail/InputEmail.types.d.ts +2 -12
  17. package/dist/InputEmail/hooks/useInputEmailActions.d.ts +3 -3
  18. package/dist/InputEmail/hooks/useInputEmailRefs.d.ts +4 -0
  19. package/dist/InputEmail/index.cjs +8 -129
  20. package/dist/InputEmail/index.d.ts +2 -5
  21. package/dist/InputEmail/index.mjs +7 -132
  22. package/dist/InputEmail-cjs.js +107 -0
  23. package/dist/InputEmail-es.js +105 -0
  24. package/dist/InputNumber/index.cjs +1 -0
  25. package/dist/InputNumber/index.mjs +1 -0
  26. package/dist/InputPassword/index.cjs +1 -0
  27. package/dist/InputPassword/index.mjs +1 -0
  28. package/dist/InputPhoneNumber/index.cjs +2 -1
  29. package/dist/InputPhoneNumber/index.mjs +2 -1
  30. package/dist/InputText/index.cjs +2 -1
  31. package/dist/InputText/index.mjs +2 -1
  32. package/dist/InputTime/index.cjs +1 -0
  33. package/dist/InputTime/index.mjs +2 -1
  34. package/dist/RecurringSelect/index.cjs +1 -0
  35. package/dist/RecurringSelect/index.mjs +1 -0
  36. package/dist/Select/index.cjs +1 -0
  37. package/dist/Select/index.mjs +1 -0
  38. package/dist/Select-cjs.js +2 -1
  39. package/dist/Select-es.js +2 -1
  40. package/dist/docs/InputEmail/InputEmail.md +40 -15
  41. package/dist/docs/usage-guidelines/usage-guidelines.md +0 -1
  42. package/dist/index.cjs +4 -3
  43. package/dist/index.mjs +3 -2
  44. package/dist/mergeRefs-cjs.js +0 -11
  45. package/dist/mergeRefs-es.js +1 -11
  46. package/dist/useAtlantisFormFieldName-cjs.js +13 -0
  47. package/dist/useAtlantisFormFieldName-es.js +11 -0
  48. package/package.json +4 -4
  49. package/dist/InputEmail/InputEmail.rebuilt.d.ts +0 -3
@@ -24,6 +24,7 @@ require('react/jsx-runtime');
24
24
  require('react-dom');
25
25
  require('../Content-cjs.js');
26
26
  require('../FormField-cjs.js');
27
+ require('../useAtlantisFormFieldName-cjs.js');
27
28
  require('framer-motion');
28
29
  require('react-router-dom');
29
30
  require('../useFormFieldFocus-cjs.js');
@@ -22,6 +22,7 @@ import 'react/jsx-runtime';
22
22
  import 'react-dom';
23
23
  import '../Content-es.js';
24
24
  import '../FormField-es.js';
25
+ import '../useAtlantisFormFieldName-es.js';
25
26
  import 'framer-motion';
26
27
  import 'react-router-dom';
27
28
  import '../useFormFieldFocus-es.js';
@@ -18,6 +18,7 @@ require('../../../Text-cjs.js');
18
18
  require('../../../useFormFieldFocus-cjs.js');
19
19
  require('../../../InputValidation-cjs.js');
20
20
  require('../../../Spinner-cjs.js');
21
+ require('../../../useAtlantisFormFieldName-cjs.js');
21
22
  require('react-hook-form');
22
23
  require('../../../filterDataAttributes-cjs.js');
23
24
  require('../../../DataListContext-cjs.js');
@@ -16,6 +16,7 @@ import '../../../Text-es.js';
16
16
  import '../../../useFormFieldFocus-es.js';
17
17
  import '../../../InputValidation-es.js';
18
18
  import '../../../Spinner-es.js';
19
+ import '../../../useAtlantisFormFieldName-es.js';
19
20
  import 'react-hook-form';
20
21
  import '../../../filterDataAttributes-es.js';
21
22
  import '../../../DataListContext-es.js';
@@ -85,6 +85,7 @@ require('../FormField-cjs.js');
85
85
  require('../mergeRefs-cjs.js');
86
86
  require('../useFormFieldFocus-cjs.js');
87
87
  require('../InputValidation-cjs.js');
88
+ require('../useAtlantisFormFieldName-cjs.js');
88
89
  require('react-hook-form');
89
90
  require('../DataListEmptyState-cjs.js');
90
91
  require('../DataListLoadMore-cjs.js');
@@ -83,6 +83,7 @@ import '../FormField-es.js';
83
83
  import '../mergeRefs-es.js';
84
84
  import '../useFormFieldFocus-es.js';
85
85
  import '../InputValidation-es.js';
86
+ import '../useAtlantisFormFieldName-es.js';
86
87
  import 'react-hook-form';
87
88
  import '../DataListEmptyState-es.js';
88
89
  import '../DataListLoadMore-es.js';
@@ -22,6 +22,7 @@ require('../Text-cjs.js');
22
22
  require('../useFormFieldFocus-cjs.js');
23
23
  require('../InputValidation-cjs.js');
24
24
  require('../Spinner-cjs.js');
25
+ require('../useAtlantisFormFieldName-cjs.js');
25
26
  require('react-hook-form');
26
27
  require('../filterDataAttributes-cjs.js');
27
28
 
@@ -20,5 +20,6 @@ import '../Text-es.js';
20
20
  import '../useFormFieldFocus-es.js';
21
21
  import '../InputValidation-es.js';
22
22
  import '../Spinner-es.js';
23
+ import '../useAtlantisFormFieldName-es.js';
23
24
  import 'react-hook-form';
24
25
  import '../filterDataAttributes-es.js';
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var FormField = require('../FormField-cjs.js');
4
+ var useAtlantisFormFieldName = require('../useAtlantisFormFieldName-cjs.js');
4
5
  var mergeRefs = require('../mergeRefs-cjs.js');
5
6
  require('react');
6
7
  require('classnames');
@@ -24,6 +25,7 @@ exports.FormField = FormField.FormField;
24
25
  exports.useAtlantisFormField = FormField.useAtlantisFormField;
25
26
  exports.useAtlantisFormFieldActions = FormField.useAtlantisFormFieldActions;
26
27
  exports.useAtlantisReactHookForm = FormField.useAtlantisReactHookForm;
28
+ exports.useAtlantisFormFieldName = useAtlantisFormFieldName.useAtlantisFormFieldName;
27
29
  exports.AffixIcon = mergeRefs.AffixIcon;
28
30
  exports.AffixLabel = mergeRefs.AffixLabel;
29
31
  exports.FormFieldInputHorizontalWrapper = mergeRefs.FormFieldInputHorizontalWrapper;
@@ -32,5 +34,4 @@ exports.FormFieldLabel = mergeRefs.FormFieldLabel;
32
34
  exports.FormFieldWrapper = mergeRefs.FormFieldWrapper;
33
35
  exports.FormFieldWrapperMain = mergeRefs.FormFieldWrapperMain;
34
36
  exports.FormFieldWrapperToolbar = mergeRefs.FormFieldWrapperToolbar;
35
- exports.useAtlantisFormFieldName = mergeRefs.useAtlantisFormFieldName;
36
37
  exports.useFormFieldWrapperStyles = mergeRefs.useFormFieldWrapperStyles;
@@ -1,5 +1,6 @@
1
1
  export { F as FormField, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisReactHookForm } from '../FormField-es.js';
2
- export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useAtlantisFormFieldName, g as useFormFieldWrapperStyles } from '../mergeRefs-es.js';
2
+ export { u as useAtlantisFormFieldName } from '../useAtlantisFormFieldName-es.js';
3
+ export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useFormFieldWrapperStyles } from '../mergeRefs-es.js';
3
4
  import 'react';
4
5
  import 'classnames';
5
6
  import '../tslib.es6-es.js';
@@ -3,6 +3,7 @@
3
3
  var React = require('react');
4
4
  var mergeRefs = require('./mergeRefs-cjs.js');
5
5
  var classnames = require('classnames');
6
+ var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
6
7
  var tslib_es6 = require('./tslib.es6-cjs.js');
7
8
  var reactHookForm = require('react-hook-form');
8
9
 
@@ -125,7 +126,7 @@ function FormField(props) {
125
126
  function FormFieldInternal(props) {
126
127
  var _a;
127
128
  const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
128
- const { name } = mergeRefs.useAtlantisFormFieldName({ id, nameProp });
129
+ const { name } = useAtlantisFormFieldName.useAtlantisFormFieldName({ id, nameProp });
129
130
  const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
130
131
  actionsRef,
131
132
  name,
@@ -1,6 +1,7 @@
1
1
  import React__default, { useEffect, useImperativeHandle, useId, useRef } from 'react';
2
- import { h as formFieldStyles, m as mergeRefs, c as FormFieldWrapper, i as FormFieldPostFix, u as useAtlantisFormFieldName } from './mergeRefs-es.js';
2
+ import { g as formFieldStyles, m as mergeRefs, c as FormFieldWrapper, h as FormFieldPostFix } from './mergeRefs-es.js';
3
3
  import classnames from 'classnames';
4
+ import { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
4
5
  import { _ as __rest } from './tslib.es6-es.js';
5
6
  import { useFormContext, useForm, useController } from 'react-hook-form';
6
7
 
@@ -39,6 +39,7 @@ require('../Text-cjs.js');
39
39
  require('../useFormFieldFocus-cjs.js');
40
40
  require('../InputValidation-cjs.js');
41
41
  require('../Spinner-cjs.js');
42
+ require('../useAtlantisFormFieldName-cjs.js');
42
43
  require('react-hook-form');
43
44
  require('../filterDataAttributes-cjs.js');
44
45
 
@@ -37,5 +37,6 @@ import '../Text-es.js';
37
37
  import '../useFormFieldFocus-es.js';
38
38
  import '../InputValidation-es.js';
39
39
  import '../Spinner-es.js';
40
+ import '../useAtlantisFormFieldName-es.js';
40
41
  import 'react-hook-form';
41
42
  import '../filterDataAttributes-es.js';
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
- import type { InputEmailLegacyProps } from "./InputEmail.types";
3
- export declare function InputEmail(props: InputEmailLegacyProps): React.JSX.Element;
2
+ import type { InputEmailProps } from "./InputEmail.types";
3
+ export declare const InputEmail: React.ForwardRefExoticComponent<InputEmailProps & React.RefAttributes<HTMLInputElement>>;
@@ -1,16 +1,6 @@
1
- import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
1
+ import type { FormFieldProps } from "../FormField";
2
2
  import type { FocusEvents, HTMLInputBaseProps, KeyboardEvents, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
3
- /**
4
- * @deprecated Use the v2 InputEmail component instead (version={2}).
5
- */
6
- export type InputEmailLegacyProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
7
- export declare const validationMessage = "Please enter a valid email";
8
- export type InputEmailVersion = 1 | 2 | undefined;
9
- /**
10
- * Experimental version 2 of the InputEmail component.
11
- * Do not use unless you have talked with Atlantis first.
12
- */
13
- export interface InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel"> {
3
+ export interface InputEmailProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, MouseEvents<HTMLInputElement>, Omit<RebuiltInputCommonProps, "showMiniLabel" | "version"> {
14
4
  /**
15
5
  * The current value of the input.
16
6
  */
@@ -1,7 +1,7 @@
1
1
  import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
2
- import type { InputEmailRebuiltProps } from "../InputEmail.types";
3
- export interface UseInputEmailActionsProps extends Pick<InputEmailRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
4
- inputRef?: React.RefObject<HTMLInputElement>;
2
+ import type { InputEmailProps } from "../InputEmail.types";
3
+ export interface UseInputEmailActionsProps extends Pick<InputEmailProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "onMouseDown" | "onMouseUp" | "onPointerDown" | "onPointerUp"> {
4
+ inputRef?: React.RefObject<HTMLInputElement | null>;
5
5
  }
6
6
  export declare function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }: UseInputEmailActionsProps): {
7
7
  handleClear: () => void;
@@ -0,0 +1,4 @@
1
+ export declare function useInputEmailRefs(inputRef?: React.Ref<HTMLInputElement | null>): {
2
+ internalRef: import("react").RefObject<HTMLInputElement | null>;
3
+ mergedRef: import("react").RefCallback<HTMLInputElement | null>;
4
+ };
@@ -1,16 +1,14 @@
1
1
  'use strict';
2
2
 
3
- var React = require('react');
4
- var FormField = require('../FormField-cjs.js');
5
- require('classnames');
6
- require('../tslib.es6-cjs.js');
7
- require('react-hook-form');
3
+ var InputEmail = require('../InputEmail-cjs.js');
4
+ require('react');
5
+ require('../mergeRefs-cjs.js');
8
6
  require('@jobber/hooks');
9
7
  require('framer-motion');
10
8
  require('@jobber/design');
9
+ require('classnames');
11
10
  require('../Button-cjs.js');
12
- var mergeRefs = require('../mergeRefs-cjs.js');
13
- var filterDataAttributes = require('../filterDataAttributes-cjs.js');
11
+ require('../tslib.es6-cjs.js');
14
12
  require('react-router-dom');
15
13
  require('../Icon-cjs.js');
16
14
  require('../Typography-cjs.js');
@@ -18,128 +16,9 @@ require('../Text-cjs.js');
18
16
  require('../useFormFieldFocus-cjs.js');
19
17
  require('../InputValidation-cjs.js');
20
18
  require('../Spinner-cjs.js');
19
+ require('react-hook-form');
20
+ require('../filterDataAttributes-cjs.js');
21
21
 
22
- const validationMessage = "Please enter a valid email";
23
-
24
- // eslint-disable-next-line import/no-deprecated
25
- function InputEmail$1(props) {
26
- const { validations } = props;
27
- return (React.createElement(FormField.FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
28
- function checkForValidEmail(value) {
29
- const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
30
- if (!value) {
31
- return true;
32
- }
33
- if (!value.match(emailRegex)) {
34
- return validationMessage;
35
- }
36
- return true;
37
- }
38
- }
39
-
40
- function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
41
- function handleClear() {
42
- var _a;
43
- onChange === null || onChange === void 0 ? void 0 : onChange("");
44
- (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
45
- }
46
- function handleChange(event) {
47
- const newValue = event.currentTarget.value;
48
- onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
49
- }
50
- function handleKeyDown(event) {
51
- onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
52
- if (!onEnter)
53
- return;
54
- if (event.key !== "Enter")
55
- return;
56
- if (event.shiftKey || event.ctrlKey)
57
- return;
58
- event.preventDefault();
59
- onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
60
- }
61
- function handleFocus(event) {
62
- onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
63
- }
64
- function handleBlur(event) {
65
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
66
- }
67
- function handleKeyUp(event) {
68
- onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
69
- }
70
- function handleClick(event) {
71
- onClick === null || onClick === void 0 ? void 0 : onClick(event);
72
- }
73
- function handleMouseDown(event) {
74
- onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
75
- }
76
- function handleMouseUp(event) {
77
- onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
78
- }
79
- function handlePointerDown(event) {
80
- onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
81
- }
82
- function handlePointerUp(event) {
83
- onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
84
- }
85
- return {
86
- handleClear,
87
- handleChange,
88
- handleKeyDown,
89
- handleKeyUp,
90
- handleFocus,
91
- handleBlur,
92
- handleClick,
93
- handleMouseDown,
94
- handleMouseUp,
95
- handlePointerDown,
96
- handlePointerUp,
97
- };
98
- }
99
-
100
- const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, ref) {
101
- var _a, _b, _c;
102
- const generatedId = React.useId();
103
- const id = props.id || generatedId;
104
- const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : React.useRef(null);
105
- const wrapperRef = React.useRef(null);
106
- const { name } = mergeRefs.useAtlantisFormFieldName({
107
- nameProp: props.name,
108
- id,
109
- });
110
- const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputEmailActions({
111
- onChange: props.onChange,
112
- onBlur: props.onBlur,
113
- onFocus: props.onFocus,
114
- onKeyDown: props.onKeyDown,
115
- onKeyUp: props.onKeyUp,
116
- onEnter: props.onEnter,
117
- onClick: props.onClick,
118
- onMouseDown: props.onMouseDown,
119
- onMouseUp: props.onMouseUp,
120
- onPointerDown: props.onPointerDown,
121
- onPointerUp: props.onPointerUp,
122
- inputRef,
123
- });
124
- const descriptionIdentifier = `descriptionUUID--${id}`;
125
- const descriptionVisible = props.description && !props.inline;
126
- const isInvalid = Boolean(props.error || props.invalid);
127
- const dataAttrs = filterDataAttributes.filterDataAttributes(props);
128
- return (React.createElement(mergeRefs.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, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
129
- React.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: mergeRefs.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, 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)),
130
- React.createElement(mergeRefs.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
131
- });
132
22
 
133
- function isNewInputEmailProps(props) {
134
- return props.version === 2;
135
- }
136
- const InputEmail = React.forwardRef(function InputEmailShim(props, ref) {
137
- if (isNewInputEmailProps(props)) {
138
- return (React.createElement(InputEmailRebuilt, Object.assign({}, props, { ref: ref })));
139
- }
140
- else {
141
- return React.createElement(InputEmail$1, Object.assign({}, props));
142
- }
143
- });
144
23
 
145
- exports.InputEmail = InputEmail;
24
+ exports.InputEmail = InputEmail.InputEmail;
@@ -1,5 +1,2 @@
1
- import React from "react";
2
- import { type InputEmailLegacyProps, type InputEmailRebuiltProps } from "./InputEmail.types";
3
- export type InputEmailShimProps = InputEmailRebuiltProps | InputEmailLegacyProps;
4
- export declare const InputEmail: React.ForwardRefExoticComponent<InputEmailShimProps & React.RefAttributes<HTMLInputElement>>;
5
- export type { InputEmailRebuiltProps, InputEmailLegacyProps };
1
+ export { InputEmail } from "./InputEmail";
2
+ export type { InputEmailProps } from "./InputEmail.types";
@@ -1,14 +1,12 @@
1
- import React__default, { forwardRef, useId, useRef } from 'react';
2
- import { F as FormField } from '../FormField-es.js';
3
- import 'classnames';
4
- import '../tslib.es6-es.js';
5
- import 'react-hook-form';
1
+ export { I as InputEmail } from '../InputEmail-es.js';
2
+ import 'react';
3
+ import '../mergeRefs-es.js';
6
4
  import '@jobber/hooks';
7
5
  import 'framer-motion';
8
6
  import '@jobber/design';
7
+ import 'classnames';
9
8
  import '../Button-es.js';
10
- import { u as useAtlantisFormFieldName, c as FormFieldWrapper, h as formFieldStyles, i as FormFieldPostFix } from '../mergeRefs-es.js';
11
- import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
9
+ import '../tslib.es6-es.js';
12
10
  import 'react-router-dom';
13
11
  import '../Icon-es.js';
14
12
  import '../Typography-es.js';
@@ -16,128 +14,5 @@ import '../Text-es.js';
16
14
  import '../useFormFieldFocus-es.js';
17
15
  import '../InputValidation-es.js';
18
16
  import '../Spinner-es.js';
19
-
20
- const validationMessage = "Please enter a valid email";
21
-
22
- // eslint-disable-next-line import/no-deprecated
23
- function InputEmail$1(props) {
24
- const { validations } = props;
25
- return (React__default.createElement(FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
26
- function checkForValidEmail(value) {
27
- const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
28
- if (!value) {
29
- return true;
30
- }
31
- if (!value.match(emailRegex)) {
32
- return validationMessage;
33
- }
34
- return true;
35
- }
36
- }
37
-
38
- function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
39
- function handleClear() {
40
- var _a;
41
- onChange === null || onChange === void 0 ? void 0 : onChange("");
42
- (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
43
- }
44
- function handleChange(event) {
45
- const newValue = event.currentTarget.value;
46
- onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
47
- }
48
- function handleKeyDown(event) {
49
- onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
50
- if (!onEnter)
51
- return;
52
- if (event.key !== "Enter")
53
- return;
54
- if (event.shiftKey || event.ctrlKey)
55
- return;
56
- event.preventDefault();
57
- onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
58
- }
59
- function handleFocus(event) {
60
- onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
61
- }
62
- function handleBlur(event) {
63
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
64
- }
65
- function handleKeyUp(event) {
66
- onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
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
- }
83
- return {
84
- handleClear,
85
- handleChange,
86
- handleKeyDown,
87
- handleKeyUp,
88
- handleFocus,
89
- handleBlur,
90
- handleClick,
91
- handleMouseDown,
92
- handleMouseUp,
93
- handlePointerDown,
94
- handlePointerUp,
95
- };
96
- }
97
-
98
- const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
99
- var _a, _b, _c;
100
- const generatedId = useId();
101
- const id = props.id || generatedId;
102
- const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : useRef(null);
103
- const wrapperRef = useRef(null);
104
- const { name } = useAtlantisFormFieldName({
105
- nameProp: props.name,
106
- id,
107
- });
108
- const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputEmailActions({
109
- onChange: props.onChange,
110
- onBlur: props.onBlur,
111
- onFocus: props.onFocus,
112
- onKeyDown: props.onKeyDown,
113
- onKeyUp: props.onKeyUp,
114
- onEnter: props.onEnter,
115
- onClick: props.onClick,
116
- onMouseDown: props.onMouseDown,
117
- onMouseUp: props.onMouseUp,
118
- onPointerDown: props.onPointerDown,
119
- onPointerUp: props.onPointerUp,
120
- inputRef,
121
- });
122
- const descriptionIdentifier = `descriptionUUID--${id}`;
123
- const descriptionVisible = props.description && !props.inline;
124
- const isInvalid = Boolean(props.error || props.invalid);
125
- const dataAttrs = filterDataAttributes(props);
126
- 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, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
127
- React__default.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, 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)),
128
- React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
129
- });
130
-
131
- function isNewInputEmailProps(props) {
132
- return props.version === 2;
133
- }
134
- const InputEmail = forwardRef(function InputEmailShim(props, ref) {
135
- if (isNewInputEmailProps(props)) {
136
- return (React__default.createElement(InputEmailRebuilt, Object.assign({}, props, { ref: ref })));
137
- }
138
- else {
139
- return React__default.createElement(InputEmail$1, Object.assign({}, props));
140
- }
141
- });
142
-
143
- export { InputEmail };
17
+ import 'react-hook-form';
18
+ import '../filterDataAttributes-es.js';
@@ -0,0 +1,107 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var mergeRefs = require('./mergeRefs-cjs.js');
5
+ require('classnames');
6
+ require('./tslib.es6-cjs.js');
7
+ require('react-hook-form');
8
+ require('./Button-cjs.js');
9
+ require('@jobber/design');
10
+ var filterDataAttributes = require('./filterDataAttributes-cjs.js');
11
+
12
+ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
13
+ function handleClear() {
14
+ var _a;
15
+ onChange === null || onChange === void 0 ? void 0 : onChange("");
16
+ (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
17
+ }
18
+ function handleChange(event) {
19
+ const newValue = event.currentTarget.value;
20
+ onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
21
+ }
22
+ function handleKeyDown(event) {
23
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
24
+ if (!onEnter)
25
+ return;
26
+ if (event.key !== "Enter")
27
+ return;
28
+ if (event.shiftKey || event.ctrlKey)
29
+ return;
30
+ event.preventDefault();
31
+ onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
32
+ }
33
+ function handleFocus(event) {
34
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
35
+ }
36
+ function handleBlur(event) {
37
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
38
+ }
39
+ function handleKeyUp(event) {
40
+ onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
41
+ }
42
+ function handleClick(event) {
43
+ onClick === null || onClick === void 0 ? void 0 : onClick(event);
44
+ }
45
+ function handleMouseDown(event) {
46
+ onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
47
+ }
48
+ function handleMouseUp(event) {
49
+ onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
50
+ }
51
+ function handlePointerDown(event) {
52
+ onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
53
+ }
54
+ function handlePointerUp(event) {
55
+ onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
56
+ }
57
+ return {
58
+ handleClear,
59
+ handleChange,
60
+ handleKeyDown,
61
+ handleKeyUp,
62
+ handleFocus,
63
+ handleBlur,
64
+ handleClick,
65
+ handleMouseDown,
66
+ handleMouseUp,
67
+ handlePointerDown,
68
+ handlePointerUp,
69
+ };
70
+ }
71
+
72
+ function useInputEmailRefs(inputRef) {
73
+ const internalRef = React.useRef(null);
74
+ const mergedRef = mergeRefs.mergeRefs([internalRef, inputRef]);
75
+ return { internalRef, mergedRef };
76
+ }
77
+
78
+ const InputEmail = React.forwardRef(function InputEmailInternal(props, ref) {
79
+ var _a, _b;
80
+ const generatedId = React.useId();
81
+ const id = props.id || generatedId;
82
+ const { internalRef, mergedRef } = useInputEmailRefs(ref);
83
+ const wrapperRef = React.useRef(null);
84
+ const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputEmailActions({
85
+ onChange: props.onChange,
86
+ onBlur: props.onBlur,
87
+ onFocus: props.onFocus,
88
+ onKeyDown: props.onKeyDown,
89
+ onKeyUp: props.onKeyUp,
90
+ onEnter: props.onEnter,
91
+ onClick: props.onClick,
92
+ onMouseDown: props.onMouseDown,
93
+ onMouseUp: props.onMouseUp,
94
+ onPointerDown: props.onPointerDown,
95
+ onPointerUp: props.onPointerUp,
96
+ inputRef: internalRef,
97
+ });
98
+ const descriptionIdentifier = `descriptionUUID--${id}`;
99
+ const descriptionVisible = props.description && !props.inline;
100
+ const isInvalid = Boolean(props.error || props.invalid);
101
+ const dataAttrs = filterDataAttributes.filterDataAttributes(props);
102
+ return (React.createElement(mergeRefs.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: (_a = props.clearable) !== null && _a !== void 0 ? _a : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: props.name },
103
+ React.createElement("input", Object.assign({ id: id, name: props.name, type: "email", ref: mergedRef, className: mergeRefs.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, 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)),
104
+ React.createElement(mergeRefs.FormFieldPostFix, { variation: "spinner", visible: (_b = props.loading) !== null && _b !== void 0 ? _b : false })));
105
+ });
106
+
107
+ exports.InputEmail = InputEmail;
@@ -0,0 +1,105 @@
1
+ import React__default, { useRef, forwardRef, useId } from 'react';
2
+ import { m as mergeRefs, c as FormFieldWrapper, g as formFieldStyles, h as FormFieldPostFix } from './mergeRefs-es.js';
3
+ import 'classnames';
4
+ import './tslib.es6-es.js';
5
+ import 'react-hook-form';
6
+ import './Button-es.js';
7
+ import '@jobber/design';
8
+ import { f as filterDataAttributes } from './filterDataAttributes-es.js';
9
+
10
+ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
11
+ function handleClear() {
12
+ var _a;
13
+ onChange === null || onChange === void 0 ? void 0 : onChange("");
14
+ (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
15
+ }
16
+ function handleChange(event) {
17
+ const newValue = event.currentTarget.value;
18
+ onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
19
+ }
20
+ function handleKeyDown(event) {
21
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
22
+ if (!onEnter)
23
+ return;
24
+ if (event.key !== "Enter")
25
+ return;
26
+ if (event.shiftKey || event.ctrlKey)
27
+ return;
28
+ event.preventDefault();
29
+ onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
30
+ }
31
+ function handleFocus(event) {
32
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
33
+ }
34
+ function handleBlur(event) {
35
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
36
+ }
37
+ function handleKeyUp(event) {
38
+ onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
39
+ }
40
+ function handleClick(event) {
41
+ onClick === null || onClick === void 0 ? void 0 : onClick(event);
42
+ }
43
+ function handleMouseDown(event) {
44
+ onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
45
+ }
46
+ function handleMouseUp(event) {
47
+ onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
48
+ }
49
+ function handlePointerDown(event) {
50
+ onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
51
+ }
52
+ function handlePointerUp(event) {
53
+ onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
54
+ }
55
+ return {
56
+ handleClear,
57
+ handleChange,
58
+ handleKeyDown,
59
+ handleKeyUp,
60
+ handleFocus,
61
+ handleBlur,
62
+ handleClick,
63
+ handleMouseDown,
64
+ handleMouseUp,
65
+ handlePointerDown,
66
+ handlePointerUp,
67
+ };
68
+ }
69
+
70
+ function useInputEmailRefs(inputRef) {
71
+ const internalRef = useRef(null);
72
+ const mergedRef = mergeRefs([internalRef, inputRef]);
73
+ return { internalRef, mergedRef };
74
+ }
75
+
76
+ const InputEmail = forwardRef(function InputEmailInternal(props, ref) {
77
+ var _a, _b;
78
+ const generatedId = useId();
79
+ const id = props.id || generatedId;
80
+ const { internalRef, mergedRef } = useInputEmailRefs(ref);
81
+ const wrapperRef = useRef(null);
82
+ const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputEmailActions({
83
+ onChange: props.onChange,
84
+ onBlur: props.onBlur,
85
+ onFocus: props.onFocus,
86
+ onKeyDown: props.onKeyDown,
87
+ onKeyUp: props.onKeyUp,
88
+ onEnter: props.onEnter,
89
+ onClick: props.onClick,
90
+ onMouseDown: props.onMouseDown,
91
+ onMouseUp: props.onMouseUp,
92
+ onPointerDown: props.onPointerDown,
93
+ onPointerUp: props.onPointerUp,
94
+ inputRef: internalRef,
95
+ });
96
+ const descriptionIdentifier = `descriptionUUID--${id}`;
97
+ const descriptionVisible = props.description && !props.inline;
98
+ const isInvalid = Boolean(props.error || props.invalid);
99
+ const dataAttrs = filterDataAttributes(props);
100
+ 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: (_a = props.clearable) !== null && _a !== void 0 ? _a : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: props.name },
101
+ React__default.createElement("input", Object.assign({ id: id, name: props.name, type: "email", ref: mergedRef, className: formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, 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)),
102
+ React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_b = props.loading) !== null && _b !== void 0 ? _b : false })));
103
+ });
104
+
105
+ export { InputEmail as I };
@@ -18,6 +18,7 @@ require('../mergeRefs-cjs.js');
18
18
  require('../useFormFieldFocus-cjs.js');
19
19
  require('../InputValidation-cjs.js');
20
20
  require('../Spinner-cjs.js');
21
+ require('../useAtlantisFormFieldName-cjs.js');
21
22
  require('react-router-dom');
22
23
 
23
24
  /*
@@ -16,6 +16,7 @@ import '../mergeRefs-es.js';
16
16
  import '../useFormFieldFocus-es.js';
17
17
  import '../InputValidation-es.js';
18
18
  import '../Spinner-es.js';
19
+ import '../useAtlantisFormFieldName-es.js';
19
20
  import 'react-router-dom';
20
21
 
21
22
  /*
@@ -17,6 +17,7 @@ require('../Text-cjs.js');
17
17
  require('../useFormFieldFocus-cjs.js');
18
18
  require('../InputValidation-cjs.js');
19
19
  require('../Spinner-cjs.js');
20
+ require('../useAtlantisFormFieldName-cjs.js');
20
21
  require('react-hook-form');
21
22
 
22
23
 
@@ -15,4 +15,5 @@ import '../Text-es.js';
15
15
  import '../useFormFieldFocus-es.js';
16
16
  import '../InputValidation-es.js';
17
17
  import '../Spinner-es.js';
18
+ import '../useAtlantisFormFieldName-es.js';
18
19
  import 'react-hook-form';
@@ -4,6 +4,7 @@ var React = require('react');
4
4
  var tslib_es6 = require('../tslib.es6-cjs.js');
5
5
  var classnames = require('classnames');
6
6
  var mergeRefs = require('../mergeRefs-cjs.js');
7
+ var useAtlantisFormFieldName = require('../useAtlantisFormFieldName-cjs.js');
7
8
  var reactHookForm = require('react-hook-form');
8
9
  require('../Button-cjs.js');
9
10
  require('@jobber/design');
@@ -177,7 +178,7 @@ const InputPhoneNumberRebuilt = React.forwardRef(function InputPhoneNumberIntern
177
178
  const wrapperRef = React.useRef(null);
178
179
  const generatedId = React.useId();
179
180
  const id = props.id || generatedId;
180
- const { name } = mergeRefs.useAtlantisFormFieldName({
181
+ const { name } = useAtlantisFormFieldName.useAtlantisFormFieldName({
181
182
  nameProp: props.name,
182
183
  id: id,
183
184
  });
@@ -1,7 +1,8 @@
1
1
  import React__default, { useState, useMemo, useCallback, useEffect, cloneElement, forwardRef, useId } from 'react';
2
2
  import { _ as __rest } from '../tslib.es6-es.js';
3
3
  import classnames from 'classnames';
4
- import { u as useAtlantisFormFieldName, c as FormFieldWrapper, h as formFieldStyles, i as FormFieldPostFix } from '../mergeRefs-es.js';
4
+ import { c as FormFieldWrapper, g as formFieldStyles, h as FormFieldPostFix } from '../mergeRefs-es.js';
5
+ import { u as useAtlantisFormFieldName } from '../useAtlantisFormFieldName-es.js';
5
6
  import { useFormContext, useForm } from 'react-hook-form';
6
7
  import '../Button-es.js';
7
8
  import '@jobber/design';
@@ -10,6 +10,7 @@ require('framer-motion');
10
10
  require('@jobber/design');
11
11
  require('../Button-cjs.js');
12
12
  var mergeRefs = require('../mergeRefs-cjs.js');
13
+ var useAtlantisFormFieldName = require('../useAtlantisFormFieldName-cjs.js');
13
14
  var filterDataAttributes = require('../filterDataAttributes-cjs.js');
14
15
  require('react-router-dom');
15
16
  require('../Icon-cjs.js');
@@ -221,7 +222,7 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
221
222
  inputRef: inputTextRef,
222
223
  wrapperRef: wrapperRef,
223
224
  });
224
- const { name } = mergeRefs.useAtlantisFormFieldName({
225
+ const { name } = useAtlantisFormFieldName.useAtlantisFormFieldName({
225
226
  nameProp: props.name,
226
227
  id: id,
227
228
  });
@@ -7,7 +7,8 @@ import 'react-hook-form';
7
7
  import 'framer-motion';
8
8
  import '@jobber/design';
9
9
  import '../Button-es.js';
10
- import { u as useAtlantisFormFieldName, m as mergeRefs, h as formFieldStyles, c as FormFieldWrapper, i as FormFieldPostFix } from '../mergeRefs-es.js';
10
+ import { m as mergeRefs, g as formFieldStyles, c as FormFieldWrapper, h as FormFieldPostFix } from '../mergeRefs-es.js';
11
+ import { u as useAtlantisFormFieldName } from '../useAtlantisFormFieldName-es.js';
11
12
  import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
12
13
  import 'react-router-dom';
13
14
  import '../Icon-es.js';
@@ -31,6 +31,7 @@ require('../keysIn-cjs.js');
31
31
  require('../_baseAssignValue-cjs.js');
32
32
  require('../_baseFlatten-cjs.js');
33
33
  require('../_setToString-cjs.js');
34
+ require('../useAtlantisFormFieldName-cjs.js');
34
35
 
35
36
  const DEBOUNCE_TIME = 300;
36
37
  function useTimePredict({ value, handleChange }) {
@@ -1,7 +1,7 @@
1
1
  import React__default, { useState, useCallback, useEffect, useId, useRef } from 'react';
2
2
  import { _ as __rest } from '../tslib.es6-es.js';
3
3
  import { a as debounce } from '../debounce-es.js';
4
- import { c as FormFieldWrapper, h as formFieldStyles, m as mergeRefs } from '../mergeRefs-es.js';
4
+ import { c as FormFieldWrapper, g as formFieldStyles, m as mergeRefs } from '../mergeRefs-es.js';
5
5
  import 'classnames';
6
6
  import '@jobber/design';
7
7
  import 'react-hook-form';
@@ -29,6 +29,7 @@ import '../keysIn-es.js';
29
29
  import '../_baseAssignValue-es.js';
30
30
  import '../_baseFlatten-es.js';
31
31
  import '../_setToString-es.js';
32
+ import '../useAtlantisFormFieldName-es.js';
32
33
 
33
34
  const DEBOUNCE_TIME = 300;
34
35
  function useTimePredict({ value, handleChange }) {
@@ -18,6 +18,7 @@ require('../Icon-cjs.js');
18
18
  require('../useFormFieldFocus-cjs.js');
19
19
  require('../InputValidation-cjs.js');
20
20
  require('../Spinner-cjs.js');
21
+ require('../useAtlantisFormFieldName-cjs.js');
21
22
  require('react-hook-form');
22
23
  require('../filterDataAttributes-cjs.js');
23
24
  require('../InputNumber/index.cjs');
@@ -16,6 +16,7 @@ import '../Icon-es.js';
16
16
  import '../useFormFieldFocus-es.js';
17
17
  import '../InputValidation-es.js';
18
18
  import '../Spinner-es.js';
19
+ import '../useAtlantisFormFieldName-es.js';
19
20
  import 'react-hook-form';
20
21
  import '../filterDataAttributes-es.js';
21
22
  import '../InputNumber/index.mjs';
@@ -16,6 +16,7 @@ require('../Text-cjs.js');
16
16
  require('../useFormFieldFocus-cjs.js');
17
17
  require('../InputValidation-cjs.js');
18
18
  require('../Spinner-cjs.js');
19
+ require('../useAtlantisFormFieldName-cjs.js');
19
20
  require('react-hook-form');
20
21
  require('../filterDataAttributes-cjs.js');
21
22
 
@@ -14,5 +14,6 @@ import '../Text-es.js';
14
14
  import '../useFormFieldFocus-es.js';
15
15
  import '../InputValidation-es.js';
16
16
  import '../Spinner-es.js';
17
+ import '../useAtlantisFormFieldName-es.js';
17
18
  import 'react-hook-form';
18
19
  import '../filterDataAttributes-es.js';
@@ -3,6 +3,7 @@
3
3
  var React = require('react');
4
4
  var classnames = require('classnames');
5
5
  var mergeRefs = require('./mergeRefs-cjs.js');
6
+ var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
6
7
  require('./tslib.es6-cjs.js');
7
8
  require('react-hook-form');
8
9
  require('./Button-cjs.js');
@@ -47,7 +48,7 @@ function Select(props) {
47
48
  const generatedId = React.useId();
48
49
  const id = props.id || generatedId;
49
50
  const descriptionIdentifier = `descriptionUUID--${id}`;
50
- const { name } = mergeRefs.useAtlantisFormFieldName({
51
+ const { name } = useAtlantisFormFieldName.useAtlantisFormFieldName({
51
52
  nameProp: props.name,
52
53
  id: id,
53
54
  });
package/dist/Select-es.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React__default, { useId, useRef } from 'react';
2
2
  import classnames from 'classnames';
3
- import { u as useAtlantisFormFieldName, c as FormFieldWrapper, h as formFieldStyles, i as FormFieldPostFix, m as mergeRefs } from './mergeRefs-es.js';
3
+ import { c as FormFieldWrapper, g as formFieldStyles, h as FormFieldPostFix, m as mergeRefs } from './mergeRefs-es.js';
4
+ import { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
4
5
  import './tslib.es6-es.js';
5
6
  import 'react-hook-form';
6
7
  import './Button-es.js';
@@ -33,22 +33,47 @@ If you are not worried about email address validation, consider using
33
33
  | Prop | Type | Required | Default | Description |
34
34
  |------|------|----------|---------|-------------|
35
35
  | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
36
- | `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value. You should always use `while-editing` if you want the input t... |
37
- | `defaultValue` | `Date | string` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
36
+ | `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
37
+ | `aria-autocomplete` | `"both" | "inline" | "list" | "none"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
38
+ | `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
39
+ | `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
40
+ | `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
41
+ | `aria-expanded` | `Booleanish` | No | — | Indicates whether the element is expanded or collapsed. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded} |
42
+ | `aria-label` | `string` | No | — | Defines a string value that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label} |
43
+ | `aria-labelledby` | `string` | No | — | Identifies the element (or elements) that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/... |
44
+ | `aria-required` | `Booleanish` | No | — | Indicates that user input is required before form submission. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-re... |
45
+ | `autoComplete` | `string` | No | — | Autocomplete behavior for the input (React casing, string values only). Use standard HTML autocomplete values or "on"... |
46
+ | `autoFocus` | `boolean` | No | — | Whether the input should be auto-focused (React casing). |
47
+ | `clearable` | `Clearable` | No | — | Add a clear action on the input that clears the value. |
38
48
  | `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
39
- | `disabled` | `boolean` | No | — | Disable the input |
40
- | `id` | `string` | No | — | A unique identifier for the input. |
41
- | `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
49
+ | `disabled` | `boolean` | No | — | Whether the input is disabled. |
50
+ | `error` | `string` | No | — | Error message to display. This also highlights the field red. |
51
+ | `id` | `string` | No | — | The unique identifier for the input element. |
52
+ | `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
53
+ | `inputMode` | `"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"` | No | — | Input mode hint for virtual keyboards. |
42
54
  | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
43
- | `loading` | `boolean` | No | — | Show a spinner to indicate loading |
44
- | `maxLength` | `number` | No | — | Maximum character length for an input. This also changes the width to roughly the same size as the max length. This i... |
45
- | `name` | `string` | No | — | Name of the input. |
46
- | `onChange` | `(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void` | No | — | onChange handler that provides the new value (or event) @param newValue @param event |
47
- | `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
55
+ | `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
56
+ | `maxLength` | `number` | No | — | Maximum number of characters allowed in the input. |
57
+ | `name` | `string` | No | — | The name attribute for the input element. |
58
+ | `onBlur` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Blur event handler. |
59
+ | `onChange` | `(newValue: string, event?: ChangeEvent<HTMLInputElement>) => void` | No | — | Custom onChange handler that provides the new value as the first argument. |
60
+ | `onClick` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Click event handler. |
61
+ | `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | @deprecated Use `onKeyDown` or `onKeyUp` instead. |
62
+ | `onFocus` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Focus event handler. |
63
+ | `onKeyDown` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Key down event handler. |
64
+ | `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Key up event handler. |
65
+ | `onMouseDown` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse down event handler. |
66
+ | `onMouseUp` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse up event handler. |
67
+ | `onPointerDown` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer down event handler. |
68
+ | `onPointerUp` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer up event handler. |
69
+ | `pattern` | `string` | No | — | Validation pattern (regex) for the input. |
48
70
  | `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
49
- | `readonly` | `boolean` | No | — | Prevents users from editing the value. |
50
- | `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
71
+ | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
72
+ | `readOnly` | `boolean` | No | | Whether the input is read-only (HTML standard casing). |
73
+ | `ref` | `Ref<HTMLInputElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
74
+ | `required` | `boolean` | No | — | Whether the input is required before form submission. |
75
+ | `role` | `string` | No | — | Role attribute for accessibility. |
51
76
  | `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
52
- | `validations` | `RegisterOptions` | No | | Show an error message above the field. This also highlights the the field red if an error message shows up. |
53
- | `value` | `Date | number | string` | No | — | Set the component to the given value. |
54
- | `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. Right now this isn't used but it will be used in the f... |
77
+ | `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field. |
78
+ | `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
79
+ | `value` | `string` | No | — | The current value of the input. |
@@ -14,7 +14,6 @@ deprecated.
14
14
  | Component | Import | v2 prop |
15
15
  | ---------------- | ------------------------------------------------------------------------ | ------------------------------------------------- |
16
16
  | Autocomplete | `import { Autocomplete } from "@jobber/components/Autocomplete"` | `version={2}` — fully controlled, async support |
17
- | InputEmail | `import { InputEmail } from "@jobber/components/InputEmail"` | `version={2}` |
18
17
  | InputNumber | `import { InputNumber } from "@jobber/components/InputNumber"` | `version={2}` |
19
18
  | InputPhoneNumber | `import { InputPhoneNumber } from "@jobber/components/InputPhoneNumber"` | `version={2}` |
20
19
  | InputText | `import { InputText } from "@jobber/components/InputText"` | `version={2}` |
package/dist/index.cjs CHANGED
@@ -43,6 +43,7 @@ var FeatureSwitch = require('./FeatureSwitch-cjs.js');
43
43
  var Flex = require('./Flex-cjs.js');
44
44
  var Form = require('./Form-cjs.js');
45
45
  var FormField = require('./FormField-cjs.js');
46
+ var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
46
47
  var mergeRefs = require('./mergeRefs-cjs.js');
47
48
  var FormatDate = require('./FormatDate-cjs.js');
48
49
  var FormatEmail = require('./FormatEmail-cjs.js');
@@ -57,7 +58,7 @@ var Heading = require('./Heading-cjs.js');
57
58
  var InlineLabel = require('./InlineLabel-cjs.js');
58
59
  var InputAvatar = require('./InputAvatar-cjs.js');
59
60
  var InputDate = require('./InputDate-cjs.js');
60
- var InputEmail_index = require('./InputEmail/index.cjs');
61
+ var InputEmail = require('./InputEmail-cjs.js');
61
62
  var InputFile = require('./InputFile-cjs.js');
62
63
  var InputGroup = require('./InputGroup-cjs.js');
63
64
  var InputNumber_index = require('./InputNumber/index.cjs');
@@ -263,6 +264,7 @@ exports.FormField = FormField.FormField;
263
264
  exports.useAtlantisFormField = FormField.useAtlantisFormField;
264
265
  exports.useAtlantisFormFieldActions = FormField.useAtlantisFormFieldActions;
265
266
  exports.useAtlantisReactHookForm = FormField.useAtlantisReactHookForm;
267
+ exports.useAtlantisFormFieldName = useAtlantisFormFieldName.useAtlantisFormFieldName;
266
268
  exports.AffixIcon = mergeRefs.AffixIcon;
267
269
  exports.AffixLabel = mergeRefs.AffixLabel;
268
270
  exports.FormFieldInputHorizontalWrapper = mergeRefs.FormFieldInputHorizontalWrapper;
@@ -271,7 +273,6 @@ exports.FormFieldLabel = mergeRefs.FormFieldLabel;
271
273
  exports.FormFieldWrapper = mergeRefs.FormFieldWrapper;
272
274
  exports.FormFieldWrapperMain = mergeRefs.FormFieldWrapperMain;
273
275
  exports.FormFieldWrapperToolbar = mergeRefs.FormFieldWrapperToolbar;
274
- exports.useAtlantisFormFieldName = mergeRefs.useAtlantisFormFieldName;
275
276
  exports.useFormFieldWrapperStyles = mergeRefs.useFormFieldWrapperStyles;
276
277
  exports.FormatDate = FormatDate.FormatDate;
277
278
  exports.strFormatDate = FormatDate.strFormatDate;
@@ -291,7 +292,7 @@ exports.Heading = Heading.Heading;
291
292
  exports.InlineLabel = InlineLabel.InlineLabel;
292
293
  exports.InputAvatar = InputAvatar.InputAvatar;
293
294
  exports.InputDate = InputDate.InputDate;
294
- exports.InputEmail = InputEmail_index.InputEmail;
295
+ exports.InputEmail = InputEmail.InputEmail;
295
296
  exports.InputFile = InputFile.InputFile;
296
297
  exports.InputFileContentContext = InputFile.InputFileContentContext;
297
298
  exports.updateFiles = InputFile.updateFiles;
package/dist/index.mjs CHANGED
@@ -41,7 +41,8 @@ export { F as FeatureSwitch } from './FeatureSwitch-es.js';
41
41
  export { F as Flex } from './Flex-es.js';
42
42
  export { F as Form } from './Form-es.js';
43
43
  export { F as FormField, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisReactHookForm } from './FormField-es.js';
44
- export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useAtlantisFormFieldName, g as useFormFieldWrapperStyles } from './mergeRefs-es.js';
44
+ export { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
45
+ export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useFormFieldWrapperStyles } from './mergeRefs-es.js';
45
46
  export { F as FormatDate, s as strFormatDate } from './FormatDate-es.js';
46
47
  export { F as FormatEmail } from './FormatEmail-es.js';
47
48
  export { F as FormatFile, u as useFormatFile, a as useFormatFileStyles } from './FormatFile-es.js';
@@ -55,7 +56,7 @@ export { H as Heading } from './Heading-es.js';
55
56
  export { I as InlineLabel } from './InlineLabel-es.js';
56
57
  export { I as InputAvatar } from './InputAvatar-es.js';
57
58
  export { I as InputDate } from './InputDate-es.js';
58
- export { InputEmail } from './InputEmail/index.mjs';
59
+ export { I as InputEmail } from './InputEmail-es.js';
59
60
  export { I as InputFile, a as InputFileContentContext, u as updateFiles, b as useInputFileContentContext } from './InputFile-es.js';
60
61
  export { I as InputGroup } from './InputGroup-es.js';
61
62
  export { InputNumber } from './InputNumber/index.mjs';
@@ -237,16 +237,6 @@ function FormFieldPostFix({ variation, visible = true, className, }) {
237
237
  return (React.createElement("span", { className: classnames(formFieldStyles.postfix, className) }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
238
238
  }
239
239
 
240
- function useAtlantisFormFieldName({ id, nameProp, }) {
241
- /**
242
- * Generate a name if one is not supplied, this is the name
243
- * that will be used for react-hook-form and not neccessarily
244
- * attached to the DOM
245
- */
246
- const name = nameProp ? nameProp : `generatedName--${id}`;
247
- return { name };
248
- }
249
-
250
240
  /**
251
241
  * Given an array of refs, merge them into a single ref callback.
252
242
  * This is useful for cases where you need to pass a multiple refs to a component.
@@ -275,5 +265,4 @@ exports.FormFieldWrapperMain = FormFieldWrapperMain;
275
265
  exports.FormFieldWrapperToolbar = FormFieldWrapperToolbar;
276
266
  exports.formFieldStyles = formFieldStyles;
277
267
  exports.mergeRefs = mergeRefs;
278
- exports.useAtlantisFormFieldName = useAtlantisFormFieldName;
279
268
  exports.useFormFieldWrapperStyles = useFormFieldWrapperStyles;
@@ -235,16 +235,6 @@ function FormFieldPostFix({ variation, visible = true, className, }) {
235
235
  return (React__default.createElement("span", { className: classnames(formFieldStyles.postfix, className) }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
236
236
  }
237
237
 
238
- function useAtlantisFormFieldName({ id, nameProp, }) {
239
- /**
240
- * Generate a name if one is not supplied, this is the name
241
- * that will be used for react-hook-form and not neccessarily
242
- * attached to the DOM
243
- */
244
- const name = nameProp ? nameProp : `generatedName--${id}`;
245
- return { name };
246
- }
247
-
248
238
  /**
249
239
  * Given an array of refs, merge them into a single ref callback.
250
240
  * This is useful for cases where you need to pass a multiple refs to a component.
@@ -262,4 +252,4 @@ function mergeRefs(refs) {
262
252
  };
263
253
  }
264
254
 
265
- export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, FormFieldInputWrapperStyles as a, FormFieldLabel as b, FormFieldWrapper as c, FormFieldWrapperMain as d, FormFieldWrapperToolbar as e, AffixLabel as f, useFormFieldWrapperStyles as g, formFieldStyles as h, FormFieldPostFix as i, mergeRefs as m, useAtlantisFormFieldName as u };
255
+ export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, FormFieldInputWrapperStyles as a, FormFieldLabel as b, FormFieldWrapper as c, FormFieldWrapperMain as d, FormFieldWrapperToolbar as e, AffixLabel as f, formFieldStyles as g, FormFieldPostFix as h, mergeRefs as m, useFormFieldWrapperStyles as u };
@@ -0,0 +1,13 @@
1
+ 'use strict';
2
+
3
+ function useAtlantisFormFieldName({ id, nameProp, }) {
4
+ /**
5
+ * Generate a name if one is not supplied, this is the name
6
+ * that will be used for react-hook-form and not neccessarily
7
+ * attached to the DOM
8
+ */
9
+ const name = nameProp ? nameProp : `generatedName--${id}`;
10
+ return { name };
11
+ }
12
+
13
+ exports.useAtlantisFormFieldName = useAtlantisFormFieldName;
@@ -0,0 +1,11 @@
1
+ function useAtlantisFormFieldName({ id, nameProp, }) {
2
+ /**
3
+ * Generate a name if one is not supplied, this is the name
4
+ * that will be used for react-hook-form and not neccessarily
5
+ * attached to the DOM
6
+ */
7
+ const name = nameProp ? nameProp : `generatedName--${id}`;
8
+ return { name };
9
+ }
10
+
11
+ export { useAtlantisFormFieldName as u };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "7.11.3",
3
+ "version": "7.12.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -573,8 +573,8 @@
573
573
  "filesize": "^6",
574
574
  "framer-motion": "^11.11.12",
575
575
  "lodash": "^4",
576
- "react": "^18 || ^19.1.0",
577
- "react-dom": "^18 || ^19.1.0",
576
+ "react": "^19.1.0",
577
+ "react-dom": "^19.1.0",
578
578
  "react-hook-form": "^7.52.0",
579
579
  "react-router-dom": "^6"
580
580
  },
@@ -583,5 +583,5 @@
583
583
  "> 1%",
584
584
  "IE 10"
585
585
  ],
586
- "gitHead": "1adc75fc6e71cd2166f7c5b497dad8d0c095f35b"
586
+ "gitHead": "a74a5ff8148ca6a6103aef333e6ed60caae37e6f"
587
587
  }
@@ -1,3 +0,0 @@
1
- import React from "react";
2
- import type { InputEmailRebuiltProps } from "./InputEmail.types";
3
- export declare const InputEmailRebuilt: React.ForwardRefExoticComponent<InputEmailRebuiltProps & React.RefAttributes<HTMLInputElement>>;