@jobber/components 6.5.0 → 6.5.2-JOB-110537-9cfca74.10

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 (54) hide show
  1. package/dist/AtlantisThemeContext/index.cjs +2 -1
  2. package/dist/AtlantisThemeContext/index.mjs +2 -1
  3. package/dist/Autocomplete/Autocomplete.d.ts +1 -47
  4. package/dist/Autocomplete/Autocomplete.types.d.ts +53 -0
  5. package/dist/Autocomplete/index.cjs +8 -3
  6. package/dist/Autocomplete/index.d.ts +1 -0
  7. package/dist/Autocomplete/index.mjs +8 -3
  8. package/dist/Autocomplete/useAutocompleteFormField.d.ts +11 -0
  9. package/dist/Autocomplete-cjs.js +88 -7
  10. package/dist/Autocomplete-es.js +89 -8
  11. package/dist/Chips/InternalChipDismissible/hooks/index.cjs +5 -2
  12. package/dist/Chips/InternalChipDismissible/hooks/index.mjs +5 -2
  13. package/dist/Chips/InternalChipDismissible/index.cjs +5 -2
  14. package/dist/Chips/InternalChipDismissible/index.mjs +5 -2
  15. package/dist/Chips/index.cjs +5 -2
  16. package/dist/Chips/index.mjs +5 -2
  17. package/dist/DatePicker/index.cjs +5 -3
  18. package/dist/DatePicker/index.mjs +5 -3
  19. package/dist/DatePicker-cjs.js +9 -8
  20. package/dist/DatePicker-es.js +3 -2
  21. package/dist/InputDate/index.cjs +5 -3
  22. package/dist/InputDate/index.mjs +5 -3
  23. package/dist/List/index.cjs +5 -2
  24. package/dist/List/index.mjs +5 -2
  25. package/dist/List-cjs.js +1 -1
  26. package/dist/List-es.js +1 -1
  27. package/dist/_arrayLikeKeys-cjs.js +778 -0
  28. package/dist/_arrayLikeKeys-es.js +771 -0
  29. package/dist/_baseEach-cjs.js +24 -569
  30. package/dist/_baseEach-es.js +7 -552
  31. package/dist/_baseGet-cjs.js +330 -0
  32. package/dist/_baseGet-es.js +324 -0
  33. package/dist/_baseIsEqual-cjs.js +556 -0
  34. package/dist/_baseIsEqual-es.js +554 -0
  35. package/dist/_getAllKeys-cjs.js +2 -327
  36. package/dist/_getAllKeys-es.js +2 -322
  37. package/dist/_getTag-es.js +1 -1
  38. package/dist/_isIterateeCall-cjs.js +3 -2
  39. package/dist/_isIterateeCall-es.js +2 -1
  40. package/dist/identity-cjs.js +2 -776
  41. package/dist/identity-es.js +2 -770
  42. package/dist/index.cjs +7 -4
  43. package/dist/index.d.mts +1 -1
  44. package/dist/index.d.ts +1 -1
  45. package/dist/index.mjs +7 -4
  46. package/dist/isTypedArray-es.js +1 -1
  47. package/dist/keysIn-cjs.js +4 -4
  48. package/dist/keysIn-es.js +2 -2
  49. package/dist/styles.css +1 -46
  50. package/dist/updateTheme-cjs.js +3 -3
  51. package/dist/updateTheme-es.js +1 -1
  52. package/dist/useScrollToActive-cjs.js +3 -3
  53. package/dist/useScrollToActive-es.js +1 -1
  54. package/package.json +2 -2
@@ -4,10 +4,11 @@ var updateTheme = require('../updateTheme-cjs.js');
4
4
  require('@jobber/design');
5
5
  require('react');
6
6
  require('../_commonjsHelpers-cjs.js');
7
- require('../identity-cjs.js');
7
+ require('../_arrayLikeKeys-cjs.js');
8
8
  require('../isTypedArray-cjs.js');
9
9
  require('../isObjectLike-cjs.js');
10
10
  require('../_baseAssignValue-cjs.js');
11
+ require('../identity-cjs.js');
11
12
  require('../_baseFor-cjs.js');
