react-asc 18.5.0 → 18.7.1

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.
@@ -8,8 +8,11 @@ export interface IAutoCompleteProps {
8
8
  value?: string;
9
9
  openOnFocus?: boolean;
10
10
  disabled?: boolean;
11
+ placeholder?: string;
11
12
  readOnly?: boolean;
12
- onChange?: (val: string) => void;
13
+ debounce?: number;
14
+ onSelect?: (val: ISelectOption) => void;
15
+ onChange?: (val: string | undefined) => void;
13
16
  onKeyDown?: (event: any) => void;
14
17
  }
15
18
  export declare const AutoComplete: (props: IAutoCompleteProps) => JSX.Element;
@@ -7,7 +7,7 @@ export interface ITreeNodeProps {
7
7
  hasChildren: boolean;
8
8
  isExpanded: boolean;
9
9
  isSelected: boolean;
10
- onClick: (id: string) => void;
10
+ onToggleExpand: (id: string) => void;
11
11
  onClickSelect: (id: string) => void;
12
12
  }
13
13
  export declare const TreeNode: (props: ITreeNodeProps) => JSX.Element;
@@ -1,6 +1,13 @@
1
1
  /// <reference types="react" />
2
+ export interface ITreeNode {
3
+ id: string;
4
+ label: string;
5
+ children?: Array<ITreeNode>;
6
+ }
2
7
  export interface ITreeViewProps {
3
- data: Array<any>;
4
- onSelect: (selectedItems: Array<any>) => void;
8
+ data: Array<ITreeNode>;
9
+ onSelect?: (selectedItems: Array<any>) => void;
10
+ onExpand?: (id: string) => void;
11
+ onCollapse?: (id: string) => void;
5
12
  }
6
13
  export declare const TreeView: (props: ITreeViewProps) => JSX.Element;
package/hooks/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export * from './Debounce.hook';
2
1
  export * from './useWindowSize';
3
2
  export * from './useHover';
4
3
  export * from './useConstructor';
4
+ export * from './useDebounce';
@@ -0,0 +1 @@
1
+ export declare function useDebounce(callback: any, timeout: any, deps: any): void;
package/index.es.js CHANGED
@@ -87,56 +87,56 @@ function styleInject(css, ref) {
87
87
  }
88
88
  }
89
89
 
90
- var css_248z$Q = ".Alert-module_alert__2yOUn {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\n\n.Alert-module_contained__1cUnn.Alert-module_primary__1pnWJ {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Alert-module_contained__1cUnn.Alert-module_accent__3TlkP {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Alert-module_contained__1cUnn.Alert-module_secondary__3cfYS {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Alert-module_contained__1cUnn.Alert-module_light__vSzHK {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Alert-module_contained__1cUnn.Alert-module_dark__3DrkS {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Alert-module_outline__3fdYC.Alert-module_primary__1pnWJ {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_secondary__3cfYS {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_accent__3TlkP {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_light__vSzHK {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_dark__3DrkS {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important;\n}";
91
- var styles$Q = {"alert":"Alert-module_alert__2yOUn","contained":"Alert-module_contained__1cUnn","primary":"Alert-module_primary__1pnWJ","accent":"Alert-module_accent__3TlkP","secondary":"Alert-module_secondary__3cfYS","light":"Alert-module_light__vSzHK","dark":"Alert-module_dark__3DrkS","outline":"Alert-module_outline__3fdYC"};
92
- styleInject(css_248z$Q);
90
+ var css_248z$R = ".Alert-module_alert__2yOUn {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\n\n.Alert-module_contained__1cUnn.Alert-module_primary__1pnWJ {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Alert-module_contained__1cUnn.Alert-module_accent__3TlkP {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Alert-module_contained__1cUnn.Alert-module_secondary__3cfYS {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Alert-module_contained__1cUnn.Alert-module_light__vSzHK {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Alert-module_contained__1cUnn.Alert-module_dark__3DrkS {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Alert-module_outline__3fdYC.Alert-module_primary__1pnWJ {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_secondary__3cfYS {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_accent__3TlkP {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_light__vSzHK {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_dark__3DrkS {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important;\n}";
91
+ var styles$R = {"alert":"Alert-module_alert__2yOUn","contained":"Alert-module_contained__1cUnn","primary":"Alert-module_primary__1pnWJ","accent":"Alert-module_accent__3TlkP","secondary":"Alert-module_secondary__3cfYS","light":"Alert-module_light__vSzHK","dark":"Alert-module_dark__3DrkS","outline":"Alert-module_outline__3fdYC"};
92
+ styleInject(css_248z$R);
93
93
 
