@uva-glass/component-library 3.50.2 → 3.50.3
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,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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"}
|