@uva-glass/component-library 3.34.0 → 3.34.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
._multi-select-box-
|
|
1
|
+
._multi-select-box-wrapper_ltxrv_1{position:relative}._multi-select-box-trigger_ltxrv_5{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-500);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;height:2.75rem;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;position:relative;width:100%}._multi-select-box-trigger--darkBorder_ltxrv_22{border:1px solid var(--new-color-uva-black)}._multi-select-box-trigger_ltxrv_5:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-300)}._multi-select-box-trigger_ltxrv_5:focus-visible,._multi-select-box-trigger_ltxrv_5:hover{background-color:var(--new-color-grey-300)}._multi-select-box-trigger-label_ltxrv_36{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._multi-select-box-trigger_ltxrv_5:disabled:hover{background-color:var(--new-color-uva-white);cursor:not-allowed}._multi-select-box-trigger-icon_ltxrv_50{position:absolute;right:.875rem}._multi-select-box-trigger-icon--open_ltxrv_55{transform:rotate(180deg)}._multi-select-box-listbox--wrapper_ltxrv_59{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;display:flex;height:auto;margin:.25rem 0;overflow:hidden;position:fixed;width:auto;z-index:20}._multi-select-box-listbox_ltxrv_59{background-color:var(--new-color-uva-white);border-radius:var(--border-radius);display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:.25rem;white-space:nowrap;width:fit-content}._multi-select-box-listbox-option_ltxrv_86{border-radius:.25rem;cursor:pointer;display:flex;height:2.5rem;justify-content:flex-start;position:relative;-webkit-user-select:none;user-select:none;width:100%}._multi-select-box-listbox-option--active_ltxrv_97,._multi-select-box-listbox-option_ltxrv_86:hover{background-color:var(--new-color-grey-300);box-shadow:0 0 0 1px var(--new-color-uva-white)}._multi-select-box-listbox-option_ltxrv_86:focus-visible,._multi-select-box-listbox-option_ltxrv_86:hover{background-color:var(--new-color-grey-300)}._multi-select-box-listbox-option-content_ltxrv_108{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:.75rem;width:100%}._multi-select-box-listbox-option_ltxrv_86:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._multi-select-box-listbox-option--disabled_ltxrv_122{cursor:not-allowed;opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsxs as f, jsx as u } from "react/jsx-runtime";
|
|
2
2
|
import { useId as H, useState as m, useRef as O, useCallback as g, useEffect as w } from "react";
|
|
3
|
-
import { c as
|
|
3
|
+
import { c as v } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import { Icon as q } from "../Icon/Icon.js";
|
|
5
5
|
import { Checkbox as G } from "../Checkbox/Checkbox.js";
|
|
6
6
|
import { usePositionedFloaters as J } from "../hooks/usePositionedFloaters.js";
|
|
7
7
|
import '../../assets/MultiSelectBox.css';const r = {
|
|
8
|
-
"multi-select-box-wrapper": "_multi-select-box-
|
|
9
|
-
"multi-select-box-trigger": "_multi-select-box-
|
|
10
|
-
"multi-select-box-trigger--darkBorder": "_multi-select-box-trigger--
|
|
11
|
-
"multi-select-box-trigger-label": "_multi-select-box-trigger-
|
|
12
|
-
"multi-select-box-trigger-icon": "_multi-select-box-trigger-
|
|
13
|
-
"multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--
|
|
14
|
-
"multi-select-box-listbox--wrapper": "_multi-select-box-listbox--
|
|
15
|
-
"multi-select-box-listbox": "_multi-select-box-
|
|
16
|
-
"multi-select-box-listbox-option": "_multi-select-box-listbox-
|
|
17
|
-
"multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--
|
|
18
|
-
"multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-
|
|
19
|
-
"multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--
|
|
8
|
+
"multi-select-box-wrapper": "_multi-select-box-wrapper_ltxrv_1",
|
|
9
|
+
"multi-select-box-trigger": "_multi-select-box-trigger_ltxrv_5",
|
|
10
|
+
"multi-select-box-trigger--darkBorder": "_multi-select-box-trigger--darkBorder_ltxrv_22",
|
|
11
|
+
"multi-select-box-trigger-label": "_multi-select-box-trigger-label_ltxrv_36",
|
|
12
|
+
"multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_ltxrv_50",
|
|
13
|
+
"multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_ltxrv_55",
|
|
14
|
+
"multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_ltxrv_59",
|
|
15
|
+
"multi-select-box-listbox": "_multi-select-box-listbox_ltxrv_59",
|
|
16
|
+
"multi-select-box-listbox-option": "_multi-select-box-listbox-option_ltxrv_86",
|
|
17
|
+
"multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_ltxrv_97",
|
|
18
|
+
"multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_ltxrv_108",
|
|
19
|
+
"multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_ltxrv_122"
|
|
20
20
|
}, ee = ({
|
|
21
21
|
selectData: c,
|
|
22
22
|
onChange: d,
|
|
@@ -28,7 +28,7 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
28
28
|
maxOptionHeight: C,
|
|
29
29
|
optionPositionRight: L
|
|
30
30
|
}) => {
|
|
31
|
-
const
|
|
31
|
+
const _ = H(), [n, h] = m(y || []), [S, k] = m(y?.length || 0), [s, a] = m(!1), [b, x] = m(-1), I = O(null), N = O(null), [F, K] = m(null), [R, $] = m(null), { style: D } = J(F, R, {
|
|
32
32
|
mouseEvent: "click",
|
|
33
33
|
offset: 4,
|
|
34
34
|
maxFixedHeight: C,
|
|
@@ -79,7 +79,7 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
79
79
|
const t = c[b];
|
|
80
80
|
if (!t || t.disabled) break;
|
|
81
81
|
const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
|
|
82
|
-
|
|
82
|
+
h(o), k(o.length), d(o);
|
|
83
83
|
break;
|
|
84
84
|
}
|
|
85
85
|
case "Tab":
|
|
@@ -94,7 +94,7 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
94
94
|
), j = (e, t) => {
|
|
95
95
|
if (t.disabled || e.target.tagName === "INPUT") return;
|
|
96
96
|
const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
|
|
97
|
-
|
|
97
|
+
h(o), k(o.length), d(o);
|
|
98
98
|
}, z = g(
|
|
99
99
|
(e) => {
|
|
100
100
|
const { checked: t, value: l } = e.target;
|
|
@@ -104,7 +104,7 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
104
104
|
i && o.push(i);
|
|
105
105
|
} else
|
|
106
106
|
o = o.filter((i) => i.value !== l);
|
|
107
|
-
|
|
107
|
+
h(o), k(o.length), d(o);
|
|
108
108
|
},
|
|
109
109
|
[c, n, d]
|
|
110
110
|
);
|
|
@@ -121,7 +121,7 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
121
121
|
/* @__PURE__ */ f(
|
|
122
122
|
"button",
|
|
123
123
|
{
|
|
124
|
-
className:
|
|
124
|
+
className: v(r["multi-select-box-trigger"], {
|
|
125
125
|
[r["multi-select-box-trigger--darkBorder"]]: B
|
|
126
126
|
}),
|
|
127
127
|
type: "button",
|
|
@@ -133,7 +133,7 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
133
133
|
"aria-haspopup": "listbox",
|
|
134
134
|
"aria-label": `${S} ${E}`,
|
|
135
135
|
disabled: A,
|
|
136
|
-
...s && { "aria-controls":
|
|
136
|
+
...s && { "aria-controls": _ },
|
|
137
137
|
ref: $,
|
|
138
138
|
children: [
|
|
139
139
|
/* @__PURE__ */ f("span", { className: r["multi-select-box-trigger-label"], children: [
|
|
@@ -144,7 +144,7 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
144
144
|
/* @__PURE__ */ u(
|
|
145
145
|
q,
|
|
146
146
|
{
|
|
147
|
-
className:
|
|
147
|
+
className: v(r["multi-select-box-trigger-icon"], {
|
|
148
148
|
[r["multi-select-box-trigger-icon--open"]]: s
|
|
149
149
|
}),
|
|
150
150
|
name: "CheveronDown",
|
|
@@ -157,15 +157,15 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
157
157
|
/* @__PURE__ */ u(
|
|
158
158
|
"div",
|
|
159
159
|
{
|
|
160
|
-
id:
|
|
161
|
-
className:
|
|
160
|
+
id: _,
|
|
161
|
+
className: v(r["multi-select-box-listbox--wrapper"]),
|
|
162
162
|
style: { ...D.style, visibility: s ? "visible" : "hidden" },
|
|
163
163
|
role: "listbox",
|
|
164
164
|
ref: K,
|
|
165
165
|
children: /* @__PURE__ */ u("ul", { className: r["multi-select-box-listbox"], ref: N, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
|
|
166
166
|
"li",
|
|
167
167
|
{
|
|
168
|
-
className:
|
|
168
|
+
className: v(r["multi-select-box-listbox-option"], {
|
|
169
169
|
[r["multi-select-box-listbox-option--active"]]: o === b,
|
|
170
170
|
[r["multi-select-box-listbox-option--disabled"]]: l
|
|
171
171
|
}),
|
|
@@ -180,7 +180,7 @@ import '../../assets/MultiSelectBox.css';const r = {
|
|
|
180
180
|
/* @__PURE__ */ u(
|
|
181
181
|
G,
|
|
182
182
|
{
|
|
183
|
-
id: `${e}-${
|
|
183
|
+
id: `${e}-${_}`,
|
|
184
184
|
onChange: z,
|
|
185
185
|
value: t,
|
|
186
186
|
tabIndex: -1,
|