94
94
  const Alert = (props) => {
95
95
  const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
96
96
  const getCssClasses = () => {
97
97
  const cssClasses = [];
98
- cssClasses.push(styles$Q.alert);
98
+ cssClasses.push(styles$R.alert);
99
99
  if (variant === VARIANT.contained) {
100
- cssClasses.push(styles$Q.contained);
101
- cssClasses.push(styles$Q[color]);
100
+ cssClasses.push(styles$R.contained);
101
+ cssClasses.push(styles$R[color]);
102
102
  }
103
103
  if (variant === VARIANT.outline) {
104
- cssClasses.push(styles$Q.outline);
105
- cssClasses.push(styles$Q[color]);
104
+ cssClasses.push(styles$R.outline);
105
+ cssClasses.push(styles$R[color]);
106
106
  }
107
- shadow && cssClasses.push(styles$Q['shadow']);
107
+ shadow && cssClasses.push(styles$R['shadow']);
108
108
  className && cssClasses.push(className);
109
109
  return cssClasses.filter(r => r).join(' ');
110
110
  };
111
111
  return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
112
112
  };
113
113
 
114
- var css_248z$P = ".AppBar-module_appbar__1S8G1 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0;\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_primary__3CiO7 {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_secondary__1W4qT {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_accent__Mgcwx {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_light__1FxmL {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_dark__3n5rm {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_shadow__2c8iH {\n box-shadow: var(--shadow);\n}";
115
- var styles$P = {"appbar":"AppBar-module_appbar__1S8G1","primary":"AppBar-module_primary__3CiO7","secondary":"AppBar-module_secondary__1W4qT","accent":"AppBar-module_accent__Mgcwx","light":"AppBar-module_light__1FxmL","dark":"AppBar-module_dark__3n5rm","shadow":"AppBar-module_shadow__2c8iH"};
116
- styleInject(css_248z$P);
114
+ var css_248z$Q = ".AppBar-module_appbar__1S8G1 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0;\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_primary__3CiO7 {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_secondary__1W4qT {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_accent__Mgcwx {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_light__1FxmL {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_dark__3n5rm {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_shadow__2c8iH {\n box-shadow: var(--shadow);\n}";
115
+ var styles$Q = {"appbar":"AppBar-module_appbar__1S8G1","primary":"AppBar-module_primary__3CiO7","secondary":"AppBar-module_secondary__1W4qT","accent":"AppBar-module_accent__Mgcwx","light":"AppBar-module_light__1FxmL","dark":"AppBar-module_dark__3n5rm","shadow":"AppBar-module_shadow__2c8iH"};
116
+ styleInject(css_248z$Q);
117
117
 
