@tomny-dev/uzi 0.6.3-pr.76.204.1.498b3a4 → 0.6.3
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/multi-select/MultiSelect.d.ts +0 -7
- package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
- package/dist/index26.js +1 -7
- package/dist/index26.js.map +1 -1
- package/dist/index27.cjs +0 -9
- package/dist/index27.cjs.map +1 -1
- package/dist/index27.js +35 -64
- package/dist/index27.js.map +1 -1
- package/dist/index28.cjs +35 -64
- package/dist/index28.cjs.map +1 -1
- package/dist/style.css +0 -39
- package/package.json +1 -1
- package/dist/components/multi-select/MultiSelect.test.d.ts +0 -2
- package/dist/components/multi-select/MultiSelect.test.d.ts.map +0 -1
|
@@ -11,13 +11,6 @@ export type MultiSelectProps = {
|
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
fullWidth?: boolean;
|
|
13
13
|
maxVisibleValues?: number;
|
|
14
|
-
/** Formats the closed trigger text from the selected options, including an empty selection. */
|
|
15
|
-
formatValue?: (selected: MultiSelectOption[]) => string;
|
|
16
|
-
/** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */
|
|
17
|
-
bulkActions?: boolean;
|
|
18
|
-
selectAllLabel?: string;
|
|
19
|
-
/** Label for clearing all enabled selections. Disabled selected options remain selected. */
|
|
20
|
-
clearAllLabel?: string;
|
|
21
14
|
className?: string;
|
|
22
15
|
disabled?: boolean;
|
|
23
16
|
name?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B
|
|
1
|
+
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,WAAW,4FAuKvB,CAAC"}
|
package/dist/index26.js
CHANGED
|
@@ -4,14 +4,11 @@ var wrapperFullWidth = "uzi-multi-select-module__wrapperFullWidth__eH8pf";
|
|
|
4
4
|
var trigger = "uzi-multi-select-module__trigger__r3816";
|
|
5
5
|
var value = "uzi-multi-select-module__value__PuUmG";
|
|
6
6
|
var placeholder = "uzi-multi-select-module__placeholder__dJIU-";
|
|
7
|
-
var summary = "uzi-multi-select-module__summary__tu-Me";
|
|
8
7
|
var chip = "uzi-multi-select-module__chip__46Ms-";
|
|
9
8
|
var chipSummary = "uzi-multi-select-module__chipSummary__zLwi8";
|
|
10
9
|
var chevron = "uzi-multi-select-module__chevron__SWK5l";
|
|
11
10
|
var menu = "uzi-multi-select-module__menu__q8auA";
|
|
12
11
|
var menuFadeIn = "uzi-multi-select-module__menuFadeIn__Plo7-";
|
|
13
|
-
var bulkAction = "uzi-multi-select-module__bulkAction__CTqPY";
|
|
14
|
-
var separator = "uzi-multi-select-module__separator__UOVk4";
|
|
15
12
|
var option = "uzi-multi-select-module__option__-Ioqk";
|
|
16
13
|
var optionDisabled = "uzi-multi-select-module__optionDisabled__qtCi8";
|
|
17
14
|
var optionSelected = "uzi-multi-select-module__optionSelected__74IO8";
|
|
@@ -25,14 +22,11 @@ var multi_select_module_default = {
|
|
|
25
22
|
trigger,
|
|
26
23
|
value,
|
|
27
24
|
placeholder,
|
|
28
|
-
summary,
|
|
29
25
|
chip,
|
|
30
26
|
chipSummary,
|
|
31
27
|
chevron,
|
|
32
28
|
menu,
|
|
33
29
|
menuFadeIn,
|
|
34
|
-
bulkAction,
|
|
35
|
-
separator,
|
|
36
30
|
option,
|
|
37
31
|
optionDisabled,
|
|
38
32
|
optionSelected,
|
|
@@ -42,6 +36,6 @@ var multi_select_module_default = {
|
|
|
42
36
|
indicatorDisabled
|
|
43
37
|
};
|
|
44
38
|
//#endregion
|
|
45
|
-
export {
|
|
39
|
+
export { chevron, chip, chipSummary, multi_select_module_default as default, indicator, indicatorDisabled, indicatorSelected, menu, menuFadeIn, option, optionDisabled, optionLabel, optionSelected, placeholder, trigger, value, wrapper, wrapperFullWidth };
|
|
46
40
|
|
|
47
41
|
//# sourceMappingURL=index26.js.map
|
package/dist/index26.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index26.js","names":[],"sources":["../src/components/multi-select/multi-select.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n}\n\n.wrapperFullWidth {\n width: 100%;\n}\n\n.trigger {\n width: 100%;\n min-width: 0;\n min-height: var(--uzi-control-min-height);\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.625rem;\n border-radius: var(--uzi-control-radius);\n border: 1px solid var(--ts-dropdown-border, var(--border));\n background: var(--ts-dropdown-bg, var(--panel));\n color: var(--ts-dropdown-text, var(--foreground));\n padding:\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x-compact)\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x);\n font-size: var(--uzi-control-font-size);\n line-height: var(--uzi-control-line-height);\n font-family: inherit;\n box-shadow: var(--uzi-control-shadow);\n transition:\n border-color 0.15s ease,\n background 0.15s ease,\n color 0.15s ease,\n box-shadow 0.15s ease;\n cursor: pointer;\n text-align: left;\n}\n\n.trigger:hover:not(:disabled) {\n border-color: var(--ts-dropdown-accent, var(--accent));\n box-shadow: var(--uzi-control-shadow-hover);\n}\n\n.trigger:focus-visible,\n.trigger[data-state=\"open\"] {\n border-color: var(--ts-dropdown-accent, var(--primary));\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n box-shadow: none;\n}\n\n.value {\n min-width: 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: 0.375rem;\n align-items: center;\n}\n\n.placeholder {\n color: var(--muted-foreground);\n}\n\n.
|
|
1
|
+
{"version":3,"file":"index26.js","names":[],"sources":["../src/components/multi-select/multi-select.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n}\n\n.wrapperFullWidth {\n width: 100%;\n}\n\n.trigger {\n width: 100%;\n min-width: 0;\n min-height: var(--uzi-control-min-height);\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.625rem;\n border-radius: var(--uzi-control-radius);\n border: 1px solid var(--ts-dropdown-border, var(--border));\n background: var(--ts-dropdown-bg, var(--panel));\n color: var(--ts-dropdown-text, var(--foreground));\n padding:\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x-compact)\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x);\n font-size: var(--uzi-control-font-size);\n line-height: var(--uzi-control-line-height);\n font-family: inherit;\n box-shadow: var(--uzi-control-shadow);\n transition:\n border-color 0.15s ease,\n background 0.15s ease,\n color 0.15s ease,\n box-shadow 0.15s ease;\n cursor: pointer;\n text-align: left;\n}\n\n.trigger:hover:not(:disabled) {\n border-color: var(--ts-dropdown-accent, var(--accent));\n box-shadow: var(--uzi-control-shadow-hover);\n}\n\n.trigger:focus-visible,\n.trigger[data-state=\"open\"] {\n border-color: var(--ts-dropdown-accent, var(--primary));\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n box-shadow: none;\n}\n\n.value {\n min-width: 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: 0.375rem;\n align-items: center;\n}\n\n.placeholder {\n color: var(--muted-foreground);\n}\n\n.chip {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 2px 8px;\n border-radius: 999px;\n border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);\n background: color-mix(in srgb, var(--primary) 10%, transparent);\n color: var(--ts-dropdown-text, var(--foreground));\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1.2;\n white-space: nowrap;\n}\n\n.chipSummary {\n color: var(--primary);\n}\n\n.chevron {\n width: 10px;\n height: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--muted-foreground);\n flex-shrink: 0;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.trigger:hover:not(:disabled) .chevron,\n.trigger[data-state=\"open\"] .chevron {\n color: var(--ts-dropdown-text, var(--foreground));\n}\n\n.trigger[data-state=\"open\"] .chevron {\n transform: rotate(180deg);\n}\n\n.menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--uzi-popover-z-index, 1100);\n min-width: 100%;\n max-height: 16rem;\n overflow-y: auto;\n border: 1px solid var(--ts-menu-border, var(--border));\n border-radius: var(--uzi-menu-radius);\n background: var(--ts-menu-bg, var(--popover));\n color: var(--ts-menu-fg, var(--popover-foreground));\n padding: var(--uzi-menu-padding);\n box-shadow: var(--uzi-menu-shadow);\n animation: menuFadeIn 140ms ease;\n}\n\n.option {\n width: 100%;\n display: flex;\n align-items: center;\n gap: var(--uzi-menu-item-gap);\n border: none;\n border-radius: var(--uzi-menu-item-radius);\n background: transparent;\n color: inherit;\n padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);\n font: inherit;\n cursor: pointer;\n text-align: left;\n transition: background 0.12s ease, color 0.12s ease;\n}\n\n.option:hover:not(:disabled),\n.option:focus-visible,\n.option[data-highlighted] {\n background: var(--ts-menu-hover-bg, var(--accent));\n color: var(--ts-menu-hover-fg, var(--accent-foreground));\n outline: none;\n}\n\n.optionDisabled,\n.option[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.optionSelected .optionLabel {\n color: var(--primary);\n}\n\n.indicator {\n width: 1rem;\n height: 1rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 0.3125rem;\n border: 1px solid var(--border);\n color: transparent;\n background: transparent;\n transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;\n}\n\n.indicatorSelected {\n border-color: color-mix(in srgb, var(--primary) 55%, transparent);\n background: color-mix(in srgb, var(--primary) 12%, transparent);\n color: var(--primary);\n}\n\n.indicatorDisabled {\n opacity: 0.65;\n}\n\n.optionLabel {\n min-width: 0;\n flex: 1;\n}\n\n@keyframes menuFadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n"],"mappings":""}
|
package/dist/index27.cjs
CHANGED
|
@@ -4,14 +4,11 @@ var wrapperFullWidth = "uzi-multi-select-module__wrapperFullWidth__eH8pf";
|
|
|
4
4
|
var trigger = "uzi-multi-select-module__trigger__r3816";
|
|
5
5
|
var value = "uzi-multi-select-module__value__PuUmG";
|
|
6
6
|
var placeholder = "uzi-multi-select-module__placeholder__dJIU-";
|
|
7
|
-
var summary = "uzi-multi-select-module__summary__tu-Me";
|
|
8
7
|
var chip = "uzi-multi-select-module__chip__46Ms-";
|
|
9
8
|
var chipSummary = "uzi-multi-select-module__chipSummary__zLwi8";
|
|
10
9
|
var chevron = "uzi-multi-select-module__chevron__SWK5l";
|
|
11
10
|
var menu = "uzi-multi-select-module__menu__q8auA";
|
|
12
11
|
var menuFadeIn = "uzi-multi-select-module__menuFadeIn__Plo7-";
|
|
13
|
-
var bulkAction = "uzi-multi-select-module__bulkAction__CTqPY";
|
|
14
|
-
var separator = "uzi-multi-select-module__separator__UOVk4";
|
|
15
12
|
var option = "uzi-multi-select-module__option__-Ioqk";
|
|
16
13
|
var optionDisabled = "uzi-multi-select-module__optionDisabled__qtCi8";
|
|
17
14
|
var optionSelected = "uzi-multi-select-module__optionSelected__74IO8";
|
|
@@ -25,14 +22,11 @@ var multi_select_module_default = {
|
|
|
25
22
|
trigger,
|
|
26
23
|
value,
|
|
27
24
|
placeholder,
|
|
28
|
-
summary,
|
|
29
25
|
chip,
|
|
30
26
|
chipSummary,
|
|
31
27
|
chevron,
|
|
32
28
|
menu,
|
|
33
29
|
menuFadeIn,
|
|
34
|
-
bulkAction,
|
|
35
|
-
separator,
|
|
36
30
|
option,
|
|
37
31
|
optionDisabled,
|
|
38
32
|
optionSelected,
|
|
@@ -42,7 +36,6 @@ var multi_select_module_default = {
|
|
|
42
36
|
indicatorDisabled
|
|
43
37
|
};
|
|
44
38
|
//#endregion
|
|
45
|
-
exports.bulkAction = bulkAction;
|
|
46
39
|
exports.chevron = chevron;
|
|
47
40
|
exports.chip = chip;
|
|
48
41
|
exports.chipSummary = chipSummary;
|
|
@@ -57,8 +50,6 @@ exports.optionDisabled = optionDisabled;
|
|
|
57
50
|
exports.optionLabel = optionLabel;
|
|
58
51
|
exports.optionSelected = optionSelected;
|
|
59
52
|
exports.placeholder = placeholder;
|
|
60
|
-
exports.separator = separator;
|
|
61
|
-
exports.summary = summary;
|
|
62
53
|
exports.trigger = trigger;
|
|
63
54
|
exports.value = value;
|
|
64
55
|
exports.wrapper = wrapper;
|
package/dist/index27.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index27.cjs","names":[],"sources":["../src/components/multi-select/multi-select.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n}\n\n.wrapperFullWidth {\n width: 100%;\n}\n\n.trigger {\n width: 100%;\n min-width: 0;\n min-height: var(--uzi-control-min-height);\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.625rem;\n border-radius: var(--uzi-control-radius);\n border: 1px solid var(--ts-dropdown-border, var(--border));\n background: var(--ts-dropdown-bg, var(--panel));\n color: var(--ts-dropdown-text, var(--foreground));\n padding:\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x-compact)\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x);\n font-size: var(--uzi-control-font-size);\n line-height: var(--uzi-control-line-height);\n font-family: inherit;\n box-shadow: var(--uzi-control-shadow);\n transition:\n border-color 0.15s ease,\n background 0.15s ease,\n color 0.15s ease,\n box-shadow 0.15s ease;\n cursor: pointer;\n text-align: left;\n}\n\n.trigger:hover:not(:disabled) {\n border-color: var(--ts-dropdown-accent, var(--accent));\n box-shadow: var(--uzi-control-shadow-hover);\n}\n\n.trigger:focus-visible,\n.trigger[data-state=\"open\"] {\n border-color: var(--ts-dropdown-accent, var(--primary));\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n box-shadow: none;\n}\n\n.value {\n min-width: 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: 0.375rem;\n align-items: center;\n}\n\n.placeholder {\n color: var(--muted-foreground);\n}\n\n.
|
|
1
|
+
{"version":3,"file":"index27.cjs","names":[],"sources":["../src/components/multi-select/multi-select.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n}\n\n.wrapperFullWidth {\n width: 100%;\n}\n\n.trigger {\n width: 100%;\n min-width: 0;\n min-height: var(--uzi-control-min-height);\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.625rem;\n border-radius: var(--uzi-control-radius);\n border: 1px solid var(--ts-dropdown-border, var(--border));\n background: var(--ts-dropdown-bg, var(--panel));\n color: var(--ts-dropdown-text, var(--foreground));\n padding:\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x-compact)\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x);\n font-size: var(--uzi-control-font-size);\n line-height: var(--uzi-control-line-height);\n font-family: inherit;\n box-shadow: var(--uzi-control-shadow);\n transition:\n border-color 0.15s ease,\n background 0.15s ease,\n color 0.15s ease,\n box-shadow 0.15s ease;\n cursor: pointer;\n text-align: left;\n}\n\n.trigger:hover:not(:disabled) {\n border-color: var(--ts-dropdown-accent, var(--accent));\n box-shadow: var(--uzi-control-shadow-hover);\n}\n\n.trigger:focus-visible,\n.trigger[data-state=\"open\"] {\n border-color: var(--ts-dropdown-accent, var(--primary));\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n box-shadow: none;\n}\n\n.value {\n min-width: 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: 0.375rem;\n align-items: center;\n}\n\n.placeholder {\n color: var(--muted-foreground);\n}\n\n.chip {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 2px 8px;\n border-radius: 999px;\n border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);\n background: color-mix(in srgb, var(--primary) 10%, transparent);\n color: var(--ts-dropdown-text, var(--foreground));\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1.2;\n white-space: nowrap;\n}\n\n.chipSummary {\n color: var(--primary);\n}\n\n.chevron {\n width: 10px;\n height: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--muted-foreground);\n flex-shrink: 0;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.trigger:hover:not(:disabled) .chevron,\n.trigger[data-state=\"open\"] .chevron {\n color: var(--ts-dropdown-text, var(--foreground));\n}\n\n.trigger[data-state=\"open\"] .chevron {\n transform: rotate(180deg);\n}\n\n.menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--uzi-popover-z-index, 1100);\n min-width: 100%;\n max-height: 16rem;\n overflow-y: auto;\n border: 1px solid var(--ts-menu-border, var(--border));\n border-radius: var(--uzi-menu-radius);\n background: var(--ts-menu-bg, var(--popover));\n color: var(--ts-menu-fg, var(--popover-foreground));\n padding: var(--uzi-menu-padding);\n box-shadow: var(--uzi-menu-shadow);\n animation: menuFadeIn 140ms ease;\n}\n\n.option {\n width: 100%;\n display: flex;\n align-items: center;\n gap: var(--uzi-menu-item-gap);\n border: none;\n border-radius: var(--uzi-menu-item-radius);\n background: transparent;\n color: inherit;\n padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);\n font: inherit;\n cursor: pointer;\n text-align: left;\n transition: background 0.12s ease, color 0.12s ease;\n}\n\n.option:hover:not(:disabled),\n.option:focus-visible,\n.option[data-highlighted] {\n background: var(--ts-menu-hover-bg, var(--accent));\n color: var(--ts-menu-hover-fg, var(--accent-foreground));\n outline: none;\n}\n\n.optionDisabled,\n.option[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.optionSelected .optionLabel {\n color: var(--primary);\n}\n\n.indicator {\n width: 1rem;\n height: 1rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 0.3125rem;\n border: 1px solid var(--border);\n color: transparent;\n background: transparent;\n transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;\n}\n\n.indicatorSelected {\n border-color: color-mix(in srgb, var(--primary) 55%, transparent);\n background: color-mix(in srgb, var(--primary) 12%, transparent);\n color: var(--primary);\n}\n\n.indicatorDisabled {\n opacity: 0.65;\n}\n\n.optionLabel {\n min-width: 0;\n flex: 1;\n}\n\n@keyframes menuFadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n"],"mappings":""}
|
package/dist/index27.js
CHANGED
|
@@ -5,14 +5,9 @@ import * as React from "react";
|
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
7
7
|
//#region src/components/multi-select/MultiSelect.tsx
|
|
8
|
-
var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2,
|
|
8
|
+
var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2, className, disabled = false, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
|
|
9
9
|
const selectedSet = React.useMemo(() => new Set(value), [value]);
|
|
10
10
|
const selectedOptions = React.useMemo(() => options.filter((opt) => selectedSet.has(opt.value)), [options, selectedSet]);
|
|
11
|
-
const enabledValues = React.useMemo(() => options.filter((option) => !option.disabled).map((option) => option.value), [options]);
|
|
12
|
-
const allEnabledSelected = enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));
|
|
13
|
-
const hasDisabledOptions = options.some((option) => option.disabled);
|
|
14
|
-
const resolvedClearAllLabel = clearAllLabel ?? (hasDisabledOptions ? "Clear enabled" : "Clear all");
|
|
15
|
-
const formattedValue = React.useMemo(() => formatValue?.(selectedOptions), [formatValue, selectedOptions]);
|
|
16
11
|
const toggleValue = React.useCallback((nextValue) => {
|
|
17
12
|
if (selectedSet.has(nextValue)) {
|
|
18
13
|
onChange(value.filter((entry) => entry !== nextValue));
|
|
@@ -43,10 +38,7 @@ var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "S
|
|
|
43
38
|
disabled,
|
|
44
39
|
children: [/* @__PURE__ */ jsx("span", {
|
|
45
40
|
className: multi_select_module_default.value,
|
|
46
|
-
children:
|
|
47
|
-
className: multi_select_module_default.summary,
|
|
48
|
-
children: formattedValue
|
|
49
|
-
}) : selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", {
|
|
41
|
+
children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", {
|
|
50
42
|
className: multi_select_module_default.placeholder,
|
|
51
43
|
children: placeholder
|
|
52
44
|
}) : /* @__PURE__ */ jsxs(Fragment, { children: [visibleOptions.map((option) => /* @__PURE__ */ jsx("span", {
|
|
@@ -81,65 +73,44 @@ var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "S
|
|
|
81
73
|
name,
|
|
82
74
|
value: entry
|
|
83
75
|
}, entry)) : null,
|
|
84
|
-
/* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */
|
|
76
|
+
/* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
|
|
85
77
|
className: multi_select_module_default.menu,
|
|
86
78
|
sideOffset: 4,
|
|
87
79
|
align: "start",
|
|
88
|
-
children:
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
children:
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
disabled: option.disabled,
|
|
114
|
-
onCheckedChange: () => toggleValue(option.value),
|
|
115
|
-
onSelect: (event) => event.preventDefault(),
|
|
116
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
117
|
-
className: cx(multi_select_module_default.indicator, selected && multi_select_module_default.indicatorSelected, option.disabled && multi_select_module_default.indicatorDisabled),
|
|
118
|
-
"aria-hidden": "true",
|
|
119
|
-
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, {
|
|
120
|
-
forceMount: true,
|
|
121
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
122
|
-
viewBox: "0 0 16 16",
|
|
123
|
-
width: "16",
|
|
124
|
-
height: "16",
|
|
125
|
-
fill: "none",
|
|
126
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
127
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
128
|
-
d: "M3.5 8.5 6.5 11.5 12.5 4.5",
|
|
129
|
-
stroke: "currentColor",
|
|
130
|
-
strokeWidth: "1.8",
|
|
131
|
-
strokeLinecap: "round",
|
|
132
|
-
strokeLinejoin: "round"
|
|
133
|
-
})
|
|
80
|
+
children: options.map((option) => {
|
|
81
|
+
const selected = selectedSet.has(option.value);
|
|
82
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
|
|
83
|
+
className: cx(multi_select_module_default.option, selected && multi_select_module_default.optionSelected, option.disabled && multi_select_module_default.optionDisabled),
|
|
84
|
+
checked: selected,
|
|
85
|
+
disabled: option.disabled,
|
|
86
|
+
onCheckedChange: () => toggleValue(option.value),
|
|
87
|
+
onSelect: (event) => event.preventDefault(),
|
|
88
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
89
|
+
className: cx(multi_select_module_default.indicator, selected && multi_select_module_default.indicatorSelected, option.disabled && multi_select_module_default.indicatorDisabled),
|
|
90
|
+
"aria-hidden": "true",
|
|
91
|
+
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, {
|
|
92
|
+
forceMount: true,
|
|
93
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
94
|
+
viewBox: "0 0 16 16",
|
|
95
|
+
width: "16",
|
|
96
|
+
height: "16",
|
|
97
|
+
fill: "none",
|
|
98
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
99
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
100
|
+
d: "M3.5 8.5 6.5 11.5 12.5 4.5",
|
|
101
|
+
stroke: "currentColor",
|
|
102
|
+
strokeWidth: "1.8",
|
|
103
|
+
strokeLinecap: "round",
|
|
104
|
+
strokeLinejoin: "round"
|
|
134
105
|
})
|
|
135
106
|
})
|
|
136
|
-
})
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
141
|
-
})
|
|
142
|
-
|
|
107
|
+
})
|
|
108
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
109
|
+
className: multi_select_module_default.optionLabel,
|
|
110
|
+
children: option.label
|
|
111
|
+
})]
|
|
112
|
+
}, option.value);
|
|
113
|
+
})
|
|
143
114
|
}) })
|
|
144
115
|
]
|
|
145
116
|
})
|
package/dist/index27.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index27.js","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport type MultiSelectProps = {\n options: MultiSelectOption[];\n value: string[];\n onChange: (value: string[]) => void;\n placeholder?: string;\n fullWidth?: boolean;\n maxVisibleValues?: number;\n /** Formats the closed trigger text from the selected options, including an empty selection. */\n formatValue?: (selected: MultiSelectOption[]) => string;\n /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */\n bulkActions?: boolean;\n selectAllLabel?: string;\n /** Label for clearing all enabled selections. Disabled selected options remain selected. */\n clearAllLabel?: string;\n className?: string;\n disabled?: boolean;\n name?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n (\n {\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n fullWidth = true,\n maxVisibleValues = 2,\n formatValue,\n bulkActions = false,\n selectAllLabel = \"Select all\",\n clearAllLabel,\n className,\n disabled = false,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) => {\n const selectedSet = React.useMemo(() => new Set(value), [value]);\n const selectedOptions = React.useMemo(\n () => options.filter((opt) => selectedSet.has(opt.value)),\n [options, selectedSet],\n );\n\n const enabledValues = React.useMemo(\n () => options.filter((option) => !option.disabled).map((option) => option.value),\n [options],\n );\n const allEnabledSelected =\n enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));\n const hasDisabledOptions = options.some((option) => option.disabled);\n const resolvedClearAllLabel =\n clearAllLabel ?? (hasDisabledOptions ? \"Clear enabled\" : \"Clear all\");\n\n const formattedValue = React.useMemo(\n () => formatValue?.(selectedOptions),\n [formatValue, selectedOptions],\n );\n\n const toggleValue = React.useCallback(\n (nextValue: string) => {\n if (selectedSet.has(nextValue)) {\n onChange(value.filter((entry) => entry !== nextValue));\n return;\n }\n\n onChange([...value, nextValue]);\n },\n [onChange, selectedSet, value],\n );\n\n const visibleCount = Math.max(1, maxVisibleValues);\n const visibleOptions = selectedOptions.slice(0, visibleCount);\n const overflowCount = Math.max(\n 0,\n selectedOptions.length - visibleOptions.length,\n );\n\n return (\n <DropdownMenuPrimitive.Root modal={false}>\n <div\n className={cx(\n styles.wrapper,\n fullWidth && styles.wrapperFullWidth,\n className,\n )}\n >\n <DropdownMenuPrimitive.Trigger asChild>\n <button\n ref={ref}\n type=\"button\"\n className={styles.trigger}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={disabled}\n >\n <span className={styles.value}>\n {formatValue ? (\n <span className={styles.summary}>{formattedValue}</span>\n ) : selectedOptions.length === 0 ? (\n <span className={styles.placeholder}>{placeholder}</span>\n ) : (\n <>\n {visibleOptions.map((option) => (\n <span key={option.value} className={styles.chip}>\n {option.label}\n </span>\n ))}\n {overflowCount > 0 ? (\n <span className={cx(styles.chip, styles.chipSummary)}>\n +{overflowCount}\n </span>\n ) : null}\n </>\n )}\n </span>\n <span className={styles.chevron} aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n >\n <path\n d=\"M2 3.5L5 6.5L8 3.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n </button>\n </DropdownMenuPrimitive.Trigger>\n\n {name\n ? value.map((entry) => (\n <input key={entry} type=\"hidden\" name={name} value={entry} />\n ))\n : null}\n\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n className={styles.menu}\n sideOffset={4}\n align=\"start\"\n >\n {bulkActions && enabledValues.length > 0 ? (\n <>\n <DropdownMenuPrimitive.Item\n className={styles.bulkAction}\n disabled={allEnabledSelected}\n onSelect={(event) => {\n event.preventDefault();\n onChange(Array.from(new Set([...value, ...enabledValues])));\n }}\n >\n {selectAllLabel}\n </DropdownMenuPrimitive.Item>\n <DropdownMenuPrimitive.Item\n className={styles.bulkAction}\n disabled={!enabledValues.some((entry) => selectedSet.has(entry))}\n onSelect={(event) => {\n event.preventDefault();\n const enabledSet = new Set(enabledValues);\n onChange(value.filter((entry) => !enabledSet.has(entry)));\n }}\n >\n {resolvedClearAllLabel}\n </DropdownMenuPrimitive.Item>\n </>\n ) : null}\n {bulkActions && enabledValues.length > 0 && options.length > 0 ? (\n <DropdownMenuPrimitive.Separator className={styles.separator} />\n ) : null}\n {options.map((option) => {\n const selected = selectedSet.has(option.value);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n key={option.value}\n className={cx(\n styles.option,\n selected && styles.optionSelected,\n option.disabled && styles.optionDisabled,\n )}\n checked={selected}\n disabled={option.disabled}\n onCheckedChange={() => toggleValue(option.value)}\n onSelect={(event) => event.preventDefault()}\n >\n <span\n className={cx(\n styles.indicator,\n selected && styles.indicatorSelected,\n option.disabled && styles.indicatorDisabled,\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator forceMount>\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className={styles.optionLabel}>{option.label}</span>\n </DropdownMenuPrimitive.CheckboxItem>\n );\n })}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </div>\n </DropdownMenuPrimitive.Root>\n );\n },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index27.js","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport type MultiSelectProps = {\n options: MultiSelectOption[];\n value: string[];\n onChange: (value: string[]) => void;\n placeholder?: string;\n fullWidth?: boolean;\n maxVisibleValues?: number;\n className?: string;\n disabled?: boolean;\n name?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n (\n {\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n fullWidth = true,\n maxVisibleValues = 2,\n className,\n disabled = false,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) => {\n const selectedSet = React.useMemo(() => new Set(value), [value]);\n const selectedOptions = React.useMemo(\n () => options.filter((opt) => selectedSet.has(opt.value)),\n [options, selectedSet],\n );\n\n const toggleValue = React.useCallback(\n (nextValue: string) => {\n if (selectedSet.has(nextValue)) {\n onChange(value.filter((entry) => entry !== nextValue));\n return;\n }\n\n onChange([...value, nextValue]);\n },\n [onChange, selectedSet, value],\n );\n\n const visibleCount = Math.max(1, maxVisibleValues);\n const visibleOptions = selectedOptions.slice(0, visibleCount);\n const overflowCount = Math.max(\n 0,\n selectedOptions.length - visibleOptions.length,\n );\n\n return (\n <DropdownMenuPrimitive.Root modal={false}>\n <div\n className={cx(\n styles.wrapper,\n fullWidth && styles.wrapperFullWidth,\n className,\n )}\n >\n <DropdownMenuPrimitive.Trigger asChild>\n <button\n ref={ref}\n type=\"button\"\n className={styles.trigger}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={disabled}\n >\n <span className={styles.value}>\n {selectedOptions.length === 0 ? (\n <span className={styles.placeholder}>{placeholder}</span>\n ) : (\n <>\n {visibleOptions.map((option) => (\n <span key={option.value} className={styles.chip}>\n {option.label}\n </span>\n ))}\n {overflowCount > 0 ? (\n <span\n className={cx(\n styles.chip,\n styles.chipSummary,\n )}\n >\n +{overflowCount}\n </span>\n ) : null}\n </>\n )}\n </span>\n <span className={styles.chevron} aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n >\n <path\n d=\"M2 3.5L5 6.5L8 3.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n </button>\n </DropdownMenuPrimitive.Trigger>\n\n {name\n ? value.map((entry) => (\n <input key={entry} type=\"hidden\" name={name} value={entry} />\n ))\n : null}\n\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n className={styles.menu}\n sideOffset={4}\n align=\"start\"\n >\n {options.map((option) => {\n const selected = selectedSet.has(option.value);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n key={option.value}\n className={cx(\n styles.option,\n selected && styles.optionSelected,\n option.disabled && styles.optionDisabled,\n )}\n checked={selected}\n disabled={option.disabled}\n onCheckedChange={() => toggleValue(option.value)}\n onSelect={(event) => event.preventDefault()}\n >\n <span\n className={cx(\n styles.indicator,\n selected && styles.indicatorSelected,\n option.disabled && styles.indicatorDisabled,\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator forceMount>\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className={styles.optionLabel}>{option.label}</span>\n </DropdownMenuPrimitive.CheckboxItem>\n );\n })}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </div>\n </DropdownMenuPrimitive.Root>\n );\n },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
|
package/dist/index28.cjs
CHANGED
|
@@ -8,14 +8,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
8
8
|
let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
9
9
|
_radix_ui_react_dropdown_menu = require_runtime.__toESM(_radix_ui_react_dropdown_menu, 1);
|
|
10
10
|
//#region src/components/multi-select/MultiSelect.tsx
|
|
11
|
-
var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2,
|
|
11
|
+
var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2, className, disabled = false, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
|
|
12
12
|
const selectedSet = react.useMemo(() => new Set(value), [value]);
|
|
13
13
|
const selectedOptions = react.useMemo(() => options.filter((opt) => selectedSet.has(opt.value)), [options, selectedSet]);
|
|
14
|
-
const enabledValues = react.useMemo(() => options.filter((option) => !option.disabled).map((option) => option.value), [options]);
|
|
15
|
-
const allEnabledSelected = enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));
|
|
16
|
-
const hasDisabledOptions = options.some((option) => option.disabled);
|
|
17
|
-
const resolvedClearAllLabel = clearAllLabel ?? (hasDisabledOptions ? "Clear enabled" : "Clear all");
|
|
18
|
-
const formattedValue = react.useMemo(() => formatValue?.(selectedOptions), [formatValue, selectedOptions]);
|
|
19
14
|
const toggleValue = react.useCallback((nextValue) => {
|
|
20
15
|
if (selectedSet.has(nextValue)) {
|
|
21
16
|
onChange(value.filter((entry) => entry !== nextValue));
|
|
@@ -46,10 +41,7 @@ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "S
|
|
|
46
41
|
disabled,
|
|
47
42
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
48
43
|
className: require_multi_select_module.default.value,
|
|
49
|
-
children:
|
|
50
|
-
className: require_multi_select_module.default.summary,
|
|
51
|
-
children: formattedValue
|
|
52
|
-
}) : selectedOptions.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
44
|
+
children: selectedOptions.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
53
45
|
className: require_multi_select_module.default.placeholder,
|
|
54
46
|
children: placeholder
|
|
55
47
|
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [visibleOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
@@ -84,65 +76,44 @@ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "S
|
|
|
84
76
|
name,
|
|
85
77
|
value: entry
|
|
86
78
|
}, entry)) : null,
|
|
87
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.
|
|
79
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Content, {
|
|
88
80
|
className: require_multi_select_module.default.menu,
|
|
89
81
|
sideOffset: 4,
|
|
90
82
|
align: "start",
|
|
91
|
-
children:
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
children:
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
disabled: option.disabled,
|
|
117
|
-
onCheckedChange: () => toggleValue(option.value),
|
|
118
|
-
onSelect: (event) => event.preventDefault(),
|
|
119
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
120
|
-
className: require_cx.cx(require_multi_select_module.default.indicator, selected && require_multi_select_module.default.indicatorSelected, option.disabled && require_multi_select_module.default.indicatorDisabled),
|
|
121
|
-
"aria-hidden": "true",
|
|
122
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, {
|
|
123
|
-
forceMount: true,
|
|
124
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
125
|
-
viewBox: "0 0 16 16",
|
|
126
|
-
width: "16",
|
|
127
|
-
height: "16",
|
|
128
|
-
fill: "none",
|
|
129
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
130
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
131
|
-
d: "M3.5 8.5 6.5 11.5 12.5 4.5",
|
|
132
|
-
stroke: "currentColor",
|
|
133
|
-
strokeWidth: "1.8",
|
|
134
|
-
strokeLinecap: "round",
|
|
135
|
-
strokeLinejoin: "round"
|
|
136
|
-
})
|
|
83
|
+
children: options.map((option) => {
|
|
84
|
+
const selected = selectedSet.has(option.value);
|
|
85
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.CheckboxItem, {
|
|
86
|
+
className: require_cx.cx(require_multi_select_module.default.option, selected && require_multi_select_module.default.optionSelected, option.disabled && require_multi_select_module.default.optionDisabled),
|
|
87
|
+
checked: selected,
|
|
88
|
+
disabled: option.disabled,
|
|
89
|
+
onCheckedChange: () => toggleValue(option.value),
|
|
90
|
+
onSelect: (event) => event.preventDefault(),
|
|
91
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
92
|
+
className: require_cx.cx(require_multi_select_module.default.indicator, selected && require_multi_select_module.default.indicatorSelected, option.disabled && require_multi_select_module.default.indicatorDisabled),
|
|
93
|
+
"aria-hidden": "true",
|
|
94
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, {
|
|
95
|
+
forceMount: true,
|
|
96
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
97
|
+
viewBox: "0 0 16 16",
|
|
98
|
+
width: "16",
|
|
99
|
+
height: "16",
|
|
100
|
+
fill: "none",
|
|
101
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
102
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
103
|
+
d: "M3.5 8.5 6.5 11.5 12.5 4.5",
|
|
104
|
+
stroke: "currentColor",
|
|
105
|
+
strokeWidth: "1.8",
|
|
106
|
+
strokeLinecap: "round",
|
|
107
|
+
strokeLinejoin: "round"
|
|
137
108
|
})
|
|
138
109
|
})
|
|
139
|
-
})
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
})
|
|
145
|
-
|
|
110
|
+
})
|
|
111
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
112
|
+
className: require_multi_select_module.default.optionLabel,
|
|
113
|
+
children: option.label
|
|
114
|
+
})]
|
|
115
|
+
}, option.value);
|
|
116
|
+
})
|
|
146
117
|
}) })
|
|
147
118
|
]
|
|
148
119
|
})
|
package/dist/index28.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index28.cjs","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport type MultiSelectProps = {\n options: MultiSelectOption[];\n value: string[];\n onChange: (value: string[]) => void;\n placeholder?: string;\n fullWidth?: boolean;\n maxVisibleValues?: number;\n /** Formats the closed trigger text from the selected options, including an empty selection. */\n formatValue?: (selected: MultiSelectOption[]) => string;\n /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */\n bulkActions?: boolean;\n selectAllLabel?: string;\n /** Label for clearing all enabled selections. Disabled selected options remain selected. */\n clearAllLabel?: string;\n className?: string;\n disabled?: boolean;\n name?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n (\n {\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n fullWidth = true,\n maxVisibleValues = 2,\n formatValue,\n bulkActions = false,\n selectAllLabel = \"Select all\",\n clearAllLabel,\n className,\n disabled = false,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) => {\n const selectedSet = React.useMemo(() => new Set(value), [value]);\n const selectedOptions = React.useMemo(\n () => options.filter((opt) => selectedSet.has(opt.value)),\n [options, selectedSet],\n );\n\n const enabledValues = React.useMemo(\n () => options.filter((option) => !option.disabled).map((option) => option.value),\n [options],\n );\n const allEnabledSelected =\n enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));\n const hasDisabledOptions = options.some((option) => option.disabled);\n const resolvedClearAllLabel =\n clearAllLabel ?? (hasDisabledOptions ? \"Clear enabled\" : \"Clear all\");\n\n const formattedValue = React.useMemo(\n () => formatValue?.(selectedOptions),\n [formatValue, selectedOptions],\n );\n\n const toggleValue = React.useCallback(\n (nextValue: string) => {\n if (selectedSet.has(nextValue)) {\n onChange(value.filter((entry) => entry !== nextValue));\n return;\n }\n\n onChange([...value, nextValue]);\n },\n [onChange, selectedSet, value],\n );\n\n const visibleCount = Math.max(1, maxVisibleValues);\n const visibleOptions = selectedOptions.slice(0, visibleCount);\n const overflowCount = Math.max(\n 0,\n selectedOptions.length - visibleOptions.length,\n );\n\n return (\n <DropdownMenuPrimitive.Root modal={false}>\n <div\n className={cx(\n styles.wrapper,\n fullWidth && styles.wrapperFullWidth,\n className,\n )}\n >\n <DropdownMenuPrimitive.Trigger asChild>\n <button\n ref={ref}\n type=\"button\"\n className={styles.trigger}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={disabled}\n >\n <span className={styles.value}>\n {formatValue ? (\n <span className={styles.summary}>{formattedValue}</span>\n ) : selectedOptions.length === 0 ? (\n <span className={styles.placeholder}>{placeholder}</span>\n ) : (\n <>\n {visibleOptions.map((option) => (\n <span key={option.value} className={styles.chip}>\n {option.label}\n </span>\n ))}\n {overflowCount > 0 ? (\n <span className={cx(styles.chip, styles.chipSummary)}>\n +{overflowCount}\n </span>\n ) : null}\n </>\n )}\n </span>\n <span className={styles.chevron} aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n >\n <path\n d=\"M2 3.5L5 6.5L8 3.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n </button>\n </DropdownMenuPrimitive.Trigger>\n\n {name\n ? value.map((entry) => (\n <input key={entry} type=\"hidden\" name={name} value={entry} />\n ))\n : null}\n\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n className={styles.menu}\n sideOffset={4}\n align=\"start\"\n >\n {bulkActions && enabledValues.length > 0 ? (\n <>\n <DropdownMenuPrimitive.Item\n className={styles.bulkAction}\n disabled={allEnabledSelected}\n onSelect={(event) => {\n event.preventDefault();\n onChange(Array.from(new Set([...value, ...enabledValues])));\n }}\n >\n {selectAllLabel}\n </DropdownMenuPrimitive.Item>\n <DropdownMenuPrimitive.Item\n className={styles.bulkAction}\n disabled={!enabledValues.some((entry) => selectedSet.has(entry))}\n onSelect={(event) => {\n event.preventDefault();\n const enabledSet = new Set(enabledValues);\n onChange(value.filter((entry) => !enabledSet.has(entry)));\n }}\n >\n {resolvedClearAllLabel}\n </DropdownMenuPrimitive.Item>\n </>\n ) : null}\n {bulkActions && enabledValues.length > 0 && options.length > 0 ? (\n <DropdownMenuPrimitive.Separator className={styles.separator} />\n ) : null}\n {options.map((option) => {\n const selected = selectedSet.has(option.value);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n key={option.value}\n className={cx(\n styles.option,\n selected && styles.optionSelected,\n option.disabled && styles.optionDisabled,\n )}\n checked={selected}\n disabled={option.disabled}\n onCheckedChange={() => toggleValue(option.value)}\n onSelect={(event) => event.preventDefault()}\n >\n <span\n className={cx(\n styles.indicator,\n selected && styles.indicatorSelected,\n option.disabled && styles.indicatorDisabled,\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator forceMount>\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className={styles.optionLabel}>{option.label}</span>\n </DropdownMenuPrimitive.CheckboxItem>\n );\n })}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </div>\n </DropdownMenuPrimitive.Root>\n );\n },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index28.cjs","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport type MultiSelectProps = {\n options: MultiSelectOption[];\n value: string[];\n onChange: (value: string[]) => void;\n placeholder?: string;\n fullWidth?: boolean;\n maxVisibleValues?: number;\n className?: string;\n disabled?: boolean;\n name?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n (\n {\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n fullWidth = true,\n maxVisibleValues = 2,\n className,\n disabled = false,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) => {\n const selectedSet = React.useMemo(() => new Set(value), [value]);\n const selectedOptions = React.useMemo(\n () => options.filter((opt) => selectedSet.has(opt.value)),\n [options, selectedSet],\n );\n\n const toggleValue = React.useCallback(\n (nextValue: string) => {\n if (selectedSet.has(nextValue)) {\n onChange(value.filter((entry) => entry !== nextValue));\n return;\n }\n\n onChange([...value, nextValue]);\n },\n [onChange, selectedSet, value],\n );\n\n const visibleCount = Math.max(1, maxVisibleValues);\n const visibleOptions = selectedOptions.slice(0, visibleCount);\n const overflowCount = Math.max(\n 0,\n selectedOptions.length - visibleOptions.length,\n );\n\n return (\n <DropdownMenuPrimitive.Root modal={false}>\n <div\n className={cx(\n styles.wrapper,\n fullWidth && styles.wrapperFullWidth,\n className,\n )}\n >\n <DropdownMenuPrimitive.Trigger asChild>\n <button\n ref={ref}\n type=\"button\"\n className={styles.trigger}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={disabled}\n >\n <span className={styles.value}>\n {selectedOptions.length === 0 ? (\n <span className={styles.placeholder}>{placeholder}</span>\n ) : (\n <>\n {visibleOptions.map((option) => (\n <span key={option.value} className={styles.chip}>\n {option.label}\n </span>\n ))}\n {overflowCount > 0 ? (\n <span\n className={cx(\n styles.chip,\n styles.chipSummary,\n )}\n >\n +{overflowCount}\n </span>\n ) : null}\n </>\n )}\n </span>\n <span className={styles.chevron} aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n >\n <path\n d=\"M2 3.5L5 6.5L8 3.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n </button>\n </DropdownMenuPrimitive.Trigger>\n\n {name\n ? value.map((entry) => (\n <input key={entry} type=\"hidden\" name={name} value={entry} />\n ))\n : null}\n\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n className={styles.menu}\n sideOffset={4}\n align=\"start\"\n >\n {options.map((option) => {\n const selected = selectedSet.has(option.value);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n key={option.value}\n className={cx(\n styles.option,\n selected && styles.optionSelected,\n option.disabled && styles.optionDisabled,\n )}\n checked={selected}\n disabled={option.disabled}\n onCheckedChange={() => toggleValue(option.value)}\n onSelect={(event) => event.preventDefault()}\n >\n <span\n className={cx(\n styles.indicator,\n selected && styles.indicatorSelected,\n option.disabled && styles.indicatorDisabled,\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator forceMount>\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className={styles.optionLabel}>{option.label}</span>\n </DropdownMenuPrimitive.CheckboxItem>\n );\n })}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </div>\n </DropdownMenuPrimitive.Root>\n );\n },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
|
package/dist/style.css
CHANGED
|
@@ -1089,14 +1089,6 @@ body {
|
|
|
1089
1089
|
color: var(--muted-foreground);
|
|
1090
1090
|
}
|
|
1091
1091
|
|
|
1092
|
-
.uzi-multi-select-module__summary__tu-Me {
|
|
1093
|
-
min-width: 0;
|
|
1094
|
-
overflow: hidden;
|
|
1095
|
-
text-overflow: ellipsis;
|
|
1096
|
-
white-space: nowrap;
|
|
1097
|
-
font-weight: 500;
|
|
1098
|
-
}
|
|
1099
|
-
|
|
1100
1092
|
.uzi-multi-select-module__chip__46Ms- {
|
|
1101
1093
|
display: inline-flex;
|
|
1102
1094
|
align-items: center;
|
|
@@ -1153,37 +1145,6 @@ body {
|
|
|
1153
1145
|
animation: uzi-multi-select-module__menuFadeIn__Plo7- 140ms ease;
|
|
1154
1146
|
}
|
|
1155
1147
|
|
|
1156
|
-
.uzi-multi-select-module__bulkAction__CTqPY {
|
|
1157
|
-
width: 100%;
|
|
1158
|
-
display: flex;
|
|
1159
|
-
align-items: center;
|
|
1160
|
-
border: none;
|
|
1161
|
-
border-radius: var(--uzi-menu-item-radius);
|
|
1162
|
-
background: transparent;
|
|
1163
|
-
color: inherit;
|
|
1164
|
-
padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);
|
|
1165
|
-
font: inherit;
|
|
1166
|
-
font-weight: 600;
|
|
1167
|
-
cursor: pointer;
|
|
1168
|
-
outline: none;
|
|
1169
|
-
}
|
|
1170
|
-
|
|
1171
|
-
.uzi-multi-select-module__bulkAction__CTqPY[data-highlighted] {
|
|
1172
|
-
background: var(--ts-menu-hover-bg, var(--accent));
|
|
1173
|
-
color: var(--ts-menu-hover-fg, var(--accent-foreground));
|
|
1174
|
-
}
|
|
1175
|
-
|
|
1176
|
-
.uzi-multi-select-module__bulkAction__CTqPY[data-disabled] {
|
|
1177
|
-
opacity: 0.5;
|
|
1178
|
-
cursor: not-allowed;
|
|
1179
|
-
}
|
|
1180
|
-
|
|
1181
|
-
.uzi-multi-select-module__separator__UOVk4 {
|
|
1182
|
-
height: 1px;
|
|
1183
|
-
margin: var(--uzi-menu-padding) 0;
|
|
1184
|
-
background: var(--ts-menu-border, var(--border));
|
|
1185
|
-
}
|
|
1186
|
-
|
|
1187
1148
|
.uzi-multi-select-module__option__-Ioqk {
|
|
1188
1149
|
width: 100%;
|
|
1189
1150
|
display: flex;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.test.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.test.tsx"],"names":[],"mappings":""}
|