@evergis/uilib-gl 1.0.114 → 1.0.116

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/index.d.ts CHANGED
@@ -84,6 +84,7 @@ export * from "./organisms/ChipAutoComplete";
84
84
  export * from "./organisms/RangeDateInput";
85
85
  export * from "./organisms/RangeNumberInput";
86
86
  export * from "./organisms/Tree";
87
+ export * from "./organisms/TreeDropdown";
87
88
  export * from "./organisms/JSONEditor";
88
89
  export * from "./GlobalsContainer";
89
90
  export * from "./injectGlobals";
@@ -15,7 +15,7 @@ export declare type TreeItemProps<T = any> = {
15
15
  isLeaf?: boolean;
16
16
  loading?: boolean;
17
17
  totalCount?: number;
18
- children?: TreeItemProps[];
18
+ children?: TreeItemProps[] | null;
19
19
  additionalInfo?: ReactNode;
20
20
  onClick?: VoidFunction;
21
21
  };
@@ -28,7 +28,7 @@ export interface TreeItemComponentProps<T = any> {
28
28
  isSelected?: boolean;
29
29
  isDisabled?: boolean;
30
30
  selectable?: boolean;
31
- renderTree: (children?: TreeItemProps<T>[], isExpanded?: boolean, parentItem?: TreeItemProps<T>) => ReactNode;
31
+ renderTree: (children?: TreeItemProps<T>[] | null, isExpanded?: boolean, parentItem?: TreeItemProps<T>) => ReactNode;
32
32
  withLoadMore?: boolean;
33
33
  onLoadMore?: (item: TreeItemProps<T>) => Promisable<void>;
34
34
  onExpand: (item: TreeItemProps<T>, isExpanded: boolean, onlyReload?: boolean) => Promisable<void>;
@@ -0,0 +1,3 @@
1
+ import { FC } from "react";
2
+ import { ITreeDropdownProps } from "./types";
3
+ export declare const TreeDropdown: FC<ITreeDropdownProps>;
@@ -0,0 +1,3 @@
1
+ import { FC } from "react";
2
+ import { TreeItemComponentProps } from "../Tree/types";
3
+ export declare const TreeDropdownItem: FC<TreeItemComponentProps>;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { ITreeDropdownContextValue } from "./types";
3
+ export declare const TreeDropdownContext: import("react").Context<ITreeDropdownContextValue | null>;
4
+ export declare const useTreeDropdownContext: () => ITreeDropdownContextValue;
@@ -0,0 +1,3 @@
1
+ export * from "./TreeDropdown";
2
+ export * from "./TreeDropdownItem";
3
+ export * from "./types";
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Обёртка инпута-якоря: даёт полю собственный фон (сам `Input` прозрачен — `background: transparent`
3
+ * в `inputMixin`), а `inline-flex` + `align-self` не дают обёртке растягиваться во flex-контейнере,
4
+ * иначе Popover (`anchorOrigin="bottom-left"`) уводит меню к низу растянутого якоря.
5
+ */
6
+ export declare const AnchorWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
+ export declare const FieldIcons: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../atoms/Grid").FlexProps, never>;
8
+ export declare const CountBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
9
+ export declare const ResetIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../atoms/Icon").IIconProps, never>;
10
+ export declare const Chevron: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../atoms/Icon").IIconProps & {
11
+ isOpen?: boolean | undefined;
12
+ }, never>;
13
+ export declare const Content: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
14
+ width?: string | undefined;
15
+ }, never>;
16
+ export declare const TreeScroll: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
17
+ maxHeight?: string | undefined;
18
+ }, never>;
19
+ export declare const SpinnerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../atoms/Grid").FlexProps, never>;
20
+ export declare const CheckboxHolder: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
21
+ /** Зазор chevron→checkbox и icon→text приводим к зазору checkbox→icon (0.625rem — margin-right чекбокса). */
22
+ export declare const RowExpand: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../atoms/Icon").IIconProps & {
23
+ isExpanded?: boolean | undefined;
24
+ hasChildren?: boolean | undefined;
25
+ }, never>;
26
+ export declare const RowContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../atoms/Grid").FlexProps, never>;
27
+ export declare const RowText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
28
+ isLeaf?: boolean | undefined;
29
+ }, never>;
30
+ export declare const ItemBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
@@ -0,0 +1,30 @@
1
+ import { TreeId, TreeItemProps, TreeProps } from "../Tree/types";
2
+ export interface ITreeDropdownProps {
3
+ className?: string;
4
+ width?: string;
5
+ menuHeight?: string;
6
+ zIndex?: number;
7
+ placeholder?: string;
8
+ multiSelect?: boolean;
9
+ loading?: boolean;
10
+ data: TreeProps["data"];
11
+ setData?: TreeProps["setData"];
12
+ expanded?: TreeProps["expanded"];
13
+ setExpanded?: TreeProps["setExpanded"];
14
+ onLoadChildren?: TreeProps["loadNode"];
15
+ selectedIds: Set<TreeId>;
16
+ selectedCount?: number;
17
+ selectedLabel?: string;
18
+ searchValue: string;
19
+ onSearchChange: (value: string) => void;
20
+ onOpen?: VoidFunction;
21
+ onClose?: VoidFunction;
22
+ onToggleSelect: (item: TreeItemProps) => void;
23
+ onReset?: VoidFunction;
24
+ }
25
+ export interface ITreeDropdownContextValue {
26
+ selectedIds: Set<TreeId>;
27
+ multiSelect?: boolean;
28
+ onToggleSelect: (item: TreeItemProps) => void;
29
+ getSubtreeBadge: (item: TreeItemProps) => number;
30
+ }
@@ -0,0 +1,15 @@
1
+ import { ChangeEvent } from "react";
2
+ import { ITreeDropdownProps } from "./types";
3
+ export declare const useTreeDropdown: ({ multiSelect, selectedIds, selectedCount, selectedLabel, searchValue, onOpen, onClose, onToggleSelect, onReset, onSearchChange, }: ITreeDropdownProps) => {
4
+ open: boolean;
5
+ openDropdown: () => void;
6
+ closeDropdown: () => void;
7
+ toggleOpen: (event: import("react").MouseEvent<Element, MouseEvent>) => void;
8
+ handleReset: (event: {
9
+ stopPropagation: VoidFunction;
10
+ }) => void;
11
+ contextValue: import("./types").ITreeDropdownContextValue;
12
+ count: number;
13
+ displayValue: string;
14
+ onInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
15
+ };
@@ -0,0 +1,7 @@
1
+ import { MouseEvent } from "react";
2
+ export declare const useTreeDropdownOpen: (onOpen?: VoidFunction | undefined, onClose?: VoidFunction | undefined) => {
3
+ open: boolean;
4
+ openDropdown: () => void;
5
+ closeDropdown: () => void;
6
+ toggleOpen: (event: MouseEvent) => void;
7
+ };
@@ -0,0 +1,3 @@
1
+ import { ITreeDropdownContextValue } from "./types";
2
+ import { TreeId, TreeItemProps } from "../Tree/types";
3
+ export declare const useTreeDropdownSelection: (selectedIds: Set<TreeId>, onToggleSelect: (item: TreeItemProps) => void, closeDropdown: VoidFunction, multiSelect?: boolean | undefined) => ITreeDropdownContextValue;
@@ -0,0 +1,3 @@
1
+ import { TreeId, TreeItemProps } from "../Tree/types";
2
+ export declare const formatCount: (count: number) => string;
3
+ export declare const countSelectedDescendants: (item: TreeItemProps, selectedIds: Set<TreeId>) => number;
@@ -1,4 +1,4 @@
1
- import { memo, Children, cloneElement, Component, isValidElement, useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect, Fragment } from 'react';
1
+ import { memo, Children, cloneElement, Component, isValidElement, useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect, Fragment, createContext, useContext } from 'react';
2
2
  import styled, { ThemeProvider as ThemeProvider$1, css, useTheme as useTheme$1, keyframes, createGlobalStyle } from 'styled-components';
