@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
|
@@ -39,6 +39,13 @@ export interface MultiSelectProps extends DivPropsBase {
|
|
|
39
39
|
* convention. The Tooltip's content surfaces the full label (and the
|
|
40
40
|
* option's description, when present). */
|
|
41
41
|
showOverflowTooltips?: boolean;
|
|
42
|
+
/** Show a "Select all" toggle row at the top of the dropdown. When the
|
|
43
|
+
* list is filtered by a search query, the toggle acts on the visible
|
|
44
|
+
* subset (so users can bulk-select narrow result sets without clearing
|
|
45
|
+
* prior selections). Tri-state: empty / indeterminate / checked. */
|
|
46
|
+
allowSelectAll?: boolean;
|
|
47
|
+
/** Label for the select-all row. Default "Select all". */
|
|
48
|
+
selectAllLabel?: ReactNode;
|
|
42
49
|
}
|
|
43
50
|
export declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
44
51
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAG7B,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,YAAY,GAAG,IAAI,CACtB,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,cAAc,GAAG,UAAU,CACzC,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;2CAIuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;+CAI2C;IAC3C,oBAAoB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAG7B,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,YAAY,GAAG,IAAI,CACtB,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,cAAc,GAAG,UAAU,CACzC,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;2CAIuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;+CAI2C;IAC3C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;yEAGqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAyBD,eAAO,MAAM,WAAW,6GA0oBvB,CAAC"}
|
package/dist/index.cjs
CHANGED
|
@@ -18332,6 +18332,8 @@ var MultiSelect = (0, import_react91.forwardRef)(
|
|
|
18332
18332
|
maxTags,
|
|
18333
18333
|
hideSelected = false,
|
|
18334
18334
|
showOverflowTooltips = false,
|
|
18335
|
+
allowSelectAll = false,
|
|
18336
|
+
selectAllLabel = "Select all",
|
|
18335
18337
|
id: providedId,
|
|
18336
18338
|
"aria-label": ariaLabel,
|
|
18337
18339
|
className,
|
|
@@ -18703,7 +18705,7 @@ var MultiSelect = (0, import_react91.forwardRef)(
|
|
|
18703
18705
|
}
|
|
18704
18706
|
)
|
|
18705
18707
|
] }),
|
|
18706
|
-
/* @__PURE__ */ (0, import_jsx_runtime71.
|
|
18708
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
18707
18709
|
"div",
|
|
18708
18710
|
{
|
|
18709
18711
|
id: listboxId,
|
|
@@ -18711,47 +18713,124 @@ var MultiSelect = (0, import_react91.forwardRef)(
|
|
|
18711
18713
|
role: "listbox",
|
|
18712
18714
|
"aria-multiselectable": "true",
|
|
18713
18715
|
"aria-labelledby": labelId,
|
|
18714
|
-
children:
|
|
18715
|
-
|
|
18716
|
-
|
|
18717
|
-
|
|
18718
|
-
|
|
18719
|
-
|
|
18720
|
-
|
|
18721
|
-
|
|
18722
|
-
|
|
18723
|
-
|
|
18724
|
-
|
|
18725
|
-
|
|
18726
|
-
|
|
18727
|
-
|
|
18728
|
-
|
|
18729
|
-
|
|
18730
|
-
|
|
18731
|
-
|
|
18732
|
-
|
|
18733
|
-
|
|
18734
|
-
|
|
18735
|
-
|
|
18716
|
+
children: [
|
|
18717
|
+
allowSelectAll && filteredOptions.length > 0 && (() => {
|
|
18718
|
+
const enabled = filteredOptions.filter((o) => !o.disabled);
|
|
18719
|
+
const visibleValues = enabled.map((o) => o.value);
|
|
18720
|
+
const selectedVisible = visibleValues.filter(
|
|
18721
|
+
(v) => selectedSet.has(v)
|
|
18722
|
+
);
|
|
18723
|
+
const allVisibleSelected = enabled.length > 0 && selectedVisible.length === enabled.length;
|
|
18724
|
+
const someVisibleSelected = selectedVisible.length > 0 && !allVisibleSelected;
|
|
18725
|
+
const handleSelectAll = () => {
|
|
18726
|
+
if (allVisibleSelected) {
|
|
18727
|
+
commit(
|
|
18728
|
+
selectedValues.filter(
|
|
18729
|
+
(v) => !visibleValues.includes(v)
|
|
18730
|
+
)
|
|
18731
|
+
);
|
|
18732
|
+
} else {
|
|
18733
|
+
const merged = Array.from(
|
|
18734
|
+
/* @__PURE__ */ new Set([...selectedValues, ...visibleValues])
|
|
18735
|
+
);
|
|
18736
|
+
commit(maxTags ? merged.slice(0, maxTags) : merged);
|
|
18737
|
+
}
|
|
18738
|
+
};
|
|
18739
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
18740
|
+
"div",
|
|
18741
|
+
{
|
|
18742
|
+
className: cn(
|
|
18743
|
+
"ods-multiselect__option",
|
|
18744
|
+
"ods-multiselect__option--select-all",
|
|
18745
|
+
allVisibleSelected && "ods-multiselect__option--selected"
|
|
18746
|
+
),
|
|
18747
|
+
role: "option",
|
|
18748
|
+
"aria-selected": allVisibleSelected,
|
|
18749
|
+
onClick: handleSelectAll,
|
|
18750
|
+
children: [
|
|
18751
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
18752
|
+
"span",
|
|
18753
|
+
{
|
|
18754
|
+
className: cn(
|
|
18755
|
+
"ods-multiselect__select-all-box",
|
|
18756
|
+
allVisibleSelected && "ods-multiselect__select-all-box--checked",
|
|
18757
|
+
someVisibleSelected && "ods-multiselect__select-all-box--indeterminate"
|
|
18758
|
+
),
|
|
18759
|
+
"aria-hidden": "true",
|
|
18760
|
+
children: [
|
|
18761
|
+
allVisibleSelected && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
18762
|
+
"svg",
|
|
18763
|
+
{
|
|
18764
|
+
width: "10",
|
|
18765
|
+
height: "10",
|
|
18766
|
+
viewBox: "0 0 12 12",
|
|
18767
|
+
fill: "none",
|
|
18768
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
18769
|
+
"path",
|
|
18770
|
+
{
|
|
18771
|
+
d: "m2.5 6.2 2.4 2.4L9.5 4",
|
|
18772
|
+
stroke: "currentColor",
|
|
18773
|
+
strokeWidth: "1.6",
|
|
18774
|
+
strokeLinecap: "round",
|
|
18775
|
+
strokeLinejoin: "round"
|
|
18776
|
+
}
|
|
18777
|
+
)
|
|
18778
|
+
}
|
|
18779
|
+
),
|
|
18780
|
+
someVisibleSelected && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ods-multiselect__select-all-dash" })
|
|
18781
|
+
]
|
|
18782
|
+
}
|
|
18736
18783
|
),
|
|
18737
|
-
|
|
18738
|
-
|
|
18739
|
-
|
|
18740
|
-
|
|
18741
|
-
|
|
18742
|
-
|
|
18743
|
-
|
|
18744
|
-
|
|
18745
|
-
|
|
18746
|
-
|
|
18747
|
-
|
|
18748
|
-
|
|
18749
|
-
|
|
18750
|
-
)
|
|
18751
|
-
|
|
18752
|
-
opt.
|
|
18753
|
-
|
|
18754
|
-
|
|
18784
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ods-multiselect__option-text", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ods-multiselect__option-label", children: [
|
|
18785
|
+
allVisibleSelected ? "Deselect all" : selectAllLabel,
|
|
18786
|
+
query.trim() && ` (${enabled.length} match${enabled.length === 1 ? "" : "es"})`
|
|
18787
|
+
] }) })
|
|
18788
|
+
]
|
|
18789
|
+
}
|
|
18790
|
+
);
|
|
18791
|
+
})(),
|
|
18792
|
+
filteredOptions.length > 0 ? filteredOptions.map((opt, idx) => {
|
|
18793
|
+
const isSelected = selectedSet.has(opt.value);
|
|
18794
|
+
const optionId = `${baseId}-opt-${opt.value}`;
|
|
18795
|
+
const tooltipContent = opt.description ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
18796
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: opt.label }),
|
|
18797
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("br", {}),
|
|
18798
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { style: { opacity: 0.75 }, children: opt.description })
|
|
18799
|
+
] }) : opt.label;
|
|
18800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
18801
|
+
OverflowTooltip2,
|
|
18802
|
+
{
|
|
18803
|
+
enabled: showOverflowTooltips,
|
|
18804
|
+
content: tooltipContent,
|
|
18805
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
18806
|
+
"div",
|
|
18807
|
+
{
|
|
18808
|
+
id: optionId,
|
|
18809
|
+
className: cn(
|
|
18810
|
+
"ods-multiselect__option",
|
|
18811
|
+
idx === activeIdx && "ods-multiselect__option--highlighted",
|
|
18812
|
+
isSelected && "ods-multiselect__option--selected",
|
|
18813
|
+
opt.disabled && "ods-multiselect__option--disabled"
|
|
18814
|
+
),
|
|
18815
|
+
role: "option",
|
|
18816
|
+
"aria-selected": isSelected,
|
|
18817
|
+
"aria-disabled": opt.disabled || void 0,
|
|
18818
|
+
onClick: () => !opt.disabled && toggleValue(opt.value),
|
|
18819
|
+
onMouseEnter: () => setActiveIdx(idx),
|
|
18820
|
+
children: [
|
|
18821
|
+
opt.icon && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ods-multiselect__option-icon", children: opt.icon }),
|
|
18822
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ods-multiselect__option-text", children: [
|
|
18823
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ods-multiselect__option-label", children: opt.label }),
|
|
18824
|
+
opt.description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ods-multiselect__option-desc", children: opt.description })
|
|
18825
|
+
] })
|
|
18826
|
+
]
|
|
18827
|
+
}
|
|
18828
|
+
)
|
|
18829
|
+
},
|
|
18830
|
+
opt.value
|
|
18831
|
+
);
|
|
18832
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ods-multiselect__empty", children: "No results" })
|
|
18833
|
+
]
|
|
18755
18834
|
}
|
|
18756
18835
|
)
|
|
18757
18836
|
]
|