@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.
- package/dist/AtlantisThemeContext/index.cjs +2 -1
- package/dist/AtlantisThemeContext/index.mjs +2 -1
- package/dist/Autocomplete/Autocomplete.d.ts +1 -47
- package/dist/Autocomplete/Autocomplete.types.d.ts +53 -0
- package/dist/Autocomplete/index.cjs +8 -3
- package/dist/Autocomplete/index.d.ts +1 -0
- package/dist/Autocomplete/index.mjs +8 -3
- package/dist/Autocomplete/useAutocompleteFormField.d.ts +11 -0
- package/dist/Autocomplete-cjs.js +88 -7
- package/dist/Autocomplete-es.js +89 -8
- package/dist/Chips/InternalChipDismissible/hooks/index.cjs +5 -2
- package/dist/Chips/InternalChipDismissible/hooks/index.mjs +5 -2
- package/dist/Chips/InternalChipDismissible/index.cjs +5 -2
- package/dist/Chips/InternalChipDismissible/index.mjs +5 -2
- package/dist/Chips/index.cjs +5 -2
- package/dist/Chips/index.mjs +5 -2
- package/dist/DatePicker/index.cjs +5 -3
- package/dist/DatePicker/index.mjs +5 -3
- package/dist/DatePicker-cjs.js +9 -8
- package/dist/DatePicker-es.js +3 -2
- package/dist/InputDate/index.cjs +5 -3
- package/dist/InputDate/index.mjs +5 -3
- package/dist/List/index.cjs +5 -2
- package/dist/List/index.mjs +5 -2
- package/dist/List-cjs.js +1 -1
- package/dist/List-es.js +1 -1
- package/dist/_arrayLikeKeys-cjs.js +778 -0
- package/dist/_arrayLikeKeys-es.js +771 -0
- package/dist/_baseEach-cjs.js +24 -569
- package/dist/_baseEach-es.js +7 -552
- package/dist/_baseGet-cjs.js +330 -0
- package/dist/_baseGet-es.js +324 -0
- package/dist/_baseIsEqual-cjs.js +556 -0
- package/dist/_baseIsEqual-es.js +554 -0
- package/dist/_getAllKeys-cjs.js +2 -327
- package/dist/_getAllKeys-es.js +2 -322
- package/dist/_getTag-es.js +1 -1
- package/dist/_isIterateeCall-cjs.js +3 -2
- package/dist/_isIterateeCall-es.js +2 -1
- package/dist/identity-cjs.js +2 -776
- package/dist/identity-es.js +2 -770
- package/dist/index.cjs +7 -4
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +7 -4
- package/dist/isTypedArray-es.js +1 -1
- package/dist/keysIn-cjs.js +4 -4
- package/dist/keysIn-es.js +2 -2
- package/dist/styles.css +1 -46
- package/dist/updateTheme-cjs.js +3 -3
- package/dist/updateTheme-es.js +1 -1
- package/dist/useScrollToActive-cjs.js +3 -3
- package/dist/useScrollToActive-es.js +1 -1
- 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('../
|
|
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 '../
|
|
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 {
|
|
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
|
|
|
@@ -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
|
+
};
|
package/dist/Autocomplete-cjs.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
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(
|
|
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;
|
package/dist/Autocomplete-es.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
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(
|
|
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('../../../
|
|
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 '../../../
|
|
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('../../
|
|
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 '../../
|
|
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';
|
package/dist/Chips/index.cjs
CHANGED
|
@@ -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('../
|
|
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');
|
package/dist/Chips/index.mjs
CHANGED
|
@@ -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 '../
|
|
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('../
|
|
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('../
|
|
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 '../
|
|
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 '../
|
|
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';
|