@bit.rhplus/ui2.module-dropdown-list 0.1.109 → 0.1.111
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +43 -12
- package/dist/index.js.map +1 -1
- package/index.jsx +121 -77
- package/package.json +6 -6
- /package/dist/{preview-1773758831838.js → preview-1773922763074.js} +0 -0
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import React, { useEffect, useRef, useCallback } from 'react';
|
|
4
4
|
import Input from 'antd/es/input';
|
|
5
5
|
import Select from 'antd/es/select';
|
|
6
|
+
import AutoComplete from 'antd/es/auto-complete';
|
|
6
7
|
import Button from 'antd/es/button';
|
|
7
8
|
import { SearchOutlined } from '@ant-design/icons';
|
|
8
9
|
import AgGrid from '@bit.rhplus/ag-grid';
|
|
@@ -14,10 +15,17 @@ import './ModuleInput.css';
|
|
|
14
15
|
const { Option } = Select;
|
|
15
16
|
const ModuleDropdownList = (props) => {
|
|
16
17
|
const { value, onChange, placeholder = 'Vyberte', disabled = false, readOnly = false, style = {}, width, maxRecentItems = 5, moduleDefinition, displayMode = 'recent', getContainer = () => document.body, // Vlastnost pro nastavení kontejneru modálu
|
|
18
|
+
// Free-text mód
|
|
19
|
+
allowFreeText = false, onFreeTextCommit, // (text: string) => void — voláno při Enter nebo blur bez výběru
|
|
20
|
+
onSearchChange, // (text: string) => void — sleduje aktuální text v inputu
|
|
21
|
+
initialSearchValue = '', // Počáteční text pro předvyplnění search inputu
|
|
17
22
|
} = props;
|
|
18
|
-
// zmena
|
|
19
23
|
// Interní stavy pro Select
|
|
20
24
|
const containerRef = useRef(null);
|
|
25
|
+
// Free-text mód — text který uživatel napsal do search inputu
|
|
26
|
+
const [freeTextInput, setFreeTextInput] = React.useState(initialSearchValue || '');
|
|
27
|
+
// Zabrání dvojímu spuštění onFreeTextCommit při výběru z AutoComplete dropdown
|
|
28
|
+
const justSelectedRef = useRef(false);
|
|
21
29
|
const processedStyle = typeof style === 'string' ? { width: style } : { ...style };
|
|
22
30
|
// Priorita nastavení šířky: 1. prop width, 2. style.width, 3. defaultní 100%
|
|
23
31
|
if (width) {
|
|
@@ -94,6 +102,11 @@ const ModuleDropdownList = (props) => {
|
|
|
94
102
|
}));
|
|
95
103
|
// Výběr správného seznamu podle displayMode
|
|
96
104
|
const selectOptions = displayMode === 'full' ? fullListOptions : recentItemsOptions;
|
|
105
|
+
// AutoComplete options pro free-text mód
|
|
106
|
+
const autoCompleteOptions = selectOptions.map((option) => ({
|
|
107
|
+
value: String(option.id),
|
|
108
|
+
label: String(option.name || ''),
|
|
109
|
+
}));
|
|
97
110
|
// Pokud nemáme definici modulu, zobrazíme prázdné pole
|
|
98
111
|
if (!moduleDefinition)
|
|
99
112
|
return _jsx("div", {});
|
|
@@ -114,18 +127,36 @@ const ModuleDropdownList = (props) => {
|
|
|
114
127
|
}
|
|
115
128
|
return `${value} (nenačteno)`;
|
|
116
129
|
};
|
|
117
|
-
return (_jsxs("div", { className: "module-input-container", style: processedStyle, ref: containerRef, children: [_jsxs("div", { className: "simple-select-container", children: [
|
|
130
|
+
return (_jsxs("div", { className: "module-input-container", style: processedStyle, ref: containerRef, children: [_jsxs("div", { className: "simple-select-container", children: [allowFreeText ? (_jsx(AutoComplete, { value: freeTextInput, options: autoCompleteOptions, style: { width: '100%', fontSize: '13px' }, placeholder: placeholder, disabled: disabled || readOnly, getPopupContainer: () => document.body, dropdownStyle: { zIndex: 9999 }, filterOption: (input, option) => String(option?.label || '').toLowerCase().includes(input.toLowerCase()), onChange: (text) => {
|
|
131
|
+
setFreeTextInput(text);
|
|
132
|
+
onSearchChange?.(text);
|
|
133
|
+
}, onSelect: (optionValue) => {
|
|
134
|
+
justSelectedRef.current = true;
|
|
135
|
+
const opt = selectOptions.find((o) => String(o.id) === optionValue);
|
|
136
|
+
if (opt) {
|
|
137
|
+
addToRecentItems(opt.fullItem);
|
|
138
|
+
if (typeof onChange === 'function') {
|
|
139
|
+
onChange(opt.id, opt.fullItem);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}, onKeyDown: (e) => {
|
|
143
|
+
if (e.key === 'Enter') {
|
|
144
|
+
e.preventDefault();
|
|
145
|
+
e.stopPropagation();
|
|
146
|
+
if (freeTextInput)
|
|
147
|
+
onFreeTextCommit?.(freeTextInput);
|
|
148
|
+
}
|
|
149
|
+
}, onBlur: () => {
|
|
150
|
+
if (justSelectedRef.current) {
|
|
151
|
+
justSelectedRef.current = false;
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
if (freeTextInput && !modalOpen) {
|
|
155
|
+
onFreeTextCommit?.(freeTextInput);
|
|
156
|
+
}
|
|
157
|
+
} })) : (_jsxs(Select, { value: value, onChange: handleSelectChange, className: "simple-select", placeholder: placeholder, disabled: disabled || readOnly, dropdownMatchSelectWidth: false, getPopupContainer: () => document.body, dropdownStyle: { zIndex: 9999 }, loading: displayMode === 'full' && isFullListLoading, style: { width: '100%', fontSize: '13px' }, maxTagTextLength: 20, filterOption: false,
|
|
118
158
|
// Vlastní tučná šipka s rotací
|
|
119
|
-
suffixIcon: _jsx("svg", { className: "select-arrow-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 4L6 8L10 4", stroke: "#bfbfbf", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
120
|
-
// Zde definujeme, jak bude vypadat vybraná hodnota v selectu (pouze název)
|
|
121
|
-
optionLabelProp: "label", listItemHeight: 32, listHeight: 256, dropdownRender: (menu) => (_jsxs("div", { className: "select-dropdown-container", children: [displayMode === 'full' && (_jsx("div", { className: "search-box", children: _jsx(Input, { placeholder: "Search", value: dropdownSearchQuery, onChange: (e) => handleDropdownSearchChange(e.target.value), prefix: _jsx(SearchOutlined, {}), className: "dropdown-search-input" }) })), menu, _jsxs("div", { className: "new-customer-item", children: [_jsx("div", { className: "plus-icon", children: "+" }), _jsx("span", { children: "New" })] })] })), children: [selectOptions.map((option) => {
|
|
122
|
-
const nameStr = String(option.name || '');
|
|
123
|
-
const firstChar = nameStr.charAt(0) || '?';
|
|
124
|
-
return (_jsx(Option, { value: option.id,
|
|
125
|
-
// Zde přidáváme label pro zobrazení jen názvu při vybrání položky
|
|
126
|
-
label: option.name, children: option.name }, option.id));
|
|
127
|
-
}), value &&
|
|
128
|
-
!selectOptions.some((option) => option.id === value) && (_jsx(Option, { value: value, label: displayValueText, children: renderDetailOption() }, value))] }), _jsx(Button, { icon: _jsx(SearchOutlined, {}), className: "search-button", onClick: openModal, type: "primary" })] }), _jsxs(DraggableModal, { width: moduleDefinition.modalWidth || 800, open: modalOpen, getContainer: getContainer, onCancel: closeModal, maskClosable: false, zIndex: 99999999, title: moduleDefinition.modalTitle ||
|
|
159
|
+
suffixIcon: _jsx("svg", { className: "select-arrow-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 4L6 8L10 4", stroke: "#bfbfbf", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), optionLabelProp: "label", listItemHeight: 32, listHeight: 256, dropdownRender: (menu) => (_jsxs("div", { className: "select-dropdown-container", children: [displayMode === 'full' && (_jsx("div", { className: "search-box", children: _jsx(Input, { placeholder: "Search", value: dropdownSearchQuery, onChange: (e) => handleDropdownSearchChange(e.target.value), prefix: _jsx(SearchOutlined, {}), className: "dropdown-search-input" }) })), menu, _jsxs("div", { className: "new-customer-item", children: [_jsx("div", { className: "plus-icon", children: "+" }), _jsx("span", { children: "New" })] })] })), children: [selectOptions.map((option) => (_jsx(Option, { value: option.id, label: option.name, children: option.name }, option.id))), value && !selectOptions.some((option) => option.id === value) && (_jsx(Option, { value: value, label: displayValueText, children: renderDetailOption() }, value))] })), _jsx(Button, { icon: _jsx(SearchOutlined, {}), className: "search-button", onClick: openModal, type: "primary" })] }), _jsxs(DraggableModal, { width: moduleDefinition.modalWidth || 800, open: modalOpen, getContainer: getContainer, onCancel: closeModal, maskClosable: false, zIndex: 99999999, title: moduleDefinition.modalTitle ||
|
|
129
160
|
`Vybrat z modulu: ${moduleDefinition.moduleName}`, footer: () => {
|
|
130
161
|
return [
|
|
131
162
|
_jsx(Button, { onClick: closeModal, style: { marginRight: '10px', width: 'auto' }, children: "Zav\u0159\u00EDt" }, "cancel"),
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,mBAAmB,CAAC;AAE3B,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;AAE1B,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,EAAE;IACnC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,EAAE,EACV,KAAK,EACL,cAAc,GAAG,CAAC,EAClB,gBAAgB,EAChB,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,4CAA4C;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}
|
package/index.jsx
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import React, { useEffect, useRef, useCallback } from 'react';
|
|
3
3
|
import Input from 'antd/es/input';
|
|
4
4
|
import Select from 'antd/es/select';
|
|
5
|
+
import AutoComplete from 'antd/es/auto-complete';
|
|
5
6
|
import Button from 'antd/es/button';
|
|
6
7
|
import { SearchOutlined } from '@ant-design/icons';
|
|
7
8
|
import AgGrid from '@bit.rhplus/ag-grid';
|
|
@@ -26,12 +27,22 @@ const ModuleDropdownList = (props) => {
|
|
|
26
27
|
moduleDefinition,
|
|
27
28
|
displayMode = 'recent',
|
|
28
29
|
getContainer = () => document.body, // Vlastnost pro nastavení kontejneru modálu
|
|
30
|
+
// Free-text mód
|
|
31
|
+
allowFreeText = false,
|
|
32
|
+
onFreeTextCommit, // (text: string) => void — voláno při Enter nebo blur bez výběru
|
|
33
|
+
onSearchChange, // (text: string) => void — sleduje aktuální text v inputu
|
|
34
|
+
initialSearchValue = '', // Počáteční text pro předvyplnění search inputu
|
|
29
35
|
} = props;
|
|
30
36
|
|
|
31
|
-
// zmena
|
|
32
37
|
// Interní stavy pro Select
|
|
33
38
|
const containerRef = useRef(null);
|
|
34
39
|
|
|
40
|
+
// Free-text mód — text který uživatel napsal do search inputu
|
|
41
|
+
const [freeTextInput, setFreeTextInput] = React.useState(initialSearchValue || '');
|
|
42
|
+
|
|
43
|
+
// Zabrání dvojímu spuštění onFreeTextCommit při výběru z AutoComplete dropdown
|
|
44
|
+
const justSelectedRef = useRef(false);
|
|
45
|
+
|
|
35
46
|
const processedStyle =
|
|
36
47
|
typeof style === 'string' ? { width: style } : { ...style };
|
|
37
48
|
|
|
@@ -147,6 +158,12 @@ const ModuleDropdownList = (props) => {
|
|
|
147
158
|
// Výběr správného seznamu podle displayMode
|
|
148
159
|
const selectOptions = displayMode === 'full' ? fullListOptions : recentItemsOptions;
|
|
149
160
|
|
|
161
|
+
// AutoComplete options pro free-text mód
|
|
162
|
+
const autoCompleteOptions = selectOptions.map((option) => ({
|
|
163
|
+
value: String(option.id),
|
|
164
|
+
label: String(option.name || ''),
|
|
165
|
+
}));
|
|
166
|
+
|
|
150
167
|
// Pokud nemáme definici modulu, zobrazíme prázdné pole
|
|
151
168
|
if (!moduleDefinition) return <div />;
|
|
152
169
|
|
|
@@ -191,96 +208,123 @@ const ModuleDropdownList = (props) => {
|
|
|
191
208
|
ref={containerRef}
|
|
192
209
|
>
|
|
193
210
|
<div className="simple-select-container">
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
211
|
+
{allowFreeText ? (
|
|
212
|
+
<AutoComplete
|
|
213
|
+
value={freeTextInput}
|
|
214
|
+
options={autoCompleteOptions}
|
|
215
|
+
style={{ width: '100%', fontSize: '13px' }}
|
|
216
|
+
placeholder={placeholder}
|
|
217
|
+
disabled={disabled || readOnly}
|
|
218
|
+
getPopupContainer={() => document.body}
|
|
219
|
+
dropdownStyle={{ zIndex: 9999 }}
|
|
220
|
+
filterOption={(input, option) =>
|
|
221
|
+
String(option?.label || '').toLowerCase().includes(input.toLowerCase())
|
|
222
|
+
}
|
|
223
|
+
onChange={(text) => {
|
|
224
|
+
setFreeTextInput(text);
|
|
225
|
+
onSearchChange?.(text);
|
|
226
|
+
}}
|
|
227
|
+
onSelect={(optionValue) => {
|
|
228
|
+
justSelectedRef.current = true;
|
|
229
|
+
const opt = selectOptions.find((o) => String(o.id) === optionValue);
|
|
230
|
+
if (opt) {
|
|
231
|
+
addToRecentItems(opt.fullItem);
|
|
232
|
+
if (typeof onChange === 'function') {
|
|
233
|
+
onChange(opt.id, opt.fullItem);
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}}
|
|
237
|
+
onKeyDown={(e) => {
|
|
238
|
+
if (e.key === 'Enter') {
|
|
239
|
+
e.preventDefault();
|
|
240
|
+
e.stopPropagation();
|
|
241
|
+
if (freeTextInput) onFreeTextCommit?.(freeTextInput);
|
|
242
|
+
}
|
|
243
|
+
}}
|
|
244
|
+
onBlur={() => {
|
|
245
|
+
if (justSelectedRef.current) {
|
|
246
|
+
justSelectedRef.current = false;
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
if (freeTextInput && !modalOpen) {
|
|
250
|
+
onFreeTextCommit?.(freeTextInput);
|
|
251
|
+
}
|
|
252
|
+
}}
|
|
253
|
+
/>
|
|
254
|
+
) : (
|
|
255
|
+
<Select
|
|
256
|
+
value={value}
|
|
257
|
+
onChange={handleSelectChange}
|
|
258
|
+
className="simple-select"
|
|
259
|
+
placeholder={placeholder}
|
|
260
|
+
disabled={disabled || readOnly}
|
|
261
|
+
dropdownMatchSelectWidth={false}
|
|
262
|
+
getPopupContainer={() => document.body}
|
|
263
|
+
dropdownStyle={{ zIndex: 9999 }}
|
|
264
|
+
loading={displayMode === 'full' && isFullListLoading}
|
|
265
|
+
style={{ width: '100%', fontSize: '13px' }}
|
|
266
|
+
maxTagTextLength={20}
|
|
267
|
+
filterOption={false}
|
|
268
|
+
// Vlastní tučná šipka s rotací
|
|
269
|
+
suffixIcon={
|
|
270
|
+
<svg
|
|
271
|
+
className="select-arrow-icon"
|
|
272
|
+
width="12"
|
|
273
|
+
height="12"
|
|
274
|
+
viewBox="0 0 12 12"
|
|
275
|
+
fill="none"
|
|
276
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
277
|
+
>
|
|
278
|
+
<path
|
|
279
|
+
d="M2 4L6 8L10 4"
|
|
280
|
+
stroke="#bfbfbf"
|
|
281
|
+
strokeWidth="2.5"
|
|
282
|
+
strokeLinecap="round"
|
|
283
|
+
strokeLinejoin="round"
|
|
284
|
+
/>
|
|
285
|
+
</svg>
|
|
286
|
+
}
|
|
287
|
+
optionLabelProp="label"
|
|
288
|
+
listItemHeight={32}
|
|
289
|
+
listHeight={256}
|
|
290
|
+
dropdownRender={(menu) => (
|
|
291
|
+
<div className="select-dropdown-container">
|
|
292
|
+
{displayMode === 'full' && (
|
|
293
|
+
<div className="search-box">
|
|
294
|
+
<Input
|
|
295
|
+
placeholder="Search"
|
|
296
|
+
value={dropdownSearchQuery}
|
|
297
|
+
onChange={(e) => handleDropdownSearchChange(e.target.value)}
|
|
298
|
+
prefix={<SearchOutlined />}
|
|
299
|
+
className="dropdown-search-input"
|
|
300
|
+
/>
|
|
301
|
+
</div>
|
|
302
|
+
)}
|
|
303
|
+
{menu}
|
|
304
|
+
<div className="new-customer-item">
|
|
305
|
+
<div className="plus-icon">+</div>
|
|
306
|
+
<span>New</span>
|
|
240
307
|
</div>
|
|
241
|
-
)}
|
|
242
|
-
{menu}
|
|
243
|
-
<div className="new-customer-item">
|
|
244
|
-
<div className="plus-icon">+</div>
|
|
245
|
-
<span>New</span>
|
|
246
308
|
</div>
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
{/* Seznam položek podle displayMode */}
|
|
251
|
-
{selectOptions.map((option) => {
|
|
252
|
-
const nameStr = String(option.name || '');
|
|
253
|
-
const firstChar = nameStr.charAt(0) || '?';
|
|
254
|
-
|
|
255
|
-
return (
|
|
309
|
+
)}
|
|
310
|
+
>
|
|
311
|
+
{selectOptions.map((option) => (
|
|
256
312
|
<Option
|
|
257
313
|
key={option.id}
|
|
258
314
|
value={option.id}
|
|
259
|
-
// Zde přidáváme label pro zobrazení jen názvu při vybrání položky
|
|
260
315
|
label={option.name}
|
|
261
316
|
>
|
|
262
317
|
{option.name}
|
|
263
|
-
{/* <div className="option-item">
|
|
264
|
-
<div className="option-avatar">{firstChar}</div>
|
|
265
|
-
<div className="option-content">
|
|
266
|
-
<div className="option-name">{option.name}</div>
|
|
267
|
-
<div className="option-email">
|
|
268
|
-
{option.fullItem.email || '-'}
|
|
269
|
-
</div>
|
|
270
|
-
</div>
|
|
271
|
-
</div> */}
|
|
272
318
|
</Option>
|
|
273
|
-
)
|
|
274
|
-
})}
|
|
319
|
+
))}
|
|
275
320
|
|
|
276
|
-
|
|
277
|
-
{value &&
|
|
278
|
-
!selectOptions.some((option) => option.id === value) && (
|
|
321
|
+
{value && !selectOptions.some((option) => option.id === value) && (
|
|
279
322
|
<Option key={value} value={value} label={displayValueText}>
|
|
280
323
|
{renderDetailOption()}
|
|
281
324
|
</Option>
|
|
282
325
|
)}
|
|
283
|
-
|
|
326
|
+
</Select>
|
|
327
|
+
)}
|
|
284
328
|
|
|
285
329
|
<Button
|
|
286
330
|
icon={<SearchOutlined />}
|
package/package.json
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bit.rhplus/ui2.module-dropdown-list",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.111",
|
|
4
4
|
"homepage": "https://bit.cloud/remote-scope/ui2/module-dropdown-list",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "remote-scope",
|
|
8
8
|
"name": "ui2/module-dropdown-list",
|
|
9
|
-
"version": "0.1.
|
|
9
|
+
"version": "0.1.111"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@ant-design/icons": "^5.4.0",
|
|
13
13
|
"antd": "^5.20.6",
|
|
14
14
|
"jotai": "^2.11.1",
|
|
15
15
|
"@tanstack/react-query": "^5.66.9",
|
|
16
|
-
"@bit.rhplus/ag-grid": "0.0.
|
|
17
|
-
"@bit.rhplus/draggable-modal": "0.0.
|
|
18
|
-
"@bit.rhplus/data": "0.0.
|
|
16
|
+
"@bit.rhplus/ag-grid": "0.0.117",
|
|
17
|
+
"@bit.rhplus/draggable-modal": "0.0.17",
|
|
18
|
+
"@bit.rhplus/data": "0.0.88"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@bitdev/react.react-env": "
|
|
21
|
+
"@bitdev/react.react-env": "5.0.5"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
File without changes
|