@uva-glass/component-library 3.26.3 → 3.27.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/components/SelectListbox/SelectListBox.stories.js +0 -5
- package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectProvider.js +33 -24
- package/dist/components/SelectListbox/SelectProvider.js.map +1 -1
- package/dist/components/TextArea/TextArea.js +15 -15
- package/dist/components/TextArea/TextArea.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,41 +1,50 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
-
import { createContext as g, useContext as
|
|
3
|
-
const
|
|
4
|
-
const [
|
|
5
|
-
|
|
6
|
-
},
|
|
2
|
+
import { createContext as g, useContext as C, useState as c, useRef as L, useId as P, useEffect as V } from "react";
|
|
3
|
+
const a = g({}), E = ({ options: t, defaultValue: l, children: u }) => {
|
|
4
|
+
const [d, i] = c({ value: "", label: "" }), [v, n] = c(!1), [x, o] = c(-1), f = L(P()), b = () => {
|
|
5
|
+
n((e) => !e);
|
|
6
|
+
}, I = (e) => t.find((s) => s.value === e) || {
|
|
7
7
|
value: -1,
|
|
8
8
|
label: "",
|
|
9
9
|
selectedLabel: "-"
|
|
10
|
-
},
|
|
11
|
-
const
|
|
12
|
-
|
|
10
|
+
}, r = (e) => {
|
|
11
|
+
const s = t.findIndex((S) => S.value === e.value);
|
|
12
|
+
o(s), i(e), n(!1);
|
|
13
13
|
};
|
|
14
|
-
return
|
|
15
|
-
|
|
14
|
+
return V(() => {
|
|
15
|
+
if (l !== -1) {
|
|
16
|
+
const e = t.find((s) => s.value === l) || {
|
|
17
|
+
value: -1,
|
|
18
|
+
label: "",
|
|
19
|
+
selectedLabel: "-"
|
|
20
|
+
};
|
|
21
|
+
r(e);
|
|
22
|
+
}
|
|
23
|
+
}, [l]), /* @__PURE__ */ m(
|
|
24
|
+
a.Provider,
|
|
16
25
|
{
|
|
17
26
|
value: {
|
|
18
|
-
options:
|
|
19
|
-
selectedValue:
|
|
20
|
-
setSelectedValue:
|
|
21
|
-
isOpen:
|
|
22
|
-
setIsOpen:
|
|
27
|
+
options: t,
|
|
28
|
+
selectedValue: d,
|
|
29
|
+
setSelectedValue: r,
|
|
30
|
+
isOpen: v,
|
|
31
|
+
setIsOpen: n,
|
|
23
32
|
toggleListbox: b,
|
|
24
|
-
getValue:
|
|
25
|
-
activeIndex:
|
|
26
|
-
setActiveIndex:
|
|
27
|
-
listboxId:
|
|
33
|
+
getValue: I,
|
|
34
|
+
activeIndex: x,
|
|
35
|
+
setActiveIndex: o,
|
|
36
|
+
listboxId: f.current
|
|
28
37
|
},
|
|
29
|
-
children:
|
|
38
|
+
children: u
|
|
30
39
|
}
|
|
31
40
|
);
|
|
32
41
|
}, O = () => {
|
|
33
|
-
const
|
|
34
|
-
if (
|
|
35
|
-
return
|
|
42
|
+
const t = C(a);
|
|
43
|
+
if (t === void 0) throw new Error("useSelect can only be used in an SelectProvider");
|
|
44
|
+
return t;
|
|
36
45
|
};
|
|
37
46
|
export {
|
|
38
|
-
|
|
47
|
+
E as SelectProvider,
|
|
39
48
|
O as useSelect
|
|
40
49
|
};
|
|
41
50
|
//# sourceMappingURL=SelectProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n value: SelectValue;\n label: string;\n selectedLabel?: string;\n disabled?: boolean;\n};\nexport interface SelectListboxContext {\n options: OptionValue[];\n selectedValue: OptionValue;\n setSelectedValue: (v: OptionValue) => void;\n isOpen: boolean;\n setIsOpen: (v: boolean) => void;\n toggleListbox: () => void;\n getValue: (value: SelectValue) => OptionValue;\n activeIndex: number;\n setActiveIndex: (v: number) => void;\n listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n options: OptionValue[];\n defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const listboxId = useRef<string>(useId());\n\n const toggleListbox = () => {\n setIsOpen((status) => !status);\n };\n\n const getValue = (value: SelectValue) => {\n return (\n options.find((option) => option.value === value) || {\n value: -1,\n label: '',\n selectedLabel: '-',\n }\n );\n };\n\n const setSelectedValue = (value: OptionValue) => {\n const selectedIndex = options.findIndex((option) => option.value === value.value);\n setActiveIndex(selectedIndex);\n setValue(value);\n setIsOpen(false);\n };\n\n if (defaultValue !== -1
|
|
1
|
+
{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n value: SelectValue;\n label: string;\n selectedLabel?: string;\n disabled?: boolean;\n};\nexport interface SelectListboxContext {\n options: OptionValue[];\n selectedValue: OptionValue;\n setSelectedValue: (v: OptionValue) => void;\n isOpen: boolean;\n setIsOpen: (v: boolean) => void;\n toggleListbox: () => void;\n getValue: (value: SelectValue) => OptionValue;\n activeIndex: number;\n setActiveIndex: (v: number) => void;\n listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n options: OptionValue[];\n defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const listboxId = useRef<string>(useId());\n\n const toggleListbox = () => {\n setIsOpen((status) => !status);\n };\n\n const getValue = (value: SelectValue) => {\n return (\n options.find((option) => option.value === value) || {\n value: -1,\n label: '',\n selectedLabel: '-',\n }\n );\n };\n\n const setSelectedValue = (value: OptionValue) => {\n const selectedIndex = options.findIndex((option) => option.value === value.value);\n setActiveIndex(selectedIndex);\n setValue(value);\n setIsOpen(false);\n };\n\n useEffect(() => {\n if (defaultValue !== -1) {\n const selectedValue = options.find((option) => option.value === defaultValue) || {\n value: -1,\n label: '',\n selectedLabel: '-',\n };\n setSelectedValue(selectedValue);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [defaultValue]);\n\n return (\n <SelectContext.Provider\n value={{\n options,\n selectedValue: value,\n setSelectedValue,\n isOpen,\n setIsOpen,\n toggleListbox,\n getValue,\n activeIndex,\n setActiveIndex,\n listboxId: listboxId.current,\n }}\n >\n {children}\n </SelectContext.Provider>\n );\n};\n\nexport const useSelect = () => {\n const context = useContext(SelectContext);\n\n if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","useEffect","selectedValue","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,IAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,GAAO,GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,EAC/B,GAEMC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,GAIEc,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EACjB;AAEA,SAAAY,EAAU,MAAM;AACd,QAAIlB,MAAiB,IAAI;AACjB,YAAAmB,IAAgBpB,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUf,CAAY,KAAK;AAAA,QAC/E,OAAO;AAAA,QACP,OAAO;AAAA,QACP,eAAe;AAAA,MACjB;AACA,MAAAgB,EAAiBG,CAAa;AAAA,IAAA;AAAA,EAChC,GAEC,CAACnB,CAAY,CAAC,GAGf,gBAAAoB;AAAA,IAACxB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EACH;AAEJ,GAEaoB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAW3B,CAAa;AAExC,MAAI0B,MAAY,OAAiB,OAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as _, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as x, useState as d } from "react";
|
|
3
3
|
import { c as i } from "../../clsx-OuTLNxxd.js";
|
|
4
|
-
import '../../assets/TextArea.css';const
|
|
4
|
+
import '../../assets/TextArea.css';const r = {
|
|
5
5
|
"text-area__wrapper": "_text-area__wrapper_13728_1",
|
|
6
6
|
"text-area__header": "_text-area__header_13728_7",
|
|
7
7
|
"text-area__label": "_text-area__label_13728_13",
|
|
@@ -9,27 +9,27 @@ import '../../assets/TextArea.css';const t = {
|
|
|
9
9
|
"text-area__word-count--alert": "_text-area__word-count--alert_13728_25",
|
|
10
10
|
"text-area": "_text-area_13728_1"
|
|
11
11
|
};
|
|
12
|
-
function w({ onChange:
|
|
13
|
-
const e = x(null), [
|
|
14
|
-
e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, s(e.current.value.length),
|
|
12
|
+
function w({ onChange: c, label: a, maxCharacters: t = 0, defaultValue: l = "" }) {
|
|
13
|
+
const e = x(null), [o, s] = d(0), u = () => {
|
|
14
|
+
e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, s(e.current.value.length), c(e.current.value.trim()));
|
|
15
15
|
};
|
|
16
|
-
return /* @__PURE__ */
|
|
17
|
-
/* @__PURE__ */
|
|
18
|
-
/* @__PURE__ */
|
|
19
|
-
|
|
20
|
-
/* @__PURE__ */
|
|
16
|
+
return /* @__PURE__ */ _("div", { className: r["text-area__wrapper"], children: [
|
|
17
|
+
(a || t > 0) && /* @__PURE__ */ _("div", { className: r["text-area__header"], children: [
|
|
18
|
+
a && /* @__PURE__ */ n("span", { className: r["text-area__label"], children: a }),
|
|
19
|
+
t > 0 && /* @__PURE__ */ _("div", { className: r["text-area__word-count"], children: [
|
|
20
|
+
/* @__PURE__ */ n("span", { className: i({ [r["text-area__word-count--alert"]]: o === t }), children: o }),
|
|
21
21
|
" / ",
|
|
22
|
-
|
|
22
|
+
t
|
|
23
23
|
] })
|
|
24
24
|
] }),
|
|
25
|
-
/* @__PURE__ */
|
|
25
|
+
/* @__PURE__ */ n(
|
|
26
26
|
"textarea",
|
|
27
27
|
{
|
|
28
28
|
ref: e,
|
|
29
|
-
className:
|
|
30
|
-
maxLength:
|
|
29
|
+
className: r["text-area"],
|
|
30
|
+
maxLength: t > 0 ? t : void 0,
|
|
31
31
|
onInput: u,
|
|
32
|
-
defaultValue:
|
|
32
|
+
defaultValue: l
|
|
33
33
|
}
|
|
34
34
|
)
|
|
35
35
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n /** Returns entered values as trimmed string */\n onChange: (value: string) => void;\n /** The label for the text area */\n label?: string;\n /** The max amount of allowed charecters in the text area */\n maxCharacters?: number;\n /** The default value for the text area */\n defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const [characterCount, setCharacterCount] = useState(0);\n\n const handleInput = () => {\n if (textAreaRef.current) {\n textAreaRef.current.style.height = 'auto';\n textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n setCharacterCount(textAreaRef.current.value.length);\n onChange(textAreaRef.current.value.trim());\n }\n };\n\n return (\n <div className={styles['text-area__wrapper']}>\n <div className={styles['text-area__header']}>\n
|
|
1
|
+
{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n /** Returns entered values as trimmed string */\n onChange: (value: string) => void;\n /** The label for the text area */\n label?: string;\n /** The max amount of allowed charecters in the text area */\n maxCharacters?: number;\n /** The default value for the text area */\n defaultValue?: string;\n}\n\nexport function TextArea({ onChange, label, maxCharacters = 0, defaultValue = '' }: TextAreaProps) {\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const [characterCount, setCharacterCount] = useState(0);\n\n const handleInput = () => {\n if (textAreaRef.current) {\n textAreaRef.current.style.height = 'auto';\n textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n setCharacterCount(textAreaRef.current.value.length);\n onChange(textAreaRef.current.value.trim());\n }\n };\n\n return (\n <div className={styles['text-area__wrapper']}>\n {(label || maxCharacters > 0) && (\n <div className={styles['text-area__header']}>\n {label && <span className={styles['text-area__label']}>{label}</span>}\n {maxCharacters > 0 && (\n <div className={styles['text-area__word-count']}>\n <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n {characterCount}\n </span>\n / {maxCharacters}\n </div>\n )}\n </div>\n )}\n\n <textarea\n ref={textAreaRef}\n className={styles['text-area']}\n maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n onInput={handleInput}\n defaultValue={defaultValue}\n />\n </div>\n );\n}\n"],"names":["TextArea","onChange","label","maxCharacters","defaultValue","textAreaRef","useRef","characterCount","setCharacterCount","useState","handleInput","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;AAgBgB,SAAAA,EAAS,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,GAAG,cAAAC,IAAe,MAAqB;AAC3F,QAAAC,IAAcC,EAA4B,IAAI,GAC9C,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAEhDC,IAAc,MAAM;AACxB,IAAIL,EAAY,YACFA,EAAA,QAAQ,MAAM,SAAS,QACnCA,EAAY,QAAQ,MAAM,SAAS,GAAGA,EAAY,QAAQ,YAAY,MAEpDG,EAAAH,EAAY,QAAQ,MAAM,MAAM,GAClDJ,EAASI,EAAY,QAAQ,MAAM,KAAA,CAAM;AAAA,EAE7C;AAEA,SACG,gBAAAM,EAAA,OAAA,EAAI,WAAWC,EAAO,oBAAoB,GACvC,UAAA;AAAA,KAAAV,KAASC,IAAgB,MACzB,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,mBAAmB,GACvC,UAAA;AAAA,MAAAV,uBAAU,QAAK,EAAA,WAAWU,EAAO,kBAAkB,GAAI,UAAMV,GAAA;AAAA,MAC7DC,IAAgB,KACf,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,uBAAuB,GAC5C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAK,EAAE,CAACF,EAAO,8BAA8B,CAAC,GAAGL,MAAmBJ,EAAc,CAAC,GACjG,UACHI,EAAA,CAAA;AAAA,QAAO;AAAA,QACOJ;AAAA,MAAA,EAChB,CAAA;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,WAAWO,EAAO,WAAW;AAAA,QAC7B,WAAWT,IAAgB,IAAIA,IAAgB;AAAA,QAC/C,SAASO;AAAA,QACT,cAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
|