@uva-glass/component-library 3.50.2 → 3.50.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
._controls-
|
|
1
|
+
._controls-input_ol6hz_1{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-input_ol6hz_1:focus-visible+label{outline:.125rem dotted var(--color-navy-600);outline-offset:.125rem}._controls-input_ol6hz_1:checked+label{background-color:var(--color-navy-600);color:var(--color-uva-white);font-weight:var(--semibold)}._controls-input_ol6hz_1:disabled+label,._controls-input_ol6hz_1:disabled:hover+label{background-color:var(--color-grey-400);color:var(--color-grey-700);cursor:not-allowed}._controls-input_ol6hz_1:disabled:checked+label{background-color:var(--color-grey-500);color:var(--color-grey-900);font-weight:var(--semibold)}._controls-input_ol6hz_1:hover+label{background-color:var(--color-grey-300);color:var(--color-uva-black)}._controls-button_ol6hz_39{align-items:center;background-color:var(--color-uva-white);border:1px solid transparent;border-radius:.25rem;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_ol6hz_57{width:2.25rem}._controls-button_ol6hz_39:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-button--with-prefix_ol6hz_69{height:auto;padding:.125rem .5rem;width:auto}._controls-button--with-icon_ol6hz_75{gap:.5rem}._controls-button__wrapper_ol6hz_79{align-items:center;display:flex;flex-direction:column}._controls-button__prefix_ol6hz_85{color:var(--color-uva-700);font-size:var(--font-size-text-non-essential)}._controls-button__tooltip_ol6hz_90{background-color:var(--color-uva-white);box-shadow:0 0 .25rem #00000040;color:var(--color-grey-700);display:none;font-size:var(--font-size-text-non-essential);font-style:italic;font-weight:400;padding:.5rem 1rem;position:absolute;text-align:center;top:calc(100% + .5rem);z-index:1}._controls-button__tooltip--left_ol6hz_105{left:0rem}._controls-button__tooltip--center_ol6hz_109{left:50%;transform:translate(-50%)}._controls-button__tooltip--right_ol6hz_114{right:0rem}._controls-button__tooltip_ol6hz_90:before{border-color:transparent transparent var(--color-grey-400) transparent;border-style:solid;border-width:.5rem;bottom:calc(100% + .125rem);content:"";filter:blur(.125rem);position:absolute;z-index:-1}._controls-button__tooltip_ol6hz_90:after{border-color:transparent transparent var(--color-uva-white) transparent;border-style:solid;border-width:.5rem;bottom:100%;content:"";position:absolute}._controls-button_ol6hz_39:hover ._controls-button__tooltip_ol6hz_90,._controls-input_ol6hz_1:focus-visible+label ._controls-button__tooltip_ol6hz_90{display:block}._controls-button__tooltip--left_ol6hz_105:before,._controls-button__tooltip--left_ol6hz_105:after{left:.5rem}._controls-button__tooltip--center_ol6hz_109:before,._controls-button__tooltip--center_ol6hz_109:after{left:50%;transform:translate(-50%)}._controls-button__tooltip--right_ol6hz_114:before,._controls-button__tooltip--right_ol6hz_114:after{right:.5rem}
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useId as
|
|
3
|
-
import { c as
|
|
4
|
-
import { Icon as
|
|
5
|
-
import '../../assets/ControlsButton.css';const
|
|
6
|
-
"controls-input": "_controls-
|
|
7
|
-
"controls-button": "_controls-
|
|
8
|
-
"controls-button--squared": "_controls-button--
|
|
9
|
-
"controls-button--with-prefix": "_controls-button--with-
|
|
10
|
-
"controls-button--with-icon": "_controls-button--with-
|
|
11
|
-
"controls-button__wrapper": "_controls-
|
|
12
|
-
"controls-button__prefix": "_controls-
|
|
13
|
-
"controls-button__tooltip": "_controls-
|
|
14
|
-
"controls-button__tooltip--left": "_controls-button__tooltip--
|
|
15
|
-
"controls-button__tooltip--center": "_controls-button__tooltip--
|
|
16
|
-
"controls-button__tooltip--right": "_controls-button__tooltip--
|
|
17
|
-
},
|
|
18
|
-
type:
|
|
1
|
+
import { jsxs as c, Fragment as w, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { useId as g } from "react";
|
|
3
|
+
import { c as b } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { Icon as I } from "../Icon/Icon.js";
|
|
5
|
+
import '../../assets/ControlsButton.css';const o = {
|
|
6
|
+
"controls-input": "_controls-input_ol6hz_1",
|
|
7
|
+
"controls-button": "_controls-button_ol6hz_39",
|
|
8
|
+
"controls-button--squared": "_controls-button--squared_ol6hz_57",
|
|
9
|
+
"controls-button--with-prefix": "_controls-button--with-prefix_ol6hz_69",
|
|
10
|
+
"controls-button--with-icon": "_controls-button--with-icon_ol6hz_75",
|
|
11
|
+
"controls-button__wrapper": "_controls-button__wrapper_ol6hz_79",
|
|
12
|
+
"controls-button__prefix": "_controls-button__prefix_ol6hz_85",
|
|
13
|
+
"controls-button__tooltip": "_controls-button__tooltip_ol6hz_90",
|
|
14
|
+
"controls-button__tooltip--left": "_controls-button__tooltip--left_ol6hz_105",
|
|
15
|
+
"controls-button__tooltip--center": "_controls-button__tooltip--center_ol6hz_109",
|
|
16
|
+
"controls-button__tooltip--right": "_controls-button__tooltip--right_ol6hz_114"
|
|
17
|
+
}, j = ({
|
|
18
|
+
type: p = "checkbox",
|
|
19
19
|
label: n,
|
|
20
20
|
value: i,
|
|
21
21
|
iconName: r,
|
|
22
|
-
prefix:
|
|
22
|
+
prefix: l,
|
|
23
23
|
tooltip: s,
|
|
24
|
-
tooltipPosition:
|
|
25
|
-
name:
|
|
24
|
+
tooltipPosition: h = "center",
|
|
25
|
+
name: a,
|
|
26
26
|
forceSquared: d = !1,
|
|
27
|
-
checked:
|
|
27
|
+
checked: m,
|
|
28
28
|
disabled: f,
|
|
29
|
-
onSetValue:
|
|
29
|
+
onSetValue: z
|
|
30
30
|
}) => {
|
|
31
|
-
const
|
|
32
|
-
return /* @__PURE__ */
|
|
33
|
-
/* @__PURE__ */
|
|
31
|
+
const x = g(), e = (typeof n == "string" ? n : i).replace(/\s+/g, "_"), _ = `${x}${e}`, u = `${_}-tooltip`;
|
|
32
|
+
return /* @__PURE__ */ c(w, { children: [
|
|
33
|
+
/* @__PURE__ */ t(
|
|
34
34
|
"input",
|
|
35
35
|
{
|
|
36
|
-
type:
|
|
36
|
+
type: p,
|
|
37
37
|
id: _,
|
|
38
|
-
name:
|
|
38
|
+
name: a ?? e,
|
|
39
39
|
disabled: f,
|
|
40
40
|
value: i,
|
|
41
|
-
checked:
|
|
42
|
-
onChange:
|
|
43
|
-
className:
|
|
44
|
-
"aria-describedby": s ?
|
|
41
|
+
checked: m,
|
|
42
|
+
onChange: z,
|
|
43
|
+
className: o["controls-input"],
|
|
44
|
+
"aria-describedby": s ? u : void 0
|
|
45
45
|
}
|
|
46
46
|
),
|
|
47
|
-
/* @__PURE__ */
|
|
47
|
+
/* @__PURE__ */ c(
|
|
48
48
|
"label",
|
|
49
49
|
{
|
|
50
50
|
htmlFor: _,
|
|
51
|
-
className:
|
|
52
|
-
d &&
|
|
53
|
-
|
|
54
|
-
r &&
|
|
51
|
+
className: b(o["controls-button"], [
|
|
52
|
+
d && o["controls-button--squared"],
|
|
53
|
+
l && o["controls-button--with-prefix"],
|
|
54
|
+
r && o["controls-button--with-icon"]
|
|
55
55
|
]),
|
|
56
56
|
children: [
|
|
57
|
-
r && /* @__PURE__ */
|
|
58
|
-
/* @__PURE__ */
|
|
59
|
-
|
|
57
|
+
r && /* @__PURE__ */ t(I, { name: r, size: 20 }),
|
|
58
|
+
/* @__PURE__ */ c("div", { className: o["controls-button__wrapper"], children: [
|
|
59
|
+
l && /* @__PURE__ */ t("div", { className: o["controls-button__prefix"], children: l }),
|
|
60
60
|
n
|
|
61
61
|
] }),
|
|
62
|
-
s && /* @__PURE__ */
|
|
62
|
+
s && /* @__PURE__ */ t(
|
|
63
63
|
"div",
|
|
64
64
|
{
|
|
65
|
-
id:
|
|
65
|
+
id: u,
|
|
66
66
|
role: "tooltip",
|
|
67
|
-
className:
|
|
67
|
+
className: b(o["controls-button__tooltip"], o[`controls-button__tooltip--${h}`]),
|
|
68
68
|
children: s
|
|
69
69
|
}
|
|
70
70
|
)
|
|
@@ -74,6 +74,6 @@ import '../../assets/ControlsButton.css';const t = {
|
|
|
74
74
|
] });
|
|
75
75
|
};
|
|
76
76
|
export {
|
|
77
|
-
|
|
77
|
+
j as ControlsButton
|
|
78
78
|
};
|
|
79
79
|
//# sourceMappingURL=ControlsButton.js.map
|
|
@@ -1,51 +1,54 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import { useOverlay as
|
|
5
|
-
import { FocusScope as
|
|
6
|
-
import { WeekSelectorButton as
|
|
7
|
-
import { WeekSelectorOptionContainer as
|
|
8
|
-
import { WeekSelectorOption as
|
|
9
|
-
import { s as
|
|
1
|
+
import { jsx as t, jsxs as F } from "react/jsx-runtime";
|
|
2
|
+
import { useState as b, useRef as k, useMemo as $, useEffect as y } from "react";
|
|
3
|
+
import { createPortal as x } from "react-dom";
|
|
4
|
+
import { useOverlay as A, usePreventScroll as C, OverlayContainer as D } from "@react-aria/overlays";
|
|
5
|
+
import { FocusScope as L } from "@react-aria/focus";
|
|
6
|
+
import { WeekSelectorButton as E } from "./components/WeekSelectorButton.js";
|
|
7
|
+
import { WeekSelectorOptionContainer as K } from "./components/WeekSelectorOptionContainer.js";
|
|
8
|
+
import { WeekSelectorOption as M } from "./components/WeekSelectorOption.js";
|
|
9
|
+
import { s as O } from "../../WeekSelector.module-Clco7jTs.js";
|
|
10
10
|
import { Backdrop as P } from "../Backdrop/Backdrop.js";
|
|
11
11
|
import { useOnClickOutside as R } from "../hooks/useOnClickOutside.js";
|
|
12
12
|
const Z = ({
|
|
13
13
|
weeks: r,
|
|
14
14
|
currentPeriod: i = 0,
|
|
15
15
|
defaultSelection: n,
|
|
16
|
-
weekPrefix:
|
|
17
|
-
optionsHeader:
|
|
18
|
-
periodLabels:
|
|
19
|
-
onSelectWeek:
|
|
20
|
-
portalContainerRef:
|
|
21
|
-
optionContainerOffset:
|
|
16
|
+
weekPrefix: h,
|
|
17
|
+
optionsHeader: N,
|
|
18
|
+
periodLabels: v,
|
|
19
|
+
onSelectWeek: W,
|
|
20
|
+
portalContainerRef: u,
|
|
21
|
+
optionContainerOffset: m = []
|
|
22
22
|
}) => {
|
|
23
|
-
const [
|
|
24
|
-
|
|
23
|
+
const [a, p] = b(null), [o, l] = b(!1), f = k(null), s = k(null), B = $(() => Object.keys(r ?? {}), [r]);
|
|
24
|
+
y(() => {
|
|
25
25
|
if (n) {
|
|
26
26
|
for (const e in r)
|
|
27
27
|
if (r[e].some((c) => c.calendarWeekNumber === n && !c.isBlocked) && Number(e) > i) {
|
|
28
|
-
|
|
28
|
+
p(n);
|
|
29
29
|
return;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
for (const e in r) {
|
|
33
|
-
const c = r[e].find((
|
|
33
|
+
const c = r[e].find((q) => !q.isBlocked);
|
|
34
34
|
if (c && Number(e) > i) {
|
|
35
|
-
|
|
35
|
+
p(c.calendarWeekNumber);
|
|
36
36
|
return;
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
}, [r, i, n]),
|
|
40
|
-
o &&
|
|
41
|
-
s.current?.
|
|
39
|
+
}, [r, i, n]), y(() => {
|
|
40
|
+
o && requestAnimationFrame(() => {
|
|
41
|
+
const e = s.current?.querySelector(
|
|
42
|
+
`.${O["week-selector-option-week--selected"]}`
|
|
43
|
+
);
|
|
44
|
+
e ? e.focus() : s.current?.querySelector("button:not(:disabled)")?.focus();
|
|
42
45
|
});
|
|
43
|
-
}, [o]);
|
|
44
|
-
const
|
|
46
|
+
}, [o, a]);
|
|
47
|
+
const S = () => `${h} ${a ?? n ?? "?"}`;
|
|
45
48
|
R(f, (e) => {
|
|
46
49
|
s.current && s.current.contains(e.target) || l(!1);
|
|
47
50
|
});
|
|
48
|
-
const { overlayProps:
|
|
51
|
+
const { overlayProps: g, underlayProps: j } = A(
|
|
49
52
|
{
|
|
50
53
|
isOpen: o,
|
|
51
54
|
isDismissable: !0,
|
|
@@ -53,40 +56,40 @@ const Z = ({
|
|
|
53
56
|
},
|
|
54
57
|
s
|
|
55
58
|
);
|
|
56
|
-
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
+
C({ isDisabled: !o || !u?.current });
|
|
60
|
+
const d = /* @__PURE__ */ t(
|
|
61
|
+
K,
|
|
59
62
|
{
|
|
60
|
-
header:
|
|
61
|
-
periodLabels:
|
|
63
|
+
header: N,
|
|
64
|
+
periodLabels: v,
|
|
62
65
|
ref: s,
|
|
63
|
-
...
|
|
66
|
+
...m.length === 2 ? {
|
|
64
67
|
style: {
|
|
65
|
-
top:
|
|
66
|
-
left:
|
|
68
|
+
top: m[0],
|
|
69
|
+
left: m[1]
|
|
67
70
|
}
|
|
68
71
|
} : {},
|
|
69
|
-
children:
|
|
70
|
-
|
|
72
|
+
children: B.map((e) => /* @__PURE__ */ t(
|
|
73
|
+
M,
|
|
71
74
|
{
|
|
72
75
|
periodIndex: e,
|
|
73
76
|
weeks: r,
|
|
74
77
|
disabled: Number(e) <= i,
|
|
75
|
-
selectedOption:
|
|
76
|
-
setSelectedOption:
|
|
77
|
-
onSelectWeek:
|
|
78
|
+
selectedOption: a,
|
|
79
|
+
setSelectedOption: p,
|
|
80
|
+
onSelectWeek: W,
|
|
78
81
|
setIsOpen: l
|
|
79
82
|
},
|
|
80
83
|
e
|
|
81
84
|
))
|
|
82
85
|
}
|
|
83
86
|
);
|
|
84
|
-
return /* @__PURE__ */
|
|
85
|
-
/* @__PURE__ */ t(
|
|
86
|
-
o && (
|
|
87
|
-
/* @__PURE__ */ t(
|
|
88
|
-
|
|
89
|
-
) :
|
|
87
|
+
return /* @__PURE__ */ F("div", { className: O["week-selector"], tabIndex: -1, ref: f, children: [
|
|
88
|
+
/* @__PURE__ */ t(E, { label: S(), onClick: () => l(!o) }),
|
|
89
|
+
o && (u?.current ? x(
|
|
90
|
+
/* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(P, { ...j, children: /* @__PURE__ */ t(L, { contain: !0, restoreFocus: !0, children: /* @__PURE__ */ t("div", { ...g, children: d }) }) }) }),
|
|
91
|
+
u.current
|
|
92
|
+
) : d)
|
|
90
93
|
] });
|
|
91
94
|
};
|
|
92
95
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelector.js","sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { OverlayContainer, useOverlay, usePreventScroll } from '@react-aria/overlays';\r\nimport { FocusScope } from '@react-aria/focus';\r\n\r\nimport type { CSSProperties, RefObject } from 'react';\r\n\r\nimport { WeekSelectorButton } from './components/WeekSelectorButton';\r\nimport { WeekSelectorOptionContainer } from './components/WeekSelectorOptionContainer';\r\nimport { WeekSelectorOption } from './components/WeekSelectorOption';\r\nimport styles from './WeekSelector.module.css';\r\n\r\nimport { Backdrop } from 'components/Backdrop';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport type PeriodWeek = {\r\n academicWeekNumber: number;\r\n calendarWeekNumber: number;\r\n isBlocked: boolean;\r\n period: number;\r\n startDate: string;\r\n endDate: string;\r\n weekNumber: number;\r\n};\r\n\r\nexport interface WeekSelectorProps {\r\n /** Object with periodnumbers with array of weeks in period */\r\n weeks: Record<string, PeriodWeek[]>;\r\n /** Current period to disable previous periods */\r\n currentPeriod?: number;\r\n /** Default selected week */\r\n defaultSelection?: number;\r\n /** Prefix for the week button label */\r\n weekPrefix: string;\r\n /** Labels for each period */\r\n periodLabels: string[];\r\n /** Header text for the options container */\r\n optionsHeader: string;\r\n /** Callback function when a week is selected */\r\n onSelectWeek: (weeknumber: number) => void;\r\n /** Ref for the dropdown portal target */\r\n portalContainerRef?: RefObject<HTMLElement | null>;\r\n /** Optional WeekSelectorOptionContainer offset values [top, bottom] */\r\n optionContainerOffset?: number[];\r\n}\r\n\r\nexport const WeekSelector = ({\r\n weeks,\r\n currentPeriod = 0,\r\n defaultSelection,\r\n weekPrefix,\r\n optionsHeader,\r\n periodLabels,\r\n onSelectWeek,\r\n portalContainerRef,\r\n optionContainerOffset = [],\r\n}: WeekSelectorProps) => {\r\n const [selectedOption, setSelectedOption] = useState<number | null>(null);\r\n const [isOpen, setIsOpen] = useState<boolean>(false);\r\n const wrapperRef = useRef<HTMLDivElement>(null);\r\n const optionContainerRef = useRef<HTMLDivElement>(null);\r\n const periodKeys = useMemo(() => Object.keys(weeks ?? {}), [weeks]);\r\n\r\n useEffect(() => {\r\n if (defaultSelection) {\r\n for (const period in weeks) {\r\n if (\r\n weeks[period].some((week) => week.calendarWeekNumber === defaultSelection && !week.isBlocked) &&\r\n Number(period) > currentPeriod\r\n ) {\r\n setSelectedOption(defaultSelection);\r\n return;\r\n }\r\n }\r\n }\r\n for (const period in weeks) {\r\n const firstAvailableWeek = weeks[period].find((week) => !week.isBlocked);\r\n if (firstAvailableWeek && Number(period) > currentPeriod) {\r\n setSelectedOption(firstAvailableWeek.calendarWeekNumber);\r\n return;\r\n }\r\n }\r\n }, [weeks, currentPeriod, defaultSelection]);\r\n\r\n useEffect(() => {\r\n if (isOpen
|
|
1
|
+
{"version":3,"file":"WeekSelector.js","sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { OverlayContainer, useOverlay, usePreventScroll } from '@react-aria/overlays';\r\nimport { FocusScope } from '@react-aria/focus';\r\n\r\nimport type { CSSProperties, RefObject } from 'react';\r\n\r\nimport { WeekSelectorButton } from './components/WeekSelectorButton';\r\nimport { WeekSelectorOptionContainer } from './components/WeekSelectorOptionContainer';\r\nimport { WeekSelectorOption } from './components/WeekSelectorOption';\r\nimport styles from './WeekSelector.module.css';\r\n\r\nimport { Backdrop } from 'components/Backdrop';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport type PeriodWeek = {\r\n academicWeekNumber: number;\r\n calendarWeekNumber: number;\r\n isBlocked: boolean;\r\n period: number;\r\n startDate: string;\r\n endDate: string;\r\n weekNumber: number;\r\n};\r\n\r\nexport interface WeekSelectorProps {\r\n /** Object with periodnumbers with array of weeks in period */\r\n weeks: Record<string, PeriodWeek[]>;\r\n /** Current period to disable previous periods */\r\n currentPeriod?: number;\r\n /** Default selected week */\r\n defaultSelection?: number;\r\n /** Prefix for the week button label */\r\n weekPrefix: string;\r\n /** Labels for each period */\r\n periodLabels: string[];\r\n /** Header text for the options container */\r\n optionsHeader: string;\r\n /** Callback function when a week is selected */\r\n onSelectWeek: (weeknumber: number) => void;\r\n /** Ref for the dropdown portal target */\r\n portalContainerRef?: RefObject<HTMLElement | null>;\r\n /** Optional WeekSelectorOptionContainer offset values [top, bottom] */\r\n optionContainerOffset?: number[];\r\n}\r\n\r\nexport const WeekSelector = ({\r\n weeks,\r\n currentPeriod = 0,\r\n defaultSelection,\r\n weekPrefix,\r\n optionsHeader,\r\n periodLabels,\r\n onSelectWeek,\r\n portalContainerRef,\r\n optionContainerOffset = [],\r\n}: WeekSelectorProps) => {\r\n const [selectedOption, setSelectedOption] = useState<number | null>(null);\r\n const [isOpen, setIsOpen] = useState<boolean>(false);\r\n const wrapperRef = useRef<HTMLDivElement>(null);\r\n const optionContainerRef = useRef<HTMLDivElement>(null);\r\n const periodKeys = useMemo(() => Object.keys(weeks ?? {}), [weeks]);\r\n\r\n useEffect(() => {\r\n if (defaultSelection) {\r\n for (const period in weeks) {\r\n if (\r\n weeks[period].some((week) => week.calendarWeekNumber === defaultSelection && !week.isBlocked) &&\r\n Number(period) > currentPeriod\r\n ) {\r\n setSelectedOption(defaultSelection);\r\n return;\r\n }\r\n }\r\n }\r\n for (const period in weeks) {\r\n const firstAvailableWeek = weeks[period].find((week) => !week.isBlocked);\r\n if (firstAvailableWeek && Number(period) > currentPeriod) {\r\n setSelectedOption(firstAvailableWeek.calendarWeekNumber);\r\n return;\r\n }\r\n }\r\n }, [weeks, currentPeriod, defaultSelection]);\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n requestAnimationFrame(() => {\r\n const selectedButton = optionContainerRef.current?.querySelector<HTMLButtonElement>(\r\n `.${styles['week-selector-option-week--selected']}`\r\n );\r\n if (selectedButton) {\r\n selectedButton.focus();\r\n } else {\r\n optionContainerRef.current?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();\r\n }\r\n });\r\n }\r\n }, [isOpen, selectedOption]);\r\n\r\n const getButtonLabel = () => {\r\n const weekNumber = selectedOption ?? defaultSelection ?? '?';\r\n return `${weekPrefix} ${weekNumber}`;\r\n };\r\n\r\n useOnClickOutside(wrapperRef as RefObject<HTMLElement>, (event) => {\r\n if (optionContainerRef.current && optionContainerRef.current.contains(event.target as Node)) {\r\n return;\r\n }\r\n setIsOpen(false);\r\n });\r\n\r\n const { overlayProps, underlayProps } = useOverlay(\r\n {\r\n isOpen,\r\n isDismissable: true,\r\n onClose: () => setIsOpen(false),\r\n },\r\n optionContainerRef\r\n );\r\n\r\n usePreventScroll({ isDisabled: !isOpen || !portalContainerRef?.current });\r\n\r\n const OptionList = (\r\n <WeekSelectorOptionContainer\r\n header={optionsHeader}\r\n periodLabels={periodLabels}\r\n ref={optionContainerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n {...(optionContainerOffset.length === 2\r\n ? {\r\n style: {\r\n top: optionContainerOffset[0],\r\n left: optionContainerOffset[1],\r\n } as CSSProperties,\r\n }\r\n : {})}\r\n >\r\n {periodKeys.map((periodIndex) => (\r\n <WeekSelectorOption\r\n key={periodIndex}\r\n periodIndex={periodIndex}\r\n weeks={weeks}\r\n disabled={Number(periodIndex) <= currentPeriod}\r\n selectedOption={selectedOption}\r\n setSelectedOption={setSelectedOption}\r\n onSelectWeek={onSelectWeek}\r\n setIsOpen={setIsOpen}\r\n />\r\n ))}\r\n </WeekSelectorOptionContainer>\r\n );\r\n\r\n return (\r\n <div className={styles['week-selector']} tabIndex={-1} ref={wrapperRef}>\r\n <WeekSelectorButton label={getButtonLabel()} onClick={() => setIsOpen(!isOpen)} />\r\n\r\n {isOpen &&\r\n (portalContainerRef?.current\r\n ? createPortal(\r\n <OverlayContainer>\r\n <Backdrop {...underlayProps}>\r\n <FocusScope contain restoreFocus>\r\n <div {...overlayProps}>{OptionList}</div>\r\n </FocusScope>\r\n </Backdrop>\r\n </OverlayContainer>,\r\n portalContainerRef.current\r\n )\r\n : OptionList)}\r\n </div>\r\n );\r\n};\r\n"],"names":["WeekSelector","weeks","currentPeriod","defaultSelection","weekPrefix","optionsHeader","periodLabels","onSelectWeek","portalContainerRef","optionContainerOffset","selectedOption","setSelectedOption","useState","isOpen","setIsOpen","wrapperRef","useRef","optionContainerRef","periodKeys","useMemo","useEffect","period","week","firstAvailableWeek","selectedButton","styles","getButtonLabel","useOnClickOutside","event","overlayProps","underlayProps","useOverlay","usePreventScroll","OptionList","jsx","WeekSelectorOptionContainer","periodIndex","WeekSelectorOption","jsxs","WeekSelectorButton","createPortal","OverlayContainer","Backdrop","FocusScope"],"mappings":"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"}
|
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.50.
|
|
5
|
+
"version": "3.50.4",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@testing-library/jest-dom": "^6.9.1",
|
|
62
62
|
"@testing-library/react": "^16.3.0",
|
|
63
63
|
"@types/jest": "^30.0.0",
|
|
64
|
-
"@types/node": "^24.7.
|
|
64
|
+
"@types/node": "^24.7.1",
|
|
65
65
|
"@types/react": "^19.2.2",
|
|
66
66
|
"@types/react-dom": "^19.2.1",
|
|
67
67
|
"@uva-glass/eslint-config": "^1.3.11",
|