@uva-glass/component-library 1.40.3 → 1.40.4
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/{MultiSelect-Blc_VDxu.js → MultiSelect-CkfmzGsn.js} +2 -2
- package/dist/{MultiSelect-Blc_VDxu.js.map → MultiSelect-CkfmzGsn.js.map} +1 -1
- package/dist/MultiSelectItem-BKDbs8D_.js +24 -0
- package/dist/{MultiSelectItem-CPf7drsR.js.map → MultiSelectItem-BKDbs8D_.js.map} +1 -1
- package/dist/assets/MultiSelectItem.css +1 -1
- package/dist/components/InputField/InputField.stories.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +2 -2
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/MultiSelect/components/MultiSelectHeader.js +2 -2
- package/dist/components/MultiSelect/components/MultiSelectItem.js +1 -1
- package/dist/components/MultiSelect/index.js +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/MultiSelectItem-CPf7drsR.js +0 -24
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as s, jsx as l, Fragment as a } from "react/jsx-runtime";
|
|
2
2
|
import { c as m } from "./clsx-OuTLNxxd.js";
|
|
3
|
-
import { s as t, M as u } from "./MultiSelectItem-
|
|
3
|
+
import { s as t, M as u } from "./MultiSelectItem-BKDbs8D_.js";
|
|
4
4
|
import { Label as n } from "./components/Label/Label.js";
|
|
5
5
|
import "react";
|
|
6
6
|
import { Button as p } from "./components/Button/Button.js";
|
|
@@ -44,4 +44,4 @@ export {
|
|
|
44
44
|
o as M,
|
|
45
45
|
d as a
|
|
46
46
|
};
|
|
47
|
-
//# sourceMappingURL=MultiSelect-
|
|
47
|
+
//# sourceMappingURL=MultiSelect-CkfmzGsn.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect-
|
|
1
|
+
{"version":3,"file":"MultiSelect-CkfmzGsn.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n label: string;\n clearTrigger?: string;\n onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n return (\n <header className={styles['multi-select__header']}>\n <Label htmlFor=\"multi-select-list\">{label}</Label>\n {clearTrigger && (\n <Button variant={'blank'} onClick={onClear}>\n {clearTrigger}\n </Button>\n )}\n </header>\n );\n}\n","import clsx from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\nexport interface MultiSelectProps {\n scrollable?: boolean;\n noBorder?: boolean;\n header?: ReactNode;\n}\n\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n <>\n {header}\n <div\n className={clsx(styles['multi-select'], {\n [styles['multi-select--no-border']]: noBorder,\n })}\n >\n <ul\n className={clsx(styles['multi-select__list'], {\n [styles['multi-select__list--scrollable']]: scrollable,\n })}\n id=\"multi-select-list\"\n >\n {children}\n </ul>\n </div>\n </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem"],"mappings":";;;;;;;;;;;;;AAUO,SAASA,EAAkB,EAAE,OAAAC,GAAO,cAAAC,GAAc,SAAAC,KAAmC;AAC1F,SACG,gBAAAC,EAAA,UAAA,EAAO,WAAWC,EAAO,sBAAsB,GAC9C,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAM,SAAQ,qBAAqB,UAAMN,GAAA;AAAA,IACzCC,KACE,gBAAAI,EAAAE,GAAA,EAAO,SAAS,SAAS,SAASL,GAChC,UACHD,GAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;ACPa,MAAAO,IAAc,CAAC,EAAE,YAAAC,IAAa,IAAM,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,QAE9D,gBAAAT,EAAAU,GAAA,EAAA,UAAA;AAAA,EAAAF;AAAA,EACD,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAKV,EAAO,cAAc,GAAG;AAAA,QACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGM;AAAA,MAAA,CACtC;AAAA,MAED,UAAA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAKV,EAAO,oBAAoB,GAAG;AAAA,YAC5C,CAACA,EAAO,gCAAgC,CAAC,GAAGK;AAAA,UAAA,CAC7C;AAAA,UACD,IAAG;AAAA,UAEF,UAAAG;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAAA,GACF;AAGFJ,EAAY,oBAAoBT;AAChCS,EAAY,kBAAkBO;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsxs as o, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { useId as r } from "react";
|
|
3
|
+
import { Checkbox as c } from "./components/Checkbox/Checkbox.js";
|
|
4
|
+
import { Label as u } from "./components/Label/Label.js";
|
|
5
|
+
import './assets/MultiSelectItem.css';const b = {
|
|
6
|
+
"multi-select": "_multi-select_1t0b0_1",
|
|
7
|
+
"multi-select--no-border": "_multi-select--no-border_1t0b0_7",
|
|
8
|
+
"multi-select__header": "_multi-select__header_1t0b0_12",
|
|
9
|
+
"multi-select__list": "_multi-select__list_1t0b0_18",
|
|
10
|
+
"multi-select__list--scrollable": "_multi-select__list--scrollable_1t0b0_27",
|
|
11
|
+
"multi-select__item": "_multi-select__item_1t0b0_32"
|
|
12
|
+
};
|
|
13
|
+
function h({ label: _, value: s, checked: t, disabled: i = !1, onChange: m }) {
|
|
14
|
+
const e = r();
|
|
15
|
+
return /* @__PURE__ */ o("li", { className: b["multi-select__item"], children: [
|
|
16
|
+
/* @__PURE__ */ l(c, { id: e, value: s, checked: t, onChange: m, disabled: i }),
|
|
17
|
+
/* @__PURE__ */ l(u, { htmlFor: e, noFontWeight: !t, children: _ })
|
|
18
|
+
] });
|
|
19
|
+
}
|
|
20
|
+
export {
|
|
21
|
+
h as M,
|
|
22
|
+
b as s
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=MultiSelectItem-BKDbs8D_.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectItem-
|
|
1
|
+
{"version":3,"file":"MultiSelectItem-BKDbs8D_.js","sources":["../src/components/MultiSelect/components/MultiSelectItem.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Checkbox } from 'components/Checkbox';\nimport { Label } from 'components/Label';\n\nexport interface MultiSelectItemProps {\n label: string;\n value: string | number;\n checked: boolean;\n disabled?: boolean;\n onChange(event: ChangeEvent<HTMLInputElement>): void;\n}\n\nexport function MultiSelectItem({ label, value, checked, disabled = false, onChange }: MultiSelectItemProps) {\n const id = useId();\n\n return (\n <li className={styles['multi-select__item']}>\n <Checkbox id={id} value={value} checked={checked} onChange={onChange} disabled={disabled} />\n <Label htmlFor={id} noFontWeight={!checked}>\n {label}\n </Label>\n </li>\n );\n}\n"],"names":["MultiSelectItem","label","value","checked","disabled","onChange","id","useId","jsxs","styles","jsx","Checkbox","Label"],"mappings":";;;;;;;;;;;;AAgBgB,SAAAA,EAAgB,EAAE,OAAAC,GAAO,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,IAAO,UAAAC,KAAkC;AAC3G,QAAMC,IAAKC;AAEX,SACG,gBAAAC,EAAA,MAAA,EAAG,WAAWC,EAAO,oBAAoB,GACxC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAS,EAAA,IAAAL,GAAQ,OAAAJ,GAAc,SAAAC,GAAkB,UAAAE,GAAoB,UAAAD,GAAoB;AAAA,sBACzFQ,GAAM,EAAA,SAASN,GAAI,cAAc,CAACH,GAChC,UACHF,GAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._multi-
|
|
1
|
+
._multi-select_1t0b0_1{border:1px solid var(--color-black);border-radius:var(--border-radius-default);padding:.75rem}._multi-select--no-border_1t0b0_7{border:none;padding:0}._multi-select__header_1t0b0_12{display:flex;justify-content:space-between;margin-bottom:.5rem}._multi-select__list_1t0b0_18{display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0;padding:0}._multi-select__list--scrollable_1t0b0_27{max-height:8.75rem;overflow:auto}._multi-select__item_1t0b0_32{display:grid;grid-template-columns:auto 1fr;align-items:start;-webkit-user-select:none;user-select:none}._multi-select__item_1t0b0_32 input[type=checkbox]{margin-right:.75rem;margin-top:3px}._multi-select__item_1t0b0_32 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}
|
|
@@ -9,7 +9,7 @@ import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
|
9
9
|
import "../GridRow/GridRow.js";
|
|
10
10
|
import "../IconButton/IconButton.js";
|
|
11
11
|
import "../Input/Input.js";
|
|
12
|
-
import "../../MultiSelect-
|
|
12
|
+
import "../../MultiSelect-CkfmzGsn.js";
|
|
13
13
|
import "../SelectListbox/SelectListbox.js";
|
|
14
14
|
import "../SelectListbox/SelectProvider.js";
|
|
15
15
|
const C = (t) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../clsx-OuTLNxxd.js";
|
|
3
|
-
import "../../MultiSelectItem-
|
|
4
|
-
import { M as p } from "../../MultiSelect-
|
|
3
|
+
import "../../MultiSelectItem-BKDbs8D_.js";
|
|
4
|
+
import { M as p } from "../../MultiSelect-CkfmzGsn.js";
|
|
5
5
|
export {
|
|
6
6
|
p as MultiSelect
|
|
7
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as b, jsx as m } from "react/jsx-runtime";
|
|
2
2
|
import { f as d } from "../../index-0Faxlks_.js";
|
|
3
3
|
import { useState as p } from "react";
|
|
4
|
-
import { M as r } from "../../MultiSelect-
|
|
4
|
+
import { M as r } from "../../MultiSelect-CkfmzGsn.js";
|
|
5
5
|
import { Container as S } from "../storyComponents/Container/Container.js";
|
|
6
6
|
const T = {
|
|
7
7
|
title: "Organisms/MultiSelect",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
|
-
import "../../../MultiSelectItem-
|
|
2
|
+
import "../../../MultiSelectItem-BKDbs8D_.js";
|
|
3
3
|
import "../../Label/Label.js";
|
|
4
4
|
import "react";
|
|
5
5
|
import "../../Button/Button.js";
|
|
@@ -8,7 +8,7 @@ import "../../GridRow/GridRow.js";
|
|
|
8
8
|
import "../../IconButton/IconButton.js";
|
|
9
9
|
import "../../Input/Input.js";
|
|
10
10
|
import "../../InputField/InputField.js";
|
|
11
|
-
import { a as x } from "../../../MultiSelect-
|
|
11
|
+
import { a as x } from "../../../MultiSelect-CkfmzGsn.js";
|
|
12
12
|
import "../../SelectListbox/SelectListbox.js";
|
|
13
13
|
import "../../SelectListbox/SelectProvider.js";
|
|
14
14
|
export {
|
|
@@ -10,7 +10,7 @@ import "../GridRow/GridRow.js";
|
|
|
10
10
|
import "../IconButton/IconButton.js";
|
|
11
11
|
import "../Input/Input.js";
|
|
12
12
|
import "../InputField/InputField.js";
|
|
13
|
-
import "../../MultiSelect-
|
|
13
|
+
import "../../MultiSelect-CkfmzGsn.js";
|
|
14
14
|
import { Repeater as i } from "../Repeater/Repeater.js";
|
|
15
15
|
import "../SelectListbox/SelectListbox.js";
|
|
16
16
|
import "../SelectListbox/SelectProvider.js";
|
package/dist/components/index.js
CHANGED
|
@@ -23,7 +23,7 @@ import { MenuButton as K } from "./MenuButton/MenuButton.js";
|
|
|
23
23
|
import { M as U } from "../MenuLink-CSnr2Az4.js";
|
|
24
24
|
import { MetaDataList as W } from "./MetaDataList/MetaDataList.js";
|
|
25
25
|
import { ModalDialog as Y } from "./ModalDialog/ModalDialog.js";
|
|
26
|
-
import { M as _ } from "../MultiSelect-
|
|
26
|
+
import { M as _ } from "../MultiSelect-CkfmzGsn.js";
|
|
27
27
|
import { OverlayCloseButton as oo } from "./OverlayCloseButton/OverlayCloseButton.js";
|
|
28
28
|
import { Periods as to } from "./Periods/Periods.js";
|
|
29
29
|
import { ProgrammeCard as po } from "./ProgrammeCard/ProgrammeCard.js";
|
package/dist/index.js
CHANGED
|
@@ -23,7 +23,7 @@ import { MenuButton as K } from "./components/MenuButton/MenuButton.js";
|
|
|
23
23
|
import { M as U } from "./MenuLink-CSnr2Az4.js";
|
|
24
24
|
import { MetaDataList as W } from "./components/MetaDataList/MetaDataList.js";
|
|
25
25
|
import { ModalDialog as Y } from "./components/ModalDialog/ModalDialog.js";
|
|
26
|
-
import { M as _ } from "./MultiSelect-
|
|
26
|
+
import { M as _ } from "./MultiSelect-CkfmzGsn.js";
|
|
27
27
|
import { OverlayCloseButton as oo } from "./components/OverlayCloseButton/OverlayCloseButton.js";
|
|
28
28
|
import { Periods as to } from "./components/Periods/Periods.js";
|
|
29
29
|
import { ProgrammeCard as po } from "./components/ProgrammeCard/ProgrammeCard.js";
|
package/package.json
CHANGED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { jsxs as o, jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import { useId as r } from "react";
|
|
3
|
-
import { Checkbox as c } from "./components/Checkbox/Checkbox.js";
|
|
4
|
-
import { Label as u } from "./components/Label/Label.js";
|
|
5
|
-
import './assets/MultiSelectItem.css';const f = {
|
|
6
|
-
"multi-select": "_multi-select_pjfwx_1",
|
|
7
|
-
"multi-select--no-border": "_multi-select--no-border_pjfwx_7",
|
|
8
|
-
"multi-select__header": "_multi-select__header_pjfwx_12",
|
|
9
|
-
"multi-select__list": "_multi-select__list_pjfwx_18",
|
|
10
|
-
"multi-select__list--scrollable": "_multi-select__list--scrollable_pjfwx_27",
|
|
11
|
-
"multi-select__item": "_multi-select__item_pjfwx_32"
|
|
12
|
-
};
|
|
13
|
-
function j({ label: _, value: s, checked: e, disabled: i = !1, onChange: m }) {
|
|
14
|
-
const t = r();
|
|
15
|
-
return /* @__PURE__ */ o("li", { className: f["multi-select__item"], children: [
|
|
16
|
-
/* @__PURE__ */ l(c, { id: t, value: s, checked: e, onChange: m, disabled: i }),
|
|
17
|
-
/* @__PURE__ */ l(u, { htmlFor: t, noFontWeight: !e, children: _ })
|
|
18
|
-
] });
|
|
19
|
-
}
|
|
20
|
-
export {
|
|
21
|
-
j as M,
|
|
22
|
-
f as s
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=MultiSelectItem-CPf7drsR.js.map
|