@leafygreen-ui/combobox 1.1.0 → 1.2.2
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/CHANGELOG.md +47 -0
- package/dist/Chip.d.ts.map +1 -1
- package/dist/Combobox.d.ts +7 -1
- package/dist/Combobox.d.ts.map +1 -1
- package/dist/Combobox.styles.d.ts +7 -6
- package/dist/Combobox.styles.d.ts.map +1 -1
- package/dist/Combobox.types.d.ts +27 -1
- package/dist/Combobox.types.d.ts.map +1 -1
- package/dist/ComboboxContext.d.ts +1 -1
- package/dist/ComboboxContext.d.ts.map +1 -1
- package/dist/ComboboxOption.d.ts.map +1 -1
- package/dist/ComboboxTestUtils.d.ts +1 -2
- package/dist/ComboboxTestUtils.d.ts.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/utils/OptionObjectUtils.d.ts +5 -0
- package/dist/utils/OptionObjectUtils.d.ts.map +1 -0
- package/dist/utils/flattenChildren.d.ts +11 -0
- package/dist/utils/flattenChildren.d.ts.map +1 -0
- package/dist/utils/getNameAndValue.d.ts +14 -0
- package/dist/utils/getNameAndValue.d.ts.map +1 -0
- package/dist/utils/index.d.ts +5 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/wrapJSX.d.ts +14 -0
- package/dist/utils/wrapJSX.d.ts.map +1 -0
- package/package.json +10 -10
- package/src/Chip.tsx +13 -3
- package/src/Combobox.spec.tsx +321 -242
- package/src/Combobox.story.tsx +98 -3
- package/src/Combobox.styles.ts +83 -24
- package/src/Combobox.tsx +456 -268
- package/src/Combobox.types.ts +36 -1
- package/src/ComboboxContext.tsx +2 -2
- package/src/ComboboxOption.tsx +34 -8
- package/src/ComboboxTestUtils.tsx +20 -3
- package/src/utils/ComboboxUtils.spec.tsx +227 -0
- package/src/utils/OptionObjectUtils.ts +26 -0
- package/src/utils/flattenChildren.tsx +47 -0
- package/src/utils/getNameAndValue.ts +23 -0
- package/src/utils/index.ts +8 -0
- package/src/utils/wrapJSX.tsx +54 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/dist/util.d.ts +0 -53
- package/dist/util.d.ts.map +0 -1
- package/src/util.tsx +0 -133
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,52 @@
|
|
|
1
1
|
# @leafygreen-ui/combobox
|
|
2
2
|
|
|
3
|
+
## 1.2.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fad2b287: Fixes a bug where occasionally the max menu height would be set to 0 if a ref was left unset
|
|
8
|
+
|
|
9
|
+
## 1.2.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies [f0a357e2]
|
|
14
|
+
- @leafygreen-ui/tooltip@7.0.3
|
|
15
|
+
|
|
16
|
+
## 1.2.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- 8ab46ed4: Adds `Large` size variant to Combobox. Additionally, restores legacy font in Label & Description
|
|
21
|
+
- d241af9e: Adds a `disabled` prop to ComboboxOptions. Note, disabled options will still be rendered in the menu, but not selectable
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- d5c12b77: Updates filtering behavior. Now when opening the menu all options will be displayed, regardless of whether a selection has already been made
|
|
26
|
+
- a5d19177: Updates backdrop click behavior to match native `<select>`. Now, when clicking away from an open menu to close it, the Combobox will retain focus and no click handlers should fire on clicked elements until the menu is closed
|
|
27
|
+
- 8f7f8555: Updates combobox focus ring behavior. The combobox will now display a focus ring whenever the user is able to type in thy combobox. The outer focus ring will not render if a chip or the clear button is focused.
|
|
28
|
+
- 4f2ff237: - Updates min-width of the input to fit all characters (previously wide characters would be cut off).
|
|
29
|
+
- Updates text wrapping of menu items so long unbroken strings (like ids) won't overflow, but wrap.
|
|
30
|
+
- d241af9e: Restores menu font to legacy Akzidenz font
|
|
31
|
+
- 6792bc44: Refactors Combobox and Select to use the new `useAvailableSpace` hook to calculate the max menu height
|
|
32
|
+
- 266e0d8e: Ensures the focus remains in the combobox when a chip is removed. Focus is set to either the input, or the next chip to the right, whichever is relevant
|
|
33
|
+
- 422dbfcd: Adds additional tests for internal Combobox utilities
|
|
34
|
+
- Updated dependencies [1356d50d]
|
|
35
|
+
- Updated dependencies [6a89bc29]
|
|
36
|
+
- Updated dependencies [fd2f6de0]
|
|
37
|
+
- Updated dependencies [6792bc44]
|
|
38
|
+
- Updated dependencies [96d1ff9c]
|
|
39
|
+
- Updated dependencies [422dbfcd]
|
|
40
|
+
- Updated dependencies [9ff90d4b]
|
|
41
|
+
- @leafygreen-ui/checkbox@8.0.3
|
|
42
|
+
- @leafygreen-ui/palette@3.4.0
|
|
43
|
+
- @leafygreen-ui/hooks@7.3.0
|
|
44
|
+
- @leafygreen-ui/icon-button@11.0.2
|
|
45
|
+
- @leafygreen-ui/inline-definition@3.0.2
|
|
46
|
+
- @leafygreen-ui/tokens@1.3.1
|
|
47
|
+
- @leafygreen-ui/typography@11.0.2
|
|
48
|
+
- @leafygreen-ui/lib@9.3.0
|
|
49
|
+
|
|
3
50
|
## 1.1.0
|
|
4
51
|
|
|
5
52
|
### Minor Changes
|
package/dist/Chip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,SAAS,EAAgB,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../src/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,SAAS,EAAgB,MAAM,kBAAkB,CAAC;AA6G3D,eAAO,MAAM,IAAI,mFAsHhB,CAAC"}
|
package/dist/Combobox.d.ts
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ComboboxProps } from './Combobox.types';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Combobox is a combination of a Select and TextInput,
|
|
5
|
+
* allowing the user to either type a value directly or select a value from the list.
|
|
6
|
+
* Can be configured to select a single or multiple options.
|
|
5
7
|
*/
|
|
6
8
|
export default function Combobox<M extends boolean>({ children, label, description, placeholder, 'aria-label': ariaLabel, disabled, size, darkMode, state, errorMessage, searchState, searchEmptyMessage, searchErrorMessage, searchLoadingMessage, filteredOptions, onFilter, clearable, onClear, overflow, multiselect, initialValue, onChange, value, chipTruncationLocation, chipCharacterLimit, className, usePortal, portalClassName, portalContainer, scrollContainer, popoverZIndex, ...rest }: ComboboxProps<M>): JSX.Element;
|
|
9
|
+
/**
|
|
10
|
+
* Why'd you have to go and make things so complicated?
|
|
11
|
+
* - Avril; and also me to myself about this component
|
|
12
|
+
*/
|
|
7
13
|
//# sourceMappingURL=Combobox.d.ts.map
|
package/dist/Combobox.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../src/Combobox.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../src/Combobox.tsx"],"names":[],"mappings":";AAsBA,OAAO,EACL,aAAa,EAOd,MAAM,kBAAkB,CAAC;AA8B1B;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAClD,QAAQ,EACR,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,YAAY,EAAE,SAAS,EACvB,QAAgB,EAChB,IAA2B,EAC3B,QAAgB,EAChB,KAAc,EACd,YAAY,EACZ,WAAqB,EACrB,kBAAuC,EACvC,kBAA6C,EAC7C,oBAA2C,EAC3C,eAAe,EACf,QAAQ,EACR,SAAgB,EAChB,OAAO,EACP,QAAqB,EACrB,WAAwB,EACxB,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,sBAAsB,EACtB,kBAAuB,EACvB,SAAS,EACT,SAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,aAAa,EACb,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,CAAC,CAAC,eAswClB;AACD;;;GAGG"}
|
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { ComboboxSize, Overflow, State } from './Combobox.types';
|
|
5
5
|
export declare const chipClassName: string;
|
|
6
|
+
export declare const _tempLabelDescriptionOverrideStyle: string;
|
|
6
7
|
export declare const comboboxParentStyle: ({ darkMode, size, overflow, }: {
|
|
7
8
|
darkMode: boolean;
|
|
8
9
|
size: ComboboxSize;
|
|
9
10
|
overflow: Overflow;
|
|
10
11
|
}) => string;
|
|
11
12
|
export declare const comboboxStyle: string;
|
|
12
|
-
export declare const
|
|
13
|
+
export declare const comboboxFocusStyle: string;
|
|
13
14
|
export declare const interactionRingColor: ({ state, darkMode, }: {
|
|
14
15
|
state: State;
|
|
15
16
|
darkMode: boolean;
|
|
@@ -18,14 +19,16 @@ export declare const interactionRingColor: ({ state, darkMode, }: {
|
|
|
18
19
|
} | {
|
|
19
20
|
hovered: "#FCEBE2" | undefined;
|
|
20
21
|
};
|
|
21
|
-
export declare const inputWrapperStyle: ({ overflow, isOpen, selection, value, }: {
|
|
22
|
+
export declare const inputWrapperStyle: ({ overflow, isOpen, selection, size, value, }: {
|
|
22
23
|
overflow: Overflow;
|
|
23
24
|
isOpen: boolean;
|
|
24
25
|
selection: string | Array<string> | null;
|
|
26
|
+
size: ComboboxSize;
|
|
25
27
|
value?: string | undefined;
|
|
26
28
|
}) => string;
|
|
27
29
|
export declare const inputElementStyle: string;
|
|
28
|
-
export declare const
|
|
30
|
+
export declare const clearButtonStyle: string;
|
|
31
|
+
export declare const clearButtonFocusOverrideStyles: string;
|
|
29
32
|
export declare const errorMessageStyle: string;
|
|
30
33
|
export declare const endIcon: string;
|
|
31
34
|
export declare const loadingIconStyle: string;
|
|
@@ -37,9 +40,7 @@ export declare const menuWrapperStyle: ({ darkMode, size, width, }: {
|
|
|
37
40
|
size: ComboboxSize;
|
|
38
41
|
width?: number | undefined;
|
|
39
42
|
}) => string;
|
|
40
|
-
export declare const menuStyle:
|
|
41
|
-
maxHeight: number;
|
|
42
|
-
}) => string;
|
|
43
|
+
export declare const menuStyle: string;
|
|
43
44
|
export declare const menuList: string;
|
|
44
45
|
export declare const menuMessage: string;
|
|
45
46
|
//# sourceMappingURL=Combobox.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../src/Combobox.styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAOH,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../src/Combobox.styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAOH,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAUjE,eAAO,MAAM,aAAa,QAAyC,CAAC;AAGpE,eAAO,MAAM,kCAAkC,QAI9C,CAAC;AAEF,eAAO,MAAM,mBAAmB;cAKpB,OAAO;UACX,YAAY;cACR,QAAQ;YAqEnB,CAAC;AAEF,eAAO,MAAM,aAAa,QA0BzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAO9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAIxB,KAAK;cACF,OAAO;;;;;CAWlB,CAAC;AAEF,eAAO,MAAM,iBAAiB;cAOlB,QAAQ;YACV,OAAO;eACJ,MAAM,GAAG,MAAM,MAAM,CAAC,GAAG,IAAI;UAClC,YAAY;;YA4EnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAkB7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAG5B,CAAC;AAIF,eAAO,MAAM,8BAA8B,QAO1C,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAK7B,CAAC;AAEF,eAAO,MAAM,OAAO,QAEnB,CAAC;AAUF,eAAO,MAAM,gBAAgB,QAE5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;cAKjB,OAAO;UACX,YAAY;;YA4DnB,CAAC;AAEF,eAAO,MAAM,SAAS,QAarB,CAAC;AAEF,eAAO,MAAM,QAAQ,QAIpB,CAAC;AAEF,eAAO,MAAM,WAAW,QAYvB,CAAC"}
|
package/dist/Combobox.types.d.ts
CHANGED
|
@@ -3,8 +3,22 @@ import { Either } from '@leafygreen-ui/lib';
|
|
|
3
3
|
/**
|
|
4
4
|
* Prop Enums & Types
|
|
5
5
|
*/
|
|
6
|
+
export declare const ComboboxElement: {
|
|
7
|
+
readonly Input: "Input";
|
|
8
|
+
readonly ClearButton: "ClearButton";
|
|
9
|
+
readonly FirstChip: "FirstChip";
|
|
10
|
+
readonly LastChip: "LastChip";
|
|
11
|
+
readonly MiddleChip: "MiddleChip";
|
|
12
|
+
readonly Combobox: "Combobox";
|
|
13
|
+
readonly Menu: "Menu";
|
|
14
|
+
};
|
|
15
|
+
export declare type ComboboxElement = typeof ComboboxElement[keyof typeof ComboboxElement];
|
|
16
|
+
/**
|
|
17
|
+
* Prop types
|
|
18
|
+
*/
|
|
6
19
|
export declare const ComboboxSize: {
|
|
7
|
-
readonly
|
|
20
|
+
readonly Default: "default";
|
|
21
|
+
readonly Large: "large";
|
|
8
22
|
};
|
|
9
23
|
export declare type ComboboxSize = typeof ComboboxSize[keyof typeof ComboboxSize];
|
|
10
24
|
export declare const TrunctationLocation: {
|
|
@@ -208,18 +222,30 @@ interface BaseComboboxOptionProps {
|
|
|
208
222
|
* The icon to display to the left of the option in the menu.
|
|
209
223
|
*/
|
|
210
224
|
glyph?: ReactElement;
|
|
225
|
+
/**
|
|
226
|
+
* Defines whether the option is disabled.
|
|
227
|
+
* Node: disabled options are still rendered in the menu, but not selectable.
|
|
228
|
+
*/
|
|
229
|
+
disabled?: boolean;
|
|
211
230
|
/**
|
|
212
231
|
* Styling Prop
|
|
213
232
|
*/
|
|
214
233
|
className?: string;
|
|
215
234
|
}
|
|
216
235
|
export declare type ComboboxOptionProps = Either<BaseComboboxOptionProps, 'value' | 'displayName'>;
|
|
236
|
+
export interface OptionObject {
|
|
237
|
+
value: string;
|
|
238
|
+
displayName: string;
|
|
239
|
+
isDisabled: boolean;
|
|
240
|
+
hasGlyph?: boolean;
|
|
241
|
+
}
|
|
217
242
|
export interface InternalComboboxOptionProps {
|
|
218
243
|
value: string;
|
|
219
244
|
displayName: string;
|
|
220
245
|
isSelected: boolean;
|
|
221
246
|
isFocused: boolean;
|
|
222
247
|
setSelected: () => void;
|
|
248
|
+
disabled?: boolean;
|
|
223
249
|
glyph?: ReactElement;
|
|
224
250
|
className?: string;
|
|
225
251
|
index: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../src/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C;;GAEG;AAEH,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../src/Combobox.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { ComboboxSize, TrunctationLocation } from './Combobox.types';
|
|
|
3
3
|
interface ComboboxData {
|
|
4
4
|
multiselect: boolean;
|
|
5
5
|
darkMode: boolean;
|
|
6
|
-
size:
|
|
6
|
+
size: ComboboxSize;
|
|
7
7
|
withIcons: boolean;
|
|
8
8
|
disabled: boolean;
|
|
9
9
|
chipTruncationLocation?: TrunctationLocation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxContext.d.ts","sourceRoot":"","sources":["../src/ComboboxContext.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAErE,UAAU,YAAY;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"ComboboxContext.d.ts","sourceRoot":"","sources":["../src/ComboboxContext.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAErE,UAAU,YAAY;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,sBAAsB,CAAC,EAAE,mBAAmB,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,uCAM1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxOption.d.ts","sourceRoot":"","sources":["../src/ComboboxOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EACL,mBAAmB,EACnB,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxOption.d.ts","sourceRoot":"","sources":["../src/ComboboxOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EACL,mBAAmB,EACnB,2BAA2B,EAC5B,MAAM,kBAAkB,CAAC;AA8E1B;;GAEG;AACH,QAAA,MAAM,sBAAsB,mGAmI3B,CAAC;AAGF,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAClC,iBAAwB,cAAc,CAAC,CAAC,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAE1E;kBAFuB,cAAc;;;eAAd,cAAc"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/// <reference types="jest" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { BaseComboboxProps, ComboboxMultiselectProps } from './Combobox.types';
|
|
4
|
-
import { OptionObject } from './util';
|
|
3
|
+
import { BaseComboboxProps, ComboboxMultiselectProps, OptionObject } from './Combobox.types';
|
|
5
4
|
export interface NestedObject {
|
|
6
5
|
label: string;
|
|
7
6
|
children: Array<string | OptionObject>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxTestUtils.d.ts","sourceRoot":"","sources":["../src/ComboboxTestUtils.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,
|
|
1
|
+
{"version":3,"file":"ComboboxTestUtils.d.ts","sourceRoot":"","sources":["../src/ComboboxTestUtils.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACb,MAAM,kBAAkB,CAAC;AAI1B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;CACxC;AAED,oBAAY,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC3C,aAAK,mBAAmB,GAAG;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC,CAAC;CACvD,GAAG,iBAAiB,GACnB,wBAAwB,CAAC,OAAO,CAAC,CAAC;AAEpC,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,YAAY,CAgB9C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,YAAY,CA+B9C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,0DAyC1B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAC7C,MAAM,GAAE,CAAiB,EACzB,KAAK,CAAC,EAAE,mBAAmB;iCAsDS,mBAAmB;;gBAetB,MAAM,GAAG,WAAW,GAAG,IAAI;gBAC3B,MAAM,MAAM,CAAC,GAAG,MAAM,WAAW,CAAC,GAAG,IAAI;;;gBAgBxC,MAAM,GAAG,WAAW,GAAG,IAAI;gBAC3B,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,IAAI;gBACrC,MAAM,MAAM,CAAC,GAAG,MAAM,WAAW,CAAC,GAAG,IAAI;;yBA5BjD,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6D7C;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,cAAe,OAAO,YAAmC,CAAC;AA8B7E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,IAAI,CAAC;QACb,UAAU,QAAQ,CAAC,CAAC;YAClB,cAAc,IAAI,CAAC,CAAC;SACrB;KACF;CACF"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n,{createContext as o,useContext as e,useCallback as r,useMemo as t,useRef as i,useEffect as a,useState as l}from"react";import{isArray as c,isNull as u,isString as s,isUndefined as d,clone as b,isEqual as g}from"lodash";import{Label as p,Description as m}from"@leafygreen-ui/typography";import f from"@leafygreen-ui/popover";import{useIdAllocator as h,useForwardedRef as v,useDynamicRefs as x,usePrevious as y,useViewportSize as w,useEventListener as k}from"@leafygreen-ui/hooks";import C from"@leafygreen-ui/interaction-ring";import N,{isComponentGlyph as O}from"@leafygreen-ui/icon";import M from"@leafygreen-ui/icon-button";import{css as E,cx as j,keyframes as I}from"@leafygreen-ui/emotion";import{uiColors as S}from"@leafygreen-ui/palette";import{keyMap as z,isComponentType as D,createUniqueClassName as P,consoleOnce as F}from"@leafygreen-ui/lib";import L from"@leafygreen-ui/checkbox";import A from"lodash/kebabCase";import{jsx as T}from"@emotion/react";import R from"@leafygreen-ui/inline-definition";import{fontFamilies as W}from"@leafygreen-ui/tokens";function B(n,o){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(n,o).enumerable}))),e.push.apply(e,r)}return e}function G(n){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{};o%2?B(Object(e),!0).forEach((function(o){V(n,o,e[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):B(Object(e)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(e,o))}))}return n}function K(n){return K="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},K(n)}function V(n,o,e){return o in n?Object.defineProperty(n,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[o]=e,n}function H(){return H=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n},H.apply(this,arguments)}function U(n,o){if(null==n)return{};var e,r,t=function(n,o){if(null==n)return{};var e,r,t={},i=Object.keys(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||(t[e]=n[e]);return t}(n,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(t[e]=n[e])}return t}function X(n,o){return o||(o=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(o)}}))}function Z(n,o){return function(n){if(Array.isArray(n))return n}(n)||function(n,o){var e=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==e)return;var r,t,i=[],a=!0,l=!1;try{for(e=e.call(n);!(a=(r=e.next()).done)&&(i.push(r.value),!o||i.length!==o);a=!0);}catch(n){l=!0,t=n}finally{try{a||null==e.return||e.return()}finally{if(l)throw t}}return i}(n,o)||$(n,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Y(n){return function(n){if(Array.isArray(n))return q(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||$(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function $(n,o){if(n){if("string"==typeof n)return q(n,o);var e=Object.prototype.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?q(n,o):void 0}}function q(n,o){(null==o||o>n.length)&&(o=n.length);for(var e=0,r=new Array(o);e<o;e++)r[e]=n[e];return r}var J,Q,_,nn,on,en,rn,tn,an,ln,cn,un,sn,dn,bn,gn,pn,mn,fn,hn,vn,xn,yn,wn,kn,Cn,Nn,On=o({multiselect:!1,darkMode:!1,size:"default",withIcons:!1,disabled:!1}),Mn=G(G({},z),{},{Backspace:8,Delete:46}),En=function(o,e,r){if(e&&r){var t=new RegExp(e,"gi"),i=o.matchAll(t);if(i){for(var a=o.split(""),l=0,c=Array.from(i);l<c.length;l++){var u,s=c[l],d=null!==(u=s.index)&&void 0!==u?u:-1,b=s[0],g=b.length,p=d+b+g,m=new Array(g).fill("");m[0]=n.createElement(r,{key:p},b),a.splice.apply(a,[d,g].concat(Y(m)))}return T(n.Fragment,null,a)}return T(n.Fragment,null,o)}return T(n.Fragment,null,o)},jn=function(n){var o,e=n.value,r=n.displayName;return{value:null!=e?e:A(r),displayName:null!==(o=null!=r?r:e)&&void 0!==o?o:""}},In=function o(e){return n.Children.toArray(e).reduce((function(n,e){if(D(e,"ComboboxOption")){var r=jn(e.props),t=r.value,i=r.displayName,a=e.props.glyph;return[].concat(Y(n),[{value:t,displayName:i,hasGlyph:!!a}])}if(D(e,"ComboboxGroup")){var l=e.props.children;if(l)return[].concat(Y(n),Y(o(l)))}}),[])},Sn=E(Q||(Q=X(["\n display: inline-flex;\n gap: 8px;\n justify-content: start;\n align-items: inherit;\n"]))),zn=E(_||(_=X(["\n pointer-events: none;\n"]))),Dn=function(n){return E(nn||(nn=X(["\n font-weight: ",";\n"])),n?"bold":"normal")},Pn=n.forwardRef((function(o,i){var a=o.displayName,l=o.glyph,c=o.isSelected,u=o.isFocused,s=o.setSelected,d=o.className,b=e(On),g=b.multiselect,p=b.darkMode,m=b.withIcons,f=b.inputValue,x=h({prefix:"combobox-option-text"}),y=v(i,null),w=r((function(n){n.stopPropagation(),n.target!==y.current&&"INPUT"!==n.target.tagName||s()}),[y,s]),k=t((function(){if(l){if(O(l)||D(l,"Icon"))return l;console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",l)}}),[l]),C=t((function(){if(g){var o=T(L,{label:"","aria-labelledby":x,checked:c,tabIndex:-1,animate:!1});return T(n.Fragment,null,T("span",{className:j(Sn,zn)},m?k:o,T("span",{id:x,className:Dn(c)},En(a,f,"strong"))),m&&o)}return T(n.Fragment,null,T("span",{className:j(Sn,zn)},k,T("span",{className:Dn(c)},En(a,f,"strong"))),c&&T(N,{glyph:"Checkmark",color:p?S.blue.light1:S.blue.base}))}),[g,k,c,a,f,p,x,m]);return T("li",{ref:y,role:"option","aria-selected":u,"aria-label":a,tabIndex:-1,className:j(E(J||(J=X(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n list-style: none;\n color: inherit;\n cursor: pointer;\n overflow: hidden;\n font-size: var(--lg-combobox-item-font-size);\n line-height: var(--lg-combobox-item-line-height);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n &:before {\n content: '';\n position: absolute;\n left: 0;\n width: 3px;\n height: var(--lg-combobox-item-wedge-height);\n background-color: transparent;\n border-radius: 0 2px 2px 0;\n transform: scaleY(0.3);\n transition: 150ms ease-in-out;\n transition-property: transform, background-color;\n }\n\n &:hover {\n outline: none;\n background-color: var(--lg-combobox-item-hover-color);\n }\n\n &[aria-selected='true'] {\n outline: none;\n background-color: var(--lg-combobox-item-active-color);\n\n &:before {\n background-color: var(--lg-combobox-item-wedge-color);\n transform: scaleY(1);\n }\n }\n"]))),d),onClick:w,onKeyPress:w},C)}));function Fn(n){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}Pn.displayName="ComboboxOption",Fn.displayName="ComboboxOption";var Ln,An,Tn,Rn,Wn,Bn,Gn,Kn,Vn=P("combobox-chip"),Hn=function(n){var o=n.darkMode,e=n.size,r=n.overflow;return j(function(n){return n?E(on||(on=X([""]))):E(en||(en=X(["\n --lg-combobox-color-error: ",";\n --lg-combobox-text-color: ",";\n --lg-combobox-text-color-disabled: ",";\n\n --lg-combobox-background-color: ",";\n --lg-combobox-background-color-focus: ",";\n --lg-combobox-background-color-disabled: ",";\n\n --lg-combobox-border-color: ",";\n --lg-combobox-border-color-disabled: ",";\n --lg-combobox-border-color-error: ",";\n\n --lg-combobox-shadow: 0px 1px 2px rgba(6, 22, 33, 0.3);\n --lg-combobox-shadow-focus: 0px 4px 4px rgba(6, 22, 33, 0.3);\n "])),S.red.base,S.gray.dark3,S.gray.dark1,S.gray.light3,S.white,S.gray.light2,S.gray.base,S.gray.light1,S.red.base)}(o),function(n){if("default"===n)return E(rn||(rn=X(["\n --lg-combobox-padding-y: 5px;\n --lg-combobox-padding-x: 7px;\n --lg-combobox-height: 24px;\n --lg-combobox-font-size: 14px;\n --lg-combobox-line-height: 20px;\n --lg-combobox-border-radius: 3px;\n --lg-combobox-icon-height: 16px;\n "])))}(e),E(tn||(tn=X(["\n --lg-combobox-width: ",";\n --lg-combobox-padding: var(--lg-combobox-padding-y)\n var(--lg-combobox-padding-x) var(--lg-combobox-padding-y)\n ",";\n width: var(--lg-combobox-width);\n // TODO: Clean this up 🤮\n min-width: calc(\n ","px + var(--lg-combobox-padding-x) * 2 + 2px +\n var(--lg-combobox-icon-height)\n );\n "])),"expand-x"===r?"unset":"100%","scroll-x"===r?"0":"var(--lg-combobox-padding-x)",24))},Un=E(an||(an=X(["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--lg-combobox-padding);\n color: var(--lg-combobox-text-color);\n background-color: var(--lg-combobox-background-color);\n box-shadow: var(--lg-combobox-shadow);\n border: 1px solid var(--lg-combobox-border-color);\n border-radius: var(--lg-combobox-border-radius);\n width: var(--lg-combobox-width);\n cursor: text;\n transition: 150ms ease-in-out;\n transition-property: background-color, box-shadow;\n\n &:focus-within {\n background-color: var(--lg-combobox-background-color-focus);\n box-shadow: var(--lg-combobox-shadow-focus);\n }\n\n &[data-disabled='true'] {\n color: var(--lg-combobox-text-color-disabled);\n background-color: var(--lg-combobox-background-color-disabled);\n border-color: var(--lg-combobox-border-color-disabled);\n box-shadow: unset;\n cursor: not-allowed;\n }\n\n &[data-state='error'] {\n border-color: var(--lg-combobox-border-color-error);\n }\n"]))),Xn=E(ln||(ln=X(["\n width: var(--lg-combobox-width);\n"]))),Zn=function(n){var o=n.state;return n.darkMode?{hovered:"error"===o?S.red.dark2:void 0}:{hovered:"error"===o?S.red.light3:void 0}},Yn=function(n){var o,e=n.overflow,r=n.isOpen,t=n.selection,i=n.value,a=c(t)&&t.length>0,l=null!==(o=null==i?void 0:i.length)&&void 0!==o?o:0,u=E(cn||(cn=X(["\n flex-grow: 1;\n width: var(--lg-combobox-width);\n\n --lg-combobox-input-width: ",";\n "])),a?"".concat(l,"ch"):"100%");switch(e){case"scroll-x":return E(un||(un=X(["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n padding-left: var(--lg-combobox-padding-x);\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by `scroll-behavior` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > ."," {\n margin-inline: 2px;\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n "],["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n padding-left: var(--lg-combobox-padding-x);\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by \\`scroll-behavior\\` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > ."," {\n margin-inline: 2px;\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n "])),u,r?"0":"100ms",Vn);case"expand-x":return E(sn||(sn=X(["\n ","\n display: flex;\n gap: 4px;\n flex-wrap: nowrap;\n white-space: nowrap;\n height: var(--lg-combobox-height);\n --lg-combobox-input-transition: none;\n "])),u);case"expand-y":return E(dn||(dn=X(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n overflow-x: visible;\n min-height: var(--lg-combobox-height);\n "])),u)}},$n=E(bn||(bn=X(["\n border: none;\n cursor: inherit;\n background-color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n line-height: var(--lg-combobox-line-height);\n height: var(--lg-combobox-height);\n width: var(--lg-combobox-input-width, 0);\n transition: var(--lg-combobox-input-transition);\n\n &:focus {\n outline: none;\n }\n"]))),qn=E(gn||(gn=X(["\n // Add a negative margin so the button takes up the same space as the regular icons\n margin-block: calc(var(--lg-combobox-icon-height) / 2 - 100%);\n"]))),Jn=E(pn||(pn=X(["\n font-size: var(--lg-combobox-font-size);\n line-height: var(--lg-combobox-line-height);\n color: var(--lg-combobox-color-error);\n padding-top: var(--lg-combobox-padding-y);\n"]))),Qn=E(mn||(mn=X(["\n margin-inline-end: calc(var(--lg-combobox-padding-x) / 2);\n"]))),_n=I(fn||(fn=X(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),no=E(hn||(hn=X(["\n animation: "," 1.5s linear infinite;\n"])),_n),oo=function(n){var o,e,r=n.darkMode,t=n.size,i=n.width,a=void 0===i?384:i;if(o=r?E(vn||(vn=X([""]))):E(xn||(xn=X(["\n --lg-combobox-menu-color: ",";\n --lg-combobox-menu-message-color: ",";\n --lg-combobox-menu-background-color: ",";\n --lg-combobox-menu-shadow: 0px 3px 7px rgba(0, 0, 0, 0.25);\n --lg-combobox-item-hover-color: ",";\n --lg-combobox-item-active-color: ",";\n --lg-combobox-item-wedge-color: ",";\n "])),S.gray.dark3,S.gray.dark1,S.white,S.gray.light2,S.blue.light3,S.blue.base),"default"===t)e=E(yn||(yn=X(["\n --lg-combobox-menu-border-radius: 4px;\n --lg-combobox-item-height: 36px;\n --lg-combobox-item-padding-y: 8px;\n --lg-combobox-item-padding-x: 12px;\n --lg-combobox-item-font-size: 14px;\n --lg-combobox-item-line-height: 21px;\n --lg-combobox-item-wedge-height: 22px;\n "])));return j(o,e,E(wn||(wn=X(["\n width: ","px;\n border-radius: var(--lg-combobox-menu-border-radius);\n\n & > * {\n border-radius: inherit;\n }\n "])),a))},eo=function(n){var o=n.maxHeight;return E(kn||(kn=X(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n font-family: ",";\n color: var(--lg-combobox-menu-color);\n background-color: var(--lg-combobox-menu-background-color);\n box-shadow: var(--lg-combobox-menu-shadow);\n border-radius: inherit;\n overflow: auto;\n min-height: var(--lg-combobox-item-height);\n max-height: ","px;\n scroll-behavior: smooth;\n"])),W.default,o)},ro=E(Cn||(Cn=X(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),to=E(Nn||(Nn=X(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: var(--lg-combobox-item-font-size);\n color: var(--lg-combobox-menu-message-color);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n & > svg {\n width: 1em;\n height: 1em;\n }\n"]))),io=function(n){var o,e,r=n.darkMode,t=n.size;if(o=r?E(Ln||(Ln=X([""]))):E(An||(An=X(["\n --lg-combobox-chip-text-color: ",";\n --lg-combobox-chip-icon-color: ",";\n --lg-combobox-chip-background-color: ",";\n --lg-combobox-chip-hover-color: ",";\n --lg-combobox-chip-focus-color: ",";\n "])),S.gray.dark3,S.gray.dark2,S.gray.light2,S.gray.light1,S.blue.light2),"default"===t)e=E(Tn||(Tn=X(["\n --lg-combobox-chip-height: 24px;\n --lg-combobox-chip-border-radius: 4px;\n --lg-combobox-chip-font-size: 14px;\n --lg-combobox-chip-line-height: 20px;\n --lg-combobox-chip-padding-x: 6px;\n "])));return j(o,e,E(Rn||(Rn=X(["\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n height: var(--lg-combobox-chip-height);\n font-size: var(--lg-combobox-chip-font-size);\n line-height: var(--lg-combobox-chip-line-height);\n border-radius: var(--lg-combobox-chip-border-radius);\n color: var(--lg-combobox-chip-text-color);\n background-color: var(--lg-combobox-chip-background-color);\n\n // TODO - refine these styles\n /* &:focus, */\n &:focus-within {\n background-color: var(--lg-combobox-chip-focus-color);\n }\n "]))))},ao=E(Wn||(Wn=X(["\n padding-inline: var(--lg-combobox-chip-padding-x);\n"]))),lo=E(Bn||(Bn=X(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n outline: none;\n border: none;\n background-color: transparent;\n color: var(--lg-combobox-chip-icon-color);\n cursor: pointer;\n transition: background-color 100ms ease-in-out;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 1px;\n background-color: var(--lg-combobox-chip-hover-color);\n }\n\n &:hover {\n background-color: var(--lg-combobox-chip-hover-color);\n }\n"]))),co=n.forwardRef((function(n,o){var r=n.displayName,l=n.isFocused,c=n.onRemove,u=n.onFocus,s=e(On),d=s.darkMode,b=s.size,g=s.disabled,p=s.chipTruncationLocation,m=void 0===p?"end":p,f=s.chipCharacterLimit,h=void 0===f?12:f,v=!!h&&!!m&&"none"!==m&&r.length>h,x=i(null),y=t((function(){if(v){var n=h-3;switch(m){case"start":return"…"+r.substring(r.length-n).trim();case"middle":return r.substring(0,n/2).trim()+"…"+r.substring(r.length-n/2).trim();case"end":return r.substring(0,n).trim()+"…";default:return r}}return!1}),[h,m,r,v]);a((function(){var n;l&&!g&&(null==x||null===(n=x.current)||void 0===n||n.focus())}),[g,o,l]);return T("span",{role:"option","aria-selected":l,"data-testid":"lg-combobox-chip",ref:o,className:j(Vn,io({darkMode:d,size:b})),onClick:function(n){var o;null!==(o=x.current)&&void 0!==o&&o.contains(n.target)||u()},tabIndex:-1},T("span",{className:ao},y?T(R,{definition:r,align:"bottom"},y):r),T("button",{"aria-label":"Deselect ".concat(r),"aria-disabled":g,disabled:g,ref:x,className:lo,onClick:function(){g||c()},onKeyDown:function(n){g||n.keyCode!==Mn.Delete&&n.keyCode!==Mn.Backspace&&n.keyCode!==Mn.Enter&&n.keyCode!==Mn.Space||c()}},T(N,{glyph:"X"})))}));co.displayName="Chip";var uo=function(n){return E(Gn||(Gn=X(["\n --lg-combobox-group-label-color: ",";\n --lg-combobox-group-border-color: ",";\n padding-top: 8px;\n border-bottom: 1px solid var(--lg-combobox-group-border-color);\n"])),n?S.gray.light1:S.gray.dark1,n?S.gray.dark1:S.gray.light1)},so=E(Kn||(Kn=X(["\n cursor: default;\n width: 100%;\n padding: 0 12px 2px;\n outline: none;\n overflow-wrap: anywhere;\n font-size: 12px;\n line-height: 16px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--lg-combobox-group-label-color);\n"])));function bo(o){var r=o.label,t=o.className,i=o.children,a=e(On).darkMode,l=h({prefix:"combobox-group"});return n.Children.count(i)>0?T("div",{className:j(uo(a),t)},T("div",{className:so,id:l},r),T("div",{role:"group","aria-labelledby":l},i)):T(n.Fragment,null)}function go(n){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}go.displayName="ComboboxGroup";var po=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","onChange","value","chipTruncationLocation","chipCharacterLimit","className","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"];function mo(o){var e=o.children,v=o.label,O=o.description,E=o.placeholder,I=void 0===E?"Select":E,z=o["aria-label"],P=o.disabled,L=void 0!==P&&P,A=o.size,R=void 0===A?"default":A,W=o.darkMode,B=void 0!==W&&W,V=o.state,X=void 0===V?"none":V,Y=o.errorMessage,$=o.searchState,q=void 0===$?"unset":$,J=o.searchEmptyMessage,Q=void 0===J?"No results found":J,_=o.searchErrorMessage,nn=void 0===_?"Could not get results!":_,on=o.searchLoadingMessage,en=void 0===on?"Loading results...":on,rn=o.filteredOptions,tn=o.onFilter,an=o.clearable,ln=void 0===an||an,cn=o.onClear,un=o.overflow,sn=void 0===un?"expand-y":un,dn=o.multiselect,bn=void 0!==dn&&dn,gn=o.initialValue,pn=o.onChange,mn=o.value,fn=o.chipTruncationLocation,hn=o.chipCharacterLimit,vn=void 0===hn?12:hn,xn=o.className,yn=o.usePortal,wn=void 0===yn||yn,kn=o.portalClassName,Cn=o.portalContainer,Nn=o.scrollContainer,En=o.popoverZIndex,Sn=U(o,po),zn=x({prefix:"option"}),Dn=x({prefix:"chip"}),Fn=h({prefix:"combobox-input"}),Ln=h({prefix:"combobox-label"}),An=h({prefix:"combobox-menu"}),Tn=i(null),Rn=i(null),Wn=i(null),Bn=i(null),Gn=i(null),Kn=Z(l(!1),2),Vn=Kn[0],_n=Kn[1],io=y(Vn),ao=Z(l(null),2),lo=ao[0],uo=ao[1],so=Z(l(null),2),go=so[0],mo=so[1],fo=y(go),ho=Z(l(""),2),vo=ho[0],xo=ho[1],yo=y(vo),wo=Z(l(null),2),ko=wo[0],Co=wo[1],No=!u(go)&&(c(go)&&go.length>0||s(go)),Oo=r((function(n){return!bn||"string"!=typeof n&&"number"!=typeof n?!bn&&c(n)&&F.error("Error in Combobox: multiselect is set to `false`, but recieved an Array value"):F.error("Error in Combobox: multiselect is set to `true`, but recieved a ".concat(K(n),' value: "').concat(n,'"')),bn&&c(n)}),[bn]),Mo=r((function(n){!L&&Bn&&Bn.current&&(Bn.current.focus(),d(n)||Bn.current.setSelectionRange(n,n))}),[L]),Eo=r((function(n){if(Oo(go)){var o=b(go);u(n)?o.length=0:go.includes(n)?o.splice(o.indexOf(n),1):(o.push(n),xo("")),mo(o),null==pn||pn(o)}else{var e=n;mo(e),null==pn||pn(e)}}),[Oo,pn,go]),jo=function(){Wn&&Wn.current&&(Wn.current.scrollLeft=Wn.current.scrollWidth)},Io=bn&&c(go)&&go.length>0?void 0:I,So=t((function(){return In(e)}),[e]),zo=r((function(n){var o,e;return n?null!==(o=null===(e=So.find((function(o){return o.value===n})))||void 0===e?void 0:e.displayName)&&void 0!==o?o:n:""}),[So]),Do=r((function(n){var o="string"==typeof n?n:n.value;return rn&&rn.length>0?rn.includes(o):("string"==typeof n?zo(o):n.displayName).toLowerCase().includes(vo.toLowerCase())}),[rn,zo,vo]),Po=t((function(){return So.filter(Do)}),[So,Do]),Fo=r((function(n){return!!n&&!!So.find((function(o){return o.value===n}))}),[So]),Lo=r((function(n){return Po?Po.findIndex((function(o){return o.value===n})):-1}),[Po]),Ao=r((function(n){if(Po&&Po.length>=n){var o=Po[n];return o?o.value:void 0}}),[Po]),To=r((function(){return Oo(go)?go.findIndex((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1}),[Dn,Oo,go]),Ro=r((function(){var n,o,e,r=null===(n=Bn.current)||void 0===n?void 0:n.contains(document.activeElement),t=null===(o=Rn.current)||void 0===o?void 0:o.contains(document.activeElement),i=Oo(go)&&go.some((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})),a=function(){return Oo(go)?go.findIndex((function(n){var o,e;return null===(o=Dn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1};return Oo(go)&&i?0===a()?"FirstChip":a()===go.length-1?"LastChip":"MiddleChip":r?"Input":t?"ClearButton":null!==(e=Tn.current)&&void 0!==e&&e.contains(document.activeElement)?"Combobox":void 0}),[Dn,Oo,go]),Wo=r((function(n){var o,e=null!==(o=null==Po?void 0:Po.length)&&void 0!==o?o:0,r=e-1>0?e-1:0,t=Lo(lo);switch(n&&Vn&&(Co(null),Mo()),n){case"next":var i=Ao(t+1<e?t+1:0);uo(null!=i?i:null);break;case"prev":var a=Ao(t-1>=0?t-1:r);uo(null!=a?a:null);break;case"last":var l=Ao(r);uo(null!=l?l:null);break;default:var c=Ao(0);uo(null!=c?c:null)}}),[lo,Lo,Ao,Vn,Mo,null==Po?void 0:Po.length]),Bo=r((function(n,o){if(Oo(go))switch(n){case"next":var e=null!=o?o:To(),r=e+1<go.length?e+1:go.length-1,t=go[r];Co(t);break;case"prev":var i=null!=o?o:To(),a=i>0?i-1:i<0?go.length-1:0,l=go[a];Co(l);break;case"first":var c=go[0];Co(c);break;case"last":var u=go[go.length-1];Co(u);break;default:Co(null)}}),[To,Oo,go]),Go=r((function(n,o){n&&uo(null);var e=Ro();switch(n){case"right":switch(e){case"Input":var r,t,i;if((null===(r=Bn.current)||void 0===r?void 0:r.selectionEnd)===(null===(t=Bn.current)||void 0===t?void 0:t.value.length))null===(i=Rn.current)||void 0===i||i.focus();break;case"LastChip":o.preventDefault(),Mo(0),Bo(null);break;case"FirstChip":case"MiddleChip":Bo("next")}break;case"left":switch(e){case"ClearButton":var a;o.preventDefault(),Mo(null==Bn||null===(a=Bn.current)||void 0===a?void 0:a.value.length);break;case"Input":case"MiddleChip":case"LastChip":if(Oo(go)){var l;if("Input"===e&&0!==(null===(l=Bn.current)||void 0===l?void 0:l.selectionStart))break;Bo("prev")}}break;default:Bo(null)}}),[Ro,Oo,go,Mo,Bo]);a((function(){vo!==yo&&Wo("first")}),[vo,Vn,yo,Wo]),a((function(){if(lo){var n=zn(lo);if(n&&n.current&&Gn.current){var o=n.current.offsetTop,e=Gn.current,r=e.scrollTop;(o>e.offsetHeight||o<r)&&(Gn.current.scrollTop=o)}}}),[lo,zn]);var Ko=r((function(o){return n.Children.map(o,(function(n){if(D(n,"ComboboxOption")){var o=jn(n.props),e=o.value,r=o.displayName;if(Do(e)){var t=n.props,i=t.className,a=t.glyph,l=So.findIndex((function(n){return n.value===e})),c=lo===e,u=Oo(go)?go.includes(e):go===e,s=zn(e);return T(Pn,{value:e,displayName:r,isFocused:c,isSelected:u,setSelected:function(){uo(e),Eo(e),Mo(),e===go&&$o()},glyph:a,className:i,index:l,ref:s})}}else if(D(n,"ComboboxGroup")){var d=Ko(n.props.children);if(d&&(null==d?void 0:d.length)>0)return T(bo,{label:n.props.label,className:n.props.className},Ko(d))}}))}),[So,lo,zn,Oo,Do,go,Mo,Eo]),Vo=t((function(){return Ko(e)}),[e,Ko]),Ho=t((function(){if(Oo(go))return go.filter(Fo).map((function(n,o){var e=zo(n),r=ko===n,t=Dn(n);return T(co,{key:n,displayName:e,isFocused:r,onRemove:function(){Bo("next",o),Eo(n)},onFocus:function(){Co(n)},ref:t})}))}),[Oo,go,Fo,zo,ko,Dn,Bo,Eo]),Uo=t((function(){return T(n.Fragment,null,ln&&No&&T(M,{"aria-label":"Clear selection","aria-disabled":L,disabled:L,ref:Rn,onClick:function(n){L||(Eo(null),null==cn||cn(n),null==tn||tn(""),Vn||qo())},onFocus:re,className:qn},T(N,{glyph:"XWithCircle"})),T(N,"error"===X?{glyph:"Warning",color:S.red.base,className:Qn}:{glyph:"CaretDown",className:Qn}))}),[ln,No,L,X,Eo,cn,tn,Vn]),Xo=t((function(){return So.some((function(n){return n.hasGlyph}))}),[So]),Zo=r((function(){if(!Oo(go)&&go===fo){var n=Po.find((function(n){return n.displayName===vo||n.value===vo}));if(n&&!mn)mo(n.value);else{var o,e=null!==(o=zo(go))&&void 0!==o?o:"";xo(e)}}}),[zo,vo,Oo,fo,go,mn,Po]),Yo=r((function(){if(No){if(Oo(go))jo();else if(!Oo(go)){var n,o=null!==(n=zo(go))&&void 0!==n?n:"";xo(o),$o()}}else xo("")}),[No,zo,Oo,go]);a((function(){if(gn)if(c(gn)){var n,o=null!==(n=gn.filter((function(n){return Fo(n)})))&&void 0!==n?n:[];mo(o)}else Fo(gn)&&mo(gn);else mo(function(n){return n?[]:null}(bn))}),[]),a((function(){if(!d(mn)&&mn!==yo)if(u(mn))mo(null);else if(Oo(mn)){var n=mn.filter(Fo);mo(n)}else mo(Fo(mn)?mn:null)}),[Oo,Fo,yo,mn]),a((function(){g(go,fo)||Yo()}),[Yo,fo,go]),a((function(){Vn||io===Vn||Zo()}),[Vn,io,Zo]);var $o=function(){return _n(!1)},qo=function(){return _n(!0)},Jo=Z(l(0),2),Qo=Jo[0],_o=Jo[1];a((function(){var n,o;_o(null!==(n=null===(o=Tn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)}),[Tn,Vn,lo,go]);var ne=t((function(){switch(q){case"loading":return T("span",{className:to},T(N,{glyph:"Refresh",color:S.blue.base,className:no}),en);case"error":return T("span",{className:to},T(N,{glyph:"Warning",color:S.red.base}),nn);default:return Vo&&Vo.length>0?T("ul",{className:ro},Vo):T("span",{className:to},Q)}}),[Vo,Q,nn,en,q]),oe=w(),ee=t((function(){if(oe&&Tn.current&&Gn.current){var n=Tn.current.getBoundingClientRect(),o=n.top,e=n.bottom,r=Math.max(oe.height-e,o);return Math.min(274,r-8)}return 274}),[oe,Tn,Gn]);a((function(){}),[lo]);var re=function(){uo(null)};k("mousedown",(function(n){var o,e,r=n.target;(null===(o=Gn.current)||void 0===o?void 0:o.contains(r))||(null===(e=Tn.current)||void 0===e?void 0:e.contains(r))||!1||_n(!1)}));var te=G({popoverZIndex:En},wn?{usePortal:wn,portalClassName:kn,portalContainer:Cn,scrollContainer:Nn}:{usePortal:wn});return T(On.Provider,{value:{multiselect:bn,darkMode:B,size:R,withIcons:Xo,disabled:L,chipTruncationLocation:fn,chipCharacterLimit:vn,inputValue:vo}},T("div",H({className:j(Hn({darkMode:B,size:R,overflow:sn}),xn)},Sn),T("div",null,v&&T(p,{id:Ln,htmlFor:Fn},v),O&&T(m,null,O)),T(C,{className:Xn,disabled:L,color:Zn({state:X,darkMode:B})},T("div",{ref:Tn,role:"combobox","aria-expanded":Vn,"aria-controls":An,"aria-owns":An,tabIndex:-1,className:Un,onMouseDown:function(n){L&&n.preventDefault()},onClick:function(n){if(n.target!==Bn.current){var o=0;if(Bn.current)o=n.nativeEvent.offsetX>Bn.current.offsetLeft+Bn.current.clientWidth?vo.length:0;Mo(o)}},onFocus:function(){jo(),qo()},onKeyDown:function(n){var o,e,r=null===(o=Gn.current)||void 0===o?void 0:o.contains(document.activeElement);if((null===(e=Tn.current)||void 0===e?void 0:e.contains(document.activeElement))||r){if(n.ctrlKey||n.shiftKey||n.altKey)return;var t=Ro();switch(n.keyCode){case Mn.Tab:switch(t){case"Input":No||($o(),Wo("first"),Bo(null));break;case"LastChip":Bo(null)}break;case Mn.Escape:$o(),Wo("first");break;case Mn.Enter:document.activeElement===Bn.current&&Vn&&!u(lo)?Eo(lo):document.activeElement===Rn.current&&(Eo(null),Mo());break;case Mn.Backspace:var i;Oo(go)&&0===(null===(i=Bn.current)||void 0===i?void 0:i.selectionStart)?Bo("last"):qo();break;case Mn.ArrowDown:Vn&&n.preventDefault(),qo(),Wo("next");break;case Mn.ArrowUp:Vn&&n.preventDefault(),Wo("prev");break;case Mn.ArrowRight:Go("right",n);break;case Mn.ArrowLeft:Go("left",n);break;default:Vn||qo()}}},onTransitionEnd:function(){var n,o;_o(null!==(n=null===(o=Tn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)},"data-disabled":L,"data-state":X},T("div",{ref:Wn,className:Yn({overflow:sn,isOpen:Vn,selection:go,value:vo})},Ho,T("input",{"aria-label":null!=z?z:v,"aria-autocomplete":"list","aria-controls":An,"aria-labelledby":Ln,ref:Bn,id:Fn,className:$n,placeholder:Io,disabled:null!=L?L:void 0,onChange:function(n){var o=n.target.value;xo(o),null==tn||tn(o)},value:vo,autoComplete:"off"})),Uo)),"error"===X&&Y&&T("div",{className:Jn},Y),T(f,H({active:Vn&&!L,spacing:4,align:"bottom",justify:"middle",refEl:Tn,adjustOnMutation:!0,className:oo({darkMode:B,size:R,width:Qo})},te),T("div",{id:An,role:"listbox","aria-labelledby":Ln,"aria-expanded":Vn,ref:Gn,className:eo({maxHeight:ee}),onMouseDownCapture:function(n){return n.preventDefault()}},ne))))}export{mo as Combobox,go as ComboboxGroup,Fn as ComboboxOption};
|
|
1
|
+
import n,{createContext as o,useContext as e,useCallback as r,useMemo as t,useRef as i,useEffect as l,useState as a}from"react";import{isArray as c,isNull as s,isString as u,isUndefined as b,clone as d,isEqual as g}from"lodash";import{Label as p,Description as m}from"@leafygreen-ui/typography";import f from"@leafygreen-ui/popover";import{useIdAllocator as h,useForwardedRef as v,useDynamicRefs as x,usePrevious as y,useAvailableSpace as w,useEventListener as k}from"@leafygreen-ui/hooks";import C,{isComponentGlyph as O}from"@leafygreen-ui/icon";import N from"@leafygreen-ui/icon-button";import{css as z,cx as S,keyframes as D}from"@leafygreen-ui/emotion";import{uiColors as j}from"@leafygreen-ui/palette";import{isComponentType as I,createUniqueClassName as M,keyMap as E,consoleOnce as P}from"@leafygreen-ui/lib";import T from"@leafygreen-ui/checkbox";import{jsx as A}from"@emotion/react";import F from"lodash/kebabCase";import{fontFamilies as L,typeScales as R}from"@leafygreen-ui/tokens";import W from"@leafygreen-ui/inline-definition";function G(n,o){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(n,o).enumerable}))),e.push.apply(e,r)}return e}function H(n){return H="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},H(n)}function K(n,o,e){return o in n?Object.defineProperty(n,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[o]=e,n}function U(){return U=Object.assign||function(n){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n},U.apply(this,arguments)}function V(n,o){if(null==n)return{};var e,r,t=function(n,o){if(null==n)return{};var e,r,t={},i=Object.keys(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||(t[e]=n[e]);return t}(n,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)e=i[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(t[e]=n[e])}return t}function B(n,o){return o||(o=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(o)}}))}function X(n,o){return function(n){if(Array.isArray(n))return n}(n)||function(n,o){var e=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==e)return;var r,t,i=[],l=!0,a=!1;try{for(e=e.call(n);!(l=(r=e.next()).done)&&(i.push(r.value),!o||i.length!==o);l=!0);}catch(n){a=!0,t=n}finally{try{l||null==e.return||e.return()}finally{if(a)throw t}}return i}(n,o)||Y(n,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Z(n){return function(n){if(Array.isArray(n))return $(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||Y(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Y(n,o){if(n){if("string"==typeof n)return $(n,o);var e=Object.prototype.toString.call(n).slice(8,-1);return"Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e?Array.from(n):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?$(n,o):void 0}}function $(n,o){(null==o||o>n.length)&&(o=n.length);for(var e=0,r=new Array(o);e<o;e++)r[e]=n[e];return r}var q="Input",J="ClearButton",Q="FirstChip",_="LastChip",nn="MiddleChip",on="Combobox",en="Menu",rn="default",tn="large";var ln,an,cn,sn,un,bn,dn,gn,pn,mn,fn,hn,vn,xn,yn,wn,kn,Cn,On,Nn,zn,Sn,Dn,jn,In,Mn,En,Pn,Tn,An,Fn,Ln,Rn,Wn=o({multiselect:!1,darkMode:!1,size:rn,withIcons:!1,disabled:!1}),Gn=function(o,e,r){if(e&&r){var t=new RegExp(e,"gi"),i=o.matchAll(t);if(i){for(var l=o.split(""),a=0,c=Array.from(i);a<c.length;a++){var s,u=c[a],b=null!==(s=u.index)&&void 0!==s?s:-1,d=u[0],g=d.length,p=b+d+g,m=new Array(g).fill("");m[0]=n.createElement(r,{key:p},d),l.splice.apply(l,[b,g].concat(Z(m)))}return A(n.Fragment,null,l)}return A(n.Fragment,null,o)}return A(n.Fragment,null,o)},Hn=function(n){var o,e=n.value,r=n.displayName;return{value:null!=e?e:F(r),displayName:null!==(o=null!=r?r:e)&&void 0!==o?o:""}},Kn=function(n,o){if(n)return o.find((function(o){return o.value===n}))},Un=function(n,o){var e,r;return n?null!==(e=null===(r=Kn(n,o))||void 0===r?void 0:r.displayName)&&void 0!==e?e:n:""},Vn=function o(e){return n.Children.toArray(e).reduce((function(n,e){if(I(e,"ComboboxOption")){var r=Hn(e.props),t=r.value,i=r.displayName,l=e.props,a=l.glyph,c=l.disabled;return[].concat(Z(n),[{value:t,displayName:i,isDisabled:!!c,hasGlyph:!!a}])}if(I(e,"ComboboxGroup")){var s=e.props.children;if(s)return[].concat(Z(n),Z(o(s)))}}),[])},Bn=z(ln||(ln=B(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n list-style: none;\n color: inherit;\n cursor: pointer;\n overflow: hidden;\n font-family: ",";\n font-size: var(--lg-combobox-item-font-size);\n line-height: var(--lg-combobox-item-line-height);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n // Left wedge\n &:before {\n content: '';\n position: absolute;\n left: 0;\n width: 3px;\n height: var(--lg-combobox-item-wedge-height);\n background-color: transparent;\n border-radius: 0 2px 2px 0;\n transform: scaleY(0.3);\n transition: 150ms ease-in-out;\n transition-property: transform, background-color;\n }\n\n &:hover {\n outline: none;\n background-color: var(--lg-combobox-item-hover-color);\n }\n\n &[aria-selected='true'] {\n outline: none;\n background-color: var(--lg-combobox-item-active-color);\n\n &:before {\n background-color: var(--lg-combobox-item-wedge-color);\n transform: scaleY(1);\n }\n }\n"])),L.legacy),Xn=z(an||(an=B(["\n cursor: not-allowed;\n color: ",";\n\n &:hover {\n background-color: inherit;\n }\n"])),j.gray.base),Zn=z(cn||(cn=B(["\n display: inline-flex;\n gap: 8px;\n justify-content: start;\n align-items: inherit;\n overflow-wrap: anywhere;\n"]))),Yn=z(sn||(sn=B(["\n pointer-events: none;\n"]))),$n=function(n){return z(un||(un=B(["\n font-weight: ",";\n"])),n?"bold":"normal")},qn=n.forwardRef((function(o,i){var l=o.displayName,a=o.glyph,c=o.isSelected,s=o.isFocused,u=o.disabled,b=o.setSelected,d=o.className,g=e(Wn),p=g.multiselect,m=g.darkMode,f=g.withIcons,x=g.inputValue,y=h({prefix:"combobox-option-text"}),w=v(i,null),k=r((function(n){n.stopPropagation(),u||n.target!==w.current&&"INPUT"!==n.target.tagName||b()}),[u,w,b]),N=t((function(){if(a){if(O(a)||I(a,"Icon"))return a;console.error("`ComboboxOption` instance did not render icon because it is not a known glyph element.",a)}}),[a]),z=t((function(){if(p){var o=A(T,{label:"","aria-labelledby":y,checked:c,tabIndex:-1,animate:!1,disabled:u});return A(n.Fragment,null,A("span",{className:S(Zn,Yn)},f?N:o,A("span",{id:y,className:$n(c)},Gn(l,x,"strong"))),f&&o)}return A(n.Fragment,null,A("span",{className:S(Zn,Yn)},N,A("span",{className:$n(c)},Gn(l,x,"strong"))),c&&A(C,{glyph:"Checkmark",color:m?j.blue.light1:j.blue.base}))}),[p,N,c,l,x,m,y,u,f]);return A("li",{ref:w,role:"option","aria-selected":s,"aria-label":l,tabIndex:-1,className:S(Bn,K({},Xn,u),d),onClick:k,onKeyDown:k},z)}));function Jn(n){throw Error("`ComboboxOption` must be a child of a `Combobox` instance")}qn.displayName="ComboboxOption",Jn.displayName="ComboboxOption";var Qn,_n,no,oo,eo,ro,to,io,lo,ao=(K(bn={},rn,R.body1.fontSize),K(bn,tn,R.body2.fontSize),bn),co=M("combobox-chip"),so=z(dn||(dn=B(["\n font-family: ",";\n font-size: var(--lg-combobox-font-size);\n line-height: var(--lg-combobox-line-height);\n"])),L.legacy),uo=function(n){var o=n.darkMode,e=n.size,r=n.overflow;return S(function(n){return n?z(gn||(gn=B([""]))):z(pn||(pn=B(["\n --lg-combobox-color-error: ",";\n --lg-combobox-text-color: ",";\n --lg-combobox-text-color-disabled: ",";\n\n --lg-combobox-background-color: ",";\n --lg-combobox-background-color-focus: ",";\n --lg-combobox-background-color-disabled: ",";\n\n --lg-combobox-border-color: ",";\n --lg-combobox-border-color-disabled: ",";\n --lg-combobox-border-color-error: ",";\n\n --lg-combobox-shadow: 0px 1px 2px rgba(6, 22, 33, 0.3);\n --lg-combobox-shadow-focus: 0px 4px 4px rgba(6, 22, 33, 0.3);\n "])),j.red.base,j.gray.dark3,j.gray.dark1,j.gray.light3,j.white,j.gray.light2,j.gray.base,j.gray.light1,j.red.base)}(o),function(n){switch(n){case rn:return z(mn||(mn=B(["\n --lg-combobox-padding-y: 5px;\n --lg-combobox-padding-x: 7px;\n --lg-combobox-height: calc(\n 36px - 2px - 2 * var(--lg-combobox-padding-y)\n );\n --lg-combobox-font-size: ","px; // TODO: update this for redesign\n --lg-combobox-line-height: ","px;\n "])),R.body1.fontSize+1,R.body1.lineHeight+1);case tn:return z(fn||(fn=B(["\n --lg-combobox-padding-y: 9px;\n --lg-combobox-padding-x: 11px;\n --lg-combobox-height: calc(\n 48px - 2px - 2 * var(--lg-combobox-padding-y)\n );\n --lg-combobox-font-size: ","px;\n --lg-combobox-line-height: ","px;\n "])),R.body2.fontSize,R.body2.lineHeight)}}(e),z(hn||(hn=B(["\n --lg-combobox-icon-height: 16px;\n --lg-combobox-border-radius: 3px;\n --lg-combobox-width: ",";\n --lg-combobox-padding: var(--lg-combobox-padding-y)\n var(--lg-combobox-padding-x) var(--lg-combobox-padding-y)\n ",";\n width: var(--lg-combobox-width);\n // TODO: Clean this up 🤮\n min-width: calc(\n ","px + var(--lg-combobox-padding-x) * 2 + 2px +\n var(--lg-combobox-icon-height)\n );\n "])),"expand-x"===r?"unset":"100%","scroll-x"===r?"0":"var(--lg-combobox-padding-x)",ao[e]))},bo=z(vn||(vn=B(["\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n padding: var(--lg-combobox-padding);\n color: var(--lg-combobox-text-color);\n background-color: var(--lg-combobox-background-color);\n box-shadow: var(--lg-combobox-shadow);\n border: 1px solid var(--lg-combobox-border-color);\n border-radius: var(--lg-combobox-border-radius);\n width: var(--lg-combobox-width);\n cursor: text;\n transition: 150ms ease-in-out;\n transition-property: background-color, box-shadow, border-color;\n\n &[data-disabled='true'] {\n color: var(--lg-combobox-text-color-disabled);\n background-color: var(--lg-combobox-background-color-disabled);\n border-color: var(--lg-combobox-border-color-disabled);\n box-shadow: unset;\n cursor: not-allowed;\n }\n\n &[data-state='error'] {\n border-color: var(--lg-combobox-border-color-error);\n }\n"]))),go=z(xn||(xn=B(["\n &:focus-within {\n border-color: transparent;\n background-color: var(--lg-combobox-background-color-focus);\n // TODO: Remove for UI refresh & Darkmode\n box-shadow: 0 0 0 3px ",", var(--lg-combobox-shadow-focus);\n }\n"])),j.focus),po=function(n){var o,e=n.overflow,r=n.isOpen,t=n.selection,i=n.size,l=n.value,a=c(t)&&t.length>0,s=null!==(o=null==l?void 0:l.length)&&void 0!==o?o:0,u=z(yn||(yn=B(["\n flex-grow: 1;\n width: var(--lg-combobox-width);\n\n --lg-combobox-input-width: ",";\n --lg-combobox-input-min-width: ","px;\n "])),a?"".concat(s*ao[i],"px"):"100%",ao[i]);switch(e){case"scroll-x":return z(wn||(wn=B(["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n padding-left: var(--lg-combobox-padding-x);\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by `scroll-behavior` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > ."," {\n margin-inline: 2px;\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n "],["\n ","\n display: block;\n height: var(--lg-combobox-height);\n white-space: nowrap;\n overflow-x: scroll;\n padding-left: var(--lg-combobox-padding-x);\n scroll-behavior: smooth;\n scrollbar-width: none;\n /*\n * Immediate transition in, slow transition out. \n * '-in' transition is handled by \\`scroll-behavior\\` \n */\n --lg-combobox-input-transition: width ease-in-out\n ",";\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n & > ."," {\n margin-inline: 2px;\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n "])),u,r?"0":"100ms",co);case"expand-x":return z(kn||(kn=B(["\n ","\n display: flex;\n gap: 4px;\n flex-wrap: nowrap;\n white-space: nowrap;\n height: var(--lg-combobox-height);\n --lg-combobox-input-transition: none;\n "])),u);case"expand-y":return z(Cn||(Cn=B(["\n ","\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n overflow-x: visible;\n min-height: var(--lg-combobox-height);\n "])),u)}},mo=z(On||(On=B(["\n border: none;\n cursor: inherit;\n background-color: inherit;\n box-sizing: content-box;\n padding: 0;\n margin: 0;\n text-overflow: ellipsis;\n font-size: var(--lg-combobox-font-size);\n line-height: var(--lg-combobox-line-height);\n height: var(--lg-combobox-height);\n width: var(--lg-combobox-input-width, 0);\n min-width: var(--lg-combobox-input-min-width);\n transition: var(--lg-combobox-input-transition);\n\n &:focus {\n outline: none;\n }\n"]))),fo=z(Nn||(Nn=B(["\n // Add a negative margin so the button takes up the same space as the regular icons\n margin-block: calc(var(--lg-combobox-icon-height) / 2 - 100%);\n"]))),ho=z(zn||(zn=B(["\n &:focus {\n box-shadow: unset;\n &::before {\n background-color: ",";\n }\n }\n"])),j.blue.light2),vo=z(Sn||(Sn=B(["\n font-size: var(--lg-combobox-font-size);\n line-height: var(--lg-combobox-line-height);\n color: var(--lg-combobox-color-error);\n padding-top: var(--lg-combobox-padding-y);\n"]))),xo=z(Dn||(Dn=B(["\n margin-inline-end: calc(var(--lg-combobox-padding-x) / 2);\n"]))),yo=D(jn||(jn=B(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]))),wo=z(In||(In=B(["\n animation: "," 1.5s linear infinite;\n"])),yo),ko=function(n){var o,e,r=n.darkMode,t=n.size,i=n.width,l=void 0===i?384:i;switch(o=r?z(Mn||(Mn=B([""]))):z(En||(En=B(["\n --lg-combobox-menu-color: ",";\n --lg-combobox-menu-message-color: ",";\n --lg-combobox-menu-background-color: ",";\n --lg-combobox-menu-shadow: 0px 3px 7px rgba(0, 0, 0, 0.25);\n --lg-combobox-item-hover-color: ",";\n --lg-combobox-item-active-color: ",";\n --lg-combobox-item-wedge-color: ",";\n "])),j.gray.dark3,j.gray.dark1,j.white,j.gray.light2,j.blue.light3,j.blue.base),t){case rn:e=z(Pn||(Pn=B(["\n --lg-combobox-menu-border-radius: 4px;\n --lg-combobox-item-height: 36px;\n --lg-combobox-item-padding-y: 8px;\n --lg-combobox-item-padding-x: 12px;\n --lg-combobox-item-font-size: ","px; // TODO: update this\n --lg-combobox-item-line-height: ","px; // TODO: update this\n --lg-combobox-item-wedge-height: 22px;\n "])),R.body1.fontSize+1,R.body1.lineHeight+1);break;case tn:e=z(Tn||(Tn=B(["\n --lg-combobox-menu-border-radius: 4px;\n --lg-combobox-item-height: 36px;\n --lg-combobox-item-padding-y: 8px;\n --lg-combobox-item-padding-x: 12px;\n --lg-combobox-item-font-size: ","px; // TODO: update this\n --lg-combobox-item-line-height: ","px; // TODO: update this\n --lg-combobox-item-wedge-height: 22px;\n "])),R.body2.fontSize+1,R.body2.lineHeight+1)}return S(o,e,z(An||(An=B(["\n width: ","px;\n border-radius: var(--lg-combobox-menu-border-radius);\n\n & > * {\n border-radius: inherit;\n }\n "])),l))},Co=z(Fn||(Fn=B(["\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n font-family: ",";\n color: var(--lg-combobox-menu-color);\n background-color: var(--lg-combobox-menu-background-color);\n box-shadow: var(--lg-combobox-menu-shadow);\n border-radius: inherit;\n overflow: auto;\n min-height: var(--lg-combobox-item-height);\n scroll-behavior: smooth;\n"])),L.default),Oo=z(Ln||(Ln=B(["\n position: relative;\n margin: 0;\n padding: 0;\n"]))),No=z(Rn||(Rn=B(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: var(--lg-combobox-item-font-size);\n color: var(--lg-combobox-menu-message-color);\n padding: var(--lg-combobox-item-padding-y) var(--lg-combobox-item-padding-x);\n\n & > svg {\n width: 1em;\n height: 1em;\n }\n"]))),zo=function(n){var o,e,r=n.darkMode,t=n.size;switch(o=r?z(Qn||(Qn=B([""]))):z(_n||(_n=B(["\n --lg-combobox-chip-text-color: ",";\n --lg-combobox-chip-icon-color: ",";\n --lg-combobox-chip-background-color: ",";\n --lg-combobox-chip-hover-color: ",";\n --lg-combobox-chip-focus-color: ",";\n "])),j.gray.dark3,j.gray.dark2,j.gray.light2,j.gray.light1,j.blue.light2),t){case rn:e=z(no||(no=B(["\n --lg-combobox-chip-height: 24px;\n --lg-combobox-chip-border-radius: 4px;\n --lg-combobox-chip-font-size: 14px;\n --lg-combobox-chip-line-height: 20px;\n --lg-combobox-chip-padding-x: 6px;\n "])));break;case tn:e=z(oo||(oo=B(["\n --lg-combobox-chip-height: 28px;\n --lg-combobox-chip-border-radius: 4px;\n --lg-combobox-chip-font-size: ","px;\n --lg-combobox-chip-line-height: ","px;\n --lg-combobox-chip-padding-x: 6px;\n "])),R.body2.fontSize,R.body2.lineHeight)}return S(o,e,z(eo||(eo=B(["\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n white-space: nowrap;\n height: var(--lg-combobox-chip-height);\n font-size: var(--lg-combobox-chip-font-size);\n line-height: var(--lg-combobox-chip-line-height);\n border-radius: var(--lg-combobox-chip-border-radius);\n color: var(--lg-combobox-chip-text-color);\n background-color: var(--lg-combobox-chip-background-color);\n\n // TODO - refine these styles\n /* &:focus, */\n &:focus-within {\n background-color: var(--lg-combobox-chip-focus-color);\n }\n "]))))},So=z(ro||(ro=B(["\n padding-inline: var(--lg-combobox-chip-padding-x);\n"]))),Do=z(to||(to=B(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n outline: none;\n border: none;\n background-color: transparent;\n color: var(--lg-combobox-chip-icon-color);\n cursor: pointer;\n transition: background-color 100ms ease-in-out;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 1px;\n background-color: var(--lg-combobox-chip-hover-color);\n }\n\n &:hover {\n background-color: var(--lg-combobox-chip-hover-color);\n }\n"]))),jo=n.forwardRef((function(n,o){var r=n.displayName,a=n.isFocused,c=n.onRemove,s=n.onFocus,u=e(Wn),b=u.darkMode,d=u.size,g=u.disabled,p=u.chipTruncationLocation,m=void 0===p?"end":p,f=u.chipCharacterLimit,h=void 0===f?12:f,v=!!h&&!!m&&"none"!==m&&r.length>h,x=i(null),y=t((function(){if(v){var n=h-3;switch(m){case"start":return"…"+r.substring(r.length-n).trim();case"middle":return r.substring(0,n/2).trim()+"…"+r.substring(r.length-n/2).trim();case"end":return r.substring(0,n).trim()+"…";default:return r}}return!1}),[h,m,r,v]);l((function(){var n;a&&!g&&(null==x||null===(n=x.current)||void 0===n||n.focus())}),[g,o,a]);return A("span",{role:"option","aria-selected":a,"data-testid":"lg-combobox-chip",ref:o,className:S(co,zo({darkMode:b,size:d})),onClick:function(n){var o;null!==(o=x.current)&&void 0!==o&&o.contains(n.target)||s()},onKeyDown:function(n){g||n.keyCode!==E.Delete&&n.keyCode!==E.Backspace&&n.keyCode!==E.Enter&&n.keyCode!==E.Space||c()},tabIndex:-1},A("span",{className:So},y?A(W,{definition:r,align:"bottom"},y):r),A("button",{"aria-label":"Deselect ".concat(r),"aria-disabled":g,disabled:g,ref:x,className:Do,onClick:function(){g||c()}},A(C,{glyph:"X"})))}));jo.displayName="Chip";var Io,Mo=function(n){return z(io||(io=B(["\n --lg-combobox-group-label-color: ",";\n --lg-combobox-group-border-color: ",";\n padding-top: 8px;\n border-bottom: 1px solid var(--lg-combobox-group-border-color);\n"])),n?j.gray.light1:j.gray.dark1,n?j.gray.dark1:j.gray.light1)},Eo=z(lo||(lo=B(["\n cursor: default;\n width: 100%;\n padding: 0 12px 2px;\n outline: none;\n overflow-wrap: anywhere;\n font-size: 12px;\n line-height: 16px;\n font-weight: bold;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--lg-combobox-group-label-color);\n"])));function Po(o){var r=o.label,t=o.className,i=o.children,l=e(Wn).darkMode,a=h({prefix:"combobox-group"});return n.Children.count(i)>0?A("div",{className:S(Mo(l),t)},A("div",{className:Eo,id:a},r),A("div",{role:"group","aria-labelledby":a},i)):A(n.Fragment,null)}function To(n){throw Error("`ComboboxGroup` must be a child of a `Combobox` instance")}To.displayName="ComboboxGroup";var Ao=["children","label","description","placeholder","aria-label","disabled","size","darkMode","state","errorMessage","searchState","searchEmptyMessage","searchErrorMessage","searchLoadingMessage","filteredOptions","onFilter","clearable","onClear","overflow","multiselect","initialValue","onChange","value","chipTruncationLocation","chipCharacterLimit","className","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"];function Fo(o){var e=o.children,v=o.label,O=o.description,D=o.placeholder,M=void 0===D?"Select":D,T=o["aria-label"],F=o.disabled,L=void 0!==F&&F,R=o.size,W=void 0===R?rn:R,Z=o.darkMode,Y=void 0!==Z&&Z,$=o.state,tn=void 0===$?"none":$,ln=o.errorMessage,an=o.searchState,cn=void 0===an?"unset":an,sn=o.searchEmptyMessage,un=void 0===sn?"No results found":sn,bn=o.searchErrorMessage,dn=void 0===bn?"Could not get results!":bn,gn=o.searchLoadingMessage,pn=void 0===gn?"Loading results...":gn,mn=o.filteredOptions,fn=o.onFilter,hn=o.clearable,vn=void 0===hn||hn,xn=o.onClear,yn=o.overflow,wn=void 0===yn?"expand-y":yn,kn=o.multiselect,Cn=void 0!==kn&&kn,On=o.initialValue,Nn=o.onChange,zn=o.value,Sn=o.chipTruncationLocation,Dn=o.chipCharacterLimit,jn=void 0===Dn?12:Dn,In=o.className,Mn=o.usePortal,En=void 0===Mn||Mn,Pn=o.portalClassName,Tn=o.portalContainer,An=o.scrollContainer,Fn=o.popoverZIndex,Ln=V(o,Ao),Rn=x({prefix:"option"}),Gn=x({prefix:"chip"}),Bn=h({prefix:"combobox-input"}),Xn=h({prefix:"combobox-label"}),Zn=h({prefix:"combobox-menu"}),Yn=i(null),$n=i(null),Jn=i(null),Qn=i(null),_n=i(null),no=X(a(!1),2),oo=no[0],eo=no[1],ro=y(oo),to=X(a(null),2),io=to[0],lo=to[1],ao=X(a(null),2),co=ao[0],yo=ao[1],zo=y(co),So=X(a(""),2),Do=So[0],Mo=So[1],Eo=y(Do),To=X(a(null),2),Fo=To[0],Lo=To[1],Ro=!s(co)&&(c(co)&&co.length>0||u(co)),Wo=Cn&&c(co)&&co.length>0?void 0:M,Go=function(){return eo(!1)},Ho=function(){return eo(!0)},Ko=t((function(){return Vn(e)}),[e]),Uo=r((function(n){return!Cn||"string"!=typeof n&&"number"!=typeof n?!Cn&&c(n)&&P.error("Error in Combobox: multiselect is set to `false`, but recieved an Array value"):P.error("Error in Combobox: multiselect is set to `true`, but recieved a ".concat(H(n),' value: "').concat(n,'"')),Cn&&c(n)}),[Cn]),Vo=r((function(n){!L&&Qn&&Qn.current&&(Qn.current.focus(),b(n)||Qn.current.setSelectionRange(n,n))}),[L]),Bo=r((function(n){if(Uo(co)){var o=d(co);s(n)?o.length=0:co.includes(n)?o.splice(o.indexOf(n),1):(o.push(n),Mo("")),yo(o),null==Nn||Nn(o)}else{var e=n;yo(e),null==Nn||Nn(e)}}),[Uo,Nn,co]),Xo=r((function(n){return Uo(co)?co.includes(n):n===co}),[Uo,co]),Zo=r((function(n){var o,e,r,t,i=(e=Ko,(o=n)?null!==(r=null===(t=e.find((function(n){return n.displayName===o})))||void 0===t?void 0:t.value)&&void 0!==r?r:o:"");return Xo(i)}),[Ko,Xo]),Yo=r((function(n){var o="string"==typeof n?n:n.value;return mn&&mn.length>0?mn.includes(o):!!Zo(Do)||("string"==typeof n?Un(o,Ko):n.displayName).toLowerCase().includes(Do.toLowerCase())}),[mn,Zo,Do,Ko]),$o=t((function(){return Ko.filter(Yo)}),[Ko,Yo]),qo=r((function(n){return!!n&&!!Ko.find((function(o){return o.value===n}))}),[Ko]),Jo=r((function(n){return $o?$o.findIndex((function(o){return o.value===n})):-1}),[$o]),Qo=r((function(n){if($o&&$o.length>=n){var o=$o[n];return o?o.value:void 0}}),[$o]),_o=r((function(){return Uo(co)?co.findIndex((function(n){var o,e;return null===(o=Gn(n))||void 0===o||null===(e=o.current)||void 0===e?void 0:e.contains(document.activeElement)})):-1}),[Gn,Uo,co]),ne=X(a(),2),oe=ne[0],ee=ne[1],re=r((function(n){var o,e=null!==(o=null==$o?void 0:$o.length)&&void 0!==o?o:0,r=e-1>0?e-1:0,t=Jo(io);switch(n&&oo&&(Lo(null),Vo()),n){case"next":var i=Qo(t+1<e?t+1:0);lo(null!=i?i:null);break;case"prev":var l=Qo(t-1>=0?t-1:r);lo(null!=l?l:null);break;case"last":var a=Qo(r);lo(null!=a?a:null);break;default:var c=Qo(0);lo(null!=c?c:null)}}),[io,Jo,Qo,oo,Vo,null==$o?void 0:$o.length]),te=r((function(n,o){if(Uo(co))switch(n){case"next":var e=null!=o?o:_o(),r=e+1<co.length?e+1:co.length-1,t=co[r];Lo(t);break;case"prev":var i=null!=o?o:_o(),l=i>0?i-1:i<0?co.length-1:0,a=co[l];Lo(a);break;case"first":var c=co[0];Lo(c);break;case"last":var s=co[co.length-1];Lo(s);break;default:Lo(null)}}),[_o,Uo,co]),ie=r((function(n,o){switch(n&&lo(null),n){case"right":switch(oe){case q:var e,r,t;if((null===(e=Qn.current)||void 0===e?void 0:e.selectionEnd)===(null===(r=Qn.current)||void 0===r?void 0:r.value.length))null===(t=$n.current)||void 0===t||t.focus();break;case Q:case nn:case _:if(oe===_||1===(null==co?void 0:co.length)){Vo(0),te(null),o.preventDefault();break}te("next")}break;case"left":switch(oe){case J:var i;o.preventDefault(),Vo(null==Qn||null===(i=Qn.current)||void 0===i?void 0:i.value.length);break;case q:case nn:case _:if(Uo(co)){var l;if(oe===q&&0!==(null===(l=Qn.current)||void 0===l?void 0:l.selectionStart))break;te("prev")}}break;default:te(null)}}),[oe,Uo,co,Vo,te]);l((function(){Do!==Eo&&re("first")}),[Do,oo,Eo,re]),l((function(){if(io){var n=Rn(io);if(n&&n.current&&_n.current){var o=n.current.offsetTop,e=_n.current,r=e.scrollTop;(o>e.offsetHeight||o<r)&&(_n.current.scrollTop=o)}}}),[io,Rn]);var le=r((function(o){return n.Children.map(o,(function(n){if(I(n,"ComboboxOption")){var o=Hn(n.props),e=o.value,r=o.displayName;if(Yo(e)){var t=n.props,i=t.className,l=t.glyph,a=t.disabled,c=Ko.findIndex((function(n){return n.value===e})),s=io===e,u=Uo(co)?co.includes(e):co===e,b=Rn(e);return A(qn,{value:e,displayName:r,isFocused:s,isSelected:u,disabled:a,setSelected:function(){lo(e),Bo(e),Vo(),e===co&&Go()},glyph:l,className:i,index:c,ref:b})}}else if(I(n,"ComboboxGroup")){var d=le(n.props.children);if(d&&(null==d?void 0:d.length)>0)return A(Po,{label:n.props.label,className:n.props.className},le(d))}}))}),[Ko,io,Rn,Uo,Yo,co,Vo,Bo]),ae=t((function(){return le(e)}),[e,le]),ce=t((function(){if(Uo(co))return co.filter(qo).map((function(n,o){var e=Un(n,Ko),r=Fo===n,t=Gn(n),i=o>=co.length-1;return A(jo,{key:n,displayName:e,isFocused:r,onRemove:function(){i?(Vo(),te(null)):te("next",o),Bo(n)},onFocus:function(){Lo(n)},ref:t})}))}),[Uo,co,qo,Ko,Fo,Gn,Bo,Vo,te]),se=t((function(){return A(n.Fragment,null,vn&&Ro&&A(N,{"aria-label":"Clear selection","aria-disabled":L,disabled:L,ref:$n,onClick:function(n){L||(Bo(null),null==xn||xn(n),null==fn||fn(""),oo||Ho())},onFocus:xe,className:S(fo,ho)},A(C,{glyph:"XWithCircle"})),A(C,"error"===tn?{glyph:"Warning",color:j.red.base,className:xo}:{glyph:"CaretDown",className:xo}))}),[vn,Ro,L,tn,Bo,xn,fn,oo]),ue=t((function(){return Ko.some((function(n){return n.hasGlyph}))}),[Ko]),be=r((function(){if(!Uo(co)&&co===zo){var n=$o.find((function(n){return n.displayName===Do||n.value===Do}));if(n&&!zn)yo(n.value);else{var o,e=null!==(o=Un(co,Ko))&&void 0!==o?o:"";Mo(e)}}}),[Ko,Do,Uo,zo,co,zn,$o]),de=r((function(){if(Ro){if(Uo(co))ke();else if(!Uo(co)){var n,o=null!==(n=Un(co,Ko))&&void 0!==n?n:"";Mo(o),Go()}}else Mo("")}),[Ro,Ko,Uo,co]);l((function(){if(On)if(c(On)){var n,o=null!==(n=On.filter((function(n){return qo(n)})))&&void 0!==n?n:[];yo(o)}else qo(On)&&yo(On);else yo(function(n){return n?[]:null}(Cn))}),[]),l((function(){if(!b(zn)&&zn!==Eo)if(s(zn))yo(null);else if(Uo(zn)){var n=zn.filter(qo);yo(n)}else yo(qo(zn)?zn:null)}),[Uo,qo,Eo,zn]),l((function(){g(co,zo)||de()}),[de,zo,co]),l((function(){!oo&&ro&&be()}),[oo,ro,be]);var ge=X(a(0),2),pe=ge[0],me=ge[1];l((function(){var n,o;me(null!==(n=null===(o=Yn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)}),[Yn,oo,io,co]);var fe=t((function(){switch(cn){case"loading":return A("span",{className:No},A(C,{glyph:"Refresh",color:j.blue.base,className:wo}),pn);case"error":return A("span",{className:No},A(C,{glyph:"Warning",color:j.red.base}),dn);default:return ae&&ae.length>0?A("ul",{className:Oo},ae):A("span",{className:No},un)}}),[ae,un,dn,pn,cn]),he=w(Yn),ve=b(he)?"unset":"".concat(Math.min(he,256),"px"),xe=function(){lo(null)};k("mousedown",(function(n){we(n)||(n.preventDefault(),n.stopPropagation())}),{enabled:oo}),k("click",(function(n){we(n)||(n.stopPropagation(),Go())}),{options:{capture:!0},enabled:oo});var ye=function(n){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{};o%2?G(Object(e),!0).forEach((function(o){K(n,o,e[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):G(Object(e)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(e,o))}))}return n}({popoverZIndex:Fn},En?{usePortal:En,portalClassName:Pn,portalContainer:Tn,scrollContainer:An}:{usePortal:En});return A(Wn.Provider,{value:{multiselect:Cn,darkMode:Y,size:W,withIcons:ue,disabled:L,chipTruncationLocation:Sn,chipCharacterLimit:jn,inputValue:Do}},A("div",U({className:S(uo({darkMode:Y,size:W,overflow:wn}),In)},Ln),A("div",null,v&&A(p,{id:Xn,htmlFor:Bn,className:so},v),O&&A(m,{className:so},O)),A("div",{ref:Yn,role:"combobox","aria-expanded":oo,"aria-controls":Zn,"aria-owns":Zn,tabIndex:-1,className:S(bo,K({},go,oe===q)),onMouseDown:function(n){L&&n.preventDefault()},onClick:function(n){if(n.target!==Qn.current){var o=0;if(Qn.current)o=n.nativeEvent.offsetX>Qn.current.offsetLeft+Qn.current.clientWidth?Do.length:0;Vo(o)}},onFocus:function(n){ke(),Ho(),ee(function(n){var o,e,r,t;if(!n)return;if(null!==(o=Qn.current)&&void 0!==o&&o.contains(n))return q;if(null!==(e=$n.current)&&void 0!==e&&e.contains(n))return J;var i=Uo(co)?co.findIndex((function(o){var e,r;return null===(e=Gn(o))||void 0===e||null===(r=e.current)||void 0===r?void 0:r.contains(n)})):-1;if(Uo(co)){if(0===i)return Q;if(i===co.length-1)return _;if(i>0)return nn}if(null!==(r=_n.current)&&void 0!==r&&r.contains(n))return en;if(null!==(t=Yn.current)&&void 0!==t&&t.contains(n))return on}(n.target))},onKeyDown:function(n){var o,e,r=null===(o=_n.current)||void 0===o?void 0:o.contains(document.activeElement);if((null===(e=Yn.current)||void 0===e?void 0:e.contains(document.activeElement))||r){if(n.ctrlKey||n.shiftKey||n.altKey)return;switch(n.keyCode){case E.Tab:switch(oe){case"Input":Ro||(Go(),re("first"),te(null));break;case"LastChip":te(null)}break;case E.Escape:Go(),re("first");break;case E.Enter:!oo||oe!==q||s(io)||function(n){if("string"==typeof n){var o=Kn(n,Ko);return!(null==o||!o.isDisabled)}return!!n.isDisabled}(io)?oe===J&&(Bo(null),Vo()):Bo(io);break;case E.Backspace:var t;if(Uo(co))"Input"===oe&&0===(null===(t=Qn.current)||void 0===t?void 0:t.selectionStart)&&te("last");Ho();break;case E.ArrowDown:oo?(n.preventDefault(),re("next")):Ho();break;case E.ArrowUp:oo?(n.preventDefault(),re("prev")):Ho();break;case E.ArrowRight:ie("right",n);break;case E.ArrowLeft:ie("left",n);break;default:oo||Ho()}}},onTransitionEnd:function(){var n,o;me(null!==(n=null===(o=Yn.current)||void 0===o?void 0:o.clientWidth)&&void 0!==n?n:0)},"data-disabled":L,"data-state":tn},A("div",{ref:Jn,className:po({overflow:wn,isOpen:oo,selection:co,size:W,value:Do})},ce,A("input",{"aria-label":null!=T?T:v,"aria-autocomplete":"list","aria-controls":Zn,"aria-labelledby":Xn,ref:Qn,id:Bn,className:mo,placeholder:Wo,disabled:null!=L?L:void 0,onChange:function(n){var o=n.target.value;Mo(o),null==fn||fn(o)},value:Do,autoComplete:"off"})),se),"error"===tn&&ln&&A("div",{className:vo},ln),A(f,U({active:oo&&!L,spacing:4,align:"bottom",justify:"middle",refEl:Yn,adjustOnMutation:!0,className:ko({darkMode:Y,size:W,width:pe})},ye),A("div",{id:Zn,role:"listbox","aria-labelledby":Xn,"aria-expanded":oo,ref:_n,className:S(Co,z(Io||(Io=B(["\n max-height: ",";\n "])),ve)),onMouseDownCapture:function(n){return n.preventDefault()}},fe))));function we(n){var o,e,r=n.target;return(null===(o=_n.current)||void 0===o?void 0:o.contains(r))||(null===(e=Yn.current)||void 0===e?void 0:e.contains(r))||!1}function ke(){Jn&&Jn.current&&(Jn.current.scrollLeft=Jn.current.scrollWidth)}}export{Fo as Combobox,To as ComboboxGroup,Jn as ComboboxOption};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|