118
118
  const AppBar = (props) => {
119
119
  const { children, className, color = COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
120
120
  const getCssClasses = () => {
121
121
  const cssClasses = [];
122
- cssClasses.push(styles$P[color]);
123
- cssClasses.push(styles$P.appbar);
124
- shadow && cssClasses.push(styles$P['shadow']);
122
+ cssClasses.push(styles$Q[color]);
123
+ cssClasses.push(styles$Q.appbar);
124
+ shadow && cssClasses.push(styles$Q['shadow']);
125
125
  className && cssClasses.push(className);
126
126
  return cssClasses.filter(r => r).join(' ');
127
127
  };
128
128
  return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
129
129
  };
130
130
 
131
- var css_248z$O = ".AppBarTitle-module_appbarTitle__3J-Z1 {\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n font-size: 1.25rem;\n line-height: 1.8;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden !important;\n display: inline-block;\n}\n.AppBarTitle-module_appbarTitle__3J-Z1:hover {\n cursor: pointer;\n}";
132
- var styles$O = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
133
- styleInject(css_248z$O);
131
+ var css_248z$P = ".AppBarTitle-module_appbarTitle__3J-Z1 {\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n font-size: 1.25rem;\n line-height: 1.8;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden !important;\n display: inline-block;\n}\n.AppBarTitle-module_appbarTitle__3J-Z1:hover {\n cursor: pointer;\n}";
132
+ var styles$P = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
133
+ styleInject(css_248z$P);
134
134
 
135
135
  const AppBarTitle = (props) => {
136
136
  const { children, className, onClick } = props;
137
137
  const getCssClass = () => {
138
138
  const cssClasses = [];
139
- cssClasses.push(styles$O.appbarTitle);
139
+ cssClasses.push(styles$P.appbarTitle);
140
140
  className && cssClasses.push(className);
141
141
  return cssClasses.filter(r => r).join(' ');
142
142
  };
@@ -164,40 +164,40 @@ const Backdrop = (props) => {
164
164
  return (createPortal(React.createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
165
165
  };
166
166
 
167
- var css_248z$N = ".List-module_list__1ax9w {\n width: 100%;\n display: flex;\n flex-direction: column;\n padding-left: 0;\n margin-bottom: 0;\n margin-top: 0;\n background-color: var(--white);\n}";
168
- var styles$N = {"list":"List-module_list__1ax9w"};
169
- styleInject(css_248z$N);
167
+ var css_248z$O = ".List-module_list__1ax9w {\n width: 100%;\n display: flex;\n flex-direction: column;\n padding-left: 0;\n margin-bottom: 0;\n margin-top: 0;\n background-color: var(--white);\n}";
168
+ var styles$O = {"list":"List-module_list__1ax9w"};
169
+ styleInject(css_248z$O);
170
170
 
171
171
  const List = (props) => {
172
172
  const { children, className, isFlush } = props;
173
173
  const getCssClasses = () => {
174
174
  const cssClasses = [];
175
175
  if (isFlush) {
176
- cssClasses.push(styles$N.flush);
176
+ cssClasses.push(styles$O.flush);
177
177
  }
178
- cssClasses.push(styles$N.list);
178
+ cssClasses.push(styles$O.list);
179
179
  className && cssClasses.push(className);
180
180
  return cssClasses.filter(css => css).join(' ');
181
181
  };
182
182
  return (React.createElement("ul", { className: getCssClasses() }, children));
183
183
  };
184
184
 
185
- var css_248z$M = ".ListItem-module_listItem__3hAZb {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease;\n}\n.ListItem-module_listItem__3hAZb:hover, .ListItem-module_listItem__3hAZb.ListItem-module_active__hyvch {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary);\n}\n.ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n border-top-width: 0;\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
186
- var styles$M = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-module_active__hyvch","primary":"ListItem-module_primary__2OJAg","accent":"ListItem-module_accent__2RXHe","secondary":"ListItem-module_secondary__3EVjH","light":"ListItem-module_light__3CJBB","dark":"ListItem-module_dark__SazkE"};
187
- styleInject(css_248z$M);
185
+ var css_248z$N = ".ListItem-module_listItem__3hAZb {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease;\n}\n.ListItem-module_listItem__3hAZb:hover, .ListItem-module_listItem__3hAZb.ListItem-module_active__hyvch {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary);\n}\n.ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n border-top-width: 0;\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
186
+ var styles$N = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-module_active__hyvch","primary":"ListItem-module_primary__2OJAg","accent":"ListItem-module_accent__2RXHe","secondary":"ListItem-module_secondary__3EVjH","light":"ListItem-module_light__3CJBB","dark":"ListItem-module_dark__SazkE"};
187
+ styleInject(css_248z$N);
188
188
 
189
189
  const ListItem = (props) => {
190
190
  const { id, children, color, active, className, isHoverable, isDisabled, onClick } = props;
191
191
  const getCssClasses = () => {
192
192
  const cssClasses = [];
193
193
  if (active) {
194
- cssClasses.push(styles$M['active']);
194
+ cssClasses.push(styles$N['active']);
195
195
  }
196
196
  if (isDisabled) {
197
197
  cssClasses.push(`disabled`);
198
198
  }
199
- color && cssClasses.push(styles$M[color]);
200
- cssClasses.push(styles$M.listItem);
199
+ color && cssClasses.push(styles$N[color]);
200
+ cssClasses.push(styles$N.listItem);
201
201
  className && cssClasses.push(className);
202
202
  return cssClasses.filter(css => css).join(' ');
203
203
  };
@@ -207,32 +207,32 @@ const ListItem = (props) => {
207
207
  return (React.createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
208
208
  };
209
209
 
210
- var css_248z$L = ".ListItemAvatar-module_avatar__1fjSE {\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__1fjSE img {\n border-radius: 50%;\n}";
211
- var styles$L = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
210
+ var css_248z$M = ".ListItemAvatar-module_avatar__1fjSE {\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__1fjSE img {\n border-radius: 50%;\n}";
211
+ var styles$M = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
212
+ styleInject(css_248z$M);
213
+
214
+ const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$M.avatar }, avatar));
215
+
216
+ var css_248z$L = ".ListItemIcon-module_icon__-nsUy {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__-nsUy svg {\n width: 24px;\n height: 24px;\n}";
217
+ var styles$L = {"icon":"ListItemIcon-module_icon__-nsUy"};
212
218
  styleInject(css_248z$L);
213
219
 
214
- const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$L.avatar }, avatar));
220
+ const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$L.icon }, icon));
215
221
 