12
13
  require('../keysIn-cjs.js');
13
14
  require('../_isIterateeCall-cjs.js');
@@ -2,10 +2,11 @@ export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlant
2
2
  import '@jobber/design';
3
3
  import 'react';
4
4
  import '../_commonjsHelpers-es.js';
5
- import '../identity-es.js';
5
+ import '../_arrayLikeKeys-es.js';
6
6
  import '../isTypedArray-es.js';
7
7
  import '../isObjectLike-es.js';
8
8
  import '../_baseAssignValue-es.js';
9
+ import '../identity-es.js';
9
10
  import '../_baseFor-es.js';
10
11
  import '../keysIn-es.js';
11
12
  import '../_isIterateeCall-es.js';
@@ -1,50 +1,4 @@
1
1
  import React from "react";
2
- import { XOR } from "ts-xor";
3
- import { GroupOption, Option } from "./Option";
2
+ import { AutocompleteProps } from "./Autocomplete.types";
4
3
  import { InputTextRef } from "../InputText";
5
- import { FormFieldProps } from "../FormField";
6
- type OptionCollection = XOR<Option[], GroupOption[]>;
7
- interface AutocompleteProps extends Pick<FormFieldProps, "clearable" | "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix" | "validations"> {
8
- /**
9
- * @deprecated
10
- * Use `ref` instead.
11
- */
12
- readonly inputRef?: FormFieldProps["inputRef"];
13
- /**
14
- * Initial options to show when user first focuses the Autocomplete
15
- */
16
- readonly initialOptions?: OptionCollection;
17
- /**
18
- * Set Autocomplete value.
19
- */
20
- readonly value: Option | undefined;
21
- /**
22
- * Allow the autocomplete to use values not from the drop down menu.
23
- *
24
- * @default true
25
- */
26
- readonly allowFreeForm?: boolean;
27
- /**
28
- * Debounce in milliseconds for getOptions
29
- *
30
- * @default 300
31
- */
32
- readonly debounce?: number;
33
- /**
34
- * Simplified onChange handler that only provides the new value.
35
- * @param newValue
36
- */
37
- onChange(newValue?: Option): void;
38
- /**
39
- * Called as the user types in the input. The autocomplete will display what
40
- * is returned from this method to the user as available options.
41
- * @param newInputText
42
- */
43
- getOptions(newInputText: string): OptionCollection | Promise<OptionCollection>;
44
- /**
45
- * Hint text that goes above the value once the form is filled out.
46
- */
47
- readonly placeholder: string;
48
- }
49
4
  export declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<InputTextRef>>;
50
- export {};
@@ -0,0 +1,53 @@
1
+ import { XOR } from "ts-xor";
2
+ import { Ref } from "react";
3
+ import { GroupOption, Option } from "./Option";
4
+ import { FormFieldProps } from "../FormField";
5
+ import { InputTextRef } from "../InputText";
6
+ export type OptionCollection = XOR<Option, GroupOption>[];
7
+ export interface AutocompleteProps extends Pick<FormFieldProps, "clearable" | "invalid" | "name" | "onBlur" | "onFocus" | "prefix" | "size" | "suffix" | "validations" | "onValidation"> {
8
+ /**
9
+ * @deprecated
10
+ * Use `ref` instead.
11
+ */
12
+ readonly inputRef?: FormFieldProps["inputRef"];
13
+ /**
14
+ * Initial options to show when user first focuses the Autocomplete
15
+ */
16
+ readonly initialOptions?: OptionCollection;
17
+ /**
18
+ * Set Autocomplete value.
19
+ */
20
+ readonly value?: Option;
21
+ /**
22
+ * Allow the autocomplete to use values not from the drop down menu.
23
+ *
24
+ * @default true
25
+ */
26
+ readonly allowFreeForm?: boolean;
27
+ /**
28
+ * Debounce in milliseconds for getOptions
29
+ *
30
+ * @default 300
31
+ */
32
+ readonly debounce?: number;
33
+ /**
34
+ * Simplified onChange handler that only provides the new value.
35
+ * @param newValue
36
+ */
37
+ readonly onChange?: (newValue?: Option) => void;
38
+ /**
39
+ * Called as the user types in the input. The autocomplete will display what
40
+ * is returned from this method to the user as available options.
41
+ * @param newInputText
42
+ */
43
+ getOptions(newInputText: string): OptionCollection | Promise<OptionCollection>;
44
+ /**
45
+ * Hint text that goes above the value once the form is filled out.
46
+ */
47
+ readonly placeholder: string;
48
+ readonly defaultValue?: Option;
49
+ }
50
+ export interface AutocompleteInternalProps extends AutocompleteProps {
51
+ readonly id: string;
52
+ readonly ref?: Ref<InputTextRef>;
53
+ }
@@ -14,9 +14,16 @@ require('../Typography-cjs.js');
14
14
  require('../Icon-cjs.js');
