@lumx/react 3.20.1-alpha.11 → 3.20.1-alpha.12
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/_internal/{8fcceef3.js → 0420e67b.js} +13 -14
- package/_internal/{8fcceef3.js.map → 0420e67b.js.map} +1 -1
- package/_internal/{7b214f74.js → 0a490b07.js} +29 -24
- package/_internal/{7b214f74.js.map → 0a490b07.js.map} +1 -1
- package/_internal/{4d92e13b.js → 0be1006e.js} +25 -25
- package/_internal/{4d92e13b.js.map → 0be1006e.js.map} +1 -1
- package/_internal/{dd0a245d.js → 0d1a078c.js} +44 -42
- package/_internal/{dd0a245d.js.map → 0d1a078c.js.map} +1 -1
- package/_internal/{1eab656b.js → 15eab19b.js} +25 -25
- package/_internal/{1eab656b.js.map → 15eab19b.js.map} +1 -1
- package/_internal/{87bada02.js → 179a84d1.js} +64 -67
- package/_internal/{87bada02.js.map → 179a84d1.js.map} +1 -1
- package/_internal/{4c5a7b63.js → 193521fa.js} +11 -12
- package/_internal/{4c5a7b63.js.map → 193521fa.js.map} +1 -1
- package/_internal/{f57d4eb8.js → 1a90ea3d.js} +15 -17
- package/_internal/{f57d4eb8.js.map → 1a90ea3d.js.map} +1 -1
- package/_internal/1deba7d7.js +224 -0
- package/_internal/{2d6bde7d.js.map → 1deba7d7.js.map} +1 -1
- package/_internal/{2938a251.js → 1ea72630.js} +16 -17
- package/_internal/{2938a251.js.map → 1ea72630.js.map} +1 -1
- package/_internal/21b83d16.js +137 -0
- package/_internal/{5ba8fae8.js.map → 21b83d16.js.map} +1 -1
- package/_internal/297bed8f.js +457 -0
- package/_internal/{e53b5a39.js.map → 297bed8f.js.map} +1 -1
- package/_internal/{432c85a7.js → 2c2b6a89.js} +9 -7
- package/_internal/{432c85a7.js.map → 2c2b6a89.js.map} +1 -1
- package/_internal/{bba7d4c4.js → 2f1716fa.js} +75 -63
- package/_internal/{bba7d4c4.js.map → 2f1716fa.js.map} +1 -1
- package/_internal/{2c7942af.js → 2f6c7f84.js} +16 -21
- package/_internal/{2c7942af.js.map → 2f6c7f84.js.map} +1 -1
- package/_internal/{64046d7a.js → 329b5f12.js} +10 -12
- package/_internal/{64046d7a.js.map → 329b5f12.js.map} +1 -1
- package/_internal/332e9844.js +2 -0
- package/_internal/332e9844.js.map +1 -0
- package/_internal/{85d992d2.js → 34c59f5b.js} +101 -98
- package/_internal/{85d992d2.js.map → 34c59f5b.js.map} +1 -1
- package/_internal/{30f4c83c.js → 370bdaed.js} +7 -5
- package/_internal/{30f4c83c.js.map → 370bdaed.js.map} +1 -1
- package/_internal/{7c4f4643.js → 37b007a4.js} +2 -2
- package/_internal/{7c4f4643.js.map → 37b007a4.js.map} +1 -1
- package/_internal/{07e0bd90.js → 3a4e4636.js} +51 -36
- package/_internal/{07e0bd90.js.map → 3a4e4636.js.map} +1 -1
- package/_internal/{3683d267.js → 3e653144.js} +8 -11
- package/_internal/{3683d267.js.map → 3e653144.js.map} +1 -1
- package/_internal/{c43d098b.js → 3f86608e.js} +5 -2
- package/_internal/{c43d098b.js.map → 3f86608e.js.map} +1 -1
- package/_internal/{b3bfbe72.js → 478b5c92.js} +2 -2
- package/_internal/{b3bfbe72.js.map → 478b5c92.js.map} +1 -1
- package/_internal/4962be5b.js +121 -0
- package/_internal/{70cf341b.js.map → 4962be5b.js.map} +1 -1
- package/_internal/{407735b4.js → 4cd870a5.js} +2 -2
- package/_internal/{407735b4.js.map → 4cd870a5.js.map} +1 -1
- package/_internal/{e4613195.js → 501f2f9f.js} +8 -9
- package/_internal/{e4613195.js.map → 501f2f9f.js.map} +1 -1
- package/_internal/5e7b90e2.js +2 -0
- package/_internal/5e7b90e2.js.map +1 -0
- package/_internal/{18334f0d.js → 5ec059fe.js} +48 -43
- package/_internal/{18334f0d.js.map → 5ec059fe.js.map} +1 -1
- package/_internal/{fc47f2da.js → 5f8f9454.js} +10 -12
- package/_internal/{fc47f2da.js.map → 5f8f9454.js.map} +1 -1
- package/_internal/{3f3de25e.js → 5fe09341.js} +3 -3
- package/_internal/{3f3de25e.js.map → 5fe09341.js.map} +1 -1
- package/_internal/{714809cc.js → 628468c4.js} +47 -46
- package/_internal/{714809cc.js.map → 628468c4.js.map} +1 -1
- package/_internal/{d3321a86.js → 6589b796.js} +2 -12
- package/_internal/{d3321a86.js.map → 6589b796.js.map} +1 -1
- package/_internal/{2368cb68.js → 65f91970.js} +43 -43
- package/_internal/{2368cb68.js.map → 65f91970.js.map} +1 -1
- package/_internal/66f691d3.js +74 -0
- package/_internal/{1921f348.js.map → 66f691d3.js.map} +1 -1
- package/_internal/{bdd41804.js → 68c10f98.js} +50 -41
- package/_internal/{bdd41804.js.map → 68c10f98.js.map} +1 -1
- package/_internal/{9cfa3e10.js → 690ca33e.js} +36 -35
- package/_internal/{9cfa3e10.js.map → 690ca33e.js.map} +1 -1
- package/_internal/6ca04271.js +108 -0
- package/_internal/{a67f26a8.js.map → 6ca04271.js.map} +1 -1
- package/_internal/{cdc3efab.js → 6da19518.js} +24 -32
- package/_internal/{cdc3efab.js.map → 6da19518.js.map} +1 -1
- package/_internal/{bcce6ceb.js → 7093ba23.js} +6 -4
- package/_internal/{bcce6ceb.js.map → 7093ba23.js.map} +1 -1
- package/_internal/{bc4cb4c0.js → 74a4a214.js} +29 -33
- package/_internal/{bc4cb4c0.js.map → 74a4a214.js.map} +1 -1
- package/_internal/{95a2e851.js → 76be70dd.js} +3 -3
- package/_internal/{95a2e851.js.map → 76be70dd.js.map} +1 -1
- package/_internal/{60f8e509.js → 7f54e947.js} +114 -101
- package/_internal/{60f8e509.js.map → 7f54e947.js.map} +1 -1
- package/_internal/{72407886.js → 84dfe68f.js} +50 -44
- package/_internal/{72407886.js.map → 84dfe68f.js.map} +1 -1
- package/_internal/{e2440593.js → 85e3a5ca.js} +32 -35
- package/_internal/{e2440593.js.map → 85e3a5ca.js.map} +1 -1
- package/_internal/{742d4906.js → 86aa4aa4.js} +60 -54
- package/_internal/{742d4906.js.map → 86aa4aa4.js.map} +1 -1
- package/_internal/{4e1dde79.js → 8ab42752.js} +25 -26
- package/_internal/{4e1dde79.js.map → 8ab42752.js.map} +1 -1
- package/_internal/{0f4b35b2.js → 95cfd814.js} +14 -20
- package/_internal/{0f4b35b2.js.map → 95cfd814.js.map} +1 -1
- package/_internal/{d6b3a3c0.js → 9a4dfad0.js} +48 -39
- package/_internal/{d6b3a3c0.js.map → 9a4dfad0.js.map} +1 -1
- package/_internal/{80e5c950.js → 9c9df5f2.js} +19 -19
- package/_internal/{80e5c950.js.map → 9c9df5f2.js.map} +1 -1
- package/_internal/{21aeb1c7.js → 9d1336a1.js} +6 -6
- package/_internal/{21aeb1c7.js.map → 9d1336a1.js.map} +1 -1
- package/_internal/{ee64ab0d.js → 9fdc715b.js} +37 -34
- package/_internal/{ee64ab0d.js.map → 9fdc715b.js.map} +1 -1
- package/_internal/a003602b.js +116 -0
- package/_internal/{32698205.js.map → a003602b.js.map} +1 -1
- package/_internal/{baa0a23b.js → a34639bd.js} +31 -29
- package/_internal/{baa0a23b.js.map → a34639bd.js.map} +1 -1
- package/_internal/{cb036703.js → a84f4981.js} +35 -26
- package/_internal/{cb036703.js.map → a84f4981.js.map} +1 -1
- package/_internal/{9210e2f3.js → b0a7a999.js} +10 -12
- package/_internal/{9210e2f3.js.map → b0a7a999.js.map} +1 -1
- package/_internal/{3646abc3.js → b0b2e33d.js} +117 -104
- package/_internal/{3646abc3.js.map → b0b2e33d.js.map} +1 -1
- package/_internal/{1aaa0341.js → b1af5979.js} +168 -160
- package/_internal/{1aaa0341.js.map → b1af5979.js.map} +1 -1
- package/_internal/{21cf275f.js → b477da26.js} +63 -57
- package/_internal/{21cf275f.js.map → b477da26.js.map} +1 -1
- package/_internal/{60923026.js → b8667090.js} +2 -2
- package/_internal/{60923026.js.map → b8667090.js.map} +1 -1
- package/_internal/{1e4b7ad5.js → bae266a9.js} +19 -18
- package/_internal/{1e4b7ad5.js.map → bae266a9.js.map} +1 -1
- package/_internal/{9d8130ae.js → be6da9b0.js} +69 -74
- package/_internal/{9d8130ae.js.map → be6da9b0.js.map} +1 -1
- package/_internal/{9452daf7.js → c0414b89.js} +10 -12
- package/_internal/{9452daf7.js.map → c0414b89.js.map} +1 -1
- package/_internal/{e566d502.js → c2388b10.js} +21 -17
- package/_internal/{e566d502.js.map → c2388b10.js.map} +1 -1
- package/_internal/{9cf0d217.js → c459a04d.js} +55 -54
- package/_internal/{9cf0d217.js.map → c459a04d.js.map} +1 -1
- package/_internal/c6ca7494.js +2 -0
- package/_internal/c6ca7494.js.map +1 -0
- package/_internal/{01bc8fcf.js → cdddaed8.js} +20 -18
- package/_internal/{01bc8fcf.js.map → cdddaed8.js.map} +1 -1
- package/_internal/{0361b7fb.js → d45e3f16.js} +2 -2
- package/_internal/{0361b7fb.js.map → d45e3f16.js.map} +1 -1
- package/_internal/{d66c4375.js → d5f316cb.js} +2 -2
- package/_internal/{d66c4375.js.map → d5f316cb.js.map} +1 -1
- package/_internal/{0a31e895.js → db4fdc7b.js} +63 -57
- package/_internal/{0a31e895.js.map → db4fdc7b.js.map} +1 -1
- package/_internal/dbe0cf24.js +75 -0
- package/_internal/{803945f7.js.map → dbe0cf24.js.map} +1 -1
- package/_internal/{4ceaf17c.js → e2afb13f.js} +2 -2
- package/_internal/{4ceaf17c.js.map → e2afb13f.js.map} +1 -1
- package/_internal/{b925072d.js → e52f0d3f.js} +37 -34
- package/_internal/{b925072d.js.map → e52f0d3f.js.map} +1 -1
- package/_internal/{aa8c5d9b.js → e6dd117e.js} +2 -2
- package/_internal/{aa8c5d9b.js.map → e6dd117e.js.map} +1 -1
- package/_internal/{077b7bef.js → ea04260d.js} +6 -6
- package/_internal/{077b7bef.js.map → ea04260d.js.map} +1 -1
- package/_internal/{77eb8ef3.js → eaa8b1d8.js} +39 -38
- package/_internal/{77eb8ef3.js.map → eaa8b1d8.js.map} +1 -1
- package/_internal/{aafcf80e.js → edab29ce.js} +61 -65
- package/_internal/{aafcf80e.js.map → edab29ce.js.map} +1 -1
- package/_internal/{38b3ecf3.js → f0900583.js} +54 -45
- package/_internal/{38b3ecf3.js.map → f0900583.js.map} +1 -1
- package/_internal/{881714a1.js → f23cdf84.js} +45 -51
- package/_internal/{881714a1.js.map → f23cdf84.js.map} +1 -1
- package/_internal/f52e979e.js +3 -0
- package/_internal/f52e979e.js.map +1 -0
- package/_internal/{1ce667fb.js → f5508d3d.js} +53 -51
- package/_internal/{1ce667fb.js.map → f5508d3d.js.map} +1 -1
- package/_internal/{43262bfe.js → f93fe83e.js} +11 -13
- package/_internal/{43262bfe.js.map → f93fe83e.js.map} +1 -1
- package/index.js +63 -63
- package/package.json +3 -11
- package/utils/index.js +3 -3
- package/_internal/1921f348.js +0 -72
- package/_internal/286fc728.js +0 -2
- package/_internal/286fc728.js.map +0 -1
- package/_internal/2d6bde7d.js +0 -209
- package/_internal/32698205.js +0 -107
- package/_internal/5ba8fae8.js +0 -120
- package/_internal/70cf341b.js +0 -117
- package/_internal/803945f7.js +0 -65
- package/_internal/a67f26a8.js +0 -98
- package/_internal/ac3bc511.js +0 -2
- package/_internal/ac3bc511.js.map +0 -1
- package/_internal/cc995526.js +0 -2
- package/_internal/cc995526.js.map +0 -1
- package/_internal/e2122a37.js +0 -3
- package/_internal/e2122a37.js.map +0 -1
- package/_internal/e53b5a39.js +0 -407
|
@@ -1,18 +1,15 @@
|
|
|
1
|
-
import { m as getRootClassName, n as forwardRef, _ as _extends, l as classNames, c as Size } from './d3321a86.js';
|
|
2
1
|
import { useRef } from 'react';
|
|
3
|
-
import {
|
|
2
|
+
import { m as getRootClassName, n as forwardRef, l as classNames, c as Size } from './6589b796.js';
|
|
3
|
+
import { u as useFocus } from './84dfe68f.js';
|
|
4
4
|
import { m as mergeRefs } from './f0d7d6ea.js';
|
|
5
5
|
import { u as useTheme } from './3181f000.js';
|
|
6
|
-
import { u as useDisableStateProps } from './
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
6
|
+
import { u as useDisableStateProps } from './b8667090.js';
|
|
7
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
|
+
import { TextField } from './b0b2e33d.js';
|
|
9
|
+
import { Dropdown } from './1ea72630.js';
|
|
10
|
+
import { C as Chip } from './85e3a5ca.js';
|
|
10
11
|
import { m as mdiClose } from './eaf6c45a.js';
|
|
11
|
-
import { I as Icon } from './
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Defines the props of the component.
|
|
15
|
-
*/
|
|
12
|
+
import { I as Icon } from './8ab42752.js';
|
|
16
13
|
|
|
17
14
|
/**
|
|
18
15
|
* Component display name.
|
|
@@ -86,54 +83,53 @@ const Autocomplete = forwardRef((props, ref) => {
|
|
|
86
83
|
const inputAnchorRef = useRef(null);
|
|
87
84
|
const textFieldRef = useRef(null);
|
|
88
85
|
useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
|
|
89
|
-
return /*#__PURE__*/
|
|
90
|
-
ref: ref
|
|
91
|
-
|
|
92
|
-
className: classNames(className, CLASSNAME$1)
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
86
|
+
return /*#__PURE__*/jsxs("div", {
|
|
87
|
+
ref: ref,
|
|
88
|
+
...forwardedProps,
|
|
89
|
+
className: classNames(className, CLASSNAME$1),
|
|
90
|
+
children: [/*#__PURE__*/jsx(TextField, {
|
|
91
|
+
...textFieldProps,
|
|
92
|
+
chips: chips,
|
|
93
|
+
error: error,
|
|
94
|
+
hasError: hasError,
|
|
95
|
+
helper: helper,
|
|
96
|
+
icon: icon,
|
|
97
|
+
inputRef: mergeRefs(inputAnchorRef, inputRef),
|
|
98
|
+
clearButtonProps: clearButtonProps,
|
|
99
|
+
...disabledStateProps,
|
|
100
|
+
isRequired: isRequired,
|
|
101
|
+
isValid: isValid,
|
|
102
|
+
label: label,
|
|
103
|
+
name: name,
|
|
104
|
+
onBlur: onBlur,
|
|
105
|
+
onChange: onChange,
|
|
106
|
+
onFocus: onFocus,
|
|
107
|
+
placeholder: placeholder,
|
|
108
|
+
textFieldRef: textFieldRef,
|
|
109
|
+
theme: theme,
|
|
110
|
+
value: value
|
|
111
|
+
}), /*#__PURE__*/jsx(Dropdown, {
|
|
112
|
+
anchorRef: anchorToInput ? inputAnchorRef : textFieldRef,
|
|
113
|
+
closeOnClick: closeOnClick,
|
|
114
|
+
closeOnClickAway: closeOnClickAway,
|
|
115
|
+
closeOnEscape: closeOnEscape,
|
|
116
|
+
focusAnchorOnClose: focusAnchorOnClose,
|
|
117
|
+
fitToAnchorWidth: fitToAnchorWidth,
|
|
118
|
+
isOpen: isOpen,
|
|
119
|
+
offset: offset,
|
|
120
|
+
onClose: onClose,
|
|
121
|
+
onInfiniteScroll: onInfiniteScroll,
|
|
122
|
+
placement: placement,
|
|
123
|
+
shouldFocusOnOpen: false,
|
|
124
|
+
theme: theme,
|
|
125
|
+
children: children
|
|
126
|
+
})]
|
|
127
|
+
});
|
|
128
128
|
});
|
|
129
129
|
Autocomplete.displayName = COMPONENT_NAME$1;
|
|
130
130
|
Autocomplete.className = CLASSNAME$1;
|
|
131
131
|
Autocomplete.defaultProps = DEFAULT_PROPS$1;
|
|
132
132
|
|
|
133
|
-
/**
|
|
134
|
-
* Defines the props of the component.
|
|
135
|
-
*/
|
|
136
|
-
|
|
137
133
|
/**
|
|
138
134
|
* Component display name.
|
|
139
135
|
*/
|
|
@@ -152,17 +148,17 @@ const DEFAULT_PROPS = {
|
|
|
152
148
|
closeOnEscape: true,
|
|
153
149
|
selectedChipRender(choice, index, onClear, isDisabled) {
|
|
154
150
|
const onClick = event => onClear && onClear(event, choice);
|
|
155
|
-
return /*#__PURE__*/
|
|
156
|
-
|
|
157
|
-
after: onClear && /*#__PURE__*/React.createElement(Icon, {
|
|
151
|
+
return /*#__PURE__*/jsx(Chip, {
|
|
152
|
+
after: onClear && /*#__PURE__*/jsx(Icon, {
|
|
158
153
|
icon: mdiClose,
|
|
159
154
|
size: Size.xxs
|
|
160
155
|
}),
|
|
161
156
|
isDisabled: isDisabled,
|
|
162
157
|
size: Size.s,
|
|
163
158
|
onAfterClick: onClick,
|
|
164
|
-
onClick: onClick
|
|
165
|
-
|
|
159
|
+
onClick: onClick,
|
|
160
|
+
children: choice
|
|
161
|
+
}, index);
|
|
166
162
|
},
|
|
167
163
|
values: []
|
|
168
164
|
};
|
|
@@ -218,9 +214,9 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
|
|
|
218
214
|
values = DEFAULT_PROPS.values,
|
|
219
215
|
...forwardedProps
|
|
220
216
|
} = otherProps;
|
|
221
|
-
return /*#__PURE__*/
|
|
222
|
-
ref: ref
|
|
223
|
-
|
|
217
|
+
return /*#__PURE__*/jsx(Autocomplete, {
|
|
218
|
+
ref: ref,
|
|
219
|
+
...forwardedProps,
|
|
224
220
|
anchorToInput: anchorToInput,
|
|
225
221
|
className: classNames(className, CLASSNAME),
|
|
226
222
|
name: name,
|
|
@@ -234,8 +230,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
|
|
|
234
230
|
helper: helper,
|
|
235
231
|
icon: icon,
|
|
236
232
|
inputRef: inputRef,
|
|
237
|
-
chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear))
|
|
238
|
-
|
|
233
|
+
chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear)),
|
|
234
|
+
...disabledStateProps,
|
|
239
235
|
isRequired: isRequired,
|
|
240
236
|
clearButtonProps: clearButtonProps,
|
|
241
237
|
isValid: isValid,
|
|
@@ -251,12 +247,13 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
|
|
|
251
247
|
offset: offset,
|
|
252
248
|
placement: placement,
|
|
253
249
|
fitToAnchorWidth: fitToAnchorWidth,
|
|
254
|
-
onInfiniteScroll: onInfiniteScroll
|
|
255
|
-
|
|
250
|
+
onInfiniteScroll: onInfiniteScroll,
|
|
251
|
+
children: children
|
|
252
|
+
});
|
|
256
253
|
});
|
|
257
254
|
AutocompleteMultiple.displayName = COMPONENT_NAME;
|
|
258
255
|
AutocompleteMultiple.className = CLASSNAME;
|
|
259
256
|
AutocompleteMultiple.defaultProps = DEFAULT_PROPS;
|
|
260
257
|
|
|
261
258
|
export { Autocomplete, AutocompleteMultiple };
|
|
262
|
-
//# sourceMappingURL=
|
|
259
|
+
//# sourceMappingURL=179a84d1.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"87bada02.js","sources":["../../src/components/autocomplete/Autocomplete.tsx","../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import { ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps, HasTheme {\n /**\n * Whether the suggestions list should display anchored to the input or to the wrapper.\n * @see {@link DropdownProps#anchorToInput}\n */\n anchorToInput?: boolean;\n /**\n * Props to pass to the clear button (minus those already set by the TextField props).\n * If not specified, the button won't be displayed.\n * @see {@link TextFieldProps#clearButtonProps}\n */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /**\n * Reference to the <input> or <textarea> element.\n * @see {@link TextFieldProps#inputRef}\n */\n inputRef?: TextFieldProps['inputRef'];\n /**\n * The offset that will be applied to the Dropdown position.\n * @see {@link DropdownProps#offset}\n */\n offset?: Offset;\n /**\n * The preferred Dropdown location against the anchor element.\n * @see {@link DropdownProps#placement}\n */\n placement?: Placement;\n /**\n * Manage dropdown width:\n * - `maxWidth`: dropdown not bigger than anchor\n * - `minWidth` or `true`: dropdown not smaller than anchor\n * - `width`: dropdown equal to the anchor.\n * @see {@link DropdownProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];\n /**\n * The error related to the component.\n * @see {@link TextFieldProps#error}\n */\n error?: string | ReactNode;\n /**\n * Whether the text field is displayed with error style or not.\n * @see {@link TextFieldProps#hasError}\n */\n hasError?: boolean;\n /**\n * Whether the text box should be focused upon closing the suggestions or not.\n */\n shouldFocusOnClose?: boolean;\n /**\n * The helper message of the text field.\n * @see {@link TextFieldProps#helper}\n */\n helper?: string;\n /**\n * The icon of the text field (SVG path).\n * @see {@link TextFieldProps#icon}\n */\n icon?: string;\n /**\n * Whether the component is disabled or not.\n * @see {@link TextFieldProps#isDisabled}\n */\n isDisabled?: boolean;\n /**\n * Whether the component is required or not.\n * @see {@link TextFieldProps#isRequired}\n */\n isRequired?: boolean;\n /**\n * Whether the text field is displayed with valid style or not.\n * @see {@link TextFieldProps#isValid}\n */\n isValid?: boolean;\n /**\n * The label of the text field displayed in a label tag.\n * @see {@link TextFieldProps#label}\n */\n label?: string;\n /**\n * The placeholder message of the text field.\n * @see {@link TextFieldProps#placeholder}\n */\n placeholder?: string;\n /** List of suggestions to display during autocomplete. */\n children: React.ReactNode;\n /**\n * The list of chips to be displayed before the text field input.\n */\n chips?: React.ReactNode;\n /**\n * The value of the text field.\n * @see {@link TextFieldProps#value}\n */\n value: string;\n /**\n * Whether the suggestions from the autocomplete should be displayed or not.\n * @see {@link DropdownProps#isOpen}\n */\n isOpen: boolean;\n /**\n * The native input name property.\n * @see {@link TextFieldProps#name}\n */\n name?: string;\n /**\n * Whether a click in the Autocomplete dropdown would close it or not.\n * @see {@link DropdownProps#closeOnClick}\n */\n closeOnClick?: boolean;\n /**\n * Whether a click anywhere out of the Autocomplete would close it or not.\n * @see {@link DropdownProps#closeOnClickAway}\n */\n closeOnClickAway?: boolean;\n /**\n * Whether an escape key press would close the Autocomplete or not.\n * @see {@link DropdownProps#closeOnEscape}\n */\n closeOnEscape?: boolean;\n /**\n * Whether the focus should go back on the anchor when dropdown closes and focus is within.\n * @see {@link DropdownProps#focusAnchorOnClose}\n */\n focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];\n /**\n * The function called on blur.\n * @see {@link TextFieldProps#onBlur}\n */\n onBlur?(event: React.FocusEvent): void;\n /**\n * On change callback.\n * @see {@link TextFieldProps#onChange}\n */\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n /**\n * The function called on close.\n * @see {@link DropdownProps#onClose}\n */\n onClose?(): void;\n /**\n * The function called on focus.\n * @see {@link TextFieldProps#onFocus}\n */\n onFocus?(event: React.FocusEvent): void;\n /**\n * The function called when the bottom of the dropdown is reached.\n * @see {@link DropdownProps#onInfiniteScroll}\n */\n onInfiniteScroll?(): void;\n /**\n * Props forwarded to the underlying TextField component.\n * Only the props not managed by the Autocomplete can be set.\n * @see {@link TextFieldProps}\n */\n textFieldProps?: Partial<TextFieldProps>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Autocomplete';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AutocompleteProps> = {\n anchorToInput: false,\n closeOnClick: false,\n closeOnClickAway: true,\n closeOnEscape: true,\n shouldFocusOnClose: false,\n};\n\n/**\n * Autocomplete component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput = DEFAULT_PROPS.anchorToInput,\n children,\n chips,\n className,\n closeOnClick = DEFAULT_PROPS.closeOnClick,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n error,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClose,\n onFocus,\n onInfiniteScroll,\n placeholder,\n placement,\n shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,\n theme = defaultTheme,\n value,\n textFieldProps = {},\n focusAnchorOnClose,\n ...forwardedProps\n } = otherProps;\n const inputAnchorRef = useRef<HTMLElement>(null);\n const textFieldRef = useRef(null);\n useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n <TextField\n {...textFieldProps}\n chips={chips}\n error={error}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}\n clearButtonProps={clearButtonProps}\n {...disabledStateProps}\n isRequired={isRequired}\n isValid={isValid}\n label={label}\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n placeholder={placeholder}\n textFieldRef={textFieldRef}\n theme={theme}\n value={value}\n />\n <Dropdown\n anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}\n closeOnClick={closeOnClick}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n focusAnchorOnClose={focusAnchorOnClose}\n fitToAnchorWidth={fitToAnchorWidth}\n isOpen={isOpen}\n offset={offset}\n onClose={onClose}\n onInfiniteScroll={onInfiniteScroll}\n placement={placement}\n shouldFocusOnOpen={false}\n theme={theme}\n >\n {children}\n </Dropdown>\n </div>\n );\n});\nAutocomplete.displayName = COMPONENT_NAME;\nAutocomplete.className = CLASSNAME;\nAutocomplete.defaultProps = DEFAULT_PROPS;\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\n\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteMultipleProps extends AutocompleteProps {\n /** Selected values. */\n values: any[];\n /** Alignment of the chips in the autocomplete. */\n chipsAlignment?: HorizontalAlignment;\n /** Selected value render function. Default: Renders the value inside of a Chip. */\n selectedChipRender(\n choice: any,\n index: number,\n onClear?: (event: React.MouseEvent, choice: any) => void,\n isDisabled?: boolean,\n ): ReactNode | string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AutocompleteMultiple';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {\n closeOnClickAway: true,\n closeOnEscape: true,\n selectedChipRender(choice, index, onClear, isDisabled) {\n const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n return (\n <Chip\n key={index}\n after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n isDisabled={isDisabled}\n size={Size.s}\n onAfterClick={onClick}\n onClick={onClick}\n >\n {choice}\n </Chip>\n );\n },\n values: [],\n};\n\n/**\n * AutocompleteMultiple component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput,\n children,\n // `chipsAlignment` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n chipsAlignment,\n className,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClear,\n onClose,\n onFocus,\n onInfiniteScroll,\n onKeyDown,\n placeholder,\n placement,\n selectedChipRender = DEFAULT_PROPS.selectedChipRender,\n shouldFocusOnClose,\n theme = defaultTheme,\n type,\n value,\n values = DEFAULT_PROPS.values,\n ...forwardedProps\n } = otherProps;\n\n return (\n <Autocomplete\n ref={ref}\n {...forwardedProps}\n anchorToInput={anchorToInput}\n className={classNames(className, CLASSNAME)}\n name={name}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n shouldFocusOnClose={shouldFocusOnClose}\n onFocus={onFocus}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={inputRef}\n chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}\n {...disabledStateProps}\n isRequired={isRequired}\n clearButtonProps={clearButtonProps}\n isValid={isValid}\n label={label}\n placeholder={placeholder}\n theme={theme}\n type={type}\n isOpen={isOpen}\n closeOnClick={false}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n onClose={onClose}\n offset={offset}\n placement={placement}\n fitToAnchorWidth={fitToAnchorWidth}\n onInfiniteScroll={onInfiniteScroll}\n >\n {children}\n </Autocomplete>\n );\n});\nAutocompleteMultiple.displayName = COMPONENT_NAME;\nAutocompleteMultiple.className = CLASSNAME;\nAutocompleteMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","defaultTheme","useTheme","disabledStateProps","otherProps","useDisableStateProps","children","chips","className","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","textFieldProps","focusAnchorOnClose","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","React","createElement","_extends","classNames","TextField","mergeRefs","Dropdown","anchorRef","shouldFocusOnOpen","displayName","defaultProps","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","Chip","key","after","Icon","mdiClose","size","Size","xxs","s","onAfterClick","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"179a84d1.js","sources":["../../src/components/autocomplete/Autocomplete.tsx","../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import { ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps, HasTheme {\n /**\n * Whether the suggestions list should display anchored to the input or to the wrapper.\n * @see {@link DropdownProps#anchorToInput}\n */\n anchorToInput?: boolean;\n /**\n * Props to pass to the clear button (minus those already set by the TextField props).\n * If not specified, the button won't be displayed.\n * @see {@link TextFieldProps#clearButtonProps}\n */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /**\n * Reference to the <input> or <textarea> element.\n * @see {@link TextFieldProps#inputRef}\n */\n inputRef?: TextFieldProps['inputRef'];\n /**\n * The offset that will be applied to the Dropdown position.\n * @see {@link DropdownProps#offset}\n */\n offset?: Offset;\n /**\n * The preferred Dropdown location against the anchor element.\n * @see {@link DropdownProps#placement}\n */\n placement?: Placement;\n /**\n * Manage dropdown width:\n * - `maxWidth`: dropdown not bigger than anchor\n * - `minWidth` or `true`: dropdown not smaller than anchor\n * - `width`: dropdown equal to the anchor.\n * @see {@link DropdownProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];\n /**\n * The error related to the component.\n * @see {@link TextFieldProps#error}\n */\n error?: string | ReactNode;\n /**\n * Whether the text field is displayed with error style or not.\n * @see {@link TextFieldProps#hasError}\n */\n hasError?: boolean;\n /**\n * Whether the text box should be focused upon closing the suggestions or not.\n */\n shouldFocusOnClose?: boolean;\n /**\n * The helper message of the text field.\n * @see {@link TextFieldProps#helper}\n */\n helper?: string;\n /**\n * The icon of the text field (SVG path).\n * @see {@link TextFieldProps#icon}\n */\n icon?: string;\n /**\n * Whether the component is disabled or not.\n * @see {@link TextFieldProps#isDisabled}\n */\n isDisabled?: boolean;\n /**\n * Whether the component is required or not.\n * @see {@link TextFieldProps#isRequired}\n */\n isRequired?: boolean;\n /**\n * Whether the text field is displayed with valid style or not.\n * @see {@link TextFieldProps#isValid}\n */\n isValid?: boolean;\n /**\n * The label of the text field displayed in a label tag.\n * @see {@link TextFieldProps#label}\n */\n label?: string;\n /**\n * The placeholder message of the text field.\n * @see {@link TextFieldProps#placeholder}\n */\n placeholder?: string;\n /** List of suggestions to display during autocomplete. */\n children: React.ReactNode;\n /**\n * The list of chips to be displayed before the text field input.\n */\n chips?: React.ReactNode;\n /**\n * The value of the text field.\n * @see {@link TextFieldProps#value}\n */\n value: string;\n /**\n * Whether the suggestions from the autocomplete should be displayed or not.\n * @see {@link DropdownProps#isOpen}\n */\n isOpen: boolean;\n /**\n * The native input name property.\n * @see {@link TextFieldProps#name}\n */\n name?: string;\n /**\n * Whether a click in the Autocomplete dropdown would close it or not.\n * @see {@link DropdownProps#closeOnClick}\n */\n closeOnClick?: boolean;\n /**\n * Whether a click anywhere out of the Autocomplete would close it or not.\n * @see {@link DropdownProps#closeOnClickAway}\n */\n closeOnClickAway?: boolean;\n /**\n * Whether an escape key press would close the Autocomplete or not.\n * @see {@link DropdownProps#closeOnEscape}\n */\n closeOnEscape?: boolean;\n /**\n * Whether the focus should go back on the anchor when dropdown closes and focus is within.\n * @see {@link DropdownProps#focusAnchorOnClose}\n */\n focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];\n /**\n * The function called on blur.\n * @see {@link TextFieldProps#onBlur}\n */\n onBlur?(event: React.FocusEvent): void;\n /**\n * On change callback.\n * @see {@link TextFieldProps#onChange}\n */\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n /**\n * The function called on close.\n * @see {@link DropdownProps#onClose}\n */\n onClose?(): void;\n /**\n * The function called on focus.\n * @see {@link TextFieldProps#onFocus}\n */\n onFocus?(event: React.FocusEvent): void;\n /**\n * The function called when the bottom of the dropdown is reached.\n * @see {@link DropdownProps#onInfiniteScroll}\n */\n onInfiniteScroll?(): void;\n /**\n * Props forwarded to the underlying TextField component.\n * Only the props not managed by the Autocomplete can be set.\n * @see {@link TextFieldProps}\n */\n textFieldProps?: Partial<TextFieldProps>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Autocomplete';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AutocompleteProps> = {\n anchorToInput: false,\n closeOnClick: false,\n closeOnClickAway: true,\n closeOnEscape: true,\n shouldFocusOnClose: false,\n};\n\n/**\n * Autocomplete component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput = DEFAULT_PROPS.anchorToInput,\n children,\n chips,\n className,\n closeOnClick = DEFAULT_PROPS.closeOnClick,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n error,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClose,\n onFocus,\n onInfiniteScroll,\n placeholder,\n placement,\n shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,\n theme = defaultTheme,\n value,\n textFieldProps = {},\n focusAnchorOnClose,\n ...forwardedProps\n } = otherProps;\n const inputAnchorRef = useRef<HTMLElement>(null);\n const textFieldRef = useRef(null);\n useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n <TextField\n {...textFieldProps}\n chips={chips}\n error={error}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}\n clearButtonProps={clearButtonProps}\n {...disabledStateProps}\n isRequired={isRequired}\n isValid={isValid}\n label={label}\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n placeholder={placeholder}\n textFieldRef={textFieldRef}\n theme={theme}\n value={value}\n />\n <Dropdown\n anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}\n closeOnClick={closeOnClick}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n focusAnchorOnClose={focusAnchorOnClose}\n fitToAnchorWidth={fitToAnchorWidth}\n isOpen={isOpen}\n offset={offset}\n onClose={onClose}\n onInfiniteScroll={onInfiniteScroll}\n placement={placement}\n shouldFocusOnOpen={false}\n theme={theme}\n >\n {children}\n </Dropdown>\n </div>\n );\n});\nAutocomplete.displayName = COMPONENT_NAME;\nAutocomplete.className = CLASSNAME;\nAutocomplete.defaultProps = DEFAULT_PROPS;\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\n\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteMultipleProps extends AutocompleteProps {\n /** Selected values. */\n values: any[];\n /** Alignment of the chips in the autocomplete. */\n chipsAlignment?: HorizontalAlignment;\n /** Selected value render function. Default: Renders the value inside of a Chip. */\n selectedChipRender(\n choice: any,\n index: number,\n onClear?: (event: React.MouseEvent, choice: any) => void,\n isDisabled?: boolean,\n ): ReactNode | string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AutocompleteMultiple';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {\n closeOnClickAway: true,\n closeOnEscape: true,\n selectedChipRender(choice, index, onClear, isDisabled) {\n const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n return (\n <Chip\n key={index}\n after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n isDisabled={isDisabled}\n size={Size.s}\n onAfterClick={onClick}\n onClick={onClick}\n >\n {choice}\n </Chip>\n );\n },\n values: [],\n};\n\n/**\n * AutocompleteMultiple component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput,\n children,\n // `chipsAlignment` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n chipsAlignment,\n className,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClear,\n onClose,\n onFocus,\n onInfiniteScroll,\n onKeyDown,\n placeholder,\n placement,\n selectedChipRender = DEFAULT_PROPS.selectedChipRender,\n shouldFocusOnClose,\n theme = defaultTheme,\n type,\n value,\n values = DEFAULT_PROPS.values,\n ...forwardedProps\n } = otherProps;\n\n return (\n <Autocomplete\n ref={ref}\n {...forwardedProps}\n anchorToInput={anchorToInput}\n className={classNames(className, CLASSNAME)}\n name={name}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n shouldFocusOnClose={shouldFocusOnClose}\n onFocus={onFocus}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={inputRef}\n chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}\n {...disabledStateProps}\n isRequired={isRequired}\n clearButtonProps={clearButtonProps}\n isValid={isValid}\n label={label}\n placeholder={placeholder}\n theme={theme}\n type={type}\n isOpen={isOpen}\n closeOnClick={false}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n onClose={onClose}\n offset={offset}\n placement={placement}\n fitToAnchorWidth={fitToAnchorWidth}\n onInfiniteScroll={onInfiniteScroll}\n >\n {children}\n </Autocomplete>\n );\n});\nAutocompleteMultiple.displayName = COMPONENT_NAME;\nAutocompleteMultiple.className = CLASSNAME;\nAutocompleteMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","defaultTheme","useTheme","disabledStateProps","otherProps","useDisableStateProps","children","chips","className","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","textFieldProps","focusAnchorOnClose","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","_jsxs","classNames","_jsx","TextField","mergeRefs","Dropdown","anchorRef","shouldFocusOnOpen","displayName","defaultProps","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","Chip","after","Icon","mdiClose","size","Size","xxs","s","onAfterClick","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":"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"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import { m as getRootClassName, n as forwardRef,
|
|
2
|
-
import { u as useHeadingLevel, D as DEFAULT_TYPOGRAPHY_BY_LEVEL } from './
|
|
3
|
-
export { H as HeadingLevelProvider } from './
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Defines the props of the component.
|
|
8
|
-
*/
|
|
1
|
+
import { m as getRootClassName, n as forwardRef, l as classNames } from './6589b796.js';
|
|
2
|
+
import { u as useHeadingLevel, D as DEFAULT_TYPOGRAPHY_BY_LEVEL } from './370bdaed.js';
|
|
3
|
+
export { H as HeadingLevelProvider } from './370bdaed.js';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
import { T as Text } from './0420e67b.js';
|
|
9
6
|
|
|
10
7
|
/**
|
|
11
8
|
* Component display name.
|
|
@@ -38,16 +35,18 @@ const Heading = forwardRef((props, ref) => {
|
|
|
38
35
|
headingElement
|
|
39
36
|
} = useHeadingLevel();
|
|
40
37
|
const computedHeadingElement = as || headingElement;
|
|
41
|
-
return /*#__PURE__*/
|
|
38
|
+
return /*#__PURE__*/jsx(Text, {
|
|
42
39
|
ref: ref,
|
|
43
40
|
className: classNames(className, CLASSNAME),
|
|
44
41
|
as: computedHeadingElement,
|
|
45
|
-
typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
|
|
46
|
-
|
|
42
|
+
typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement],
|
|
43
|
+
...forwardedProps,
|
|
44
|
+
children: children
|
|
45
|
+
});
|
|
47
46
|
});
|
|
48
47
|
Heading.displayName = COMPONENT_NAME;
|
|
49
48
|
Heading.className = CLASSNAME;
|
|
50
49
|
Heading.defaultProps = DEFAULT_PROPS;
|
|
51
50
|
|
|
52
51
|
export { Heading, useHeadingLevel };
|
|
53
|
-
//# sourceMappingURL=
|
|
52
|
+
//# sourceMappingURL=193521fa.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"193521fa.js","sources":["../../src/components/heading/Heading.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { HeadingElement } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { Text, TextProps } from '../text';\nimport { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './constants';\nimport { useHeadingLevel } from './useHeadingLevel';\n\n/**\n * Defines the props of the component.\n */\nexport interface HeadingProps extends Partial<TextProps> {\n /**\n * Display a specific heading level instead of the one provided by parent context provider.\n */\n as?: HeadingElement;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Heading';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS = {} as const;\n\n/**\n * Renders a heading component.\n * Extends the `Text` Component with the heading level automatically computed based on\n * the current level provided by the context.\n */\nexport const Heading = forwardRef<HeadingProps>((props, ref) => {\n const { children, as, className, ...forwardedProps } = props;\n const { headingElement } = useHeadingLevel();\n\n const computedHeadingElement = as || headingElement;\n return (\n <Text\n ref={ref}\n className={classNames(className, CLASSNAME)}\n as={computedHeadingElement}\n typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]}\n {...forwardedProps}\n >\n {children}\n </Text>\n );\n});\n\nHeading.displayName = COMPONENT_NAME;\nHeading.className = CLASSNAME;\nHeading.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Heading","forwardRef","props","ref","children","as","className","forwardedProps","headingElement","useHeadingLevel","computedHeadingElement","_jsx","Text","classNames","typography","DEFAULT_TYPOGRAPHY_BY_LEVEL","displayName","defaultProps"],"mappings":";;;;;;AAwBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,SAAS,CAAA;;AAEhC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAa,GAAG,EAAW,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAGC,UAAU,CAAe,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,EAAE;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGL,KAAK,CAAA;EAC5D,MAAM;AAAEM,IAAAA,cAAAA;GAAgB,GAAGC,eAAe,EAAE,CAAA;AAE5C,EAAA,MAAMC,sBAAsB,GAAGL,EAAE,IAAIG,cAAc,CAAA;EACnD,oBACIG,GAAA,CAACC,IAAI,EAAA;AACDT,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,SAAS,EAAEO,UAAU,CAACP,SAAS,EAAET,SAAS,CAAE;AAC5CQ,IAAAA,EAAE,EAAEK,sBAAuB;AAC3BI,IAAAA,UAAU,EAAEC,2BAA2B,CAACL,sBAAsB,CAAE;AAAA,IAAA,GAC5DH,cAAc;AAAAH,IAAAA,QAAA,EAEjBA,QAAAA;AAAQ,GACP,CAAC,CAAA;AAEf,CAAC,EAAC;AAEFJ,OAAO,CAACgB,WAAW,GAAGpB,cAAc,CAAA;AACpCI,OAAO,CAACM,SAAS,GAAGT,SAAS,CAAA;AAC7BG,OAAO,CAACiB,YAAY,GAAGlB,aAAa;;;;"}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import { m as getRootClassName, n as forwardRef,
|
|
2
|
-
import { h as handleBasicClasses } from './
|
|
1
|
+
import { m as getRootClassName, n as forwardRef, l as classNames, b as Theme, j as ColorPalette, c as Size } from './6589b796.js';
|
|
2
|
+
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
3
3
|
import { u as useTheme } from './3181f000.js';
|
|
4
|
-
import {
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
import { I as Icon } from './8ab42752.js';
|
|
5
6
|
|
|
6
7
|
const mdiDragVertical = 'M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';
|
|
7
8
|
|
|
8
|
-
/**
|
|
9
|
-
* Defines the props of the component.
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
9
|
/**
|
|
13
10
|
* Component display name.
|
|
14
11
|
*/
|
|
@@ -33,21 +30,22 @@ const DragHandle = forwardRef((props, ref) => {
|
|
|
33
30
|
theme = defaultTheme,
|
|
34
31
|
...forwardedProps
|
|
35
32
|
} = props;
|
|
36
|
-
return /*#__PURE__*/
|
|
37
|
-
ref: ref
|
|
38
|
-
|
|
33
|
+
return /*#__PURE__*/jsx("div", {
|
|
34
|
+
ref: ref,
|
|
35
|
+
...forwardedProps,
|
|
39
36
|
className: classNames(className, handleBasicClasses({
|
|
40
37
|
prefix: CLASSNAME,
|
|
41
38
|
theme
|
|
42
|
-
}))
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
39
|
+
})),
|
|
40
|
+
children: /*#__PURE__*/jsx(Icon, {
|
|
41
|
+
icon: mdiDragVertical,
|
|
42
|
+
color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
|
|
43
|
+
size: Size.xs
|
|
44
|
+
})
|
|
45
|
+
});
|
|
48
46
|
});
|
|
49
47
|
DragHandle.displayName = COMPONENT_NAME;
|
|
50
48
|
DragHandle.className = CLASSNAME;
|
|
51
49
|
|
|
52
50
|
export { DragHandle };
|
|
53
|
-
//# sourceMappingURL=
|
|
51
|
+
//# sourceMappingURL=1a90ea3d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"1a90ea3d.js","sources":["../../../lumx-icons/dist/esm/drag-vertical.js","../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["export const mdiDragVertical = 'M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';","import classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const DragHandle = forwardRef<DragHandleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { className, theme = defaultTheme, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n >\n <Icon\n icon={mdiDragVertical}\n color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}\n size={Size.xs}\n />\n </div>\n );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["mdiDragVertical","COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","defaultTheme","useTheme","className","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","children","Icon","icon","color","Theme","dark","ColorPalette","light","size","Size","xs","displayName"],"mappings":";;;;;;AAAO,MAAMA,eAAe,GAAG,wHAAwH;;ACcvJ;AACA;AACA;AACA,MAAMC,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,UAAU,GAAGC,UAAU,CAAkC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAClF,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IAAEC,SAAS;AAAEC,IAAAA,KAAK,GAAGH,YAAY;IAAE,GAAGI,cAAAA;AAAe,GAAC,GAAGN,KAAK,CAAA;AAEpE,EAAA,oBACIO,GAAA,CAAA,KAAA,EAAA;AACIN,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLK,cAAc;AAClBF,IAAAA,SAAS,EAAEI,UAAU,CAACJ,SAAS,EAAEK,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEd,SAAS;AAAES,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;IAAAM,QAAA,eAEnFJ,GAAA,CAACK,IAAI,EAAA;AACDC,MAAAA,IAAI,EAAEnB,eAAgB;AACtBoB,MAAAA,KAAK,EAAET,KAAK,KAAKU,KAAK,CAACC,IAAI,GAAGC,YAAY,CAACC,KAAK,GAAGD,YAAY,CAACD,IAAK;MACrEG,IAAI,EAAEC,IAAI,CAACC,EAAAA;KACd,CAAA;AAAC,GACD,CAAC,CAAA;AAEd,CAAC,EAAC;AACFvB,UAAU,CAACwB,WAAW,GAAG3B,cAAc,CAAA;AACvCG,UAAU,CAACM,SAAS,GAAGR,SAAS;;;;"}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
import { m as getRootClassName, l as classNames, c as Size, O as Orientation, n as forwardRef, b as Theme } from './6589b796.js';
|
|
2
|
+
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
3
|
+
import { u as useTheme, T as ThemeProvider } from './3181f000.js';
|
|
4
|
+
import { createContext, useState, useRef, useContext } from 'react';
|
|
5
|
+
import { u as useId } from './3a1facc0.js';
|
|
6
|
+
import { f as forwardRefPolymorphic, R as RawClickable } from './2c2b6a89.js';
|
|
7
|
+
import { u as useOverflowTooltipLabel, T as Text } from './0420e67b.js';
|
|
8
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
9
|
+
import { Tooltip } from './9a4dfad0.js';
|
|
10
|
+
import { P as Placement } from './4cd870a5.js';
|
|
11
|
+
import { I as Icon } from './8ab42752.js';
|
|
12
|
+
import { P as Popover } from './84dfe68f.js';
|
|
13
|
+
import { m as mdiChevronUp, a as mdiChevronDown } from './0b9c76cb.js';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Component display name.
|
|
17
|
+
*/
|
|
18
|
+
const COMPONENT_NAME$2 = 'NavigationItem';
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Component default class name and class prefix.
|
|
22
|
+
*/
|
|
23
|
+
const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
|
|
24
|
+
const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
|
|
25
|
+
const {
|
|
26
|
+
className,
|
|
27
|
+
icon,
|
|
28
|
+
label,
|
|
29
|
+
isCurrentPage,
|
|
30
|
+
as: Element = 'a',
|
|
31
|
+
...forwardedProps
|
|
32
|
+
} = props;
|
|
33
|
+
const theme = useTheme();
|
|
34
|
+
const {
|
|
35
|
+
tooltipLabel,
|
|
36
|
+
labelRef
|
|
37
|
+
} = useOverflowTooltipLabel(label);
|
|
38
|
+
return /*#__PURE__*/jsx("li", {
|
|
39
|
+
className: classNames(className, handleBasicClasses({
|
|
40
|
+
prefix: CLASSNAME$2,
|
|
41
|
+
theme
|
|
42
|
+
})),
|
|
43
|
+
children: /*#__PURE__*/jsx(Tooltip, {
|
|
44
|
+
label: tooltipLabel,
|
|
45
|
+
placement: Placement.TOP,
|
|
46
|
+
children: /*#__PURE__*/jsxs(RawClickable, {
|
|
47
|
+
as: Element,
|
|
48
|
+
className: handleBasicClasses({
|
|
49
|
+
prefix: `${CLASSNAME$2}__link`,
|
|
50
|
+
isSelected: isCurrentPage
|
|
51
|
+
}),
|
|
52
|
+
ref: ref,
|
|
53
|
+
"aria-current": isCurrentPage ? 'page' : undefined,
|
|
54
|
+
...forwardedProps,
|
|
55
|
+
children: [icon ? /*#__PURE__*/jsx(Icon, {
|
|
56
|
+
className: `${CLASSNAME$2}__icon`,
|
|
57
|
+
icon: icon,
|
|
58
|
+
size: Size.xs,
|
|
59
|
+
theme: theme
|
|
60
|
+
}) : null, /*#__PURE__*/jsx(Text, {
|
|
61
|
+
as: "span",
|
|
62
|
+
truncate: true,
|
|
63
|
+
className: `${CLASSNAME$2}__label`,
|
|
64
|
+
ref: labelRef,
|
|
65
|
+
children: label
|
|
66
|
+
})]
|
|
67
|
+
})
|
|
68
|
+
})
|
|
69
|
+
});
|
|
70
|
+
}), {
|
|
71
|
+
displayName: COMPONENT_NAME$2,
|
|
72
|
+
className: CLASSNAME$2
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
const NavigationContext = /*#__PURE__*/createContext({
|
|
76
|
+
orientation: Orientation.vertical
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Component display name.
|
|
81
|
+
*/
|
|
82
|
+
const COMPONENT_NAME$1 = 'NavigationSection';
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Component default class name and class prefix.
|
|
86
|
+
*/
|
|
87
|
+
const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
|
|
88
|
+
const NavigationSection = forwardRef((props, ref) => {
|
|
89
|
+
const {
|
|
90
|
+
children,
|
|
91
|
+
className,
|
|
92
|
+
label,
|
|
93
|
+
icon,
|
|
94
|
+
...forwardedProps
|
|
95
|
+
} = props;
|
|
96
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
97
|
+
const buttonRef = useRef(null);
|
|
98
|
+
const sectionId = useId();
|
|
99
|
+
const {
|
|
100
|
+
orientation
|
|
101
|
+
} = useContext(NavigationContext) || {};
|
|
102
|
+
const theme = useTheme();
|
|
103
|
+
const isDropdown = orientation === Orientation.horizontal;
|
|
104
|
+
return /*#__PURE__*/jsxs("li", {
|
|
105
|
+
className: classNames(className, CLASSNAME$1, CLASSNAME$2, handleBasicClasses({
|
|
106
|
+
prefix: CLASSNAME$2,
|
|
107
|
+
theme
|
|
108
|
+
})),
|
|
109
|
+
ref: ref,
|
|
110
|
+
children: [/*#__PURE__*/jsxs(RawClickable, {
|
|
111
|
+
as: "button",
|
|
112
|
+
...forwardedProps,
|
|
113
|
+
"aria-controls": sectionId,
|
|
114
|
+
"aria-expanded": isOpen,
|
|
115
|
+
className: classNames(`${CLASSNAME$2}__link`),
|
|
116
|
+
ref: buttonRef,
|
|
117
|
+
onClick: event => {
|
|
118
|
+
setIsOpen(!isOpen);
|
|
119
|
+
event.stopPropagation();
|
|
120
|
+
},
|
|
121
|
+
children: [icon ? /*#__PURE__*/jsx(Icon, {
|
|
122
|
+
className: `${CLASSNAME$2}__icon`,
|
|
123
|
+
icon: icon,
|
|
124
|
+
size: Size.xs
|
|
125
|
+
}) : null, /*#__PURE__*/jsx(Text, {
|
|
126
|
+
as: "span",
|
|
127
|
+
truncate: true,
|
|
128
|
+
className: `${CLASSNAME$2}__label`,
|
|
129
|
+
ref: ref,
|
|
130
|
+
children: label
|
|
131
|
+
}), /*#__PURE__*/jsx(Icon, {
|
|
132
|
+
className: classNames(`${CLASSNAME$2}__icon`, `${CLASSNAME$1}__chevron`),
|
|
133
|
+
icon: isOpen ? mdiChevronUp : mdiChevronDown
|
|
134
|
+
})]
|
|
135
|
+
}), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
|
|
136
|
+
anchorRef: buttonRef,
|
|
137
|
+
isOpen: isOpen,
|
|
138
|
+
placement: Placement.BOTTOM_START,
|
|
139
|
+
usePortal: false,
|
|
140
|
+
closeOnClickAway: true,
|
|
141
|
+
closeOnEscape: true,
|
|
142
|
+
onClick: () => setIsOpen(false),
|
|
143
|
+
onClose: () => setIsOpen(false),
|
|
144
|
+
zIndex: 996,
|
|
145
|
+
children: /*#__PURE__*/jsx(ThemeProvider, {
|
|
146
|
+
value: Theme.light,
|
|
147
|
+
children: /*#__PURE__*/jsx("ul", {
|
|
148
|
+
className: `${CLASSNAME$1}__drawer--popover`,
|
|
149
|
+
id: sectionId,
|
|
150
|
+
children: /*#__PURE__*/jsx(NavigationContext.Provider, {
|
|
151
|
+
value: {
|
|
152
|
+
orientation: Orientation.vertical
|
|
153
|
+
},
|
|
154
|
+
children: children
|
|
155
|
+
})
|
|
156
|
+
})
|
|
157
|
+
})
|
|
158
|
+
}) : /*#__PURE__*/jsx("ul", {
|
|
159
|
+
className: `${CLASSNAME$1}__drawer`,
|
|
160
|
+
id: sectionId,
|
|
161
|
+
children: children
|
|
162
|
+
}))]
|
|
163
|
+
});
|
|
164
|
+
});
|
|
165
|
+
NavigationSection.displayName = COMPONENT_NAME$1;
|
|
166
|
+
NavigationSection.className = CLASSNAME$1;
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* Component display name.
|
|
170
|
+
*/
|
|
171
|
+
const COMPONENT_NAME = 'Navigation';
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* Component default class name and class prefix.
|
|
175
|
+
*/
|
|
176
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* Component default props
|
|
180
|
+
*/
|
|
181
|
+
const DEFAULT_PROPS = {
|
|
182
|
+
orientation: Orientation.vertical
|
|
183
|
+
};
|
|
184
|
+
const Navigation = forwardRef((props, ref) => {
|
|
185
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
186
|
+
const {
|
|
187
|
+
children,
|
|
188
|
+
className,
|
|
189
|
+
theme = defaultTheme,
|
|
190
|
+
orientation = DEFAULT_PROPS.orientation,
|
|
191
|
+
...forwardedProps
|
|
192
|
+
} = props;
|
|
193
|
+
return /*#__PURE__*/jsx(ThemeProvider, {
|
|
194
|
+
value: theme,
|
|
195
|
+
children: /*#__PURE__*/jsx("nav", {
|
|
196
|
+
className: classNames(className, handleBasicClasses({
|
|
197
|
+
prefix: CLASSNAME,
|
|
198
|
+
theme,
|
|
199
|
+
orientation
|
|
200
|
+
})),
|
|
201
|
+
ref: ref,
|
|
202
|
+
...forwardedProps,
|
|
203
|
+
children: /*#__PURE__*/jsx(NavigationContext.Provider, {
|
|
204
|
+
value: {
|
|
205
|
+
orientation
|
|
206
|
+
},
|
|
207
|
+
children: /*#__PURE__*/jsx("ul", {
|
|
208
|
+
className: `${CLASSNAME}__list`,
|
|
209
|
+
children: children
|
|
210
|
+
})
|
|
211
|
+
})
|
|
212
|
+
})
|
|
213
|
+
});
|
|
214
|
+
});
|
|
215
|
+
Navigation.displayName = COMPONENT_NAME;
|
|
216
|
+
Navigation.className = CLASSNAME;
|
|
217
|
+
Navigation.defaultProps = DEFAULT_PROPS;
|
|
218
|
+
|
|
219
|
+
// Sub components
|
|
220
|
+
Navigation.Section = NavigationSection;
|
|
221
|
+
Navigation.Item = NavigationItem;
|
|
222
|
+
|
|
223
|
+
export { Navigation };
|
|
224
|
+
//# sourceMappingURL=1deba7d7.js.map
|