3
3
  import merge from 'deepmerge';
4
4
  import { rgb, hsl, hsla, opacify, ellipsis, transparentize, rem, normalize } from 'polished';
@@ -29760,6 +29760,480 @@ const TreeComponent = _ref => {
29760
29760
 
29761
29761
  const Tree = /*#__PURE__*/memo(TreeComponent);
29762
29762
 
29763
+ /**
29764
+ * Обёртка инпута-якоря: даёт полю собственный фон (сам `Input` прозрачен — `background: transparent`
29765
+ * в `inputMixin`), а `inline-flex` + `align-self` не дают обёртке растягиваться во flex-контейнере,
29766
+ * иначе Popover (`anchorOrigin="bottom-left"`) уводит меню к низу растянутого якоря.
29767
+ */
29768
+
29769
+ const AnchorWrap = styled.div`
29770
+ display: inline-flex;
29771
+ align-self: flex-start;
29772
+ width: max-content;
29773
+ background-color: ${_ref => {
29774
+ let {
29775
+ theme: {
29776
+ palette
29777
+ }
29778
+ } = _ref;
29779
+ return palette.background;
29780
+ }};
29781
+ border-radius: ${_ref2 => {
29782
+ let {
29783
+ theme: {
29784
+ borderRadius
29785
+ }
29786
+ } = _ref2;
29787
+ return borderRadius.medium;
29788
+ }};
29789
+ `;
29790
+ const FieldIcons = /*#__PURE__*/styled(Flex)`
29791
+ position: absolute;
29792
+ top: 50%;
29793
+ right: 0.5rem;
29794
+ transform: translateY(-50%);
29795
+ align-items: center;
29796
+ gap: 0.25rem;
29797
+ width: max-content;
29798
+ white-space: nowrap;
29799
+ `;
29800
+ const CountBadge = styled.span`
29801
+ display: inline-flex;
29802
+ align-items: center;
29803
+ justify-content: center;
29804
+ min-width: 1.25rem;
29805
+ height: 1rem;
29806
+ padding: 0;
29807
+ border-radius: 0.5rem;
29808
+ background-color: ${_ref3 => {
29809
+ let {
29810
+ theme: {
29811
+ palette
29812
+ }
29813
+ } = _ref3;
29814
+ return palette.primary;
29815
+ }};
29816
+ color: ${_ref4 => {
29817
+ let {
29818
+ theme: {
29819
+ palette
29820
+ }
29821
+ } = _ref4;
29822
+ return palette.background;
29823
+ }};
29824
+ font-size: 0.625rem;
29825
+ font-weight: 600;
29826
+ line-height: 1;
29827
+ `;
29828
+ const ResetIcon = /*#__PURE__*/styled(Icon)`
29829
+ width: 0.875rem;
29830
+ height: 0.875rem;
29831
+ cursor: pointer;
29832
+ color: ${_ref5 => {
29833
+ let {
29834
+ theme: {
29835
+ palette
29836
+ }
29837
+ } = _ref5;
29838
+ return palette.textSecondary;
29839
+ }};
29840
+
29841
+ &:after {
29842
+ font-size: 0.875rem;
29843
+ }
29844
+
29845
+ &:hover {
29846
+ color: ${_ref6 => {
29847
+ let {
29848
+ theme: {
29849
+ palette
29850
+ }
29851
+ } = _ref6;
29852
+ return palette.textPrimary;
29853
+ }};
29854
+ }
29855
+ `;
29856
+ const Chevron = /*#__PURE__*/styled(Icon)`
29857
+ width: 0.875rem;
29858
+ height: 0.875rem;
29859
+ cursor: pointer;
29860
+ transform: ${_ref7 => {
29861
+ let {
29862
+ isOpen
29863
+ } = _ref7;
29864
+ return isOpen ? "rotate(180deg)" : "";
29865
+ }};
29866
+ transition: transform ${transition.press};
29867
+ color: ${_ref8 => {
29868
+ let {
29869
+ theme: {
29870
+ palette
29871
+ }
29872
+ } = _ref8;
29873
+ return palette.textSecondary;
29874
+ }};
29875
+
29876
+ &:after {
29877
+ font-size: 0.875rem;
29878
+ }
29879
+ `;
29880
+ const Content = styled.div`
29881
+ width: ${_ref9 => {
29882
+ let {
29883
+ width
29884
+ } = _ref9;
29885
+ return width || "auto";
29886
+ }};
29887
+ padding: 0.5rem;
29888
+ box-sizing: border-box;
29889
+ background-color: ${_ref10 => {
29890
+ let {
29891
+ theme: {
29892
+ palette
29893
+ }
29894
+ } = _ref10;
29895
+ return palette.background;
29896
+ }};
29897
+ border-radius: ${_ref11 => {
29898
+ let {
29899
+ theme: {
29900
+ borderRadius
29901
+ }
29902
+ } = _ref11;
29903
+ return borderRadius.medium;
29904
+ }};
29905
+ box-shadow: ${_ref12 => {
29906
+ let {
29907
+ theme: {
29908
+ shadows
29909
+ }
29910
+ } = _ref12;
29911
+ return shadows.raised;
29912
+ }};
29913
+ `;
29914
+ const TreeScroll = styled.div`
29915
+ max-height: ${_ref13 => {
29916
+ let {
29917
+ maxHeight
29918
+ } = _ref13;
29919
+ return maxHeight || "15rem";
29920
+ }};
29921
+ overflow-y: auto;
29922
+ `;
29923
+ const SpinnerContainer = /*#__PURE__*/styled(Flex)`
29924
+ align-items: center;
29925
+ justify-content: center;
29926
+ min-height: 5rem;
29927
+ `;
29928
+ const CheckboxHolder = styled.span`
29929
+ display: inline-flex;
29930
+ align-items: center;
29931
+ pointer-events: none;
29932
+ `;
29933
+ /** Зазор chevron→checkbox и icon→text приводим к зазору checkbox→icon (0.625rem — margin-right чекбокса). */
29934
+
29935
+ const RowExpand = /*#__PURE__*/styled(TreeExpand)`
29936
+ margin-right: 0.625rem;
29937
+ `;
29938
+ const RowContent = /*#__PURE__*/styled(TreeContent)`
29939
+ gap: 0 0.625rem;
29940
+ `;
29941
+ const RowText = /*#__PURE__*/styled(TreeText)`
29942
+ font-size: 1rem;
29943
+ font-weight: normal;
29944
+ `;
29945
+ const ItemBadge = styled.span`
29946
+ display: inline-flex;
29947
+ align-items: center;
29948
+ justify-content: center;
29949
+ min-width: 1.25rem;
29950
+ height: 1rem;
29951
+ margin-left: 0.25rem;
29952
+ padding: 0;
29953
+ border-radius: 0.5rem;
29954
+ background-color: ${_ref14 => {
29955
+ let {
29956
+ theme: {
29957
+ palette
29958
+ }
29959
+ } = _ref14;
29960
+ return palette.element;
29961
+ }};
29962
+ color: ${_ref15 => {
29963
+ let {
29964
+ theme: {
29965
+ palette
29966
+ }
29967
+ } = _ref15;
29968
+ return palette.textSecondary;
29969
+ }};
29970
+ font-size: 0.625rem;
29971
+ font-weight: 600;
29972
+ line-height: 1;
29973
+ `;
29974
+
29975
+ const TreeDropdownContext = /*#__PURE__*/createContext(null);
29976
+ const useTreeDropdownContext = () => {
29977
+ const context = useContext(TreeDropdownContext);
29978
+
29979
+ if (!context) {
29980
+ throw new Error("useTreeDropdownContext must be used within TreeDropdown");
29981
+ }
29982
+
29983
+ return context;
29984
+ };
29985
+
29986
+ const MAX_BADGE_COUNT = 99;
29987
+ const formatCount = count => count > MAX_BADGE_COUNT ? `${MAX_BADGE_COUNT}+` : `${count}`;
29988
+ const countSelectedDescendants = (item, selectedIds) => {
29989
+ var _item$children;
29990
+
29991
+ if (!((_item$children = item.children) != null && _item$children.length)) {
29992
+ return 0;
29993
+ }
29994
+
29995
+ return item.children.reduce((sum, child) => {
29996
+ const selfCount = selectedIds.has(child.id) ? 1 : 0;
29997
+ return sum + selfCount + countSelectedDescendants(child, selectedIds);
29998
+ }, 0);
29999
+ };
30000
+
30001
+ const NOOP = () => undefined;
30002
+
30003
+ const TreeDropdownItemComponent = _ref => {
30004
+ let {
30005
+ item,
30006
+ parentItem,
30007
+ isExpanded,
30008
+ onExpand,
30009
+ renderTree
30010
+ } = _ref;
30011
+ const {
30012
+ selectedIds,
30013
+ multiSelect,
30014
+ onToggleSelect,
30015
+ getSubtreeBadge
30016
+ } = useTreeDropdownContext();
30017
+ const {
30018
+ id,
30019
+ text,
30020
+ isLeaf,
30021
+ loading,
30022
+ children
30023
+ } = item;
30024
+ const hasChildren = (children == null ? void 0 : children.length) > 0 || !!isLeaf;
30025
+ const isChecked = selectedIds.has(id);
30026
+ const badge = getSubtreeBadge(item);
30027
+ const onChevronClick = useCallback(event => {
30028
+ event.stopPropagation();
30029
+ onExpand(item, !isExpanded);
30030
+ }, [item, isExpanded, onExpand]);
30031
+ const onRowClick = useCallback(() => onToggleSelect(item), [item, onToggleSelect]);
30032
+ return React.createElement(TreeItemWrapper, null, React.createElement(TreeRow, {
30033
+ onClick: onRowClick,
30034
+ hasChildren: hasChildren
30035
+ }, React.createElement(RowExpand, {
30036
+ kind: "expand",
30037
+ isExpanded: isExpanded,
30038
+ hasChildren: hasChildren,
30039
+ onClick: onChevronClick
30040
+ }), multiSelect && React.createElement(CheckboxHolder, null, React.createElement(Checkbox, {
30041
+ checked: isChecked,
30042
+ onChange: NOOP
30043
+ })), React.createElement(RowContent, null, React.createElement(Icon, {
30044
+ kind: hasChildren ? "tree_folder_closed" : "textfile"
30045
+ }), React.createElement(RowText, {
30046
+ isLeaf: hasChildren
30047
+ }, text), badge > 0 && React.createElement(ItemBadge, null, formatCount(badge)))), renderTree(children, isExpanded, parentItem), loading && isExpanded && React.createElement(LoadingContainer, null, React.createElement(CircularProgress, {
30048
+ diameter: 1
30049
+ })));
30050
+ };
30051
+
30052
+ const TreeDropdownItem = /*#__PURE__*/memo(TreeDropdownItemComponent);
30053
+
30054
+ const useTreeDropdownOpen = (onOpen, onClose) => {
30055
+ const [open, setOpen] = useState(false);
30056
+ const openDropdown = useCallback(() => {
30057
+ setOpen(current => {
30058
+ if (!current) {
30059
+ onOpen == null ? void 0 : onOpen();
30060
+ }
30061
+
30062
+ return true;
30063
+ });
30064
+ }, [onOpen]);
30065
+ const closeDropdown = useCallback(() => {
30066
+ setOpen(current => {
30067
+ if (current) {
30068
+ onClose == null ? void 0 : onClose();
30069
+ }
30070
+
30071
+ return false;
30072
+ });
30073
+ }, [onClose]);
30074
+ const toggleOpen = useCallback(event => {
30075
+ event.stopPropagation();
30076
+ setOpen(current => {
30077
+ if (current) {
30078
+ onClose == null ? void 0 : onClose();
30079
+ } else {
30080
+ onOpen == null ? void 0 : onOpen();
30081
+ }
30082
+
30083
+ return !current;
30084
+ });
30085
+ }, [onOpen, onClose]);
30086
+ return {
30087
+ open,
30088
+ openDropdown,
30089
+ closeDropdown,
30090
+ toggleOpen
30091
+ };
30092
+ };
30093
+
30094
+ const useTreeDropdownSelection = (selectedIds, onToggleSelect, closeDropdown, multiSelect) => {
30095
+ const handleToggleSelect = useCallback(item => {
30096
+ onToggleSelect(item);
30097
+
30098
+ if (!multiSelect) {
30099
+ closeDropdown();
30100
+ }
30101
+ }, [multiSelect, onToggleSelect, closeDropdown]);
30102
+ const getSubtreeBadge = useCallback(item => countSelectedDescendants(item, selectedIds), [selectedIds]);
30103
+ return useMemo(() => ({
30104
+ selectedIds,
30105
+ multiSelect,
30106
+ onToggleSelect: handleToggleSelect,
30107
+ getSubtreeBadge
30108
+ }), [selectedIds, multiSelect, handleToggleSelect, getSubtreeBadge]);
30109
+ };
30110
+
30111
+ const useTreeDropdown = _ref => {
30112
+ let {
30113
+ multiSelect,
30114
+ selectedIds,
30115
+ selectedCount,
30116
+ selectedLabel,
30117
+ searchValue,
30118
+ onOpen,
30119
+ onClose,
30120
+ onToggleSelect,
30121
+ onReset,
30122
+ onSearchChange
30123
+ } = _ref;
30124
+ const {
30125
+ open,
30126
+ openDropdown,
30127
+ closeDropdown,
30128
+ toggleOpen
30129
+ } = useTreeDropdownOpen(onOpen, onClose);
30130
+ const contextValue = useTreeDropdownSelection(selectedIds, onToggleSelect, closeDropdown, multiSelect);
30131
+ const handleReset = useCallback(event => {
30132
+ event.stopPropagation();
30133
+ onReset == null ? void 0 : onReset();
30134
+ }, [onReset]);
30135
+ const count = selectedCount ?? selectedIds.size;
30136
+ const displayValue = useMemo(() => open ? searchValue : multiSelect ? "" : selectedLabel ?? "", [open, searchValue, multiSelect, selectedLabel]);
30137
+ const onInputChange = useCallback(event => {
30138
+ openDropdown();
30139
+ onSearchChange(event.target.value);
30140
+ }, [openDropdown, onSearchChange]);
30141
+ return {
30142
+ open,
30143
+ openDropdown,
30144
+ closeDropdown,
30145
+ toggleOpen,
30146
+ handleReset,
30147
+ contextValue,
30148
+ count,
30149
+ displayValue,
30150
+ onInputChange
30151
+ };
30152
+ };
30153
+
30154
+ const INPUT_STYLE = {
30155
+ cursor: "pointer",
30156
+ caretColor: "transparent",
30157
+ userSelect: "none"
30158
+ };
30159
+
30160
+ const preventInputFocus = event => event.preventDefault();
30161
+
30162
+ const TreeDropdownComponent = props => {
30163
+ const {
30164
+ className,
30165
+ width = "19.5rem",
30166
+ menuHeight,
30167
+ zIndex,
30168
+ placeholder,
30169
+ multiSelect,
30170
+ loading,
30171
+ data,
30172
+ setData,
30173
+ expanded,
30174
+ setExpanded,
30175
+ onLoadChildren,
30176
+ onReset
30177
+ } = props;
30178
+ const {
30179
+ open,
30180
+ closeDropdown,
30181
+ toggleOpen,
30182
+ handleReset,
30183
+ contextValue,
30184
+ count,
30185
+ displayValue,
30186
+ onInputChange
30187
+ } = useTreeDropdown(props);
30188
+ const iconAfter = React.createElement(FieldIcons, null, multiSelect && count > 0 && React.createElement(CountBadge, null, formatCount(count)), count > 0 && onReset && React.createElement(ResetIcon, {
30189
+ kind: "close",
30190
+ onClick: handleReset
30191
+ }), React.createElement(Chevron, {
30192
+ kind: "input_dropdown",
30193
+ isOpen: open,
30194
+ onClick: toggleOpen
30195
+ }));
30196
+ return React.createElement(Popover, {
30197
+ open: open,
30198
+ onRequestClose: closeDropdown,
30199
+ anchorOrigin: "bottom-left",
30200
+ targetOrigin: "top-left",
30201
+ animateX: false,
30202
+ zIndex: zIndex,
30203
+ anchor: React.createElement(AnchorWrap, {
30204
+ onClick: toggleOpen
30205
+ }, React.createElement(Input$1, {
30206
+ readOnly: true,
30207
+ style: INPUT_STYLE,
30208
+ className: className,
30209
+ width: width,
30210
+ value: displayValue,
30211
+ placeholder: placeholder,
30212
+ iconAfter: iconAfter,
30213
+ onChange: onInputChange,
30214
+ onMouseDown: preventInputFocus
30215
+ }))
30216
+ }, React.createElement(Content, {
30217
+ width: width
30218
+ }, loading ? React.createElement(SpinnerContainer, null, React.createElement(CircularProgress, {
30219
+ diameter: 2
30220
+ })) : React.createElement(TreeDropdownContext.Provider, {
30221
+ value: contextValue
30222
+ }, React.createElement(TreeScroll, {
30223
+ maxHeight: menuHeight
30224
+ }, React.createElement(Tree, {
30225
+ data: data,
30226
+ setData: setData,
30227
+ expanded: expanded,
30228
+ setExpanded: setExpanded,
30229
+ selectable: false,
30230
+ loadNode: onLoadChildren,
30231
+ Item: TreeDropdownItem
30232
+ })))));
30233
+ };
30234
+
30235
+ const TreeDropdown = /*#__PURE__*/memo(TreeDropdownComponent);
30236
+
29763
30237
  const JSONEditorContainer = styled.div`
29764
30238
  position: relative;
29765
30239
  width: 100%;
@@ -32047,5 +32521,5 @@ const JSONEditorBase = _ref => {
32047
32521
 
32048
32522
  const JSONEditor = /*#__PURE__*/memo(JSONEditorBase);
32049
32523
 
32050
- export { ActionButton, Actions, ActionsGroup, AdditionalInfo, AnchorContainer, AutoComplete, BaseButton, Blank, Box, ButtonsGroup, ButtonsGroupComponent, CSSTransition, Card, CardBodyContainer, Header$1 as CardHeader, ImageGradientOverlay as CardImageGradientOverlay, ImageOverlay as CardImageOverlay, CardLoader, Checkbox, CheckboxComponent, Chip, ChipAutoCompleDivider, ChipAutoCompleSlider, ChipAutoComplete, ChipAutoCompleteControlFlex, ChipAutoCompleteMode, ChipAutoCompleteTags, ChipContainer, ChipInput, ChipInputHolder, Circle, CircularProgress, Collapse, CollapseWrapper, ColorButton, ColorInput, ColorPicker, ComparisonOperator, Container$5 as Container, CustomButton, CustomToggle, DATE_FORMAT, DATE_TIME_FORMAT, DataGrid, DatePicker, Description, Dialog, DialogActions, DialogComponent, DialogContent, DialogOverlay, DialogTitle, Divider, DividerLine, DragAreaWrapper, DraggableTree, DraggableTreeContainer, DraggableTreeItem, DropHereTitle, Dropdown, DropdownContainer, DropdownField, DropdownOptionIcon, ElementsArea, Expander, FILE_SIZE_STEP, FadingIcon, FieldValue, FileExt, FileInfoComment, FileInfoName, FileInfoProgress, FileInfoTitle, FileSymbolContainer, FilterInput, FlatButton, Flex, FlexSpan, FocusTrap, GlobalsContainer, H1, H2, H3, H4, Handlers, HueMap, HueSlider, selection as IcoMoonSelection, Icon, IconButton, IconButtonButton, IconButtonInnerChild, IconMenu, IconToggle, IconToggleButton, IconToggleText, Image, ImageLoader, InfiniteScroll, InfiniteScrollContainer, InfiniteScrollLoaderContainer, InjectGlobalStyles, Input$1 as Input, InputLabel, InputsGroup, InputsGroupContainer, InputsGroupELement, InputsGroupElements, InputsGroupLabel, ItemContainer, JSONEditor, JSONEditorContainer, JSONEditorLinearProgress, JSONEditorWrapper, Label$2 as Label, LabeledTextarea, LeftSide, LegendToggler, LinearLoader, LinearProgress, Link, ListTransition, LoadMoreButton, LoadingContainer, MAX_NUMBER, MB_FILE_SIZE, MIN_NUMBER, MaskedComponent, Menu, MenuContainer, Message, MultiSelectContainer, Notifications, NumberInput, NumberRangeContainer, NumberRangeInputContainer, NumberRangeSlider, NumberRangeSliderContainer, NumberRangeSliderLabel, OpacitySlider, Option, OptionContainer, OptionDescription, OptionIcon, OptionText, OptionToggler, OptionValueContainer, OptionValueWrapper, PaginationFull, PaginationSimple, Paragraph, PasswordToggle, Placeholder, Popover, PopoverTransition, Popup$1 as Popup, Portal, Preview, Radio$1 as Radio, RadioGroup, RaisedButton, RangeDateInput, RangeDatePicker, RangeNumberInput, RatioLine, RegularIconButton, SEPARATED_TIME_FORMAT, SearchField, SearchInputContainer, SelectFromComputerTitle, SimpleInput, Slider, SliderContainer$2 as SliderContainer, HandleContainer as SliderHandle, Label$1 as SliderLabel, LowerTrackBackground as SliderLowerTrackBackground, SliderPopover, Track as SliderTrack, SortToggle, Spinner, Stepper, StyledInput, Switch, SwitchArea, SwitchContainer, SwitchTitle, Switcher, SymbolLibrary, SymbolPreview, THROTTLING_DELAY, TIME_FORMAT, TabBlock, TabContainer, TabContainerLine, Tabs, Text, TextTrim, Textarea, ThemeProvider, Tippy, TitleText, Tooltip, TooltipContent, Tree, TreeContainer, TreeContent, TreeDescription, TreeExpand, TreeItem, TreeItemWrapper, TreeItems, TreeRow, TreeText, UnicodeBig, UnicodeSmall, Uploader, UploaderItemArea, UploaderItemsContainer, UploaderTitle, UploaderTitleContainer, UploaderTitleImage, UploaderTitleWrapper, UserChip, UserChipImagePlaceholder, UserChipItem, UserChipItemIcon, UserChipItemImage, ValueLink, ValuePrefix, WaitingButton, WaitingButtonComponent, WithLabelContainer, Wizard, addItem, borderRadius, buttonMixin, clamp, cloneWithRefs, collapseDuration, combineRefs, createColorOrMono, createIconColors, createLinkStates, createMessageColors, createTheme, createToggleStates, createVariants, cropLeftBorderRadius, cropRightBorderRadius, theme$1 as darkTheme, dateFormat, defaultOptions, defaultStub, theme as defaultTheme, fileSizeFormat, findTreeItemById, fonts, getChipColor, getColorOrMono, getHighlightParts, getIconColors, getLinkColors, getLocale, getMessageColors, getNumberFromPixels, getRealChildren, getTagColor, getTextWidth, getTheme, getToggleStates, getUnicodeFromString, getVariant, horizontalDivider, iconTypes, injectIcon, inputMixin, isDefined, isDescendant, isDomNode, isNumeric, isOutside, isReactDomElement, isReactElement, isSimpleStyledComponent, isTextFitElementWidth, isTouchDevice, isValidUrl, mapToSimpleOption, palette, photo, preventDefault, randomInteger, randomRgba, rangeValueFormat, removeItem, replaceTreeItemById, sendRefSafety, shadows, sortNumbers, stub, textOverflowEllipsisMixin, toNumber, toSimpleOption, transition, transparencyDark2, transparencyDark4, Transparency_dark8 as transparencyDark8, transparencyLight2, transparencyLight4, Transparency_light8 as transparencyLight8, typeId, urlify, useAsyncAutocomplete, useDelayedStyleLoader, useDialogShadow, useDragAndDropEffect, useEventListener, useForceUpdate, useMounted, useMutationObserver, usePrevValue, useStyleLoader, useTheme, useThrottling, useToggle, useUndraggableEffect, useUnselectableEffect, verticalDivider, withLabel };
32524
+ export { ActionButton, Actions, ActionsGroup, AdditionalInfo, AnchorContainer, AutoComplete, BaseButton, Blank, Box, ButtonsGroup, ButtonsGroupComponent, CSSTransition, Card, CardBodyContainer, Header$1 as CardHeader, ImageGradientOverlay as CardImageGradientOverlay, ImageOverlay as CardImageOverlay, CardLoader, Checkbox, CheckboxComponent, Chip, ChipAutoCompleDivider, ChipAutoCompleSlider, ChipAutoComplete, ChipAutoCompleteControlFlex, ChipAutoCompleteMode, ChipAutoCompleteTags, ChipContainer, ChipInput, ChipInputHolder, Circle, CircularProgress, Collapse, CollapseWrapper, ColorButton, ColorInput, ColorPicker, ComparisonOperator, Container$5 as Container, CustomButton, CustomToggle, DATE_FORMAT, DATE_TIME_FORMAT, DataGrid, DatePicker, Description, Dialog, DialogActions, DialogComponent, DialogContent, DialogOverlay, DialogTitle, Divider, DividerLine, DragAreaWrapper, DraggableTree, DraggableTreeContainer, DraggableTreeItem, DropHereTitle, Dropdown, DropdownContainer, DropdownField, DropdownOptionIcon, ElementsArea, Expander, FILE_SIZE_STEP, FadingIcon, FieldValue, FileExt, FileInfoComment, FileInfoName, FileInfoProgress, FileInfoTitle, FileSymbolContainer, FilterInput, FlatButton, Flex, FlexSpan, FocusTrap, GlobalsContainer, H1, H2, H3, H4, Handlers, HueMap, HueSlider, selection as IcoMoonSelection, Icon, IconButton, IconButtonButton, IconButtonInnerChild, IconMenu, IconToggle, IconToggleButton, IconToggleText, Image, ImageLoader, InfiniteScroll, InfiniteScrollContainer, InfiniteScrollLoaderContainer, InjectGlobalStyles, Input$1 as Input, InputLabel, InputsGroup, InputsGroupContainer, InputsGroupELement, InputsGroupElements, InputsGroupLabel, ItemContainer, JSONEditor, JSONEditorContainer, JSONEditorLinearProgress, JSONEditorWrapper, Label$2 as Label, LabeledTextarea, LeftSide, LegendToggler, LinearLoader, LinearProgress, Link, ListTransition, LoadMoreButton, LoadingContainer, MAX_NUMBER, MB_FILE_SIZE, MIN_NUMBER, MaskedComponent, Menu, MenuContainer, Message, MultiSelectContainer, Notifications, NumberInput, NumberRangeContainer, NumberRangeInputContainer, NumberRangeSlider, NumberRangeSliderContainer, NumberRangeSliderLabel, OpacitySlider, Option, OptionContainer, OptionDescription, OptionIcon, OptionText, OptionToggler, OptionValueContainer, OptionValueWrapper, PaginationFull, PaginationSimple, Paragraph, PasswordToggle, Placeholder, Popover, PopoverTransition, Popup$1 as Popup, Portal, Preview, Radio$1 as Radio, RadioGroup, RaisedButton, RangeDateInput, RangeDatePicker, RangeNumberInput, RatioLine, RegularIconButton, SEPARATED_TIME_FORMAT, SearchField, SearchInputContainer, SelectFromComputerTitle, SimpleInput, Slider, SliderContainer$2 as SliderContainer, HandleContainer as SliderHandle, Label$1 as SliderLabel, LowerTrackBackground as SliderLowerTrackBackground, SliderPopover, Track as SliderTrack, SortToggle, Spinner, Stepper, StyledInput, Switch, SwitchArea, SwitchContainer, SwitchTitle, Switcher, SymbolLibrary, SymbolPreview, THROTTLING_DELAY, TIME_FORMAT, TabBlock, TabContainer, TabContainerLine, Tabs, Text, TextTrim, Textarea, ThemeProvider, Tippy, TitleText, Tooltip, TooltipContent, Tree, TreeContainer, TreeContent, TreeDescription, TreeDropdown, TreeDropdownItem, TreeExpand, TreeItem, TreeItemWrapper, TreeItems, TreeRow, TreeText, UnicodeBig, UnicodeSmall, Uploader, UploaderItemArea, UploaderItemsContainer, UploaderTitle, UploaderTitleContainer, UploaderTitleImage, UploaderTitleWrapper, UserChip, UserChipImagePlaceholder, UserChipItem, UserChipItemIcon, UserChipItemImage, ValueLink, ValuePrefix, WaitingButton, WaitingButtonComponent, WithLabelContainer, Wizard, addItem, borderRadius, buttonMixin, clamp, cloneWithRefs, collapseDuration, combineRefs, createColorOrMono, createIconColors, createLinkStates, createMessageColors, createTheme, createToggleStates, createVariants, cropLeftBorderRadius, cropRightBorderRadius, theme$1 as darkTheme, dateFormat, defaultOptions, defaultStub, theme as defaultTheme, fileSizeFormat, findTreeItemById, fonts, getChipColor, getColorOrMono, getHighlightParts, getIconColors, getLinkColors, getLocale, getMessageColors, getNumberFromPixels, getRealChildren, getTagColor, getTextWidth, getTheme, getToggleStates, getUnicodeFromString, getVariant, horizontalDivider, iconTypes, injectIcon, inputMixin, isDefined, isDescendant, isDomNode, isNumeric, isOutside, isReactDomElement, isReactElement, isSimpleStyledComponent, isTextFitElementWidth, isTouchDevice, isValidUrl, mapToSimpleOption, palette, photo, preventDefault, randomInteger, randomRgba, rangeValueFormat, removeItem, replaceTreeItemById, sendRefSafety, shadows, sortNumbers, stub, textOverflowEllipsisMixin, toNumber, toSimpleOption, transition, transparencyDark2, transparencyDark4, Transparency_dark8 as transparencyDark8, transparencyLight2, transparencyLight4, Transparency_light8 as transparencyLight8, typeId, urlify, useAsyncAutocomplete, useDelayedStyleLoader, useDialogShadow, useDragAndDropEffect, useEventListener, useForceUpdate, useMounted, useMutationObserver, usePrevValue, useStyleLoader, useTheme, useThrottling, useToggle, useUndraggableEffect, useUnselectableEffect, verticalDivider, withLabel };
32051
32525
  //# sourceMappingURL=uilib-gl.esm.js.map