15
15
  require('@jobber/design');
16
16
  require('../Heading-cjs.js');
17
+ require('react-hook-form');
18
+ require('../_commonjsHelpers-cjs.js');
19
+ require('../_baseIsEqual-cjs.js');
20
+ require('../_arrayLikeKeys-cjs.js');
21
+ require('../isTypedArray-cjs.js');
22
+ require('../isObjectLike-cjs.js');
23
+ require('../_getAllKeys-cjs.js');
24
+ require('../_getTag-cjs.js');
17
25
  require('../InputText-cjs.js');
18
26
  require('../FormField-cjs.js');
19
- require('react-hook-form');
20
27
  require('framer-motion');
21
28
  require('../Button-cjs.js');
22
29
  require('react-router-dom');
@@ -24,8 +31,6 @@ require('../useFormFieldFocus-cjs.js');
24
31
  require('../InputValidation-cjs.js');
25
32
  require('../Spinner-cjs.js');
26
33
  require('../debounce-cjs.js');
27
- require('../_commonjsHelpers-cjs.js');
28
- require('../isObjectLike-cjs.js');
29
34
  require('../isSymbol-cjs.js');
30
35
 
31
36
 
@@ -1,2 +1,3 @@
1
1
  export { Autocomplete } from "./Autocomplete";
2
2
  export * from "./Option";
3
+ export { AutocompleteProps } from "./Autocomplete.types";
@@ -12,9 +12,16 @@ import '../Typography-es.js';
12
12
  import '../Icon-es.js';
13
13
  import '@jobber/design';
14
14
  import '../Heading-es.js';
15
+ import 'react-hook-form';
16
+ import '../_commonjsHelpers-es.js';
17
+ import '../_baseIsEqual-es.js';
18
+ import '../_arrayLikeKeys-es.js';
19
+ import '../isTypedArray-es.js';
20
+ import '../isObjectLike-es.js';
21
+ import '../_getAllKeys-es.js';
22
+ import '../_getTag-es.js';
15
23
  import '../InputText-es.js';
16
24
  import '../FormField-es.js';
17
- import 'react-hook-form';
18
25
  import 'framer-motion';
19
26
  import '../Button-es.js';
20
27
  import 'react-router-dom';
@@ -22,6 +29,4 @@ import '../useFormFieldFocus-es.js';
22
29
  import '../InputValidation-es.js';
23
30
  import '../Spinner-es.js';
24
31
  import '../debounce-es.js';
25
- import '../_commonjsHelpers-es.js';
26
- import '../isObjectLike-es.js';
27
32
  import '../isSymbol-es.js';
@@ -0,0 +1,11 @@
1
+ import { AutocompleteProps } from "./Autocomplete.types";
2
+ import { Option } from "./Option";
3
+ export declare function useAutocompleteFormField({ nameProp, value, defaultValue, id, onChangeProp, }: {
4
+ nameProp?: string;
5
+ id: string;
6
+ value: AutocompleteProps["value"];
7
+ defaultValue: AutocompleteProps["defaultValue"];
8
+ onChangeProp?: (chosenOption?: Option) => void;
9
+ }): {
10
+ onControllerChange: (...event: any[]) => void;
11
+ };
@@ -11,6 +11,9 @@ var useIsMounted = require('./useIsMounted-cjs.js');
11
11
  var Text = require('./Text-cjs.js');
