jb-select 7.1.4 → 7.2.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.
- package/README.md +19 -4
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.br +0 -0
- package/dist/index.cjs.js.gz +0 -0
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.br +0 -0
- package/dist/index.js.gz +0 -0
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.br +0 -0
- package/dist/index.umd.js.gz +0 -0
- package/dist/index.umd.js.map +1 -1
- package/dist/jb-option/jb-option.d.ts +1 -1
- package/dist/jb-option/jb-option.d.ts.map +1 -1
- package/dist/jb-option/utils.d.ts +2 -0
- package/dist/jb-option/utils.d.ts.map +1 -0
- package/dist/jb-select.d.ts +3 -1
- package/dist/jb-select.d.ts.map +1 -1
- package/lib/jb-option/jb-option.css +0 -1
- package/lib/jb-option/jb-option.ts +47 -6
- package/lib/jb-option/utils.ts +22 -0
- package/lib/jb-select.css +12 -3
- package/lib/jb-select.ts +160 -45
- package/package.json +2 -2
- package/react/dist/JBSelect.d.ts +1 -0
- package/react/dist/index.cjs.js.map +1 -1
- package/react/dist/index.js.map +1 -1
- package/react/dist/index.umd.js.map +1 -1
- package/react/lib/JBSelect.tsx +2 -0
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { JBSelectWebComponent } from '../jb-select';
|
|
2
2
|
import CSS from './jb-option.css';
|
|
3
3
|
import { renderHTML } from "./render";
|
|
4
|
-
import { JBOptionElements } from "./types";
|
|
4
|
+
import type { JBOptionElements } from "./types";
|
|
5
|
+
import { removeCheckboxNodes } from './utils';
|
|
5
6
|
|
|
6
7
|
//TODO: check for filter text to set visibility on mount
|
|
7
8
|
//TODO: add disable option (will be displayed but can not be select)
|
|
@@ -32,7 +33,10 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
|
|
|
32
33
|
return this.#selected;
|
|
33
34
|
}
|
|
34
35
|
get optionContent(): Node[] {
|
|
35
|
-
const optionNodes = this.#elements.contentWrapper.querySelector("slot")!.assignedNodes();
|
|
36
|
+
const optionNodes = this.#elements.contentWrapper.querySelector("slot")!.assignedNodes().map(x => x.cloneNode(true));
|
|
37
|
+
if (this.#SelectElement?.multiple) {
|
|
38
|
+
removeCheckboxNodes(optionNodes);
|
|
39
|
+
}
|
|
36
40
|
return optionNodes;
|
|
37
41
|
}
|
|
38
42
|
//TODO: add search hidden property for more accurate hidden and more personalized logic
|
|
@@ -98,9 +102,9 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
|
|
|
98
102
|
#initWebComponent() {
|
|
99
103
|
const shadowRoot = this.attachShadow({
|
|
100
104
|
mode: "open",
|
|
101
|
-
serializable:true
|
|
105
|
+
serializable: true
|
|
102
106
|
});
|
|
103
|
-
const html = `<style>${CSS}</style
|
|
107
|
+
const html = `<style>${CSS}</style>\n${renderHTML()}`;
|
|
104
108
|
const element = document.createElement("template");
|
|
105
109
|
element.innerHTML = html;
|
|
106
110
|
shadowRoot.appendChild(element.content.cloneNode(true));
|
|
@@ -112,6 +116,7 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
|
|
|
112
116
|
}
|
|
113
117
|
#registerEventListener() {
|
|
114
118
|
this.#elements.componentWrapper.addEventListener("click", this.#onOptionClick.bind(this));
|
|
119
|
+
this.addEventListener("change", this.#onInnerElementChange.bind(this), { passive: true });
|
|
115
120
|
}
|
|
116
121
|
//this event called on each connectedCallback so select could find it's option
|
|
117
122
|
#dispatchPlaceEvent() {
|
|
@@ -119,7 +124,7 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
|
|
|
119
124
|
this.dispatchEvent(event);
|
|
120
125
|
}
|
|
121
126
|
#initProp() {
|
|
122
|
-
this.value = (this.getAttribute("value") as TValue
|
|
127
|
+
this.value = (this.getAttribute("value") as TValue) ?? null;
|
|
123
128
|
}
|
|
124
129
|
static get observedAttributes() {
|
|
125
130
|
return ["value"];
|
|
@@ -135,14 +140,50 @@ export class JBOptionWebComponent<TValue> extends HTMLElement {
|
|
|
135
140
|
}
|
|
136
141
|
}
|
|
137
142
|
#onOptionClick() {
|
|
143
|
+
if (this.#isChangeCalled) {
|
|
144
|
+
this.#isChangeCalled = false;
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
138
147
|
if (!this.#selected) {
|
|
139
148
|
this.#dispatchSelectEvent();
|
|
149
|
+
const checkbox = this.#getInsideCheckbox();
|
|
150
|
+
if (checkbox && checkbox?.value !== true) {
|
|
151
|
+
checkbox.value = true;
|
|
152
|
+
}
|
|
153
|
+
} else if (this.#SelectElement?.multiple) {
|
|
154
|
+
this.#dispatchDeSelectEvent();
|
|
155
|
+
const checkbox = this.#getInsideCheckbox();
|
|
156
|
+
if (checkbox && checkbox?.value !== false) {
|
|
157
|
+
checkbox.value = false;
|
|
158
|
+
}
|
|
140
159
|
}
|
|
141
160
|
}
|
|
142
161
|
#dispatchSelectEvent() {
|
|
143
162
|
const event = new Event("select", { bubbles: true, cancelable: false, composed: true });
|
|
144
163
|
this.dispatchEvent(event);
|
|
145
164
|
}
|
|
165
|
+
#dispatchDeSelectEvent() {
|
|
166
|
+
const event = new Event("deselect", { bubbles: true, cancelable: false, composed: true });
|
|
167
|
+
this.dispatchEvent(event);
|
|
168
|
+
}
|
|
169
|
+
#getInsideCheckbox() {
|
|
170
|
+
return this.querySelector("jb-checkbox") as (Element & { value: boolean }) | null
|
|
171
|
+
}
|
|
172
|
+
#isChangeCalled = false;
|
|
173
|
+
#onInnerElementChange(e: Event) {
|
|
174
|
+
// biome-ignore lint/suspicious/noExplicitAny: <it happen after change so it must have a value>
|
|
175
|
+
if (typeof (e.target as any)?.value == "boolean") {
|
|
176
|
+
const value: boolean = (e.target as any)?.value;
|
|
177
|
+
if (value) {
|
|
178
|
+
this.#dispatchSelectEvent();
|
|
179
|
+
this.#isChangeCalled = true;
|
|
180
|
+
} else if (this.#SelectElement?.multiple) {
|
|
181
|
+
this.#dispatchDeSelectEvent();
|
|
182
|
+
this.#isChangeCalled = true;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
146
187
|
}
|
|
147
188
|
const myElementNotExists = !customElements.get("jb-option");
|
|
148
189
|
if (myElementNotExists) {
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export function removeCheckboxNodes(nodes: Node[]) {
|
|
2
|
+
const isChk = (n: Node) =>
|
|
3
|
+
n.nodeType === 1 &&
|
|
4
|
+
((n instanceof HTMLInputElement && n.type === 'checkbox') ||
|
|
5
|
+
(n as Element).tagName.toLowerCase() === 'jb-checkbox');
|
|
6
|
+
|
|
7
|
+
const walk = (n: Node, index:number) => {
|
|
8
|
+
// Array.from(n.childNodes).forEach(walk);
|
|
9
|
+
if (!isChk(n)) return;
|
|
10
|
+
if (n.childNodes.length) {
|
|
11
|
+
const fragmentElement = document.createDocumentFragment();
|
|
12
|
+
fragmentElement.append(...n.childNodes);
|
|
13
|
+
(n as Element).replaceWith(fragmentElement);
|
|
14
|
+
nodes[index] = fragmentElement
|
|
15
|
+
|
|
16
|
+
} else {
|
|
17
|
+
(n as Element).remove();
|
|
18
|
+
nodes.splice(index,1)
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
nodes.forEach(walk);
|
|
22
|
+
}
|
package/lib/jb-select.css
CHANGED
|
@@ -22,8 +22,9 @@
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
|
|
26
|
+
:host(:state(disabled)) {
|
|
27
|
+
.jb-select-web-component .select-box .end-section .clear-button {
|
|
27
28
|
display: none;
|
|
28
29
|
}
|
|
29
30
|
}
|
|
@@ -119,6 +120,12 @@
|
|
|
119
120
|
border-radius: 0;
|
|
120
121
|
display: flex;
|
|
121
122
|
align-items: center;
|
|
123
|
+
overflow: hidden;
|
|
124
|
+
white-space: nowrap;
|
|
125
|
+
|
|
126
|
+
.multiple-divider {
|
|
127
|
+
padding-inline-end: 0.25rem;
|
|
128
|
+
}
|
|
122
129
|
}
|
|
123
130
|
}
|
|
124
131
|
|
|
@@ -296,9 +303,11 @@
|
|
|
296
303
|
font-family: inherit;
|
|
297
304
|
font-size: var(--input-font-size);
|
|
298
305
|
color: var(--value-color);
|
|
299
|
-
|
|
306
|
+
|
|
307
|
+
&:disabled {
|
|
300
308
|
cursor: inherit;
|
|
301
309
|
}
|
|
310
|
+
|
|
302
311
|
&:focus {
|
|
303
312
|
outline: none;
|
|
304
313
|
}
|
package/lib/jb-select.ts
CHANGED
|
@@ -35,24 +35,38 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
35
35
|
#value: TValue | null = null;
|
|
36
36
|
#textValue = "";
|
|
37
37
|
// if user set value and current option list is not contain the option.
|
|
38
|
-
// we hold it in
|
|
38
|
+
// we hold it in #notFoundedValue and select value when option value get updated
|
|
39
39
|
#notFoundedValue: TValue | null = null;
|
|
40
40
|
#optionList = new Set<JBOptionWebComponent<TValue>>()
|
|
41
41
|
//keep selected option dom
|
|
42
42
|
#selectedOption: JBOptionWebComponent<TValue> | null = null;
|
|
43
|
+
/**
|
|
44
|
+
* selected option when multiple mode
|
|
45
|
+
*/
|
|
46
|
+
#selectedOptions = new Set<JBOptionWebComponent<TValue>>([]);
|
|
43
47
|
callbacks: JBSelectCallbacks<TValue> = {}
|
|
44
48
|
elements!: JBSelectElements;
|
|
45
|
-
#popoverPosition:PopoverPosition = "absolute"
|
|
49
|
+
#popoverPosition: PopoverPosition = "absolute"
|
|
46
50
|
/**
|
|
47
51
|
* how we set popover position
|
|
48
52
|
*/
|
|
49
|
-
get popoverPosition(){
|
|
53
|
+
get popoverPosition() {
|
|
50
54
|
return this.#popoverPosition
|
|
51
55
|
}
|
|
52
|
-
set popoverPosition(value:PopoverPosition|undefined){
|
|
53
|
-
if(value === undefined) return;
|
|
56
|
+
set popoverPosition(value: PopoverPosition | undefined) {
|
|
57
|
+
if (value === undefined) return;
|
|
54
58
|
this.#popoverPosition = value;
|
|
55
59
|
}
|
|
60
|
+
get multiple() {
|
|
61
|
+
return this.hasAttribute('multiple')
|
|
62
|
+
}
|
|
63
|
+
set multiple(value: boolean) {
|
|
64
|
+
if (value) {
|
|
65
|
+
this.setAttribute('multiple', '');
|
|
66
|
+
} else {
|
|
67
|
+
this.removeAttribute('multiple')
|
|
68
|
+
}
|
|
69
|
+
}
|
|
56
70
|
get value() {
|
|
57
71
|
if (this.#value !== null && this.#value !== undefined) {
|
|
58
72
|
return this.#value;
|
|
@@ -71,9 +85,12 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
71
85
|
this.elements.input.value = value;
|
|
72
86
|
this.#updateOptionList(value);
|
|
73
87
|
}
|
|
74
|
-
get selectedOptionTitle() {
|
|
88
|
+
get selectedOptionTitle(): string {
|
|
75
89
|
if (this.value) {
|
|
76
|
-
|
|
90
|
+
if (this.multiple) {
|
|
91
|
+
return Array.from(this.#selectedOptions).reduce((acc, x) => acc.concat(", ", x.optionContentText), "")
|
|
92
|
+
}
|
|
93
|
+
return this.#selectedOption?.optionContentText ?? "";
|
|
77
94
|
} else {
|
|
78
95
|
return "";
|
|
79
96
|
}
|
|
@@ -195,9 +212,9 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
195
212
|
}
|
|
196
213
|
}
|
|
197
214
|
#setupPopover() {
|
|
198
|
-
if(this.popoverPosition =="fixed"){
|
|
215
|
+
if (this.popoverPosition == "fixed") {
|
|
199
216
|
this.elements.optionListWrapper.bindTarget(this.elements.selectBox);
|
|
200
|
-
}else{
|
|
217
|
+
} else {
|
|
201
218
|
this.elements.optionListWrapper.unBindTarget();
|
|
202
219
|
}
|
|
203
220
|
}
|
|
@@ -268,6 +285,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
268
285
|
this.elements.clearButton.addEventListener("click", this.#onClearButtonClick.bind(this));
|
|
269
286
|
//events to work with options
|
|
270
287
|
this.addEventListener("select", this.#onOptionSelect.bind(this));
|
|
288
|
+
this.addEventListener("deselect", this.#onOptionDeselect.bind(this));
|
|
271
289
|
this.addEventListener("jb-option-connected", this.#onOptionConnected.bind(this));
|
|
272
290
|
this.elements.optionListSlot.addEventListener("slotchange", this.#onOptionSlotChange.bind(this));
|
|
273
291
|
|
|
@@ -361,6 +379,18 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
361
379
|
} else if (this.value) {
|
|
362
380
|
this.#setValueFromOutside(this.value);
|
|
363
381
|
}
|
|
382
|
+
if (this.multiple && Array.isArray(this.#value) && this.#selectedOptions.values.length< this.#value.length) {
|
|
383
|
+
//in this particular edge case our value is already set but some option maybe missing in first place and added later
|
|
384
|
+
const missing:JBOptionWebComponent<TValue>[] = [];
|
|
385
|
+
this.#optionList.forEach((op)=>{
|
|
386
|
+
if(op.selected == false && (this.#value as unknown[]).includes(op.value)){
|
|
387
|
+
missing.push(op);
|
|
388
|
+
}
|
|
389
|
+
});
|
|
390
|
+
if(missing.length>0){
|
|
391
|
+
this.#setSelectedOption(missing);
|
|
392
|
+
}
|
|
393
|
+
}
|
|
364
394
|
}
|
|
365
395
|
//when user set value by attribute or value prop directly we call this function
|
|
366
396
|
#setValueFromOutside(value: TValue | null | undefined): boolean {
|
|
@@ -368,37 +398,75 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
368
398
|
this.#setValue(null, null);
|
|
369
399
|
return true;
|
|
370
400
|
}
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
401
|
+
if (!this.multiple) {
|
|
402
|
+
// single value mode
|
|
403
|
+
let matchedOption: JBOptionWebComponent<TValue> | null = null;
|
|
404
|
+
for (const option of this.#optionList) {
|
|
405
|
+
// if we have value mapper we set selected value by object that match mapper
|
|
406
|
+
if (option.value == value) {
|
|
407
|
+
matchedOption = option;
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
if (matchedOption !== null) {
|
|
411
|
+
this.#setValue(matchedOption.value!, matchedOption);
|
|
412
|
+
return true;
|
|
413
|
+
} else {
|
|
414
|
+
this.#notFoundedValue = value;
|
|
415
|
+
return false;
|
|
376
416
|
}
|
|
377
|
-
}
|
|
378
|
-
if (matchedOption !== null) {
|
|
379
|
-
this.#setValue(matchedOption.value, matchedOption);
|
|
380
|
-
return true;
|
|
381
417
|
} else {
|
|
382
|
-
|
|
383
|
-
|
|
418
|
+
// in multiple values mode
|
|
419
|
+
if (!Array.isArray(value)) {
|
|
420
|
+
return false;
|
|
421
|
+
}
|
|
422
|
+
const selectedOptions: JBOptionWebComponent<TValue>[] = [];
|
|
423
|
+
this.#optionList.forEach((op) => {
|
|
424
|
+
if (value.includes(op.value)) {
|
|
425
|
+
selectedOptions.push(op)
|
|
426
|
+
} else {
|
|
427
|
+
// because in multi select `setValue` only append select and do not deselect options if they are not in list (it used internally when new item selected) so we de-select here.
|
|
428
|
+
op.selected = false;
|
|
429
|
+
this.#selectedOptions.delete(op)
|
|
430
|
+
}
|
|
431
|
+
});
|
|
432
|
+
if (selectedOptions.length == 0 && value.length > 0) {
|
|
433
|
+
this.#notFoundedValue = value;
|
|
434
|
+
} else {
|
|
435
|
+
this.#setValue(value, selectedOptions);
|
|
436
|
+
}
|
|
384
437
|
}
|
|
438
|
+
return false;
|
|
385
439
|
}
|
|
386
440
|
//null option mean deselect all
|
|
387
|
-
#
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
this
|
|
392
|
-
|
|
441
|
+
#setSelectedOption(options: JBOptionWebComponent<TValue>[]): void
|
|
442
|
+
#setSelectedOption(option: JBOptionWebComponent<TValue> | null): void
|
|
443
|
+
#setSelectedOption(option: JBOptionWebComponent<TValue>[] | JBOptionWebComponent<TValue> | null): void {
|
|
444
|
+
if (option)
|
|
445
|
+
if (this.multiple) {
|
|
446
|
+
const selectOption = (op: JBOptionWebComponent<TValue>) => {
|
|
447
|
+
op.selected = true;
|
|
448
|
+
this.#selectedOptions.add(op);
|
|
449
|
+
}
|
|
450
|
+
Array.isArray(option) ? option.forEach(op => { selectOption(op) }) : selectOption(option)
|
|
451
|
+
} else {
|
|
452
|
+
// single select
|
|
453
|
+
if (Array.isArray(option)) return;
|
|
454
|
+
this.#optionList.forEach((x) => { x.selected = false });
|
|
455
|
+
option.selected = true;
|
|
456
|
+
this.#selectedOption = option;
|
|
457
|
+
}
|
|
393
458
|
}
|
|
394
|
-
#setValue(value:
|
|
459
|
+
#setValue(value: null, option: null): void
|
|
460
|
+
#setValue(value: TValue, option: JBOptionWebComponent<TValue>): void
|
|
461
|
+
#setValue(value: TValue, option: JBOptionWebComponent<TValue>[]): void
|
|
462
|
+
#setValue(value: TValue | null, option: JBOptionWebComponent<TValue> | JBOptionWebComponent<TValue>[] | null): void {
|
|
395
463
|
this.#notFoundedValue = null;
|
|
396
464
|
this.#value = value;
|
|
397
|
-
if (value === null || value === undefined) {
|
|
465
|
+
if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
|
|
398
466
|
this.textValue = "";
|
|
399
|
-
this.#
|
|
467
|
+
this.#updateSelectedOptionDom();
|
|
400
468
|
//will deselect all option
|
|
401
|
-
this.#
|
|
469
|
+
this.#setSelectedOption(null);
|
|
402
470
|
this.elements.componentWrapper.classList.remove("--has-value");
|
|
403
471
|
//show placeholder when user empty data
|
|
404
472
|
if (!(this.isMobileDevice && this.isOpen)) {
|
|
@@ -406,8 +474,8 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
406
474
|
}
|
|
407
475
|
} else {
|
|
408
476
|
this.textValue = "";
|
|
409
|
-
this.#
|
|
410
|
-
this.#
|
|
477
|
+
Array.isArray(option) ? this.#setSelectedOption(option) : this.#setSelectedOption(option);
|
|
478
|
+
this.#updateSelectedOptionDom();
|
|
411
479
|
this.elements.componentWrapper.classList.add("--has-value");
|
|
412
480
|
//hide placeholder when user select data
|
|
413
481
|
if (!(this.isMobileDevice && this.isOpen)) {
|
|
@@ -487,11 +555,20 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
487
555
|
}
|
|
488
556
|
#onInputBlur(e: FocusEvent) {
|
|
489
557
|
const focusedElement = <Node>e.relatedTarget;
|
|
558
|
+
if (this.elements.arrowIcon.contains(focusedElement)) {
|
|
559
|
+
if (this.isOpen) {
|
|
560
|
+
this.blur();
|
|
561
|
+
return
|
|
562
|
+
} else {
|
|
563
|
+
return;
|
|
564
|
+
}
|
|
565
|
+
}
|
|
490
566
|
if (
|
|
491
567
|
this.elements.optionListWrapper.contains(focusedElement) ||
|
|
492
|
-
|
|
568
|
+
//focused element is children of slots of us like option content
|
|
569
|
+
this.contains(focusedElement)
|
|
493
570
|
) {
|
|
494
|
-
|
|
571
|
+
focusedElement.addEventListener("blur", (e) => { this.#onInputBlur(e as FocusEvent) }, { once: true, passive: true })
|
|
495
572
|
} else {
|
|
496
573
|
this.blur();
|
|
497
574
|
}
|
|
@@ -541,17 +618,34 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
541
618
|
//because jb-option may be in another shadow dom like jb-option-list we have to get first composed element as a target
|
|
542
619
|
const target = (e.composedPath()[0] as JBOptionWebComponent<TValue>);
|
|
543
620
|
if (target instanceof JBOptionWebComponent) {
|
|
544
|
-
const value = target.value
|
|
621
|
+
const value = target.value!;
|
|
545
622
|
this.#selectOption(value, target);
|
|
546
|
-
this.
|
|
623
|
+
if (!this.multiple) {
|
|
624
|
+
this.blur();
|
|
625
|
+
}
|
|
547
626
|
const dispatchedEvent = this.#dispatchOnChangeEvent();
|
|
548
627
|
if (dispatchedEvent.defaultPrevented) {
|
|
549
628
|
e.preventDefault();
|
|
550
|
-
this.#selectOption(prevValue
|
|
629
|
+
this.#selectOption(prevValue!, prevOption!);
|
|
551
630
|
}
|
|
552
631
|
}
|
|
553
632
|
|
|
554
633
|
}
|
|
634
|
+
#onOptionDeselect(e: Event) {
|
|
635
|
+
const target = e.target as JBOptionWebComponent<unknown>;
|
|
636
|
+
//this only works on multi mode
|
|
637
|
+
target.selected = false;
|
|
638
|
+
this.#selectedOptions.delete(e.target as JBOptionWebComponent<TValue>)
|
|
639
|
+
this.#updateSelectedOptionDom();
|
|
640
|
+
if(Array.isArray(this.#value)){
|
|
641
|
+
const index = this.#value.indexOf(target.value);
|
|
642
|
+
if(index !== -1) this.#value.splice(index,1);
|
|
643
|
+
}else if(this.value === target.value){
|
|
644
|
+
this.#value = null;
|
|
645
|
+
}
|
|
646
|
+
this.#value=this.#value
|
|
647
|
+
this.#checkValidity(true);
|
|
648
|
+
}
|
|
555
649
|
//called when an jb-Option connected to the dom
|
|
556
650
|
#onOptionConnected(e: CustomEvent) {
|
|
557
651
|
e.stopPropagation();
|
|
@@ -574,7 +668,14 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
574
668
|
}
|
|
575
669
|
}
|
|
576
670
|
|
|
577
|
-
#selectOption(value: TValue
|
|
671
|
+
#selectOption(value: TValue, optionDom: JBOptionWebComponent<TValue>) {
|
|
672
|
+
if(this.multiple){
|
|
673
|
+
if(Array.isArray(this.#value)){
|
|
674
|
+
value = [...this.#value,value] as TValue
|
|
675
|
+
}else{
|
|
676
|
+
value = [this.#value,value] as TValue
|
|
677
|
+
}
|
|
678
|
+
}
|
|
578
679
|
this.#setValue(value, optionDom);
|
|
579
680
|
this.#checkValidity(true);
|
|
580
681
|
}
|
|
@@ -599,31 +700,45 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
|
|
|
599
700
|
this.dispatchEvent(event);
|
|
600
701
|
return event;
|
|
601
702
|
}
|
|
602
|
-
#
|
|
703
|
+
#updateSelectedOptionDom() {
|
|
603
704
|
//when user select option or value changed in any condition we set selected option DOM
|
|
604
705
|
this.elements.selectedValueWrapper.innerHTML = "";
|
|
605
706
|
//if value was null or undefined it remain empty
|
|
606
|
-
if (value !== null && value !== undefined) {
|
|
607
|
-
const selectedOptionDom = this.#createSelectedValueDom(value);
|
|
707
|
+
if (this.#value !== null && this.#value !== undefined) {
|
|
708
|
+
const selectedOptionDom = this.#createSelectedValueDom(this.#value);
|
|
608
709
|
this.elements.selectedValueWrapper.appendChild(selectedOptionDom);
|
|
609
710
|
}
|
|
610
711
|
}
|
|
611
712
|
#createSelectedValueDom(value: TValue) {
|
|
612
713
|
if (typeof this.callbacks.getSelectedValueDOM == "function") {
|
|
714
|
+
//TODO: make it work with multiple select too
|
|
613
715
|
return this.callbacks.getSelectedValueDOM(value, this.#selectedOption);
|
|
614
716
|
} else {
|
|
615
717
|
return this.#createDefaultSelectedValueDom();
|
|
616
718
|
}
|
|
617
719
|
}
|
|
618
720
|
#createDefaultSelectedValueDom() {
|
|
619
|
-
//TODO: put some backup way for when we have value but no option provided
|
|
620
721
|
let contentNodes: Node[] = [];
|
|
621
|
-
if (this
|
|
622
|
-
|
|
722
|
+
if (this.multiple) {
|
|
723
|
+
const wrapperDiv = document.createElement('div');
|
|
724
|
+
wrapperDiv.style.display = "flex";
|
|
725
|
+
const divider = document.createElement("div");
|
|
726
|
+
divider.innerHTML = ",";
|
|
727
|
+
divider.classList.add("multiple-divider");
|
|
728
|
+
Array.from(this.#selectedOptions).forEach((x, i) => {
|
|
729
|
+
wrapperDiv.append(...(i !== 0 ? [divider.cloneNode(true)] : []), ...x.optionContent)
|
|
730
|
+
});
|
|
731
|
+
contentNodes = [wrapperDiv];
|
|
732
|
+
} else {
|
|
733
|
+
// on single select mode
|
|
734
|
+
if (this.#selectedOption) {
|
|
735
|
+
contentNodes = this.#selectedOption.optionContent;
|
|
736
|
+
}
|
|
623
737
|
}
|
|
738
|
+
|
|
624
739
|
const selectedOptionDom = document.createElement("div");
|
|
625
740
|
selectedOptionDom.classList.add("selected-value");
|
|
626
|
-
selectedOptionDom.append(...contentNodes
|
|
741
|
+
selectedOptionDom.append(...contentNodes);
|
|
627
742
|
return selectedOptionDom;
|
|
628
743
|
}
|
|
629
744
|
#getInsideValidation() {
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"web component",
|
|
17
17
|
"react component"
|
|
18
18
|
],
|
|
19
|
-
"version": "7.1
|
|
19
|
+
"version": "7.2.1",
|
|
20
20
|
"bugs": "https://github.com/javadbat/jb-select/issues",
|
|
21
21
|
"homepage": "https://javadbat.github.io/design-system/?path=/story/components-form-elements-jbselect",
|
|
22
22
|
"license": "MIT",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"jb-validation": ">=0.4.0",
|
|
39
39
|
"jb-button": ">=3.9.1",
|
|
40
40
|
"jb-popover": ">=1.7.1",
|
|
41
|
-
"jb-core":">=0.
|
|
41
|
+
"jb-core":">=0.27.2"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"jb-form":">=0.11.0"
|
package/react/dist/JBSelect.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export type JBSelectEventType<T> = T & {
|
|
|
11
11
|
export declare function JBSelect<TValue>(props: Props<TValue>): React.JSX.Element;
|
|
12
12
|
export type Props<TValue> = PropsWithChildren<EventProps & JBSelectAttributes<TValue>> & JBElementStandardProps<JBSelectWebComponent, keyof EventProps & JBSelectAttributes<TValue>> & {
|
|
13
13
|
ref?: React.ForwardedRef<JBSelectWebComponent | null | undefined>;
|
|
14
|
+
multiple?: boolean;
|
|
14
15
|
size?: SizeVariants;
|
|
15
16
|
name?: string;
|
|
16
17
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","names":[],"sources":["../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOptionList.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/events-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/attributes-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBSelect.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOption.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAY,+BAAuB,cAAA,WAAqB,CAAA,OAAM,QAAO;CAkBrE,MAAO,UAAM,kBAAY,KAAG;AAC1B,gCAAgB,KAAkD,MAAK,UAAA,QAAA,kBAAA,CACvE,OAKA,EAAA;sBACM,MAAA;MACF,QAAQ,WAAQ,MAAA,QAAa,MAAM,WAAU,CAC/C,SAAA,QAAA,aAAA,MAAA;CAEF,GAAA,CACE,MAAI;AAGN,sBAAU,MAAA;AACV,MAAA,QAAe,kBAAA,MAAA,YAAA,WACT,SAAQ,QAAO,YAAW,YAAc,MAAI,SAAU;KAGxD,MAAM,UACV;sBAEI,MAAA;AACF,MAAA,QAAA,kBAAA,MAAA,YAAA,WACE,SAAM,QAAa,YAAW,YAAA,MAAA,SAAA;CAKlC,GAAA,CAQF,MAAa;;;;;;;;;;AC1Cb,SAAgB,UAAU,SAA+C,OAAiB;AACxF,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,6BAAS,SAAS,UAAU,MAAM,SAAS;AAC3C,6BAAS,SAAS,SAAS,MAAM,QAAQ;AAC3C;;;;ACNA,SAAgB,qBAA6B,SAA+C,OAAiC;AAC3H,sBAAU,MAAG;AACX,MAAI,MAAM,YAAY,QAAQ,MAAM,mBAClC,SAAQ,SAAS,aAAa,WAAW,MAAM,QAAQ;eAClD,SAAA,gBAAA,UAAA;KAGL,MAAM,OAEV,EAAA;sBACM,MAAA;MACF,SAAQ,QACV,SAAA,QAAA,WAAA,OAAA,MAAA,kBAAA,CAAA;CAGF,GAAA,CACE,QAAI,eACF;sBACK,MAAA;MACL,MAAA,UAAe,QAAE,MAAA,iBACnB,SAAA,SAAA,aAAA,SAAA,MAAA,MAAA;MAGF,SAAe,SAAA,gBAAA,QAAA;KAGb,MAAA,eAAO;sBAEP,MAAA;AACE,MAAA,MAAM,aAAiB,QAAE,MAAA,oBAE7B,SAAe,SAAA,aAAA,YAAA,GAAA;MAEX,SAAQ,SAAS,gBAAa,WAAc;WAE5C,UACF,OACD,EAAA;AAED,sBAAU,MAAG;AACX,MAAI,MAAM,cAAW,QAAS,MAAI,qBAChC,SAAQ,SAAS,aAAa,cAAa,GAAE;MAE7C,SAAM,SAAY,gBAAS,aAAA;WAI3B,WACF,OACD,EAAA;AACD,sBAAU,MAAG;AACX,MAAI,MAAM,gBAAO,QAAA,MAAA,uBACf,SAAO,SAAS,aAAc,eAAe,MAAM,YAAC;WAEpD,aACF,OACD,EAAA;AACD,sBAAU,MAAG;AACX,MAAI,MAAA,sBAAiB,QAAA,MAAA,6BACnB,SAAQ,SAAQ,aAAc,sBAAK,MAAA,kBAAA;CAEtC,GAAE,CACH,MAAU;sBAEN,MAAA;AACF,MAAA,MAAA,MACE,UAAM,SAAA,aAAqB,SAAA,MAAA,MAAA;;;;;;;;;;;;;AC1EjC,SAAO,SAAA,OAAyB;CAIhC,MAAM,UAAU,kBAAiB,KAAoB;CACnD,MAAM,EAAA,UAAU,QAA6B,SAAK,SAAA,QAAA,KAAA,OAAA,qBAAA,OAAA,UAAA,SAAA,aAAA,mBAAA,gBAAA,OAAA,UAAA,GAAA,YAAA,GAAA;
|
|
1
|
+
{"version":3,"file":"index.cjs.js","names":[],"sources":["../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOptionList.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/events-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/attributes-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBSelect.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOption.tsx"],"sourcesContent":[],"mappings":"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"}
|
package/react/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOptionList.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/events-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/attributes-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBSelect.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOption.tsx"],"sourcesContent":[],"mappings":";;;;;AAEA,MAAY,+BAAuB,MAAA,WAAqB,CAAA,OAAM,QAAO;CAkBrE,MAAO,UAAM,OAAY,KAAG;AAC1B,qBAAgB,KAAkD,MAAK,UAAA,QAAA,kBAAA,CACvE,OAKA,EAAA;WACM,MAAA;MACF,QAAQ,WAAQ,MAAA,QAAa,MAAM,WAAU,CAC/C,SAAA,QAAA,aAAA,MAAA;CAEF,GAAA,CACE,MAAI;AAGN,WAAU,MAAA;AACV,MAAA,QAAe,kBAAA,MAAA,YAAA,WACT,SAAQ,QAAO,YAAW,YAAc,MAAI,SAAU;KAGxD,MAAM,UACV;WAEI,MAAA;AACF,MAAA,QAAA,kBAAA,MAAA,YAAA,WACE,SAAM,QAAa,YAAW,YAAA,MAAA,SAAA;CAKlC,GAAA,CAQF,MAAa;;;;;;;;;;AC1Cb,SAAgB,UAAU,SAA+C,OAAiB;AACxF,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,UAAS,SAAS,UAAU,MAAM,SAAS;AAC3C,UAAS,SAAS,SAAS,MAAM,QAAQ;AAC3C;;;;ACNA,SAAgB,qBAA6B,SAA+C,OAAiC;AAC3H,WAAU,MAAG;AACX,MAAI,MAAM,YAAY,QAAQ,MAAM,mBAClC,SAAQ,SAAS,aAAa,WAAW,MAAM,QAAQ;eAClD,SAAA,gBAAA,UAAA;KAGL,MAAM,OAEV,EAAA;WACM,MAAA;MACF,SAAQ,QACV,SAAA,QAAA,WAAA,OAAA,MAAA,kBAAA,CAAA;CAGF,GAAA,CACE,QAAI,eACF;WACK,MAAA;MACL,MAAA,UAAe,QAAE,MAAA,iBACnB,SAAA,SAAA,aAAA,SAAA,MAAA,MAAA;MAGF,SAAe,SAAA,gBAAA,QAAA;KAGb,MAAA,eAAO;WAEP,MAAA;AACE,MAAA,MAAM,aAAiB,QAAE,MAAA,oBAE7B,SAAe,SAAA,aAAA,YAAA,GAAA;MAEX,SAAQ,SAAS,gBAAa,WAAc;WAE5C,UACF,OACD,EAAA;AAED,WAAU,MAAG;AACX,MAAI,MAAM,cAAW,QAAS,MAAI,qBAChC,SAAQ,SAAS,aAAa,cAAa,GAAE;MAE7C,SAAM,SAAY,gBAAS,aAAA;WAI3B,WACF,OACD,EAAA;AACD,WAAU,MAAG;AACX,MAAI,MAAM,gBAAO,QAAA,MAAA,uBACf,SAAO,SAAS,aAAc,eAAe,MAAM,YAAC;WAEpD,aACF,OACD,EAAA;AACD,WAAU,MAAG;AACX,MAAI,MAAA,sBAAiB,QAAA,MAAA,6BACnB,SAAQ,SAAQ,aAAc,sBAAK,MAAA,kBAAA;CAEtC,GAAE,CACH,MAAU;WAEN,MAAA;AACF,MAAA,MAAA,MACE,UAAM,SAAA,aAAqB,SAAA,MAAA,MAAA;;;;;;;;;;;;;AC1EjC,SAAO,SAAA,OAAyB;CAIhC,MAAM,UAAU,OAAiB,KAAoB;CACnD,MAAM,EAAA,UAAU,QAA6B,SAAK,SAAA,QAAA,KAAA,OAAA,qBAAA,OAAA,UAAA,SAAA,aAAA,mBAAA,gBAAA,OAAA,UAAA,GAAA,YAAA,GAAA;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOptionList.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/events-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/attributes-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBSelect.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOption.tsx"],"sourcesContent":[],"mappings":";;;;;AAEA,MAAY,+BAAuB,MAAA,WAAqB,CAAA,OAAM,QAAO;CAkBrE,MAAO,UAAM,OAAY,KAAG;AAC1B,qBAAgB,KAAkD,MAAK,UAAA,QAAA,kBAAA,CACvE,OAKA,EAAA;WACM,MAAA;MACF,QAAQ,WAAQ,MAAA,QAAa,MAAM,WAAU,CAC/C,SAAA,QAAA,aAAA,MAAA;CAEF,GAAA,CACE,MAAI;AAGN,WAAU,MAAA;AACV,MAAA,QAAe,kBAAA,MAAA,YAAA,WACT,SAAQ,QAAO,YAAW,YAAc,MAAI,SAAU;KAGxD,MAAM,UACV;WAEI,MAAA;AACF,MAAA,QAAA,kBAAA,MAAA,YAAA,WACE,SAAM,QAAa,YAAW,YAAA,MAAA,SAAA;CAKlC,GAAA,CAQF,MAAa;;;;;;;;;;AC1Cb,SAAgB,UAAU,SAA+C,OAAiB;AACxF,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,UAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,UAAS,SAAS,UAAU,MAAM,SAAS;AAC3C,UAAS,SAAS,SAAS,MAAM,QAAQ;AAC3C;;;;ACNA,SAAgB,qBAA6B,SAA+C,OAAiC;AAC3H,WAAU,MAAG;AACX,MAAI,MAAM,YAAY,QAAQ,MAAM,mBAClC,SAAQ,SAAS,aAAa,WAAW,MAAM,QAAQ;eAClD,SAAA,gBAAA,UAAA;KAGL,MAAM,OAEV,EAAA;WACM,MAAA;MACF,SAAQ,QACV,SAAA,QAAA,WAAA,OAAA,MAAA,kBAAA,CAAA;CAGF,GAAA,CACE,QAAI,eACF;WACK,MAAA;MACL,MAAA,UAAe,QAAE,MAAA,iBACnB,SAAA,SAAA,aAAA,SAAA,MAAA,MAAA;MAGF,SAAe,SAAA,gBAAA,QAAA;KAGb,MAAA,eAAO;WAEP,MAAA;AACE,MAAA,MAAM,aAAiB,QAAE,MAAA,oBAE7B,SAAe,SAAA,aAAA,YAAA,GAAA;MAEX,SAAQ,SAAS,gBAAa,WAAc;WAE5C,UACF,OACD,EAAA;AAED,WAAU,MAAG;AACX,MAAI,MAAM,cAAW,QAAS,MAAI,qBAChC,SAAQ,SAAS,aAAa,cAAa,GAAE;MAE7C,SAAM,SAAY,gBAAS,aAAA;WAI3B,WACF,OACD,EAAA;AACD,WAAU,MAAG;AACX,MAAI,MAAM,gBAAO,QAAA,MAAA,uBACf,SAAO,SAAS,aAAc,eAAe,MAAM,YAAC;WAEpD,aACF,OACD,EAAA;AACD,WAAU,MAAG;AACX,MAAI,MAAA,sBAAiB,QAAA,MAAA,6BACnB,SAAQ,SAAQ,aAAc,sBAAK,MAAA,kBAAA;CAEtC,GAAE,CACH,MAAU;WAEN,MAAA;AACF,MAAA,MAAA,MACE,UAAM,SAAA,aAAqB,SAAA,MAAA,MAAA;;;;;;;;;;;;;AC1EjC,SAAO,SAAA,OAAyB;CAIhC,MAAM,UAAU,OAAiB,KAAoB;CACnD,MAAM,EAAA,UAAU,QAA6B,SAAK,SAAA,QAAA,KAAA,OAAA,qBAAA,OAAA,UAAA,SAAA,aAAA,mBAAA,gBAAA,OAAA,UAAA,GAAA,YAAA,GAAA;AAElD,qBAAA,KAAA,MAAA,QAAA,mBAAA,CACA,OAKA,EAAA;AACA,WAAA,SAAA;EACA;EAKF;EAAC;;;;;;;;;;;;;;;;;;;;;;;;ACrBD,SAAgB,SAAkB,OAA4B;CAC5D,MAAM,UAAU,OAAqC,KAAK;CAE1D,MAAM,EAAC,UAAU,KAAI,UAAW,GAAG,MAAK,GAAG;AAC3C,qBACE,KACA,MAAG,QAAI,mBAAiB,CAI1B,OAKF,EAAA;AAAC,wBAAA,MAAA,cAAA,aAAA;EAQO,OAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","names":[],"sources":["../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOptionList.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/events-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/attributes-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBSelect.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOption.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAY,+BAAuB,cAAA,WAAqB,CAAA,OAAM,QAAO;CAkBrE,MAAO,UAAM,kBAAY,KAAG;AAC1B,gCAAgB,KAAkD,MAAK,UAAA,QAAA,kBAAA,CACvE,OAKA,EAAA;sBACM,MAAA;MACF,QAAQ,WAAQ,MAAA,QAAa,MAAM,WAAU,CAC/C,SAAA,QAAA,aAAA,MAAA;CAEF,GAAA,CACE,MAAI;AAGN,sBAAU,MAAA;AACV,MAAA,QAAe,kBAAA,MAAA,YAAA,WACT,SAAQ,QAAO,YAAW,YAAc,MAAI,SAAU;KAGxD,MAAM,UACV;sBAEI,MAAA;AACF,MAAA,QAAA,kBAAA,MAAA,YAAA,WACE,SAAM,QAAa,YAAW,YAAA,MAAA,SAAA;CAKlC,GAAA,CAQF,MAAa;;;;;;;;;;AC1Cb,SAAgB,UAAU,SAA+C,OAAiB;AACxF,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,QAAQ,MAAM,QAAQ,KAAK;AAC7C,6BAAS,SAAS,SAAS,MAAM,QAAQ;AACzC,6BAAS,SAAS,UAAU,MAAM,SAAS;AAC3C,6BAAS,SAAS,SAAS,MAAM,QAAQ;AAC3C;;;;ACNA,SAAgB,qBAA6B,SAA+C,OAAiC;AAC3H,sBAAU,MAAG;AACX,MAAI,MAAM,YAAY,QAAQ,MAAM,mBAClC,SAAQ,SAAS,aAAa,WAAW,MAAM,QAAQ;eAClD,SAAA,gBAAA,UAAA;KAGL,MAAM,OAEV,EAAA;sBACM,MAAA;MACF,SAAQ,QACV,SAAA,QAAA,WAAA,OAAA,MAAA,kBAAA,CAAA;CAGF,GAAA,CACE,QAAI,eACF;sBACK,MAAA;MACL,MAAA,UAAe,QAAE,MAAA,iBACnB,SAAA,SAAA,aAAA,SAAA,MAAA,MAAA;MAGF,SAAe,SAAA,gBAAA,QAAA;KAGb,MAAA,eAAO;sBAEP,MAAA;AACE,MAAA,MAAM,aAAiB,QAAE,MAAA,oBAE7B,SAAe,SAAA,aAAA,YAAA,GAAA;MAEX,SAAQ,SAAS,gBAAa,WAAc;WAE5C,UACF,OACD,EAAA;AAED,sBAAU,MAAG;AACX,MAAI,MAAM,cAAW,QAAS,MAAI,qBAChC,SAAQ,SAAS,aAAa,cAAa,GAAE;MAE7C,SAAM,SAAY,gBAAS,aAAA;WAI3B,WACF,OACD,EAAA;AACD,sBAAU,MAAG;AACX,MAAI,MAAM,gBAAO,QAAA,MAAA,uBACf,SAAO,SAAS,aAAc,eAAe,MAAM,YAAC;WAEpD,aACF,OACD,EAAA;AACD,sBAAU,MAAG;AACX,MAAI,MAAA,sBAAiB,QAAA,MAAA,6BACnB,SAAQ,SAAQ,aAAc,sBAAK,MAAA,kBAAA;CAEtC,GAAE,CACH,MAAU;sBAEN,MAAA;AACF,MAAA,MAAA,MACE,UAAM,SAAA,aAAqB,SAAA,MAAA,MAAA;;;;;;;;;;;;;AC1EjC,SAAO,SAAA,OAAyB;CAIhC,MAAM,UAAU,kBAAiB,KAAoB;CACnD,MAAM,EAAA,UAAU,QAA6B,SAAK,SAAA,QAAA,KAAA,OAAA,qBAAA,OAAA,UAAA,SAAA,aAAA,mBAAA,gBAAA,OAAA,UAAA,GAAA,YAAA,GAAA;
|
|
1
|
+
{"version":3,"file":"index.umd.js","names":[],"sources":["../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOptionList.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/events-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/attributes-hook.ts","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBSelect.tsx","../../../../../../../../../../../../Home/NeveshtAfzar/work/Azad/source/design-system/design-system/web-component/jb-select/react/lib/JBOption.tsx"],"sourcesContent":[],"mappings":"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"}
|
package/react/lib/JBSelect.tsx
CHANGED
|
@@ -14,6 +14,7 @@ export type JBSelectEventType<T> = T & {
|
|
|
14
14
|
export function JBSelect<TValue>(props: Props<TValue>) {
|
|
15
15
|
const element = useRef<JBSelectWebComponent>(null);
|
|
16
16
|
const { onChange, onInit, onInput, onKeyUp, onLoad, ref, error, getSelectedValueDOM, label, required, message, placeholder, searchPlaceholder, validationList, value, hideClear, ...otherProps } = props;
|
|
17
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: <we need element for merging>
|
|
17
18
|
useImperativeHandle(
|
|
18
19
|
ref,
|
|
19
20
|
() => (element.current??undefined),
|
|
@@ -30,6 +31,7 @@ export function JBSelect<TValue>(props: Props<TValue>) {
|
|
|
30
31
|
|
|
31
32
|
export type Props<TValue> = PropsWithChildren<EventProps & JBSelectAttributes<TValue>> & JBElementStandardProps<JBSelectWebComponent, keyof EventProps & JBSelectAttributes<TValue>> & {
|
|
32
33
|
ref?: React.ForwardedRef<JBSelectWebComponent|null|undefined>,
|
|
34
|
+
multiple?:boolean
|
|
33
35
|
size?: SizeVariants,
|
|
34
36
|
name?: string,
|
|
35
37
|
disabled?:boolean,
|