216
- var css_248z$K = ".ListItemIcon-module_icon__-nsUy {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__-nsUy svg {\n width: 24px;\n height: 24px;\n}";
217
- var styles$K = {"icon":"ListItemIcon-module_icon__-nsUy"};
222
+ var css_248z$K = ".ListItemAction-module_listItemAction__26S66 {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__26S66 svg {\n width: 20px;\n height: 20px;\n}";
223
+ var styles$K = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
218
224
  styleInject(css_248z$K);
219
225
 
220
- const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$K.icon }, icon));
226
+ const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$K.listItemAction, onClick: e => onClick && onClick(e) }, children));
221
227
 
222
- var css_248z$J = ".ListItemAction-module_listItemAction__26S66 {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__26S66 svg {\n width: 20px;\n height: 20px;\n}";
223
- var styles$J = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
228
+ var css_248z$J = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
229
+ var styles$J = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
224
230
  styleInject(css_248z$J);
225
231
 
226
- const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$J.listItemAction, onClick: e => onClick && onClick(e) }, children));
227
-
228
- var css_248z$I = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
229
- var styles$I = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
230
- styleInject(css_248z$I);
231
-
232
232
  const ListItemText = ({ primary, secondary }) => {
233
233
  const getCssClasses = () => {
234
234
  const cssClasses = [];
235
- cssClasses.push(styles$I.listItemText);
235
+ cssClasses.push(styles$J.listItemText);
236
236
  return cssClasses.filter(css => css).join(' ');
237
237
  };
238
238
  return (React.createElement("div", { className: getCssClasses() },
@@ -243,9 +243,9 @@ const ListItemText = ({ primary, secondary }) => {
243
243
  const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
244
244
  const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
245
245
 
246
- var css_248z$H = ".AutoComplete-module_selectContainer__SyqtX {\n position: relative;\n}\n\n.AutoComplete-module_select__2_7JD {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__2_7JD:hover {\n cursor: pointer;\n}\n\n.AutoComplete-module_selectMenu__2_ybA {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 38px;\n z-index: 1050;\n max-height: 280px;\n overflow: auto;\n}";
247
- var styles$H = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
248
- styleInject(css_248z$H);
246
+ var css_248z$I = ".AutoComplete-module_selectContainer__SyqtX {\n position: relative;\n}\n\n.AutoComplete-module_select__2_7JD {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__2_7JD:hover {\n cursor: pointer;\n}\n\n.AutoComplete-module_selectMenu__2_ybA {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 38px;\n z-index: 1050;\n max-height: 280px;\n overflow: auto;\n}";
247
+ var styles$I = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
248
+ styleInject(css_248z$I);
249
249
 
250
250
  // preset value
251
251
  // enter -> delay? -> show results
@@ -253,8 +253,9 @@ styleInject(css_248z$H);
253
253
  // multiple
254
254
  // custom template render items
255
255
  const AutoComplete = (props) => {
256
- const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, onChange, value } = props;
256
+ const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, onChange, onSelect, value } = props;
257
257
  const [model, setModel] = useState('');
258
+ const [searchText, setSearchText] = useState('');
258
259
  const [isShow, setIsShow] = useState(false);
259
260
  const [optionsTemp, setOptionsTemp] = useState([]);
260
261
  const selectConainter = useRef(null);
@@ -265,63 +266,64 @@ const AutoComplete = (props) => {
265
266
  }
266
267
  }, [value]);
267
268
  useEffect(() => {
268
- const optionsOrigin = JSON.parse(JSON.stringify(options));
269
- setOptionsTemp(optionsOrigin);
269
+ if (options && options.length > 0) {
270
+ const optionsOrigin = JSON.parse(JSON.stringify(options));
271
+ const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
272
+ const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
273
+ setOptionsTemp(optionsFiltered);
274
+ }
270
275
  }, [options]);
276
+ useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
271
277
  const getCssClass = () => {
272
278
  const cssClasses = [];
273
279
  className && cssClasses.push(className);
274
- cssClasses.push(styles$H.select);
280
+ cssClasses.push(styles$I.select);
275
281
  return cssClasses.filter(r => r).join(' ');
276
282
  };
277
283
  const show = () => setIsShow(true);
278
284
  const hide = () => setIsShow(false);
279
285
  const handleOnClick = (option) => {
280
286
  if (model !== option.value) {
281
- onChange && onChange(option.value);
287
+ onSelect && onSelect(option);
282
288
  }
283
289
  setModel(option.label);
284
290
  hide();
285
291
  };
286
292
  const handleOnChange = (e) => {
287
- const optionsOrigin = JSON.parse(JSON.stringify(options));
288
- const searchText = e.target.value;
289
- setModel(searchText);
290
- const regex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
291
- const optionsFiltered = optionsOrigin.filter(o => { var _a; return (_a = o.label) === null || _a === void 0 ? void 0 : _a.match(regex); });
292
- setOptionsTemp(optionsFiltered);
293
+ setModel(e.target.value);
294
+ setSearchText(e.target.value);
293
295
  show();
294
296
  };
295
297
  const handleOnFocus = () => {
296
298
  openOnFocus && show();
297
299
  };
298
300
  return (React.createElement(React.Fragment, null,
299
- React.createElement("div", { ref: selectConainter, className: styles$H.selectContainer },
300
- React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, value: model }),
301
+ React.createElement("div", { ref: selectConainter, className: styles$I.selectContainer },
302
+ React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
301
303
  isShow &&
302
304
  React.createElement(React.Fragment, null,
303
- React.createElement("div", { className: styles$H.selectMenu },
305
+ React.createElement("div", { className: styles$I.selectMenu },
304
306
  React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option) },
305
307
  React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
306
308
  React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
307
309
  };
308
310
 
309
- var css_248z$G = ".Badge-module_badgeContainer__1QtTD {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.Badge-module_badge__2Y_LO {\n top: 0;\n right: 0;\n transform: scale(1) translate(50%, -50%);\n transform-origin: 100% 0%;\n height: 20px;\n display: flex;\n padding: 0 6px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n align-items: center;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n border-radius: 10px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Badge-module_badge__2Y_LO.Badge-module_primary__2mn7_ {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_accent__8Hg8z {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__2Y_LO.Badge-module_secondary__1QqDc {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_light__3Z7JO {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__2Y_LO.Badge-module_dark__2qWe_ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
310
- var styles$G = {"badgeContainer":"Badge-module_badgeContainer__1QtTD","badge":"Badge-module_badge__2Y_LO","primary":"Badge-module_primary__2mn7_","accent":"Badge-module_accent__8Hg8z","secondary":"Badge-module_secondary__1QqDc","light":"Badge-module_light__3Z7JO","dark":"Badge-module_dark__2qWe_"};
311
- styleInject(css_248z$G);
311
+ var css_248z$H = ".Badge-module_badgeContainer__1QtTD {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.Badge-module_badge__2Y_LO {\n top: 0;\n right: 0;\n transform: scale(1) translate(50%, -50%);\n transform-origin: 100% 0%;\n height: 20px;\n display: flex;\n padding: 0 6px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n align-items: center;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n border-radius: 10px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Badge-module_badge__2Y_LO.Badge-module_primary__2mn7_ {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_accent__8Hg8z {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__2Y_LO.Badge-module_secondary__1QqDc {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_light__3Z7JO {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__2Y_LO.Badge-module_dark__2qWe_ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
312
+ var styles$H = {"badgeContainer":"Badge-module_badgeContainer__1QtTD","badge":"Badge-module_badge__2Y_LO","primary":"Badge-module_primary__2mn7_","accent":"Badge-module_accent__8Hg8z","secondary":"Badge-module_secondary__1QqDc","light":"Badge-module_light__3Z7JO","dark":"Badge-module_dark__2qWe_"};
313
+ styleInject(css_248z$H);
312
314
 
313
315
  const Badge = (props) => {
314
316
  const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
315
317
  const getCssClassesBadgeContainer = () => {
316
318
  const cssClasses = [];
317
- cssClasses.push(styles$G.badgeContainer);
319
+ cssClasses.push(styles$H.badgeContainer);
318
320
  className && cssClasses.push(className);
319
321
  return cssClasses.filter(css => css).join(' ');
320
322
  };
321
323
  const getCssClassesBadge = () => {
322
324
  const cssClasses = [];
323
- cssClasses.push(styles$G.badge);
324
- cssClasses.push(styles$G[color]);
325
+ cssClasses.push(styles$H.badge);
326
+ cssClasses.push(styles$H[color]);
325
327
  return cssClasses.filter(css => css).join(' ');
326
328
  };
327
329
  return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
@@ -329,43 +331,42 @@ const Badge = (props) => {
329
331
  React.createElement("span", { className: getCssClassesBadge() }, content)));
330
332
  };
331
333
 
332
- var css_248z$F = ".Icon-module_icon__2etAT {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__2etAT svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n color: var(--primary);\n}\n.Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n color: var(--accent);\n}\n.Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n color: var(--secondary);\n}\n.Icon-module_icon__2etAT.Icon-module_light__2SugS {\n color: var(--light);\n}\n.Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n color: var(--dark);\n}";
333
- var styles$F = {"icon":"Icon-module_icon__2etAT","primary":"Icon-module_primary__32Mh4","accent":"Icon-module_accent__2U_no","secondary":"Icon-module_secondary__3cMmx","light":"Icon-module_light__2SugS","dark":"Icon-module_dark__GWMzb"};
334
- styleInject(css_248z$F);
334
+ var css_248z$G = ".Icon-module_icon__2etAT {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__2etAT svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n color: var(--primary);\n}\n.Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n color: var(--accent);\n}\n.Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n color: var(--secondary);\n}\n.Icon-module_icon__2etAT.Icon-module_light__2SugS {\n color: var(--light);\n}\n.Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n color: var(--dark);\n}";
335
+ var styles$G = {"icon":"Icon-module_icon__2etAT","primary":"Icon-module_primary__32Mh4","accent":"Icon-module_accent__2U_no","secondary":"Icon-module_secondary__3cMmx","light":"Icon-module_light__2SugS","dark":"Icon-module_dark__GWMzb"};
336
+ styleInject(css_248z$G);
335
337
 
336
338
  const Icon = (props) => {
337
339
  const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
338
340
  const getCssClasses = () => {
339
341
  const cssClasses = [];
340
- cssClasses.push(styles$F.icon);
341
- iconColor && cssClasses.push(styles$F[iconColor]);
342
+ cssClasses.push(styles$G.icon);
343
+ iconColor && cssClasses.push(styles$G[iconColor]);
342
344
  className && cssClasses.push(className);
343
345
  return cssClasses.filter(css => css).join(' ');
344
346
  };
345
347
  return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
346
348
  };
347
349
 
348
- var css_248z$E = ".Button-module_button__3cIVZ {\n text-transform: uppercase !important;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius);\n box-shadow: var(--shadow);\n}\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg:hover {\n background-color: var(--primary-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6:hover {\n background-color: var(--accent-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb:hover {\n background-color: var(--secondary-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z:hover {\n background-color: var(--light-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU:hover {\n background-color: var(--dark-dark);\n}\n.Button-module_btnContained__8Q4uL:disabled:hover {\n cursor: not-allowed;\n}\n\n.Button-module_btnText__32H44 {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg {\n color: var(--primary) !important;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n text-decoration: none;\n background: var(--light-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU {\n color: var(--dark) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_btnOutline__2drkn {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n color: var(--primary) !important;\n border-color: var(--primary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n border-color: var(--accent) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n background: var(--light-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n color: var(--dark) !important;\n border-color: var(--dark) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_startIcon__1TN-G {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__1TN-G svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__3uZjE {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__3uZjE svg {\n width: 18px;\n height: 18px;\n}";
349
- var styles$E = {"button":"Button-module_button__3cIVZ","btnContained":"Button-module_btnContained__8Q4uL","primary":"Button-module_primary__2soUg","accent":"Button-module_accent__1_cP6","secondary":"Button-module_secondary__psAvb","light":"Button-module_light__JVK1z","dark":"Button-module_dark__O89wU","btnText":"Button-module_btnText__32H44","btnOutline":"Button-module_btnOutline__2drkn","startIcon":"Button-module_startIcon__1TN-G","endIcon":"Button-module_endIcon__3uZjE"};
350
- styleInject(css_248z$E);
350
+ var css_248z$F = ".Button-module_button__3cIVZ {\n text-transform: uppercase !important;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius);\n box-shadow: var(--shadow);\n}\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg:hover {\n background-color: var(--primary-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6:hover {\n background-color: var(--accent-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb:hover {\n background-color: var(--secondary-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z:hover {\n background-color: var(--light-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU:hover {\n background-color: var(--dark-dark);\n}\n.Button-module_btnContained__8Q4uL:disabled:hover {\n cursor: not-allowed;\n}\n\n.Button-module_btnText__32H44 {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg {\n color: var(--primary) !important;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n text-decoration: none;\n background: var(--light-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU {\n color: var(--dark) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_btnOutline__2drkn {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n color: var(--primary) !important;\n border-color: var(--primary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n border-color: var(--accent) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n background: var(--light-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n color: var(--dark) !important;\n border-color: var(--dark) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_startIcon__1TN-G {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__1TN-G svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__3uZjE {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__3uZjE svg {\n width: 18px;\n height: 18px;\n}";
351
+ var styles$F = {"button":"Button-module_button__3cIVZ","btnContained":"Button-module_btnContained__8Q4uL","primary":"Button-module_primary__2soUg","accent":"Button-module_accent__1_cP6","secondary":"Button-module_secondary__psAvb","light":"Button-module_light__JVK1z","dark":"Button-module_dark__O89wU","btnText":"Button-module_btnText__32H44","btnOutline":"Button-module_btnOutline__2drkn","startIcon":"Button-module_startIcon__1TN-G","endIcon":"Button-module_endIcon__3uZjE"};
352
+ styleInject(css_248z$F);
351
353
 
352
354
  const ButtonTemplate = (props) => {
353
355
  const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
354
356
  const getCssClasses = () => {
355
357
  const cssClasses = [];
356
- cssClasses.push(`btn`);
357
- cssClasses.push(styles$E.button);
358
+ cssClasses.push(styles$F.button);
358
359
  if (variant !== 'outline' && variant !== 'text') {
359
- cssClasses.push(styles$E.btnContained);
360
- cssClasses.push(styles$E[color]);
360
+ cssClasses.push(styles$F.btnContained);
361
+ cssClasses.push(styles$F[color]);
361
362
  }
362
363
  if (variant === 'outline') {
363
- cssClasses.push(styles$E.btnOutline);
364
- cssClasses.push(styles$E[color]);
364
+ cssClasses.push(styles$F.btnOutline);
365
+ cssClasses.push(styles$F[color]);
365
366
  }
366
367
  if (variant === 'text') {
367
- cssClasses.push(styles$E.btnText);
368
- cssClasses.push(styles$E[color]);
368
+ cssClasses.push(styles$F.btnText);
369
+ cssClasses.push(styles$F[color]);
369
370
  }
370
371
  if (isRounded && variant !== 'text') {
371
372
  cssClasses.push(`rounded-pill`);
@@ -379,21 +380,25 @@ const ButtonTemplate = (props) => {
379
380
  return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
380
381
  React.createElement("span", { className: "d-flex justify-content-center" },
381
382
  startIcon &&
382
- React.createElement(Icon, { className: styles$E.startIcon }, startIcon),
383
+ React.createElement(Icon, { className: styles$F.startIcon }, startIcon),
383
384
  children,
384
385
  endIcon &&
385
- React.createElement(Icon, { className: styles$E.endIcon }, endIcon))));
386
+ React.createElement(Icon, { className: styles$F.endIcon }, endIcon))));
386
387
  };