12
12
  var Icon = require('./Icon-cjs.js');
13
13
  var Heading = require('./Heading-cjs.js');
14
+ var reactHookForm = require('react-hook-form');
15
+ var _commonjsHelpers = require('./_commonjsHelpers-cjs.js');
16
+ var _baseIsEqual = require('./_baseIsEqual-cjs.js');
14
17
  var InputText = require('./InputText-cjs.js');
15
18
  var debounce = require('./debounce-cjs.js');
16
19
 
@@ -118,6 +121,71 @@ function useRepositionMenu(attachTo, visible = false) {
118
121
  return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
119
122
  }
120
123
 
124
+ var baseIsEqual = _baseIsEqual._baseIsEqual;
125
+
126
+ /**
127
+ * Performs a deep comparison between two values to determine if they are
128
+ * equivalent.
129
+ *
130
+ * **Note:** This method supports comparing arrays, array buffers, booleans,
131
+ * date objects, error objects, maps, numbers, `Object` objects, regexes,
132
+ * sets, strings, symbols, and typed arrays. `Object` objects are compared
133
+ * by their own, not inherited, enumerable properties. Functions and DOM
134
+ * nodes are compared by strict equality, i.e. `===`.
135
+ *
136
+ * @static
137
+ * @memberOf _
138
+ * @since 0.1.0
139
+ * @category Lang
140
+ * @param {*} value The value to compare.
141
+ * @param {*} other The other value to compare.
142
+ * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
143
+ * @example
144
+ *
145
+ * var object = { 'a': 1 };
146
+ * var other = { 'a': 1 };
147
+ *
148
+ * _.isEqual(object, other);
149
+ * // => true
150
+ *
151
+ * object === other;
152
+ * // => false
153
+ */
154
+ function isEqual(value, other) {
155
+ return baseIsEqual(value, other);
156
+ }
157
+
158
+ var isEqual_1 = isEqual;
159
+
160
+ var isEqual$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(isEqual_1);
161
+
162
+ function useAutocompleteFormField({ nameProp, value, defaultValue, id, onChangeProp, }) {
163
+ var _a;
164
+ const formContext = reactHookForm.useFormContext();
165
+ const form = reactHookForm.useForm({ mode: "onTouched" });
166
+ // If there isn't a Form Context being provided, get a form for this field.
167
+ const { control, watch, getValues } = formContext !== null && formContext !== void 0 ? formContext : form;
168
+ /**
169
+ * Generate a name if one is not supplied, this is the name
170
+ * that will be used for react-hook-form and not neccessarily
171
+ * attached to the DOM
172
+ */
173
+ const name = nameProp ? nameProp : `generatedName--${id}`;
174
+ const { field: { onChange: onControllerChange }, } = reactHookForm.useController({
175
+ name,
176
+ control,
177
+ defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "",
178
+ });
179
+ React.useEffect(() => {
180
+ const controllerValue = getValues(name);
181
+ if (value !== undefined && !isEqual$1(value, controllerValue)) {
182
+ onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
183
+ onControllerChange(value);
184
+ }
185
+ }, [value, watch(name)]);
186
+ return { onControllerChange };
187
+ }
188
+
121
189
  /**
122
190
  * A hook to easily manage debounced functions, including their cleanup.
123
191
  * @param func The function to debounce.
@@ -150,14 +218,22 @@ function useDebounce(func, wait, options) {
150
218
 
151
219
  // Max statements increased to make room for the debounce functions
152
220
  /* eslint max-statements: ["error", 14] */
