@uva-glass/component-library 3.33.4 → 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.
- package/dist/assets/MultiSelectBox.css +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.js +24 -24
- package/dist/components/Notification/Notification.d.ts +1 -1
- package/dist/components/Notification/Notification.js +11 -11
- package/dist/components/Notification/Notification.js.map +1 -1
- package/package.json +1 -1
|
@@ -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,
|
|
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
export type NotificationVariant = 'default' | 'bar';
|
|
3
3
|
export type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';
|
|
4
4
|
export interface NotificationProps {
|
|
5
|
-
title
|
|
5
|
+
title?: string;
|
|
6
6
|
subtitle?: string;
|
|
7
7
|
action?: ReactNode;
|
|
8
8
|
variant?: NotificationVariant;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as c, jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
3
|
-
import { Icon as
|
|
2
|
+
import { c as f } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { Icon as s } from "../Icon/Icon.js";
|
|
4
4
|
import '../../assets/Notification.css';const w = "_notification_qwbrb_1", t = {
|
|
5
5
|
notification: w,
|
|
6
6
|
"notification--default": "_notification--default_qwbrb_7",
|
|
@@ -25,18 +25,18 @@ import '../../assets/Notification.css';const w = "_notification_qwbrb_1", t = {
|
|
|
25
25
|
"notification-close-button--danger": "_notification-close-button--danger_qwbrb_127",
|
|
26
26
|
"notification-close-button--bar--success": "_notification-close-button--bar--success_qwbrb_140",
|
|
27
27
|
"notification-close-button--bar--warning": "_notification-close-button--bar--warning_qwbrb_143"
|
|
28
|
-
}, g = ({ title:
|
|
29
|
-
const l =
|
|
28
|
+
}, g = ({ title: a, subtitle: r, action: b, variant: e = "default", level: n, onClose: _ }) => {
|
|
29
|
+
const l = e === "bar";
|
|
30
30
|
function u(o) {
|
|
31
31
|
return o === "neutral" ? "CalendarEdit" : o === "information" ? "SquareInfo" : o === "success" ? "CheckCircle" : "ExclamationTriangleMini";
|
|
32
32
|
}
|
|
33
|
-
return /* @__PURE__ */ c("div", { className:
|
|
33
|
+
return /* @__PURE__ */ c("div", { className: f(t.notification, t[`notification--${e}`], t[`notification--${n}`]), children: [
|
|
34
34
|
/* @__PURE__ */ c("div", { className: t["notification-content"], children: [
|
|
35
|
-
/* @__PURE__ */ i(
|
|
35
|
+
/* @__PURE__ */ i(s, { name: u(n) }),
|
|
36
36
|
/* @__PURE__ */ c("div", { className: t["notification-content--text"], children: [
|
|
37
|
-
/* @__PURE__ */ i("p", { className: t["notification-title"], children:
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
a && /* @__PURE__ */ i("p", { className: t["notification-title"], children: a }),
|
|
38
|
+
r && /* @__PURE__ */ i("p", { className: t["notification-subtitle"], children: r }),
|
|
39
|
+
b && /* @__PURE__ */ i("div", { className: t["notification-action"], children: b })
|
|
40
40
|
] })
|
|
41
41
|
] }),
|
|
42
42
|
_ && /* @__PURE__ */ i(
|
|
@@ -44,10 +44,10 @@ import '../../assets/Notification.css';const w = "_notification_qwbrb_1", t = {
|
|
|
44
44
|
{
|
|
45
45
|
type: "button",
|
|
46
46
|
"aria-label": "close",
|
|
47
|
-
className:
|
|
47
|
+
className: f(t["notification-close-button"], t[`notification-close-button--${n}`], {
|
|
48
48
|
[t[`notification-close-button--bar--${n}`]]: l
|
|
49
49
|
}),
|
|
50
|
-
children: /* @__PURE__ */ i(
|
|
50
|
+
children: /* @__PURE__ */ i(s, { name: "Cross", size: 24 })
|
|
51
51
|
}
|
|
52
52
|
)
|
|
53
53
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Notification.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type NotificationVariant = 'default' | 'bar';\nexport type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';\n\nexport interface NotificationProps {\n title
|
|
1
|
+
{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Notification.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type NotificationVariant = 'default' | 'bar';\nexport type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';\n\nexport interface NotificationProps {\n title?: string;\n subtitle?: string;\n action?: ReactNode;\n variant?: NotificationVariant;\n level: NotificationLevel;\n onClose?: () => void;\n}\n\nexport const Notification = ({ title, subtitle, action, variant = 'default', level, onClose }: NotificationProps) => {\n const isBar = variant === 'bar';\n\n function setIconName(toastType: NotificationLevel) {\n if (toastType === 'neutral') return 'CalendarEdit';\n if (toastType === 'information') return 'SquareInfo';\n if (toastType === 'success') return 'CheckCircle';\n return 'ExclamationTriangleMini';\n }\n\n return (\n <div className={clsx(styles['notification'], styles[`notification--${variant}`], styles[`notification--${level}`])}>\n <div className={styles['notification-content']}>\n <Icon name={setIconName(level)} />\n <div className={styles['notification-content--text']}>\n {title && <p className={styles['notification-title']}>{title}</p>}\n {subtitle && <p className={styles['notification-subtitle']}>{subtitle}</p>}\n {action && <div className={styles['notification-action']}>{action}</div>}\n </div>\n </div>\n {onClose && (\n <button\n type=\"button\"\n aria-label=\"close\"\n className={clsx(styles['notification-close-button'], styles[`notification-close-button--${level}`], {\n [styles[`notification-close-button--bar--${level}`]]: isBar,\n })}\n >\n <Icon name=\"Cross\" size={24} />\n </button>\n )}\n </div>\n );\n};\n"],"names":["Notification","title","subtitle","action","variant","level","onClose","isBar","setIconName","toastType","clsx","styles","jsxs","jsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAoBaA,IAAe,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,GAAO,SAAAC,QAAiC;AACnH,QAAMC,IAAQH,MAAY;AAE1B,WAASI,EAAYC,GAA8B;AACjD,WAAIA,MAAc,YAAkB,iBAChCA,MAAc,gBAAsB,eACpCA,MAAc,YAAkB,gBAC7B;AAAA,EAAA;AAGT,2BACG,OAAA,EAAI,WAAWC,EAAKC,EAAO,cAAiBA,EAAO,iBAAiBP,CAAO,EAAE,GAAGO,EAAO,iBAAiBN,CAAK,EAAE,CAAC,GAC/G,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,sBAAsB,GAC3C,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAMN,EAAYH,CAAK,EAAA,CAAG;AAAA,MAChC,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GAChD,UAAA;AAAA,QAAAV,uBAAU,KAAA,EAAE,WAAWU,EAAO,oBAAoB,GAAI,UAAAV,GAAM;AAAA,QAC5DC,KAAY,gBAAAW,EAAC,KAAA,EAAE,WAAWF,EAAO,uBAAuB,GAAI,UAAAT,GAAS;AAAA,QACrEC,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAWF,EAAO,qBAAqB,GAAI,UAAAR,EAAA,CAAO;AAAA,MAAA,EAAA,CACpE;AAAA,IAAA,GACF;AAAA,IACCG,KACC,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWH,EAAKC,EAAO,2BAA2B,GAAGA,EAAO,8BAA8BN,CAAK,EAAE,GAAG;AAAA,UAClG,CAACM,EAAO,mCAAmCN,CAAK,EAAE,CAAC,GAAGE;AAAA,QAAA,CACvD;AAAA,QAED,UAAA,gBAAAM,EAACC,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/B,GAEJ;AAEJ;"}
|