387
388
 
388
389
  const Button = (props) => {
389
390
  return (React.createElement(ButtonTemplate, Object.assign({}, props)));
390
391
  };
391
392
 
393
+ var css_248z$E = ".ButtonGroup-module_buttonGroup__2RS71 button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__2RS71 button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}";
394
+ var styles$E = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
395
+ styleInject(css_248z$E);
396
+
392
397
  const ButtonGroup = (props) => {
393
398
  const { children, className } = props, rest = __rest(props, ["children", "className"]);
394
399
  const getCssClasses = () => {
395
400
  const cssClasses = [];
396
- cssClasses.push('btn-group');
401
+ cssClasses.push(styles$E.buttonGroup);
397
402
  className && cssClasses.push(className);
398
403
  return cssClasses.filter(css => css).join(' ');
399
404
  };
@@ -2123,6 +2128,15 @@ const useConstructor = (callBack = () => { }) => {
2123
2128
  setHasBeenCalled(true);
2124
2129
  };
2125
2130
 
2131
+ function useDebounce(callback, timeout, deps) {
2132
+ const timeoutId = useRef();
2133
+ useEffect(() => {
2134
+ clearTimeout(timeoutId.current);
2135
+ timeoutId.current = setTimeout(callback, timeout);
2136
+ return () => clearTimeout(timeoutId.current);
2137
+ }, deps);
2138
+ }
2139
+
2126
2140
  var css_248z$4 = ".Step-module_stepWrapper__1se3l {\n display: flex;\n align-items: center;\n padding-left: 8px;\n padding-right: 8px;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_stepWrapper__1se3l.Step-module_hasLabel__3cdCU:not(.Step-module_disabled__1R7hh):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius);\n}\n\n.Step-module_step__2siYu {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_step__2siYu:not(.Step-module_hasLabel__3cdCU):not(.Step-module_disabled__1R7hh):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n}\n.Step-module_step__2siYu.Step-module_hasLabel__3cdCU svg {\n width: 18px !important;\n height: 18px !important;\n}\n\n.Step-module_stepIconCircle__3IyDn svg {\n width: 24px;\n height: 24px;\n}\n\n.Step-module_stepValue__2TVrP {\n position: absolute;\n color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__2TVrP .Step-module_isActive__1QTL4 {\n color: var(--primary-contrast-text);\n}";
2127
2141
  var styles$4 = {"stepWrapper":"Step-module_stepWrapper__1se3l","hasLabel":"Step-module_hasLabel__3cdCU","disabled":"Step-module_disabled__1R7hh","step":"Step-module_step__2siYu","stepIconCircle":"Step-module_stepIconCircle__3IyDn","stepValue":"Step-module_stepValue__2TVrP","isActive":"Step-module_isActive__1QTL4"};
2128
2142
  styleInject(css_248z$4);
@@ -2440,16 +2454,16 @@ const TimeSelect = (props) => {
2440
2454
  };
2441
2455
 
2442
2456
  const TreeNode = (props) => {
2443
- const { id, label, level, hasChildren, isExpanded, isSelected, onClick, onClickSelect } = props;
2457
+ const { id, label, level, hasChildren, isExpanded, isSelected, onToggleExpand, onClickSelect } = props;
2444
2458
  return (React.createElement("li", { className: "tree-node", style: { paddingLeft: `${(48 * level) + (hasChildren ? 0 : 1) * 48}px` } },
2445
2459
  hasChildren &&
2446
- React.createElement(IconButton, { onClick: () => onClick(id), icon: !isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
2460
+ React.createElement(IconButton, { onClick: () => onToggleExpand(id), icon: !isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
2447
2461
  React.createElement(Checkbox, { checked: isSelected, onChange: () => onClickSelect(id) }),
2448
2462
  label));
2449
2463
  };
2450
2464
 
2451
2465
  const TreeView = (props) => {
2452
- const { data, onSelect } = props;
2466
+ const { data, onSelect, onExpand, onCollapse } = props;
2453
2467
  const [flattenData, setFlattenData] = useState([]);
2454
2468
  const [expandedItems, setExpandedItems] = useState([]);
2455
2469
  const [selectedItemIds, setSelectedItemIds] = useState([]);
@@ -2468,14 +2482,16 @@ const TreeView = (props) => {
2468
2482
  useEffect(() => {
2469
2483
  setFlattenData(flattenDeep(data));
2470
2484
  }, [data]);
2471
- const handleNodeClick = (item) => {
2485
+ const handleOnToggleExpand = (item) => {
2472
2486
  if (item.hasChildren) {
2473
2487
  let newExpandedItems = [...expandedItems];
2474
2488
  if (isExpanded(item.id)) {
2475
2489
  newExpandedItems = collapseRecursive(item, [...expandedItems]);
2490
+ onCollapse && onCollapse(item.id);
2476
2491
  }
2477
2492
  else {
2478
2493
  newExpandedItems.push(item);
2494
+ onExpand && onExpand(item.id);
2479
2495
  }
2480
2496
  setExpandedItems(newExpandedItems);
2481
2497
  }
@@ -2516,9 +2532,9 @@ const TreeView = (props) => {
2516
2532
  };
2517
2533
  return (React.createElement("ul", { className: "treeview" }, flattenData.map(item => {
2518
2534
  return isItemVisible(item) &&
2519
- React.createElement(TreeNode, { key: item.id, id: item.id, label: item.label, level: item.level, parentId: item.parentId, isExpanded: isExpanded(item.id), isSelected: isSelected(item.id), hasChildren: item.hasChildren, onClick: () => handleNodeClick(item), onClickSelect: () => handleNodeClickSelect(item) });
2535
+ React.createElement(TreeNode, { key: item.id, id: item.id, label: item.label, level: item.level, parentId: item.parentId, isExpanded: isExpanded(item.id), isSelected: isSelected(item.id), hasChildren: item.hasChildren, onToggleExpand: () => handleOnToggleExpand(item), onClickSelect: () => handleNodeClickSelect(item) });
2520
2536
  })));
2521
2537
  };
2522
2538
 
2523
- export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useHover, useWindowSize };
2539
+ export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useDebounce, useHover, useWindowSize };
2524
2540
  //# sourceMappingURL=index.es.js.map