153
- function AutocompleteInternal(_a, ref) {
221
+ // eslint-disable-next-line max-statements
222
+ const AutocompleteInternal = React.forwardRef(function AutocompleteInternal(_a, ref) {
154
223
  var _b;
155
- var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations"]);
224
+ var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations, defaultValue, name, id } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations", "defaultValue", "name", "id"]);
156
225
  const [options, setOptions] = React.useState(initialOptions);
157
226
  const [menuVisible, setMenuVisible] = React.useState(false);
158
227
  const [inputText, setInputText] = React.useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
159
228
  const autocompleteRef = React.useRef(null);
160
229
  const delayedSearch = useDebounce(updateSearch, debounceRate);
230
+ const { onControllerChange } = useAutocompleteFormField({
231
+ nameProp: name,
232
+ id,
233
+ value: value,
234
+ defaultValue: defaultValue,
235
+ onChangeProp: onChange,
236
+ });
161
237
  React.useEffect(() => {
162
238
  delayedSearch();
163
239
  }, [inputText]);
@@ -182,21 +258,23 @@ function AutocompleteInternal(_a, ref) {
182
258
  });
183
259
  }
184
260
  function handleMenuChange(chosenOption) {
185
- onChange(chosenOption);
261
+ onChange === null || onChange === void 0 ? void 0 : onChange(chosenOption);
186
262
  updateInput(chosenOption.label);
263
+ onControllerChange(chosenOption);
187
264
  setMenuVisible(false);
188
265
  }
189
266
  function handleInputChange(newText) {
190
267
  updateInput(newText);
191
268
  if (allowFreeForm) {
192
- onChange({ label: newText });
269
+ onControllerChange({ label: newText });
270
+ onChange === null || onChange === void 0 ? void 0 : onChange({ label: newText });
193
271
  }
194
272
  }
195
273
  function handleInputBlur() {
196
274
  setMenuVisible(false);
197
275
  if (value == undefined || value.label !== inputText) {
198
276
  setInputText("");
199
- onChange(undefined);
277
+ onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
200
278
  }
201
279
  onBlur && onBlur();
202
280
  }
@@ -206,7 +284,7 @@ function AutocompleteInternal(_a, ref) {
206
284
  onFocus();
207
285
  }
208
286
  }
209
- }
287
+ });
210
288
  function mapToOptions(items) {
211
289
  return items.reduce(function (result, item) {
212
290
  result = result.concat([item]);
@@ -216,6 +294,9 @@ function mapToOptions(items) {
216
294
  return result;
217
295
  }, []);
218
296
  }
219
- const Autocomplete = React.forwardRef(AutocompleteInternal);
297
+ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
298
+ const id = React.useId();
299
+ return React.createElement(AutocompleteInternal, Object.assign({}, props, { ref: ref, id: id }));
300
+ });
220
301
 
221
302
  exports.Autocomplete = Autocomplete;
@@ -1,5 +1,5 @@
1
1
  import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
2
- import React, { useState, useEffect, useRef, useMemo, forwardRef } from 'react';
2
+ import React, { useState, useEffect, useRef, useMemo, forwardRef, useId } from 'react';
3
3
  import classnames from 'classnames';
4
4
  import { createPortal } from 'react-dom';
5
5
  import { usePopper } from 'react-popper';
@@ -9,6 +9,9 @@ import { u as useIsMounted_2 } from './useIsMounted-es.js';
9
9
  import { T as Text } from './Text-es.js';
10
10
  import { I as Icon } from './Icon-es.js';
11
11
  import { H as Heading } from './Heading-es.js';
12
+ import { useFormContext, useForm, useController } from 'react-hook-form';
13
+ import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
14
+ import { _ as _baseIsEqual } from './_baseIsEqual-es.js';
12
15
  import { I as InputText } from './InputText-es.js';
13
16
  import { a as debounce } from './debounce-es.js';
14
17
 
@@ -116,6 +119,71 @@ function useRepositionMenu(attachTo, visible = false) {
116
119
  return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
117
120
  }
118
121
 
