@uva-glass/component-library 3.27.3 → 3.28.0
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/{SelectListbox.module-DHFU0NjU.js → SelectListbox.module-yzXaWwsm.js} +23 -23
- package/dist/SelectListbox.module-yzXaWwsm.js.map +1 -0
- package/dist/assets/MetaDataList.css +1 -1
- package/dist/assets/PageOverlay.css +1 -1
- package/dist/assets/RadioButton.css +1 -1
- package/dist/assets/SelectListbox.css +1 -1
- package/dist/components/InputField/InputField.js +4 -4
- package/dist/components/InputField/InputField.js.map +1 -1
- package/dist/components/MetaDataList/MetaDataList.js +7 -7
- package/dist/components/PageOverlay/PageOverlay.js +49 -49
- package/dist/components/RadioButton/RadioButton.js +5 -5
- package/dist/components/SelectListbox/components/SelectButton.js +1 -1
- package/dist/components/SelectListbox/components/SelectContainer.js +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js +1 -1
- package/package.json +5 -5
- package/dist/SelectListbox.module-DHFU0NjU.js.map +0 -1
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import './assets/SelectListbox.css';const
|
|
2
|
-
"select-listbox-container": "_select-listbox-
|
|
3
|
-
"select-listbox__wrapper": "_select-
|
|
4
|
-
"select-listbox-trigger": "_select-listbox-
|
|
5
|
-
"select-listbox-trigger--default": "_select-listbox-trigger--
|
|
6
|
-
"select-listbox-trigger--small": "_select-listbox-trigger--
|
|
7
|
-
"select-listbox-trigger--medium": "_select-listbox-trigger--
|
|
8
|
-
"select-listbox-trigger-label": "_select-listbox-trigger-
|
|
9
|
-
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-
|
|
10
|
-
"select-listbox-trigger--bold": "_select-listbox-trigger--
|
|
11
|
-
"select-listbox-trigger--pill": "_select-listbox-trigger--
|
|
12
|
-
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--
|
|
13
|
-
"select-listbox-trigger--pillRight": "_select-listbox-trigger--
|
|
14
|
-
"select-listbox-trigger--darkBorder": "_select-listbox-trigger--
|
|
15
|
-
"select-listbox-trigger--noborder": "_select-listbox-trigger--
|
|
16
|
-
"select-listbox-trigger-icon": "_select-listbox-trigger-
|
|
17
|
-
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--
|
|
18
|
-
"select-listbox": "_select-
|
|
19
|
-
"select-listbox-option": "_select-listbox-
|
|
20
|
-
"select-listbox-option--active": "_select-listbox-option--
|
|
21
|
-
"select-listbox-divider": "_select-listbox-
|
|
1
|
+
import './assets/SelectListbox.css';const t = {
|
|
2
|
+
"select-listbox-container": "_select-listbox-container_4xtnu_1",
|
|
3
|
+
"select-listbox__wrapper": "_select-listbox__wrapper_4xtnu_5",
|
|
4
|
+
"select-listbox-trigger": "_select-listbox-trigger_4xtnu_15",
|
|
5
|
+
"select-listbox-trigger--default": "_select-listbox-trigger--default_4xtnu_30",
|
|
6
|
+
"select-listbox-trigger--small": "_select-listbox-trigger--small_4xtnu_34",
|
|
7
|
+
"select-listbox-trigger--medium": "_select-listbox-trigger--medium_4xtnu_38",
|
|
8
|
+
"select-listbox-trigger-label": "_select-listbox-trigger-label_4xtnu_43",
|
|
9
|
+
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_4xtnu_52",
|
|
10
|
+
"select-listbox-trigger--bold": "_select-listbox-trigger--bold_4xtnu_56",
|
|
11
|
+
"select-listbox-trigger--pill": "_select-listbox-trigger--pill_4xtnu_60",
|
|
12
|
+
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_4xtnu_65",
|
|
13
|
+
"select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_4xtnu_70",
|
|
14
|
+
"select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_4xtnu_75",
|
|
15
|
+
"select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_4xtnu_89",
|
|
16
|
+
"select-listbox-trigger-icon": "_select-listbox-trigger-icon_4xtnu_101",
|
|
17
|
+
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_4xtnu_106",
|
|
18
|
+
"select-listbox": "_select-listbox_4xtnu_1",
|
|
19
|
+
"select-listbox-option": "_select-listbox-option_4xtnu_120",
|
|
20
|
+
"select-listbox-option--active": "_select-listbox-option--active_4xtnu_133",
|
|
21
|
+
"select-listbox-divider": "_select-listbox-divider_4xtnu_143"
|
|
22
22
|
};
|
|
23
23
|
export {
|
|
24
|
-
|
|
24
|
+
t as s
|
|
25
25
|
};
|
|
26
|
-
//# sourceMappingURL=SelectListbox.module-
|
|
26
|
+
//# sourceMappingURL=SelectListbox.module-yzXaWwsm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectListbox.module-yzXaWwsm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._meta-data-
|
|
1
|
+
._meta-data-list_1ripo_1{margin:0}._meta-data-list__item_1ripo_5{display:flex;gap:1rem;justify-content:space-between;padding:.5rem 0}._meta-data-list__item_1ripo_5:not(:last-of-type){border-bottom:1px solid var(--new-color-grey-400)}._meta-data-list__term_1ripo_16{color:var(--new-color-grey-700)}._meta-data-list__description_1ripo_20{align-items:center;display:inline-flex;font-weight:var(--semibold);margin:0;text-align:right}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._page-
|
|
1
|
+
._page-overlay__container_x277a_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:50}._page-overlay_x277a_1{background:var(--new-color-uva-white);display:flex;flex-direction:column;height:100dvh}._page-overlay--full-screen_x277a_19{width:100vw}._page-overlay--with-gutters_x277a_23{max-width:87.5rem;width:100%}._page-overlay__content_x277a_28{display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 1.5rem;width:100%}._page-overlay__content--grey_x277a_39{background-color:var(--new-color-grey-200)}._page-overlay__content--white_x277a_43{background-color:var(--new-color-uva-white)}._page-overlay__children_x277a_47{padding-bottom:1rem}._page-overlay__title-wrapper_x277a_51{position:relative}._page-overlay__title_x277a_51{font-size:var(--font-size-s);line-height:var(--line-height-m);margin:0 1.5rem 0 0;padding:1rem 1.5rem}._page-overlay__buttons-bar_x277a_62{background-color:var(--new-color-uva-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 -1.5rem;padding:.5rem 1rem;position:sticky;right:0}._page-overlay__buttons-bar_x277a_62:before{background:linear-gradient(to top,#0000004d,#0000);bottom:100%;content:"";height:10px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .4s ease-out}._page-overlay__buttons-bar--shadow_x277a_88:before{opacity:1}._page-overlay__close_x277a_94{height:1.5rem;position:absolute;right:1rem;top:calc(50% - .125rem);transform:translateY(-50%)}@media (min-width: 28rem) and (min-height: 28rem){._page-overlay--with-gutters_x277a_23{margin:0 .75rem}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._radio-
|
|
1
|
+
._radio-button_1i4mp_1{align-items:center;display:grid;gap:0 .5rem;grid-template-columns:auto [label] 1fr}._radio-button__input_1i4mp_8{accent-color:var(--new-color-navy-600)}._radio-button_1i4mp_1 ._radio-button__input_1i4mp_8{cursor:pointer;margin-top:0}._radio-button__label_1i4mp_17{cursor:pointer;display:flex;flex-direction:column}._radio-button__description_1i4mp_23{color:var(--new-color-grey-700);grid-area:label;margin:0}._radio-button_1i4mp_1 ._radio-button__label_1i4mp_17{width:fit-content}._radio-button_1i4mp_1 :disabled+._radio-button__label_1i4mp_17{color:var(--new-color-grey-700);cursor:unset}._radio-button--gap-large_1i4mp_38{column-gap:1rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._select-listbox-
|
|
1
|
+
._select-listbox-container_4xtnu_1{position:relative}._select-listbox__wrapper_4xtnu_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_4xtnu_15{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_4xtnu_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_4xtnu_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_4xtnu_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_4xtnu_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_4xtnu_52{right:0}._select-listbox-trigger--bold_4xtnu_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_4xtnu_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_4xtnu_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_4xtnu_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_4xtnu_75{border-color:var(--new-color-uva-black)}._select-listbox-trigger_4xtnu_15:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._select-listbox-trigger_4xtnu_15:focus-visible,._select-listbox-trigger_4xtnu_15:hover{background-color:var(--new-color-grey-300)}._select-listbox-trigger--noborder_4xtnu_89{border:none}._select-listbox-trigger--pillLeft_4xtnu_65+._select-listbox__wrapper_4xtnu_5{left:1rem}._select-listbox-trigger--pillRight_4xtnu_70+._select-listbox__wrapper--align-right_4xtnu_52{right:1rem}._select-listbox-trigger-icon_4xtnu_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_4xtnu_106{transform:rotate(180deg)}._select-listbox_4xtnu_1{background-color:var(--new-color-uva-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_4xtnu_120{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_4xtnu_133,._select-listbox-option_4xtnu_120:hover{background-color:var(--new-color-grey-300);box-shadow:0 0 0 1px var(--new-color-uva-white)}._select-listbox-option_4xtnu_120[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_4xtnu_143{background-color:var(--new-color-grey-400);height:1px;margin:1px -.25rem}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as b, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as g, useState as x, useRef as
|
|
2
|
+
import { forwardRef as g, useState as x, useRef as B, useEffect as y } from "react";
|
|
3
3
|
import { c as C } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import '../../assets/InputField.css';const t = {
|
|
5
5
|
"input-field-wrapper": "_input-field-wrapper_ndcss_1",
|
|
@@ -22,8 +22,8 @@ import '../../assets/InputField.css';const t = {
|
|
|
22
22
|
onClear: c,
|
|
23
23
|
...o
|
|
24
24
|
}, i) => {
|
|
25
|
-
const [a, m] = x(0), l =
|
|
26
|
-
|
|
25
|
+
const [a, m] = x(0), l = B(null);
|
|
26
|
+
y(() => {
|
|
27
27
|
l.current && m(l.current.offsetWidth);
|
|
28
28
|
}, [e]);
|
|
29
29
|
const h = () => {
|
|
@@ -47,7 +47,7 @@ import '../../assets/InputField.css';const t = {
|
|
|
47
47
|
style: { paddingRight: e && n ? a : void 0 }
|
|
48
48
|
}
|
|
49
49
|
),
|
|
50
|
-
e && n && /* @__PURE__ */ r(
|
|
50
|
+
!!e && n && /* @__PURE__ */ r(
|
|
51
51
|
"button",
|
|
52
52
|
{
|
|
53
53
|
type: "button",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render. */\n variant?: 'large';\n /** The width to render. */\n width?: 'small' | 'compact';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email';\n /** The background color of the input. InputField is by default transparent. */\n background?: 'white';\n /** The id of the input element. */\n id: string;\n /** An element that represents a clear button. */\n clearTrigger?: ReactNode;\n /** The callback that is invoked when the clear button is triggered. */\n onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {\n autoComplete = 'off',\n id,\n value,\n variant,\n width,\n type = 'text',\n background,\n clearTrigger,\n onClear,\n ...restProps\n }: InputFieldProps,\n forwardedRef\n ) => {\n const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (clearButtonRef.current) {\n setClearButtonWidth(clearButtonRef.current.offsetWidth);\n }\n }, [value]);\n\n const handleClearTriggerClick = () => {\n if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n onClear();\n forwardedRef.current.focus();\n }\n };\n\n return (\n <div className={styles['input-field-wrapper']}>\n <input\n {...restProps}\n autoComplete={autoComplete}\n ref={forwardedRef}\n id={id}\n className={clsx(styles['input-field'], {\n [styles['input-field--large']]: variant === 'large',\n [styles[`input-field--${width}`]]: width,\n [styles[`input-field--${background}`]]: background,\n })}\n type={type}\n value={value}\n style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n />\n {value && clearTrigger && (\n <button\n type=\"button\"\n className={styles['input-field__clear-button']}\n onClick={handleClearTriggerClick}\n ref={clearButtonRef}\n aria-label={`clear trigger for ${id}`}\n >\n {clearTrigger}\n </button>\n )}\n </div>\n );\n }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","background","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAyBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACZ,CAAK,CAAC;AAEV,UAAMe,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAT;AAAA,UACA,KAAKU;AAAA,UACL,IAAAT;AAAA,UACA,WAAWoB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGhB,MAAY;AAAA,YAC5C,CAACgB,EAAO,gBAAgBf,CAAK,EAAE,CAAC,GAAGA;AAAA,YACnC,CAACe,EAAO,gBAAgBb,CAAU,EAAE,CAAC,GAAGA;AAAA,UAAA,CACzC;AAAA,UACD,MAAAD;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASK,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,
|
|
1
|
+
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render. */\n variant?: 'large';\n /** The width to render. */\n width?: 'small' | 'compact';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email';\n /** The background color of the input. InputField is by default transparent. */\n background?: 'white';\n /** The id of the input element. */\n id: string;\n /** An element that represents a clear button. */\n clearTrigger?: ReactNode;\n /** The callback that is invoked when the clear button is triggered. */\n onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {\n autoComplete = 'off',\n id,\n value,\n variant,\n width,\n type = 'text',\n background,\n clearTrigger,\n onClear,\n ...restProps\n }: InputFieldProps,\n forwardedRef\n ) => {\n const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (clearButtonRef.current) {\n setClearButtonWidth(clearButtonRef.current.offsetWidth);\n }\n }, [value]);\n\n const handleClearTriggerClick = () => {\n if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n onClear();\n forwardedRef.current.focus();\n }\n };\n\n return (\n <div className={styles['input-field-wrapper']}>\n <input\n {...restProps}\n autoComplete={autoComplete}\n ref={forwardedRef}\n id={id}\n className={clsx(styles['input-field'], {\n [styles['input-field--large']]: variant === 'large',\n [styles[`input-field--${width}`]]: width,\n [styles[`input-field--${background}`]]: background,\n })}\n type={type}\n value={value}\n style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n />\n {Boolean(value) && clearTrigger && (\n <button\n type=\"button\"\n className={styles['input-field__clear-button']}\n onClick={handleClearTriggerClick}\n ref={clearButtonRef}\n aria-label={`clear trigger for ${id}`}\n >\n {clearTrigger}\n </button>\n )}\n </div>\n );\n }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","background","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAyBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACZ,CAAK,CAAC;AAEV,UAAMe,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAT;AAAA,UACA,KAAKU;AAAA,UACL,IAAAT;AAAA,UACA,WAAWoB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGhB,MAAY;AAAA,YAC5C,CAACgB,EAAO,gBAAgBf,CAAK,EAAE,CAAC,GAAGA;AAAA,YACnC,CAACe,EAAO,gBAAgBb,CAAU,EAAE,CAAC,GAAGA;AAAA,UAAA,CACzC;AAAA,UACD,MAAAD;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASK,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACC,EAAQT,KAAUK,KACjB,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBb,CAAE;AAAA,UAElC,UAAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx as a, jsxs as
|
|
1
|
+
import { jsx as a, jsxs as _ } from "react/jsx-runtime";
|
|
2
2
|
import '../../assets/MetaDataList.css';const t = {
|
|
3
|
-
"meta-data-list": "_meta-data-
|
|
4
|
-
"meta-data-list__item": "_meta-data-
|
|
5
|
-
"meta-data-list__term": "_meta-data-
|
|
6
|
-
"meta-data-list__description": "_meta-data-
|
|
7
|
-
}, m = ({ items:
|
|
3
|
+
"meta-data-list": "_meta-data-list_1ripo_1",
|
|
4
|
+
"meta-data-list__item": "_meta-data-list__item_1ripo_5",
|
|
5
|
+
"meta-data-list__term": "_meta-data-list__term_1ripo_16",
|
|
6
|
+
"meta-data-list__description": "_meta-data-list__description_1ripo_20"
|
|
7
|
+
}, m = ({ items: i }) => /* @__PURE__ */ a("dl", { className: t["meta-data-list"], children: Object.entries(i).map(([e, s]) => /* @__PURE__ */ _("div", { className: t["meta-data-list__item"], children: [
|
|
8
8
|
/* @__PURE__ */ a("dt", { className: t["meta-data-list__term"], children: e }),
|
|
9
|
-
/* @__PURE__ */ a("dd", { className: t["meta-data-list__description"], children:
|
|
9
|
+
/* @__PURE__ */ a("dd", { className: t["meta-data-list__description"], children: s })
|
|
10
10
|
] }, e)) });
|
|
11
11
|
export {
|
|
12
12
|
m as MetaDataList
|
|
@@ -1,102 +1,102 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as a, Fragment as $, jsxs as c } from "react/jsx-runtime";
|
|
2
2
|
import { useDialog as A } from "@react-aria/dialog";
|
|
3
3
|
import { FocusScope as C } from "@react-aria/focus";
|
|
4
4
|
import { useModal as K, useOverlay as M, usePreventScroll as U, OverlayContainer as V } from "@react-aria/overlays";
|
|
5
5
|
import { c as i } from "../../clsx-OuTLNxxd.js";
|
|
6
|
-
import { useRef as
|
|
6
|
+
import { useRef as d, useState as f, useEffect as q } from "react";
|
|
7
7
|
import { OverlayCloseButton as G } from "../OverlayCloseButton/OverlayCloseButton.js";
|
|
8
8
|
import { Spinner as J } from "../Spinner/Spinner.js";
|
|
9
9
|
import { Backdrop as O } from "../Backdrop/Backdrop.js";
|
|
10
10
|
import '../../assets/PageOverlay.css';const e = {
|
|
11
|
-
"page-overlay__container": "_page-
|
|
12
|
-
"page-overlay": "_page-
|
|
13
|
-
"page-overlay--full-screen": "_page-overlay--full-
|
|
14
|
-
"page-overlay--with-gutters": "_page-overlay--with-
|
|
15
|
-
"page-overlay__content": "_page-
|
|
16
|
-
"page-overlay__content--grey": "_page-overlay__content--
|
|
17
|
-
"page-overlay__content--white": "_page-overlay__content--
|
|
18
|
-
"page-overlay__children": "_page-
|
|
19
|
-
"page-overlay__title-wrapper": "_page-overlay__title-
|
|
20
|
-
"page-overlay__title": "_page-
|
|
21
|
-
"page-overlay__buttons-bar": "_page-overlay__buttons-
|
|
22
|
-
"page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--
|
|
23
|
-
"page-overlay__close": "_page-
|
|
11
|
+
"page-overlay__container": "_page-overlay__container_x277a_1",
|
|
12
|
+
"page-overlay": "_page-overlay_x277a_1",
|
|
13
|
+
"page-overlay--full-screen": "_page-overlay--full-screen_x277a_19",
|
|
14
|
+
"page-overlay--with-gutters": "_page-overlay--with-gutters_x277a_23",
|
|
15
|
+
"page-overlay__content": "_page-overlay__content_x277a_28",
|
|
16
|
+
"page-overlay__content--grey": "_page-overlay__content--grey_x277a_39",
|
|
17
|
+
"page-overlay__content--white": "_page-overlay__content--white_x277a_43",
|
|
18
|
+
"page-overlay__children": "_page-overlay__children_x277a_47",
|
|
19
|
+
"page-overlay__title-wrapper": "_page-overlay__title-wrapper_x277a_51",
|
|
20
|
+
"page-overlay__title": "_page-overlay__title_x277a_51",
|
|
21
|
+
"page-overlay__buttons-bar": "_page-overlay__buttons-bar_x277a_62",
|
|
22
|
+
"page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_x277a_88",
|
|
23
|
+
"page-overlay__close": "_page-overlay__close_x277a_94"
|
|
24
24
|
};
|
|
25
25
|
function le({
|
|
26
26
|
buttons: t,
|
|
27
27
|
children: h,
|
|
28
|
-
isLoading:
|
|
29
|
-
spinnerAriaValueText:
|
|
30
|
-
closeButtonAriaValueText:
|
|
31
|
-
isOpen:
|
|
32
|
-
noValidate:
|
|
33
|
-
onClose:
|
|
34
|
-
onSubmit:
|
|
28
|
+
isLoading: x,
|
|
29
|
+
spinnerAriaValueText: b = "Loading",
|
|
30
|
+
closeButtonAriaValueText: w = "Close",
|
|
31
|
+
isOpen: r,
|
|
32
|
+
noValidate: S = !1,
|
|
33
|
+
onClose: p,
|
|
34
|
+
onSubmit: N,
|
|
35
35
|
title: _,
|
|
36
36
|
headerContent: n,
|
|
37
|
-
variant:
|
|
38
|
-
contentBackgroundColor:
|
|
37
|
+
variant: g = "full-screen",
|
|
38
|
+
contentBackgroundColor: P = "grey"
|
|
39
39
|
}) {
|
|
40
|
-
const s =
|
|
41
|
-
U({ isDisabled: !
|
|
42
|
-
const
|
|
43
|
-
if (!
|
|
44
|
-
function
|
|
45
|
-
const
|
|
46
|
-
|
|
40
|
+
const s = d(null), v = d(null), [T, E] = f(!1), [L, B] = f(!1), { dialogProps: F, titleProps: H } = A({ role: "dialog" }, s), { modalProps: k } = K({ isDisabled: !r }), { overlayProps: z, underlayProps: D } = M({ isOpen: r, onClose: p }, s);
|
|
41
|
+
U({ isDisabled: !r }), q(() => {
|
|
42
|
+
const o = v.current;
|
|
43
|
+
if (!o) return;
|
|
44
|
+
function y() {
|
|
45
|
+
const u = o.scrollHeight, m = o.clientHeight, j = o.scrollTop;
|
|
46
|
+
E(u > m), B(j + m >= u);
|
|
47
47
|
}
|
|
48
48
|
function l() {
|
|
49
|
-
|
|
49
|
+
y();
|
|
50
50
|
}
|
|
51
|
-
|
|
51
|
+
o.addEventListener("scroll", l), window.addEventListener("resize", l);
|
|
52
52
|
const R = setTimeout(() => {
|
|
53
|
-
|
|
53
|
+
y();
|
|
54
54
|
}, 0);
|
|
55
55
|
return () => {
|
|
56
|
-
|
|
56
|
+
o.removeEventListener("scroll", l), window.removeEventListener("resize", l), clearTimeout(R);
|
|
57
57
|
};
|
|
58
|
-
}, [
|
|
59
|
-
function I(
|
|
60
|
-
|
|
58
|
+
}, [r, n]);
|
|
59
|
+
function I(o) {
|
|
60
|
+
o.stopPropagation();
|
|
61
61
|
}
|
|
62
|
-
return
|
|
62
|
+
return r ? /* @__PURE__ */ a(V, { className: e["page-overlay__container"], children: /* @__PURE__ */ a(O, { ...D, children: x ? /* @__PURE__ */ a(J, { ariaValueText: b }) : /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ c(
|
|
63
63
|
"div",
|
|
64
64
|
{
|
|
65
65
|
...F,
|
|
66
66
|
...k,
|
|
67
67
|
...z,
|
|
68
68
|
className: i(e["page-overlay"], {
|
|
69
|
-
[e[`page-overlay--${
|
|
69
|
+
[e[`page-overlay--${g}`]]: g
|
|
70
70
|
}),
|
|
71
71
|
onKeyUp: I,
|
|
72
72
|
role: "presentation",
|
|
73
73
|
ref: s,
|
|
74
74
|
children: [
|
|
75
75
|
(_ || n) && /* @__PURE__ */ c("div", { className: e["page-overlay__title-wrapper"], children: [
|
|
76
|
-
_ && /* @__PURE__ */
|
|
76
|
+
_ && /* @__PURE__ */ a("h1", { ...H, className: e["page-overlay__title"], children: _ }),
|
|
77
77
|
n,
|
|
78
|
-
/* @__PURE__ */
|
|
78
|
+
/* @__PURE__ */ a("span", { className: e["page-overlay__close"], children: /* @__PURE__ */ a(G, { "aria-label": w, onClick: p }) })
|
|
79
79
|
] }),
|
|
80
80
|
/* @__PURE__ */ c(
|
|
81
81
|
"form",
|
|
82
82
|
{
|
|
83
83
|
className: i(
|
|
84
84
|
e["page-overlay__content"],
|
|
85
|
-
e[`page-overlay__content--${
|
|
85
|
+
e[`page-overlay__content--${P}`],
|
|
86
86
|
{
|
|
87
87
|
[e["page-overlay--content-with-buttons"]]: t
|
|
88
88
|
}
|
|
89
89
|
),
|
|
90
|
-
onSubmit:
|
|
91
|
-
noValidate:
|
|
92
|
-
ref:
|
|
90
|
+
onSubmit: N,
|
|
91
|
+
noValidate: S,
|
|
92
|
+
ref: v,
|
|
93
93
|
children: [
|
|
94
|
-
/* @__PURE__ */
|
|
95
|
-
t && /* @__PURE__ */
|
|
94
|
+
/* @__PURE__ */ a("div", { className: e["page-overlay__children"], children: h }),
|
|
95
|
+
t && /* @__PURE__ */ a(
|
|
96
96
|
"div",
|
|
97
97
|
{
|
|
98
98
|
className: i(e["page-overlay__buttons-bar"], {
|
|
99
|
-
[e["page-overlay__buttons-bar--shadow"]]:
|
|
99
|
+
[e["page-overlay__buttons-bar--shadow"]]: T && !L
|
|
100
100
|
}),
|
|
101
101
|
children: t
|
|
102
102
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsxs as d, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { c as b } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import '../../assets/RadioButton.css';const t = {
|
|
4
|
-
"radio-button": "_radio-
|
|
5
|
-
"radio-button__input": "_radio-
|
|
6
|
-
"radio-button__label": "_radio-
|
|
7
|
-
"radio-button__description": "_radio-
|
|
8
|
-
"radio-button--gap-large": "_radio-button--gap-
|
|
4
|
+
"radio-button": "_radio-button_1i4mp_1",
|
|
5
|
+
"radio-button__input": "_radio-button__input_1i4mp_8",
|
|
6
|
+
"radio-button__label": "_radio-button__label_1i4mp_17",
|
|
7
|
+
"radio-button__description": "_radio-button__description_1i4mp_23",
|
|
8
|
+
"radio-button--gap-large": "_radio-button--gap-large_1i4mp_38"
|
|
9
9
|
}, s = ({ id: o, label: r, gap: _ = "normal", description: i, ...n }) => /* @__PURE__ */ d("div", { className: b(t["radio-button"], t[`radio-button--gap-${_}`]), children: [
|
|
10
10
|
/* @__PURE__ */ a(
|
|
11
11
|
"input",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as a, jsxs as C } from "react/jsx-runtime";
|
|
2
2
|
import { c as f } from "../../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { forwardRef as E, useRef as g, useEffect as c } from "react";
|
|
4
|
-
import { s as t } from "../../../SelectListbox.module-
|
|
4
|
+
import { s as t } from "../../../SelectListbox.module-yzXaWwsm.js";
|
|
5
5
|
import { Icon as L } from "../../Icon/Icon.js";
|
|
6
6
|
import { useSelect as N } from "../SelectProvider.js";
|
|
7
7
|
const O = E((d, u) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as c } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as i, useCallback as u, useEffect as l } from "react";
|
|
3
3
|
import { useSelect as m } from "../SelectProvider.js";
|
|
4
|
-
import { s as f } from "../../../SelectListbox.module-
|
|
4
|
+
import { s as f } from "../../../SelectListbox.module-yzXaWwsm.js";
|
|
5
5
|
const E = ({ children: o }) => {
|
|
6
6
|
const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
|
|
7
7
|
({ target: s }) => {
|
|
@@ -2,7 +2,7 @@ import { jsxs as D, Fragment as h, jsx as m } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as y } from "../../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { useRef as O, useEffect as d } from "react";
|
|
4
4
|
import { useSelect as x } from "../SelectProvider.js";
|
|
5
|
-
import { s as o } from "../../../SelectListbox.module-
|
|
5
|
+
import { s as o } from "../../../SelectListbox.module-yzXaWwsm.js";
|
|
6
6
|
const j = ({ option: l, index: t, dividerAfter: u, children: v }) => {
|
|
7
7
|
const i = O(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: p, setIsOpen: n, options: a } = x(), w = (e) => {
|
|
8
8
|
p(a[e]), n(!1);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as m, useRef as x } from "react";
|
|
3
|
-
import { s as i } from "../../../SelectListbox.module-
|
|
3
|
+
import { s as i } from "../../../SelectListbox.module-yzXaWwsm.js";
|
|
4
4
|
import { useSelect as a } from "../SelectProvider.js";
|
|
5
5
|
const h = m((l, e) => {
|
|
6
6
|
const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@uva-glass/component-library",
|
|
3
3
|
"author": "Team Glass - Frontend vrienden",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "3.
|
|
5
|
+
"version": "3.28.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@commitlint/cli": "^19.8.1",
|
|
47
47
|
"@commitlint/config-conventional": "^19.8.1",
|
|
48
|
-
"@react-aria/button": "^3.13.
|
|
49
|
-
"@react-aria/dialog": "^3.5.
|
|
50
|
-
"@react-aria/overlays": "^3.27.
|
|
48
|
+
"@react-aria/button": "^3.13.3",
|
|
49
|
+
"@react-aria/dialog": "^3.5.27",
|
|
50
|
+
"@react-aria/overlays": "^3.27.3",
|
|
51
51
|
"@react-types/dialog": "^3.5.19",
|
|
52
52
|
"@semantic-release/git": "^10.0.1",
|
|
53
53
|
"@semantic-release/gitlab": "^13.2.5",
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
"lexical": "^0.32.1"
|
|
113
113
|
},
|
|
114
114
|
"optionalDependencies": {
|
|
115
|
-
"@rollup/rollup-linux-x64-gnu": "^4.
|
|
115
|
+
"@rollup/rollup-linux-x64-gnu": "^4.43.0",
|
|
116
116
|
"@rspack/binding-darwin-arm64": "1.3.15",
|
|
117
117
|
"@rspack/binding-linux-x64-gnu": "1.3.15",
|
|
118
118
|
"@ast-grep/napi-linux-x64-gnu": "0.38.5"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectListbox.module-DHFU0NjU.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|