@octaviaflow/core 3.0.18-beta.39 → 3.0.18-beta.40
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/components/MultiSelect/MultiSelect.d.ts +7 -0
- package/dist/components/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/dist/index.cjs +120 -41
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +120 -41
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -18148,6 +18148,8 @@ var MultiSelect = forwardRef60(
|
|
|
18148
18148
|
maxTags,
|
|
18149
18149
|
hideSelected = false,
|
|
18150
18150
|
showOverflowTooltips = false,
|
|
18151
|
+
allowSelectAll = false,
|
|
18152
|
+
selectAllLabel = "Select all",
|
|
18151
18153
|
id: providedId,
|
|
18152
18154
|
"aria-label": ariaLabel,
|
|
18153
18155
|
className,
|
|
@@ -18519,7 +18521,7 @@ var MultiSelect = forwardRef60(
|
|
|
18519
18521
|
}
|
|
18520
18522
|
)
|
|
18521
18523
|
] }),
|
|
18522
|
-
/* @__PURE__ */
|
|
18524
|
+
/* @__PURE__ */ jsxs68(
|
|
18523
18525
|
"div",
|
|
18524
18526
|
{
|
|
18525
18527
|
id: listboxId,
|
|
@@ -18527,47 +18529,124 @@ var MultiSelect = forwardRef60(
|
|
|
18527
18529
|
role: "listbox",
|
|
18528
18530
|
"aria-multiselectable": "true",
|
|
18529
18531
|
"aria-labelledby": labelId,
|
|
18530
|
-
children:
|
|
18531
|
-
|
|
18532
|
-
|
|
18533
|
-
|
|
18534
|
-
|
|
18535
|
-
|
|
18536
|
-
|
|
18537
|
-
|
|
18538
|
-
|
|
18539
|
-
|
|
18540
|
-
|
|
18541
|
-
|
|
18542
|
-
|
|
18543
|
-
|
|
18544
|
-
|
|
18545
|
-
|
|
18546
|
-
|
|
18547
|
-
|
|
18548
|
-
|
|
18549
|
-
|
|
18550
|
-
|
|
18551
|
-
|
|
18532
|
+
children: [
|
|
18533
|
+
allowSelectAll && filteredOptions.length > 0 && (() => {
|
|
18534
|
+
const enabled = filteredOptions.filter((o) => !o.disabled);
|
|
18535
|
+
const visibleValues = enabled.map((o) => o.value);
|
|
18536
|
+
const selectedVisible = visibleValues.filter(
|
|
18537
|
+
(v) => selectedSet.has(v)
|
|
18538
|
+
);
|
|
18539
|
+
const allVisibleSelected = enabled.length > 0 && selectedVisible.length === enabled.length;
|
|
18540
|
+
const someVisibleSelected = selectedVisible.length > 0 && !allVisibleSelected;
|
|
18541
|
+
const handleSelectAll = () => {
|
|
18542
|
+
if (allVisibleSelected) {
|
|
18543
|
+
commit(
|
|
18544
|
+
selectedValues.filter(
|
|
18545
|
+
(v) => !visibleValues.includes(v)
|
|
18546
|
+
)
|
|
18547
|
+
);
|
|
18548
|
+
} else {
|
|
18549
|
+
const merged = Array.from(
|
|
18550
|
+
/* @__PURE__ */ new Set([...selectedValues, ...visibleValues])
|
|
18551
|
+
);
|
|
18552
|
+
commit(maxTags ? merged.slice(0, maxTags) : merged);
|
|
18553
|
+
}
|
|
18554
|
+
};
|
|
18555
|
+
return /* @__PURE__ */ jsxs68(
|
|
18556
|
+
"div",
|
|
18557
|
+
{
|
|
18558
|
+
className: cn(
|
|
18559
|
+
"ods-multiselect__option",
|
|
18560
|
+
"ods-multiselect__option--select-all",
|
|
18561
|
+
allVisibleSelected && "ods-multiselect__option--selected"
|
|
18562
|
+
),
|
|
18563
|
+
role: "option",
|
|
18564
|
+
"aria-selected": allVisibleSelected,
|
|
18565
|
+
onClick: handleSelectAll,
|
|
18566
|
+
children: [
|
|
18567
|
+
/* @__PURE__ */ jsxs68(
|
|
18568
|
+
"span",
|
|
18569
|
+
{
|
|
18570
|
+
className: cn(
|
|
18571
|
+
"ods-multiselect__select-all-box",
|
|
18572
|
+
allVisibleSelected && "ods-multiselect__select-all-box--checked",
|
|
18573
|
+
someVisibleSelected && "ods-multiselect__select-all-box--indeterminate"
|
|
18574
|
+
),
|
|
18575
|
+
"aria-hidden": "true",
|
|
18576
|
+
children: [
|
|
18577
|
+
allVisibleSelected && /* @__PURE__ */ jsx70(
|
|
18578
|
+
"svg",
|
|
18579
|
+
{
|
|
18580
|
+
width: "10",
|
|
18581
|
+
height: "10",
|
|
18582
|
+
viewBox: "0 0 12 12",
|
|
18583
|
+
fill: "none",
|
|
18584
|
+
children: /* @__PURE__ */ jsx70(
|
|
18585
|
+
"path",
|
|
18586
|
+
{
|
|
18587
|
+
d: "m2.5 6.2 2.4 2.4L9.5 4",
|
|
18588
|
+
stroke: "currentColor",
|
|
18589
|
+
strokeWidth: "1.6",
|
|
18590
|
+
strokeLinecap: "round",
|
|
18591
|
+
strokeLinejoin: "round"
|
|
18592
|
+
}
|
|
18593
|
+
)
|
|
18594
|
+
}
|
|
18595
|
+
),
|
|
18596
|
+
someVisibleSelected && /* @__PURE__ */ jsx70("span", { className: "ods-multiselect__select-all-dash" })
|
|
18597
|
+
]
|
|
18598
|
+
}
|
|
18552
18599
|
),
|
|
18553
|
-
|
|
18554
|
-
|
|
18555
|
-
|
|
18556
|
-
|
|
18557
|
-
|
|
18558
|
-
|
|
18559
|
-
|
|
18560
|
-
|
|
18561
|
-
|
|
18562
|
-
|
|
18563
|
-
|
|
18564
|
-
|
|
18565
|
-
|
|
18566
|
-
)
|
|
18567
|
-
|
|
18568
|
-
opt.
|
|
18569
|
-
|
|
18570
|
-
|
|
18600
|
+
/* @__PURE__ */ jsx70("span", { className: "ods-multiselect__option-text", children: /* @__PURE__ */ jsxs68("span", { className: "ods-multiselect__option-label", children: [
|
|
18601
|
+
allVisibleSelected ? "Deselect all" : selectAllLabel,
|
|
18602
|
+
query.trim() && ` (${enabled.length} match${enabled.length === 1 ? "" : "es"})`
|
|
18603
|
+
] }) })
|
|
18604
|
+
]
|
|
18605
|
+
}
|
|
18606
|
+
);
|
|
18607
|
+
})(),
|
|
18608
|
+
filteredOptions.length > 0 ? filteredOptions.map((opt, idx) => {
|
|
18609
|
+
const isSelected = selectedSet.has(opt.value);
|
|
18610
|
+
const optionId = `${baseId}-opt-${opt.value}`;
|
|
18611
|
+
const tooltipContent = opt.description ? /* @__PURE__ */ jsxs68(Fragment32, { children: [
|
|
18612
|
+
/* @__PURE__ */ jsx70("span", { children: opt.label }),
|
|
18613
|
+
/* @__PURE__ */ jsx70("br", {}),
|
|
18614
|
+
/* @__PURE__ */ jsx70("span", { style: { opacity: 0.75 }, children: opt.description })
|
|
18615
|
+
] }) : opt.label;
|
|
18616
|
+
return /* @__PURE__ */ jsx70(
|
|
18617
|
+
OverflowTooltip2,
|
|
18618
|
+
{
|
|
18619
|
+
enabled: showOverflowTooltips,
|
|
18620
|
+
content: tooltipContent,
|
|
18621
|
+
children: /* @__PURE__ */ jsxs68(
|
|
18622
|
+
"div",
|
|
18623
|
+
{
|
|
18624
|
+
id: optionId,
|
|
18625
|
+
className: cn(
|
|
18626
|
+
"ods-multiselect__option",
|
|
18627
|
+
idx === activeIdx && "ods-multiselect__option--highlighted",
|
|
18628
|
+
isSelected && "ods-multiselect__option--selected",
|
|
18629
|
+
opt.disabled && "ods-multiselect__option--disabled"
|
|
18630
|
+
),
|
|
18631
|
+
role: "option",
|
|
18632
|
+
"aria-selected": isSelected,
|
|
18633
|
+
"aria-disabled": opt.disabled || void 0,
|
|
18634
|
+
onClick: () => !opt.disabled && toggleValue(opt.value),
|
|
18635
|
+
onMouseEnter: () => setActiveIdx(idx),
|
|
18636
|
+
children: [
|
|
18637
|
+
opt.icon && /* @__PURE__ */ jsx70("span", { className: "ods-multiselect__option-icon", children: opt.icon }),
|
|
18638
|
+
/* @__PURE__ */ jsxs68("span", { className: "ods-multiselect__option-text", children: [
|
|
18639
|
+
/* @__PURE__ */ jsx70("span", { className: "ods-multiselect__option-label", children: opt.label }),
|
|
18640
|
+
opt.description && /* @__PURE__ */ jsx70("span", { className: "ods-multiselect__option-desc", children: opt.description })
|
|
18641
|
+
] })
|
|
18642
|
+
]
|
|
18643
|
+
}
|
|
18644
|
+
)
|
|
18645
|
+
},
|
|
18646
|
+
opt.value
|
|
18647
|
+
);
|
|
18648
|
+
}) : /* @__PURE__ */ jsx70("div", { className: "ods-multiselect__empty", children: "No results" })
|
|
18649
|
+
]
|
|
18571
18650
|
}
|
|
18572
18651
|
)
|
|
18573
18652
|
]
|