122
+ var baseIsEqual = _baseIsEqual;
123
+
124
+ /**
125
+ * Performs a deep comparison between two values to determine if they are
126
+ * equivalent.
127
+ *
128
+ * **Note:** This method supports comparing arrays, array buffers, booleans,
129
+ * date objects, error objects, maps, numbers, `Object` objects, regexes,
130
+ * sets, strings, symbols, and typed arrays. `Object` objects are compared
131
+ * by their own, not inherited, enumerable properties. Functions and DOM
132
+ * nodes are compared by strict equality, i.e. `===`.
133
+ *
134
+ * @static
135
+ * @memberOf _
136
+ * @since 0.1.0
137
+ * @category Lang
138
+ * @param {*} value The value to compare.
139
+ * @param {*} other The other value to compare.
140
+ * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
141
+ * @example
142
+ *
143
+ * var object = { 'a': 1 };
144
+ * var other = { 'a': 1 };
145
+ *
146
+ * _.isEqual(object, other);
147
+ * // => true
148
+ *
149
+ * object === other;
150
+ * // => false
151
+ */
152
+ function isEqual(value, other) {
153
+ return baseIsEqual(value, other);
154
+ }
155
+
156
+ var isEqual_1 = isEqual;
157
+
158
+ var isEqual$1 = /*@__PURE__*/getDefaultExportFromCjs(isEqual_1);
159
+
160
+ function useAutocompleteFormField({ nameProp, value, defaultValue, id, onChangeProp, }) {
161
+ var _a;
162
+ const formContext = useFormContext();
163
+ const form = useForm({ mode: "onTouched" });
164
+ // If there isn't a Form Context being provided, get a form for this field.
165
+ const { control, watch, getValues } = formContext !== null && formContext !== void 0 ? formContext : form;
166
+ /**
167
+ * Generate a name if one is not supplied, this is the name
168
+ * that will be used for react-hook-form and not neccessarily
169
+ * attached to the DOM
170
+ */
171
+ const name = nameProp ? nameProp : `generatedName--${id}`;
172
+ const { field: { onChange: onControllerChange }, } = useController({
173
+ name,
174
+ control,
175
+ defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "",
176
+ });
177
+ useEffect(() => {
178
+ const controllerValue = getValues(name);
179
+ if (value !== undefined && !isEqual$1(value, controllerValue)) {
180
+ onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
181
+ onControllerChange(value);
182
+ }
183
+ }, [value, watch(name)]);
184
+ return { onControllerChange };
185
+ }
186
+
119
187
  /**
120
188
  * A hook to easily manage debounced functions, including their cleanup.
121
189
  * @param func The function to debounce.
@@ -148,14 +216,22 @@ function useDebounce(func, wait, options) {
148
216
 
149
217
  // Max statements increased to make room for the debounce functions
150
218
  /* eslint max-statements: ["error", 14] */
151
- function AutocompleteInternal(_a, ref) {
219
+ // eslint-disable-next-line max-statements
220
+ const AutocompleteInternal = forwardRef(function AutocompleteInternal(_a, ref) {
152
221
  var _b;
153
- var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations"]);
222
+ var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations, defaultValue, name, id } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations", "defaultValue", "name", "id"]);
154
223
  const [options, setOptions] = useState(initialOptions);
155
224
  const [menuVisible, setMenuVisible] = useState(false);
156
225
  const [inputText, setInputText] = useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
157
226
  const autocompleteRef = useRef(null);
158
227
  const delayedSearch = useDebounce(updateSearch, debounceRate);
228
+ const { onControllerChange } = useAutocompleteFormField({
229
+ nameProp: name,
230
+ id,
231
+ value: value,
232
+ defaultValue: defaultValue,
233
+ onChangeProp: onChange,
234
+ });
159
235
  useEffect(() => {
160
236
  delayedSearch();
161
237
  }, [inputText]);
@@ -180,21 +256,23 @@ function AutocompleteInternal(_a, ref) {
180
256
  });
181
257
  }
182
258
  function handleMenuChange(chosenOption) {
183
- onChange(chosenOption);
259
+ onChange === null || onChange === void 0 ? void 0 : onChange(chosenOption);
184
260
  updateInput(chosenOption.label);
261
+ onControllerChange(chosenOption);
185
262
  setMenuVisible(false);
186
263
  }
187
264
  function handleInputChange(newText) {
188
265
  updateInput(newText);
189
266
  if (allowFreeForm) {
190
- onChange({ label: newText });
267
+ onControllerChange({ label: newText });
268
+ onChange === null || onChange === void 0 ? void 0 : onChange({ label: newText });
191
269
  }
192
270
  }
193
271
  function handleInputBlur() {
194
272
  setMenuVisible(false);
195
273
  if (value == undefined || value.label !== inputText) {
196
274
  setInputText("");
197
- onChange(undefined);
275
+ onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
198
276
  }
199
277
  onBlur && onBlur();
200
278
  }
@@ -204,7 +282,7 @@ function AutocompleteInternal(_a, ref) {
204
282
  onFocus();
205
283
  }
206
284
  }
207
- }
285
+ });
208
286
  function mapToOptions(items) {
209
287
  return items.reduce(function (result, item) {
210
288
  result = result.concat([item]);
@@ -214,6 +292,9 @@ function mapToOptions(items) {
214
292
  return result;
215
293
  }, []);
216
294
  }
217
- const Autocomplete = forwardRef(AutocompleteInternal);
295
+ const Autocomplete = forwardRef(function Autocomplete(props, ref) {
296
+ const id = useId();
297
+ return React.createElement(AutocompleteInternal, Object.assign({}, props, { ref: ref, id: id }));
298
+ });
218
299
 
219
300
  export { Autocomplete as A };
@@ -7,10 +7,13 @@ require('../../../_baseFlatten-cjs.js');
7
7
  require('../../../_getAllKeys-cjs.js');
8
8
  require('../../../isTypedArray-cjs.js');
9
9
  require('../../../isObjectLike-cjs.js');
10
- require('../../../isSymbol-cjs.js');
11
- require('../../../identity-cjs.js');
10
+ require('../../../_arrayLikeKeys-cjs.js');
12
11
  require('../../../_getTag-cjs.js');
12
+ require('../../../_baseGet-cjs.js');
13
+ require('../../../isSymbol-cjs.js');
13
14
  require('../../../_baseEach-cjs.js');
15
+ require('../../../_baseIsEqual-cjs.js');
16
+ require('../../../identity-cjs.js');
14
17
  require('../../../_baseFor-cjs.js');
15
18
  require('../../../_isIterateeCall-cjs.js');
16
19
  require('../../../_setToString-cjs.js');
@@ -5,10 +5,13 @@ import '../../../_baseFlatten-es.js';
5
5
  import '../../../_getAllKeys-es.js';
6
6
  import '../../../isTypedArray-es.js';
7
7
  import '../../../isObjectLike-es.js';
8
- import '../../../isSymbol-es.js';
9
- import '../../../identity-es.js';
8
+ import '../../../_arrayLikeKeys-es.js';
10
9
  import '../../../_getTag-es.js';
10
+ import '../../../_baseGet-es.js';
11
+ import '../../../isSymbol-es.js';
11
12
  import '../../../_baseEach-es.js';
13
+ import '../../../_baseIsEqual-es.js';
14
+ import '../../../identity-es.js';
12
15
  import '../../../_baseFor-es.js';
13
16
  import '../../../_isIterateeCall-es.js';
14
17
  import '../../../_setToString-es.js';
@@ -8,10 +8,13 @@ require('../../_baseFlatten-cjs.js');
8
8
  require('../../_getAllKeys-cjs.js');
9
9
  require('../../isTypedArray-cjs.js');
10
10
  require('../../isObjectLike-cjs.js');
11
- require('../../isSymbol-cjs.js');
12
- require('../../identity-cjs.js');
11
+ require('../../_arrayLikeKeys-cjs.js');
13
12
  require('../../_getTag-cjs.js');
13
+ require('../../_baseGet-cjs.js');
14
+ require('../../isSymbol-cjs.js');
14
15
  require('../../_baseEach-cjs.js');
16
+ require('../../_baseIsEqual-cjs.js');
17
+ require('../../identity-cjs.js');
15
18
  require('../../_baseFor-cjs.js');
16
19
  require('../../_isIterateeCall-cjs.js');
17
20
  require('../../_setToString-cjs.js');
@@ -6,10 +6,13 @@ import '../../_baseFlatten-es.js';
6
6
  import '../../_getAllKeys-es.js';
7
7
  import '../../isTypedArray-es.js';
8
8
  import '../../isObjectLike-es.js';
9
- import '../../isSymbol-es.js';
10
- import '../../identity-es.js';
9
+ import '../../_arrayLikeKeys-es.js';
11
10
  import '../../_getTag-es.js';
11
+ import '../../_baseGet-es.js';
12
+ import '../../isSymbol-es.js';
12
13
  import '../../_baseEach-es.js';
14
+ import '../../_baseIsEqual-es.js';
15
+ import '../../identity-es.js';
13
16
  import '../../_baseFor-es.js';
14
17
  import '../../_isIterateeCall-es.js';
15
18
  import '../../_setToString-es.js';
@@ -11,10 +11,13 @@ require('../_baseFlatten-cjs.js');
11
11
  require('../_getAllKeys-cjs.js');
12
12
  require('../isTypedArray-cjs.js');
13
13
  require('../isObjectLike-cjs.js');
14
- require('../isSymbol-cjs.js');
15
- require('../identity-cjs.js');
14
+ require('../_arrayLikeKeys-cjs.js');
16
15
  require('../_getTag-cjs.js');
16
+ require('../_baseGet-cjs.js');
17
+ require('../isSymbol-cjs.js');
17
18
  require('../_baseEach-cjs.js');
19
+ require('../_baseIsEqual-cjs.js');
20
+ require('../identity-cjs.js');
18
21
  require('../_baseFor-cjs.js');
19
22
  require('../_isIterateeCall-cjs.js');
20
23
  require('../_setToString-cjs.js');
@@ -9,10 +9,13 @@ import '../_baseFlatten-es.js';
9
9
  import '../_getAllKeys-es.js';
10
10
  import '../isTypedArray-es.js';
11
11
  import '../isObjectLike-es.js';
12
- import '../isSymbol-es.js';
13
- import '../identity-es.js';
12
+ import '../_arrayLikeKeys-es.js';
14
13
  import '../_getTag-es.js';
14
+ import '../_baseGet-es.js';
15
+ import '../isSymbol-es.js';
15
16
  import '../_baseEach-es.js';
17
+ import '../_baseIsEqual-es.js';
18
+ import '../identity-es.js';
16
19
  import '../_baseFor-es.js';
17
20
  import '../_isIterateeCall-es.js';
18
21
  import '../_setToString-es.js';
@@ -13,14 +13,16 @@ require('../Button-cjs.js');
13
13
  require('react-router-dom');
14
14
  require('../Icon-cjs.js');
15
15
  require('@jobber/design');
16
- require('../_getAllKeys-cjs.js');
16
+ require('../_baseGet-cjs.js');
17
17
  require('../isTypedArray-cjs.js');
18
18
  require('../isObjectLike-cjs.js');
19
19
  require('../isSymbol-cjs.js');
20
- require('../identity-cjs.js');
21
- require('../_getTag-cjs.js');
20
+ require('../_arrayLikeKeys-cjs.js');
22
21
  require('../keysIn-cjs.js');
23
22
  require('../_baseAssignValue-cjs.js');
23
+ require('../identity-cjs.js');
24
+ require('../_getAllKeys-cjs.js');
25
+ require('../_getTag-cjs.js');
24
26
  require('../_baseFlatten-cjs.js');
25
27
  require('../_setToString-cjs.js');
26
28
  require('../AtlantisContext-cjs.js');
@@ -11,14 +11,16 @@ import '../Button-es.js';
11
11
  import 'react-router-dom';
12
12
  import '../Icon-es.js';
13
13
  import '@jobber/design';
14
- import '../_getAllKeys-es.js';
14
+ import '../_baseGet-es.js';
15
15
  import '../isTypedArray-es.js';
16
16
  import '../isObjectLike-es.js';
17
17
  import '../isSymbol-es.js';
18
- import '../identity-es.js';
19
- import '../_getTag-es.js';
18
+ import '../_arrayLikeKeys-es.js';
20
19
  import '../keysIn-es.js';
21
20
  import '../_baseAssignValue-es.js';
21
+ import '../identity-es.js';
22
+ import '../_getAllKeys-es.js';
23
+ import '../_getTag-es.js';
22
24
  import '../_baseFlatten-es.js';
23
25
  import '../_setToString-es.js';
24
26
  import '../AtlantisContext-es.js';