@uva-glass/component-library 3.47.9 → 3.49.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/WeekSelector.module-D9MD4nVJ.js +17 -0
- package/dist/WeekSelector.module-D9MD4nVJ.js.map +1 -0
- package/dist/assets/Slider.css +1 -0
- package/dist/assets/WeekSelector.css +1 -1
- package/dist/components/Slider/Slider.d.ts +14 -0
- package/dist/components/Slider/Slider.js +111 -0
- package/dist/components/Slider/Slider.js.map +1 -0
- package/dist/components/Slider/Slider.stories.d.ts +5 -0
- package/dist/components/Slider/Slider.stories.js +39 -0
- package/dist/components/Slider/Slider.stories.js.map +1 -0
- package/dist/components/Slider/index.d.ts +1 -0
- package/dist/components/Slider/index.js +5 -0
- package/dist/components/Slider/index.js.map +1 -0
- package/dist/components/WeekSelector/WeekSelector.d.ts +6 -1
- package/dist/components/WeekSelector/WeekSelector.js +83 -69
- package/dist/components/WeekSelector/WeekSelector.js.map +1 -1
- package/dist/components/WeekSelector/WeekSelector.stories.d.ts +1 -0
- package/dist/components/WeekSelector/WeekSelector.stories.js +106 -36
- package/dist/components/WeekSelector/WeekSelector.stories.js.map +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorButton.js +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorOption.js +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorOption.js.map +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorOptionContainer.d.ts +3 -3
- package/dist/components/WeekSelector/components/WeekSelectorOptionContainer.js +11 -22
- package/dist/components/WeekSelector/components/WeekSelectorOptionContainer.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +24 -22
- package/dist/components/index.js.map +1 -1
- package/dist/index.js +24 -22
- package/dist/index.js.map +1 -1
- package/package.json +15 -14
- package/dist/WeekSelector.module-P6WOVdLX.js +0 -17
- package/dist/WeekSelector.module-P6WOVdLX.js.map +0 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import './assets/WeekSelector.css';const e = {
|
|
2
|
+
"week-selector": "_week-selector_ey7r9_1",
|
|
3
|
+
"week-selector-button": "_week-selector-button_ey7r9_5",
|
|
4
|
+
"week-selector-option-container": "_week-selector-option-container_ey7r9_26",
|
|
5
|
+
"week-selector-option-header": "_week-selector-option-header_ey7r9_40",
|
|
6
|
+
"week-selector-option-table": "_week-selector-option-table_ey7r9_48",
|
|
7
|
+
"week-selector-option-table-labels": "_week-selector-option-table-labels_ey7r9_53",
|
|
8
|
+
"week-selector-option-week-grid": "_week-selector-option-week-grid_ey7r9_54",
|
|
9
|
+
"week-selector-option-table-label": "_week-selector-option-table-label_ey7r9_53",
|
|
10
|
+
"week-selector-option-week-row": "_week-selector-option-week-row_ey7r9_77",
|
|
11
|
+
"week-selector-option-week": "_week-selector-option-week_ey7r9_54",
|
|
12
|
+
"week-selector-option-week--selected": "_week-selector-option-week--selected_ey7r9_114"
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
e as s
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=WeekSelector.module-D9MD4nVJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WeekSelector.module-D9MD4nVJ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._slider_wrapper_43bdt_1{align-items:center;display:flex;gap:1rem;width:100%}._slider_button_43bdt_8{align-items:center;appearance:none;aspect-ratio:1 / 1;background:none;border:1px solid transparent;border-radius:.25rem;color:var(--new-color-grey-700);cursor:pointer;display:flex;height:2rem;justify-content:center;width:2rem}._slider_button_43bdt_8:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._slider_button_43bdt_8:hover{border-color:var(--new-color-grey-700)}._slider_button_43bdt_8:disabled,._slider_button_43bdt_8:disabled:hover{border:none;cursor:not-allowed}._slider_trackwrapper_43bdt_38{display:flex;position:relative;width:100%}._slider_balloon_43bdt_44{color:var(--new-color-grey-700);position:absolute;text-align:center;top:-1.8125rem;white-space:nowrap}._slider_input_43bdt_52{appearance:none;background:var(--new-color-grey-400);flex-grow:1;height:.25rem}._slider_input_43bdt_52:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._slider_input_43bdt_52:disabled{cursor:not-allowed}._slider_input_43bdt_52::-webkit-slider-runnable-track{appearance:none;color:var(--new-color-navy-600);cursor:pointer;height:2rem;margin-top:-.125rem}._slider_input_43bdt_52:disabled::-webkit-slider-runnable-track{cursor:not-allowed}._slider_input_43bdt_52::-webkit-slider-thumb{appearance:none;background:var(--new-color-uva-white);border:2px solid var(--new-color-navy-800);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(.5rem + 1px);position:relative;width:var(--thumb-size)}._slider_input_43bdt_52:disabled::-webkit-slider-thumb,._slider_input_43bdt_52:disabled:hover::-webkit-slider-thumb{background:var(--new-color-grey-700);border:2px solid var(--new-color-grey-700);cursor:not-allowed}._slider_input_43bdt_52::-moz-range-thumb{appearance:none;background:var(--new-color-uva-white);border:2px solid var(--new-color-navy-800);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(-.25rem - 1px);position:relative;width:var(--thumb-size)}._slider_input_43bdt_52:disabled::-moz-range-thumb,._slider_input_43bdt_52:hover:disabled::-moz-range-thumb{background:var(--new-color-grey-700);border:2px solid var(--new-color-grey-700);cursor:not-allowed}._slider_input_43bdt_52::-ms-thumb{appearance:none;background:var(--new-color-uva-white);border:2px solid var(--new-color-navy-800);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(-.25rem - 1px);position:relative;width:var(--thumb-size)}._slider_input_43bdt_52:disabled::-ms-thumb,._slider_input_43bdt_52:hover:disabled::-ms-thumb{background:var(--new-color-grey-700);border:2px solid var(--new-color-grey-700);cursor:not-allowed}._slider_input_43bdt_52::-webkit-slider-thumb:hover{background:var(--new-color-navy-200)}._slider_input_43bdt_52::-moz-range-thumb:hover{background:var(--new-color-navy-200)}._slider_input_43bdt_52::-ms-thumb:hover{background:var(--new-color-navy-200)}._slider_input_43bdt_52::-moz-range-progress{background-color:var(--new-color-navy-600)}._slider_input_43bdt_52::-moz-range-track{background-color:var(--new-color-grey-400)}._slider_input_43bdt_52::-ms-fill-lower{background-color:var(--new-color-navy-600)}._slider_input_43bdt_52::-ms-fill-upper{background-color:var(--new-color-grey-400)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._week-
|
|
1
|
+
._week-selector_ey7r9_1{position:relative}._week-selector-button_ey7r9_5{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;height:2.75rem;justify-content:space-between;min-width:8rem;padding:0 .75rem 0 1rem}._week-selector-button_ey7r9_5:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._week-selector-option-container_ey7r9_26{background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.25rem;display:flex;flex-direction:column;gap:1rem;inset:100% auto auto 0;padding:1.5rem;position:absolute;width:max-content;z-index:10}._week-selector-option-header_ey7r9_40{color:var(--new-color-uva-black);font-family:inherit;font-size:var(--font-size-default);font-weight:var(--semibold);margin:0}._week-selector-option-table_ey7r9_48{display:flex;gap:1.5rem}._week-selector-option-table-labels_ey7r9_53,._week-selector-option-week-grid_ey7r9_54{display:flex;flex-direction:column;font-family:inherit;gap:.5rem;min-width:max-content;padding:.5rem 0}._week-selector-option-table-label_ey7r9_53{color:var(--new-color-uva-black);font-weight:var(--semibold);line-height:2.25rem}._week-selector-option-week-grid_ey7r9_54{border:1px solid var(--new-color-grey-700);border-radius:.5rem;max-width:max-content;padding:.5rem;width:100%}._week-selector-option-week-row_ey7r9_77{display:flex;gap:.25rem}._week-selector-option-week_ey7r9_54{align-items:center;background-color:var(--new-color-uva-white);border:none;border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;height:2.25rem;justify-content:center;width:2.25rem}._week-selector-option-week_ey7r9_54:disabled{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700)}._week-selector-option-week_ey7r9_54:disabled:active{background-color:var(--new-color-grey-500);color:var(--new-color-grey-00);font-weight:var(--semibold)}._week-selector-option-week_ey7r9_54:disabled:hover{cursor:not-allowed}._week-selector-option-week_ey7r9_54:hover{background-color:var(--new-color-grey-300)}._week-selector-option-week--selected_ey7r9_114,._week-selector-option-week--selected_ey7r9_114:hover{background-color:var(--new-color-navy-600);color:var(--new-color-uva-white)}._week-selector-option-week_ey7r9_54:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export interface SliderProps {
|
|
2
|
+
min: number;
|
|
3
|
+
max: number;
|
|
4
|
+
value?: number;
|
|
5
|
+
step?: number;
|
|
6
|
+
units?: string;
|
|
7
|
+
navigationLabels?: {
|
|
8
|
+
increase: string;
|
|
9
|
+
decrease: string;
|
|
10
|
+
};
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
onChange?: (value: number) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare const Slider: ({ min, max, value, step, units, navigationLabels, disabled, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { jsxs as g, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useState as S, useRef as m, useEffectEvent as x, useEffect as B } from "react";
|
|
3
|
+
import { c as H } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { Icon as E } from "../Icon/Icon.js";
|
|
5
|
+
import '../../assets/Slider.css';const T = "_slider_wrapper_43bdt_1", j = "_slider_button_43bdt_8", C = "_slider_trackwrapper_43bdt_38", D = "_slider_balloon_43bdt_44", F = "_slider_input_43bdt_52", l = {
|
|
6
|
+
slider_wrapper: T,
|
|
7
|
+
slider_button: j,
|
|
8
|
+
slider_trackwrapper: C,
|
|
9
|
+
slider_balloon: D,
|
|
10
|
+
slider_input: F
|
|
11
|
+
}, v = 0.5, I = 100, p = 16, U = 16, G = ({
|
|
12
|
+
min: t,
|
|
13
|
+
max: o,
|
|
14
|
+
value: i,
|
|
15
|
+
step: k = 1,
|
|
16
|
+
units: c,
|
|
17
|
+
navigationLabels: d,
|
|
18
|
+
disabled: n = !1,
|
|
19
|
+
onChange: _
|
|
20
|
+
}) => {
|
|
21
|
+
const [s, f] = S(i !== void 0 ? i : (t + o) * v), [V, P] = S(""), u = m(null), w = m(null), b = m(null), N = (r) => {
|
|
22
|
+
const e = s + r * k;
|
|
23
|
+
e >= t && e <= o && (f(e), h(e), y(e), _ && _(e));
|
|
24
|
+
}, R = (r) => {
|
|
25
|
+
const e = Number(r.target.value);
|
|
26
|
+
f(e), h(e), y(e), _ && _(e);
|
|
27
|
+
}, h = (r) => {
|
|
28
|
+
if (!u.current) return;
|
|
29
|
+
const e = (r - t) / (o - t) * I;
|
|
30
|
+
n ? u.current.style.background = `linear-gradient(
|
|
31
|
+
to right,
|
|
32
|
+
var(--new-color-grey-700) 0%,
|
|
33
|
+
var(--new-color-grey-700) ${e}%,
|
|
34
|
+
var(--new-color-grey-400) ${e}%,
|
|
35
|
+
var(--new-color-grey-400) 100%)` : u.current.style.background = `linear-gradient(
|
|
36
|
+
to right,
|
|
37
|
+
var(--new-color-navy-600) 0%,
|
|
38
|
+
var(--new-color-navy-600) ${e}%,
|
|
39
|
+
var(--new-color-grey-400) ${e}%,
|
|
40
|
+
var(--new-color-grey-400) 100%)`;
|
|
41
|
+
}, y = (r) => {
|
|
42
|
+
if (w.current && b.current) {
|
|
43
|
+
const e = b.current.clientWidth, $ = w.current.clientWidth - p, W = (r - t) / (o - t) * $ - (e - p) * v, z = Math.max(0, Math.min(W, $ - e + p * v));
|
|
44
|
+
P(`${z}px`);
|
|
45
|
+
}
|
|
46
|
+
}, M = x((r) => {
|
|
47
|
+
f(r), h(r), y(r);
|
|
48
|
+
});
|
|
49
|
+
return B(() => {
|
|
50
|
+
i !== void 0 && M(i);
|
|
51
|
+
}, [i, n]), /* @__PURE__ */ g("div", { className: l.slider_wrapper, children: [
|
|
52
|
+
/* @__PURE__ */ a(
|
|
53
|
+
"button",
|
|
54
|
+
{
|
|
55
|
+
className: l.slider_button,
|
|
56
|
+
onClick: () => N(-1),
|
|
57
|
+
"aria-label": d?.decrease ? d.decrease : "Verlaag waarde",
|
|
58
|
+
disabled: n,
|
|
59
|
+
children: /* @__PURE__ */ a(E, { name: "Minus", size: 20 })
|
|
60
|
+
}
|
|
61
|
+
),
|
|
62
|
+
/* @__PURE__ */ g("div", { className: l.slider_trackwrapper, ref: w, children: [
|
|
63
|
+
/* @__PURE__ */ g(
|
|
64
|
+
"div",
|
|
65
|
+
{
|
|
66
|
+
className: H(l.slider_balloon, { [l["slider_balloon--disabled"]]: n }),
|
|
67
|
+
style: { left: V },
|
|
68
|
+
ref: b,
|
|
69
|
+
children: [
|
|
70
|
+
s,
|
|
71
|
+
c && /* @__PURE__ */ a("span", { className: l.slider_units, children: c })
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ a(
|
|
76
|
+
"input",
|
|
77
|
+
{
|
|
78
|
+
type: "range",
|
|
79
|
+
className: l.slider_input,
|
|
80
|
+
min: t,
|
|
81
|
+
max: o,
|
|
82
|
+
step: k,
|
|
83
|
+
value: s,
|
|
84
|
+
onChange: R,
|
|
85
|
+
ref: u,
|
|
86
|
+
style: { "--thumb-size": `${p / U}rem` },
|
|
87
|
+
"aria-valuemin": t,
|
|
88
|
+
"aria-valuemax": o,
|
|
89
|
+
"aria-valuenow": s,
|
|
90
|
+
"aria-valuetext": c ? `${s} ${c}` : `${s}`,
|
|
91
|
+
"aria-label": "Slider",
|
|
92
|
+
disabled: n
|
|
93
|
+
}
|
|
94
|
+
)
|
|
95
|
+
] }),
|
|
96
|
+
/* @__PURE__ */ a(
|
|
97
|
+
"button",
|
|
98
|
+
{
|
|
99
|
+
className: l.slider_button,
|
|
100
|
+
onClick: () => N(1),
|
|
101
|
+
"aria-label": d?.increase ? d.increase : "Verhoog waarde",
|
|
102
|
+
disabled: n,
|
|
103
|
+
children: /* @__PURE__ */ a(E, { name: "Plus", size: 20 })
|
|
104
|
+
}
|
|
105
|
+
)
|
|
106
|
+
] });
|
|
107
|
+
};
|
|
108
|
+
export {
|
|
109
|
+
G as Slider
|
|
110
|
+
};
|
|
111
|
+
//# sourceMappingURL=Slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport type { CSSProperties } from 'react';\r\n\r\nimport styles from './Slider.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface SliderProps {\r\n /* The minimum value of the slider */\r\n min: number;\r\n /* The maximum value of the slider */\r\n max: number;\r\n /* The current value of the slider */\r\n value?: number;\r\n /* The step value of the slider */\r\n step?: number;\r\n /* The units to display next to the value */\r\n units?: string;\r\n /* aria-label labels for navigation buttons */\r\n navigationLabels?: { increase: string; decrease: string };\r\n /* Whether the slider is disabled */\r\n disabled?: boolean;\r\n /* Callback function when the value changes */\r\n onChange?: (value: number) => void;\r\n}\r\n\r\nconst HALF_STEP = 0.5;\r\nconst HUNDRED = 100;\r\nconst THUMB_SIZE = 16;\r\nconst REM = 16;\r\n\r\nexport const Slider = ({\r\n min,\r\n max,\r\n value,\r\n step = 1,\r\n units,\r\n navigationLabels,\r\n disabled = false,\r\n onChange,\r\n}: SliderProps) => {\r\n const [sliderValue, setSliderValue] = useState(value !== undefined ? value : (min + max) * HALF_STEP);\r\n const [balloonLeftPosition, setBalloonLeftPosition] = useState('');\r\n const sliderRef = useRef<HTMLInputElement>(null);\r\n const trackWrapperRef = useRef<HTMLDivElement>(null);\r\n const balloonRef = useRef<HTMLDivElement>(null);\r\n\r\n const handleButtonClick = (direction: number) => {\r\n const newValue = sliderValue + direction * step;\r\n if (newValue >= min && newValue <= max) {\r\n setSliderValue(newValue);\r\n paintValueOnTrack(newValue);\r\n setFloaterPosition(newValue);\r\n if (onChange) {\r\n onChange(newValue);\r\n }\r\n }\r\n };\r\n\r\n const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n const newValue = Number(event.target.value);\r\n setSliderValue(newValue);\r\n paintValueOnTrack(newValue);\r\n setFloaterPosition(newValue);\r\n if (onChange) {\r\n onChange(newValue);\r\n }\r\n };\r\n\r\n const paintValueOnTrack = (valueToPaint: number) => {\r\n if (!sliderRef.current) return;\r\n const percentage = ((valueToPaint - min) / (max - min)) * HUNDRED;\r\n if (disabled) {\r\n sliderRef.current.style.background = `linear-gradient(\r\n to right, \r\n var(--new-color-grey-700) 0%, \r\n var(--new-color-grey-700) ${percentage}%, \r\n var(--new-color-grey-400) ${percentage}%, \r\n var(--new-color-grey-400) 100%)`;\r\n } else {\r\n sliderRef.current.style.background = `linear-gradient(\r\n to right, \r\n var(--new-color-navy-600) 0%, \r\n var(--new-color-navy-600) ${percentage}%, \r\n var(--new-color-grey-400) ${percentage}%, \r\n var(--new-color-grey-400) 100%)`;\r\n }\r\n };\r\n\r\n const setFloaterPosition = (value: number) => {\r\n if (trackWrapperRef.current && balloonRef.current) {\r\n const balloonWidth = balloonRef.current.clientWidth;\r\n const trackWidth = trackWrapperRef.current.clientWidth - THUMB_SIZE;\r\n const position = ((value - min) / (max - min)) * trackWidth;\r\n const leftPosition = position - (balloonWidth - THUMB_SIZE) * HALF_STEP;\r\n const clampedLeft = Math.max(0, Math.min(leftPosition, trackWidth - balloonWidth + THUMB_SIZE * HALF_STEP));\r\n setBalloonLeftPosition(`${clampedLeft}px`);\r\n }\r\n };\r\n\r\n const initializeSlider = useEffectEvent((value: number) => {\r\n setSliderValue(value);\r\n paintValueOnTrack(value);\r\n setFloaterPosition(value);\r\n });\r\n\r\n useEffect(() => {\r\n if (value !== undefined) {\r\n initializeSlider(value);\r\n }\r\n }, [value, disabled]);\r\n\r\n return (\r\n <div className={styles['slider_wrapper']}>\r\n <button\r\n className={styles['slider_button']}\r\n onClick={() => handleButtonClick(-1)}\r\n aria-label={navigationLabels?.decrease ? navigationLabels.decrease : 'Verlaag waarde'}\r\n disabled={disabled}\r\n >\r\n <Icon name=\"Minus\" size={20} />\r\n </button>\r\n <div className={styles['slider_trackwrapper']} ref={trackWrapperRef}>\r\n <div\r\n className={clsx(styles['slider_balloon'], { [styles['slider_balloon--disabled']]: disabled })}\r\n style={{ left: balloonLeftPosition }}\r\n ref={balloonRef}\r\n >\r\n {sliderValue}\r\n {units && <span className={styles['slider_units']}>{units}</span>}\r\n </div>\r\n <input\r\n type=\"range\"\r\n className={styles['slider_input']}\r\n min={min}\r\n max={max}\r\n step={step}\r\n value={sliderValue}\r\n onChange={handleSliderChange}\r\n ref={sliderRef}\r\n style={{ '--thumb-size': `${THUMB_SIZE / REM}rem` } as CSSProperties}\r\n aria-valuemin={min}\r\n aria-valuemax={max}\r\n aria-valuenow={sliderValue}\r\n aria-valuetext={units ? `${sliderValue} ${units}` : `${sliderValue}`}\r\n aria-label=\"Slider\"\r\n disabled={disabled}\r\n />\r\n </div>\r\n <button\r\n className={styles['slider_button']}\r\n onClick={() => handleButtonClick(1)}\r\n aria-label={navigationLabels?.increase ? navigationLabels.increase : 'Verhoog waarde'}\r\n disabled={disabled}\r\n >\r\n <Icon name=\"Plus\" size={20} />\r\n </button>\r\n </div>\r\n );\r\n};\r\n"],"names":["HALF_STEP","HUNDRED","THUMB_SIZE","REM","Slider","min","max","value","step","units","navigationLabels","disabled","onChange","sliderValue","setSliderValue","useState","balloonLeftPosition","setBalloonLeftPosition","sliderRef","useRef","trackWrapperRef","balloonRef","handleButtonClick","direction","newValue","paintValueOnTrack","setFloaterPosition","handleSliderChange","event","valueToPaint","percentage","balloonWidth","trackWidth","leftPosition","clampedLeft","initializeSlider","useEffectEvent","useEffect","jsxs","styles","jsx","Icon","clsx"],"mappings":"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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { SliderProps } from './Slider';
|
|
3
|
+
declare const _default: Meta<SliderProps>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const SliderExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, SliderProps>;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsxs as o, Fragment as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { Slider as i } from "./Slider.js";
|
|
3
|
+
const l = "<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />", h = {
|
|
4
|
+
title: "Atoms/Slider",
|
|
5
|
+
component: i,
|
|
6
|
+
argTypes: {
|
|
7
|
+
onChange: {
|
|
8
|
+
action: "Slider value",
|
|
9
|
+
table: {
|
|
10
|
+
disable: !0
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
parameters: {
|
|
15
|
+
inspectComponent: i,
|
|
16
|
+
codeString: l
|
|
17
|
+
}
|
|
18
|
+
}, d = (n) => {
|
|
19
|
+
const t = (r) => {
|
|
20
|
+
n.onChange && n.onChange(r);
|
|
21
|
+
};
|
|
22
|
+
return /* @__PURE__ */ o(a, { children: [
|
|
23
|
+
/* @__PURE__ */ e("div", { style: { width: "150px" }, children: /* @__PURE__ */ e(i, { ...n, onChange: t }) }),
|
|
24
|
+
/* @__PURE__ */ e("div", { style: { width: "300px", marginTop: "40px" }, children: /* @__PURE__ */ e(i, { ...n, onChange: t, value: 40 }) }),
|
|
25
|
+
/* @__PURE__ */ e("div", { style: { width: "600px", marginTop: "40px" }, children: /* @__PURE__ */ e(i, { ...n, onChange: t, value: 60 }) })
|
|
26
|
+
] });
|
|
27
|
+
}, m = d.bind({});
|
|
28
|
+
m.args = {
|
|
29
|
+
min: 0,
|
|
30
|
+
max: 100,
|
|
31
|
+
step: 5,
|
|
32
|
+
units: "%",
|
|
33
|
+
value: 80
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
m as SliderExample,
|
|
37
|
+
h as default
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=Slider.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slider.stories.js","sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Atoms/Slider',\r\n component: Slider,\r\n argTypes: {\r\n onChange: {\r\n action: 'Slider value',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: Slider,\r\n codeString: codeString,\r\n },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n const handleSliderChange = (value: number) => {\r\n if (args.onChange) {\r\n args.onChange(value);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n <div style={{ width: '150px' }}>\r\n <Slider {...args} onChange={handleSliderChange} />\r\n </div>\r\n <div style={{ width: '300px', marginTop: '40px' }}>\r\n <Slider {...args} onChange={handleSliderChange} value={40} />\r\n </div>\r\n <div style={{ width: '600px', marginTop: '40px' }}>\r\n <Slider {...args} onChange={handleSliderChange} value={60} />\r\n </div>\r\n </>\r\n );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n min: 0,\r\n max: 100,\r\n step: 5,\r\n units: '%',\r\n value: 80,\r\n};\r\n"],"names":["codeString","Slider_stories","Slider","Template","args","handleSliderChange","value","jsxs","Fragment","jsx","SliderExample"],"mappings":";;AAKA,MAAMA,IACJ,2HAGFC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAiC,CAACC,MAAS;AAC/C,QAAMC,IAAqB,CAACC,MAAkB;AAC5C,IAAIF,EAAK,YACPA,EAAK,SAASE,CAAK;AAAA,EAEvB;AAEA,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,OAAO,EAAE,OAAO,QAAA,GACnB,UAAA,gBAAAA,EAACP,GAAA,EAAQ,GAAGE,GAAM,UAAUC,EAAA,CAAoB,GAClD;AAAA,sBACC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,WAAW,UACvC,UAAA,gBAAAI,EAACP,KAAQ,GAAGE,GAAM,UAAUC,GAAoB,OAAO,IAAI,GAC7D;AAAA,sBACC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,WAAW,UACvC,UAAA,gBAAAI,EAACP,KAAQ,GAAGE,GAAM,UAAUC,GAAoB,OAAO,IAAI,EAAA,CAC7D;AAAA,EAAA,GACF;AAEJ,GAEaK,IAAgBP,EAAS,KAAK,CAAA,CAAE;AAC7CO,EAAc,OAAO;AAAA,EACnB,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Slider';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
1
2
|
export type PeriodWeek = {
|
|
2
3
|
academicWeekNumber: number;
|
|
3
4
|
calendarWeekNumber: number;
|
|
@@ -22,5 +23,9 @@ export interface WeekSelectorProps {
|
|
|
22
23
|
optionsHeader: string;
|
|
23
24
|
/** Callback function when a week is selected */
|
|
24
25
|
onSelectWeek: (weeknumber: number) => void;
|
|
26
|
+
/** Ref for the dropdown portal target */
|
|
27
|
+
portalContainerRef?: RefObject<HTMLElement | null>;
|
|
28
|
+
/** Optional WeekSelectorOptionContainer offset values [top, bottom] */
|
|
29
|
+
optionContainerOffset?: number[];
|
|
25
30
|
}
|
|
26
|
-
export declare const WeekSelector: ({ weeks, currentPeriod, defaultSelection, weekPrefix, optionsHeader, periodLabels, onSelectWeek, }: WeekSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export declare const WeekSelector: ({ weeks, currentPeriod, defaultSelection, weekPrefix, optionsHeader, periodLabels, onSelectWeek, portalContainerRef, optionContainerOffset, }: WeekSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,81 +1,95 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useState as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { jsx as t, jsxs as j } from "react/jsx-runtime";
|
|
2
|
+
import { useState as d, useRef as O, useMemo as x, useEffect as h } from "react";
|
|
3
|
+
import { createPortal as A } from "react-dom";
|
|
4
|
+
import { useOverlay as C, usePreventScroll as D, OverlayContainer as L } from "@react-aria/overlays";
|
|
5
|
+
import { FocusScope as $ } from "@react-aria/focus";
|
|
6
|
+
import { WeekSelectorButton as q } from "./components/WeekSelectorButton.js";
|
|
7
|
+
import { WeekSelectorOptionContainer as E } from "./components/WeekSelectorOptionContainer.js";
|
|
8
|
+
import { WeekSelectorOption as K } from "./components/WeekSelectorOption.js";
|
|
9
|
+
import { s as M } from "../../WeekSelector.module-D9MD4nVJ.js";
|
|
10
|
+
import { Backdrop as P } from "../Backdrop/Backdrop.js";
|
|
11
|
+
import { useOnClickOutside as R } from "../hooks/useOnClickOutside.js";
|
|
12
|
+
const Z = ({
|
|
13
|
+
weeks: r,
|
|
14
|
+
currentPeriod: i = 0,
|
|
15
|
+
defaultSelection: n,
|
|
16
|
+
weekPrefix: k,
|
|
17
|
+
optionsHeader: y,
|
|
18
|
+
periodLabels: N,
|
|
19
|
+
onSelectWeek: v,
|
|
20
|
+
portalContainerRef: m,
|
|
21
|
+
optionContainerOffset: u = []
|
|
16
22
|
}) => {
|
|
17
|
-
const [
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
const [p, a] = d(null), [o, l] = d(!1), f = O(null), s = O(null), W = x(() => Object.keys(r ?? {}), [r]);
|
|
24
|
+
h(() => {
|
|
25
|
+
if (n) {
|
|
26
|
+
for (const e in r)
|
|
27
|
+
if (r[e].some((c) => c.calendarWeekNumber === n && !c.isBlocked) && Number(e) > i) {
|
|
28
|
+
a(n);
|
|
22
29
|
return;
|
|
23
30
|
}
|
|
24
31
|
}
|
|
25
|
-
for (const e in
|
|
26
|
-
const
|
|
27
|
-
if (
|
|
28
|
-
c
|
|
32
|
+
for (const e in r) {
|
|
33
|
+
const c = r[e].find((g) => !g.isBlocked);
|
|
34
|
+
if (c && Number(e) > i) {
|
|
35
|
+
a(c.calendarWeekNumber);
|
|
29
36
|
return;
|
|
30
37
|
}
|
|
31
38
|
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
39
|
+
}, [r, i, n]), h(() => {
|
|
40
|
+
o && s.current && requestAnimationFrame(() => {
|
|
41
|
+
s.current?.focus();
|
|
42
|
+
});
|
|
43
|
+
}, [o]);
|
|
44
|
+
const B = () => `${k} ${p ?? n ?? "?"}`;
|
|
45
|
+
R(f, (e) => {
|
|
46
|
+
s.current && s.current.contains(e.target) || l(!1);
|
|
47
|
+
});
|
|
48
|
+
const { overlayProps: F, underlayProps: S } = C(
|
|
49
|
+
{
|
|
50
|
+
isOpen: o,
|
|
51
|
+
isDismissable: !0,
|
|
52
|
+
onClose: () => l(!1)
|
|
53
|
+
},
|
|
54
|
+
s
|
|
55
|
+
);
|
|
56
|
+
D({ isDisabled: !o || !m?.current });
|
|
57
|
+
const b = /* @__PURE__ */ t(
|
|
58
|
+
E,
|
|
59
|
+
{
|
|
60
|
+
header: y,
|
|
61
|
+
periodLabels: N,
|
|
62
|
+
ref: s,
|
|
63
|
+
...u.length === 2 ? {
|
|
64
|
+
style: {
|
|
65
|
+
top: u[0],
|
|
66
|
+
left: u[1]
|
|
67
|
+
}
|
|
68
|
+
} : {},
|
|
69
|
+
children: W.map((e) => /* @__PURE__ */ t(
|
|
70
|
+
K,
|
|
71
|
+
{
|
|
72
|
+
periodIndex: e,
|
|
73
|
+
weeks: r,
|
|
74
|
+
disabled: Number(e) <= i,
|
|
75
|
+
selectedOption: p,
|
|
76
|
+
setSelectedOption: a,
|
|
77
|
+
onSelectWeek: v,
|
|
78
|
+
setIsOpen: l
|
|
79
|
+
},
|
|
80
|
+
e
|
|
81
|
+
))
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
return /* @__PURE__ */ j("div", { className: M["week-selector"], tabIndex: -1, ref: f, children: [
|
|
85
|
+
/* @__PURE__ */ t(q, { label: B(), onClick: () => l(!o) }),
|
|
86
|
+
o && (m?.current ? A(
|
|
87
|
+
/* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(P, { ...S, children: /* @__PURE__ */ t($, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ t("div", { ...F, children: b }) }) }) }),
|
|
88
|
+
m.current
|
|
89
|
+
) : b)
|
|
76
90
|
] });
|
|
77
91
|
};
|
|
78
92
|
export {
|
|
79
|
-
|
|
93
|
+
Z as WeekSelector
|
|
80
94
|
};
|
|
81
95
|
//# sourceMappingURL=WeekSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelector.js","sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useEffect,
|
|
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 && optionContainerRef.current) {\r\n requestAnimationFrame(() => {\r\n optionContainerRef.current?.focus();\r\n });\r\n }\r\n }, [isOpen]);\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 autoFocus>\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","getButtonLabel","useOnClickOutside","event","overlayProps","underlayProps","useOverlay","usePreventScroll","OptionList","jsx","WeekSelectorOptionContainer","periodIndex","WeekSelectorOption","jsxs","styles","WeekSelectorButton","createPortal","OverlayContainer","Backdrop","FocusScope"],"mappings":"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"}
|
|
@@ -3,3 +3,4 @@ import { WeekSelectorProps } from 'components/WeekSelector';
|
|
|
3
3
|
declare const _default: Meta<WeekSelectorProps>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const WeekSelectorExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, WeekSelectorProps>;
|
|
6
|
+
export declare const InAPortal: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, WeekSelectorProps>;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsxs as r, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
2
|
+
import { useRef as c } from "react";
|
|
3
|
+
import { mockWeeks as d } from "./mockdata.js";
|
|
4
|
+
import { WeekSelector as n } from "./WeekSelector.js";
|
|
5
|
+
const s = `<WeekSelector
|
|
5
6
|
weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};
|
|
6
7
|
currentPeriod?={number};
|
|
7
8
|
defaultSelection?={number};
|
|
@@ -9,9 +10,9 @@ const c = `<WeekSelector
|
|
|
9
10
|
periodLabels={string[]};
|
|
10
11
|
optionsHeader={string};
|
|
11
12
|
onSelectWeek={(weeknumber: {number}) => void};
|
|
12
|
-
/>`,
|
|
13
|
+
/>`, g = {
|
|
13
14
|
title: "Molecules/WeekSelector",
|
|
14
|
-
component:
|
|
15
|
+
component: n,
|
|
15
16
|
argTypes: {
|
|
16
17
|
onSelectWeek: {
|
|
17
18
|
action: "selected week",
|
|
@@ -19,16 +20,26 @@ const c = `<WeekSelector
|
|
|
19
20
|
disable: !0
|
|
20
21
|
}
|
|
21
22
|
},
|
|
23
|
+
portalContainerRef: {
|
|
24
|
+
table: {
|
|
25
|
+
disable: !0
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
optionContainerOffset: {
|
|
29
|
+
table: {
|
|
30
|
+
disable: !0
|
|
31
|
+
}
|
|
32
|
+
},
|
|
22
33
|
currentPeriod: { table: { disable: !0 } },
|
|
23
34
|
defaultSelection: { table: { disable: !0 } }
|
|
24
35
|
},
|
|
25
36
|
parameters: {
|
|
26
|
-
inspectComponent:
|
|
27
|
-
codeString:
|
|
37
|
+
inspectComponent: n,
|
|
38
|
+
codeString: s
|
|
28
39
|
}
|
|
29
|
-
},
|
|
30
|
-
const
|
|
31
|
-
|
|
40
|
+
}, p = (e) => {
|
|
41
|
+
const o = (l) => {
|
|
42
|
+
e.onSelectWeek(l);
|
|
32
43
|
};
|
|
33
44
|
return /* @__PURE__ */ r(
|
|
34
45
|
"div",
|
|
@@ -42,80 +53,139 @@ const c = `<WeekSelector
|
|
|
42
53
|
flexDirection: "column"
|
|
43
54
|
},
|
|
44
55
|
children: [
|
|
45
|
-
/* @__PURE__ */ t(
|
|
56
|
+
/* @__PURE__ */ t(n, { ...e, currentPeriod: 1, onSelectWeek: o }),
|
|
46
57
|
/* @__PURE__ */ t(
|
|
47
|
-
|
|
58
|
+
n,
|
|
48
59
|
{
|
|
49
|
-
...
|
|
60
|
+
...e,
|
|
50
61
|
defaultSelection: 45,
|
|
51
62
|
currentPeriod: 2,
|
|
52
|
-
onSelectWeek:
|
|
63
|
+
onSelectWeek: o,
|
|
53
64
|
optionsHeader: "Kies een planning - Blok 2"
|
|
54
65
|
}
|
|
55
66
|
),
|
|
56
67
|
/* @__PURE__ */ t(
|
|
57
|
-
|
|
68
|
+
n,
|
|
58
69
|
{
|
|
59
|
-
...
|
|
70
|
+
...e,
|
|
60
71
|
defaultSelection: 6,
|
|
61
72
|
currentPeriod: 3,
|
|
62
|
-
onSelectWeek:
|
|
73
|
+
onSelectWeek: o,
|
|
63
74
|
optionsHeader: "Kies een planning - Blok 3"
|
|
64
75
|
}
|
|
65
76
|
),
|
|
66
77
|
/* @__PURE__ */ t(
|
|
67
|
-
|
|
78
|
+
n,
|
|
68
79
|
{
|
|
69
|
-
...
|
|
80
|
+
...e,
|
|
70
81
|
defaultSelection: 13,
|
|
71
82
|
currentPeriod: 4,
|
|
72
|
-
onSelectWeek:
|
|
83
|
+
onSelectWeek: o,
|
|
73
84
|
optionsHeader: "Kies een planning - Blok 4"
|
|
74
85
|
}
|
|
75
86
|
),
|
|
76
87
|
/* @__PURE__ */ t(
|
|
77
|
-
|
|
88
|
+
n,
|
|
78
89
|
{
|
|
79
|
-
...
|
|
90
|
+
...e,
|
|
80
91
|
defaultSelection: 23,
|
|
81
92
|
currentPeriod: 5,
|
|
82
|
-
onSelectWeek:
|
|
93
|
+
onSelectWeek: o,
|
|
83
94
|
optionsHeader: "Kies een planning - Blok 5"
|
|
84
95
|
}
|
|
85
96
|
),
|
|
86
97
|
/* @__PURE__ */ t(
|
|
87
|
-
|
|
98
|
+
n,
|
|
88
99
|
{
|
|
89
|
-
...
|
|
100
|
+
...e,
|
|
90
101
|
defaultSelection: 28,
|
|
91
102
|
currentPeriod: 6,
|
|
92
|
-
onSelectWeek:
|
|
103
|
+
onSelectWeek: o,
|
|
93
104
|
optionsHeader: "Kies een planning - Blok 6"
|
|
94
105
|
}
|
|
95
106
|
),
|
|
96
107
|
/* @__PURE__ */ t(
|
|
97
|
-
|
|
108
|
+
n,
|
|
98
109
|
{
|
|
99
|
-
...
|
|
110
|
+
...e,
|
|
100
111
|
defaultSelection: 36,
|
|
101
|
-
onSelectWeek:
|
|
112
|
+
onSelectWeek: o,
|
|
102
113
|
optionsHeader: "Kies een planning - Zomer"
|
|
103
114
|
}
|
|
104
115
|
)
|
|
105
116
|
]
|
|
106
117
|
}
|
|
107
118
|
);
|
|
108
|
-
},
|
|
109
|
-
weeks:
|
|
119
|
+
}, i = {
|
|
120
|
+
weeks: d,
|
|
110
121
|
weekPrefix: "week",
|
|
111
122
|
periodLabels: ["Blok 1", "Blok 2", "Blok 3", "Blok 4", "Blok 5", "Blok 6", "Zomer"],
|
|
112
123
|
optionsHeader: "Kies een planning - Blok 1"
|
|
113
|
-
},
|
|
114
|
-
|
|
115
|
-
...
|
|
124
|
+
}, k = p.bind({});
|
|
125
|
+
k.args = {
|
|
126
|
+
...i
|
|
127
|
+
};
|
|
128
|
+
const u = (e) => {
|
|
129
|
+
const o = (a) => {
|
|
130
|
+
e.onSelectWeek(a);
|
|
131
|
+
}, l = c(null);
|
|
132
|
+
return /* @__PURE__ */ r(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
ref: l,
|
|
136
|
+
style: {
|
|
137
|
+
padding: "1rem",
|
|
138
|
+
backgroundColor: "#EEE",
|
|
139
|
+
display: "flex",
|
|
140
|
+
gap: "1rem",
|
|
141
|
+
alignItems: "flex-start",
|
|
142
|
+
flexDirection: "column"
|
|
143
|
+
},
|
|
144
|
+
children: [
|
|
145
|
+
/* @__PURE__ */ t(
|
|
146
|
+
n,
|
|
147
|
+
{
|
|
148
|
+
...e,
|
|
149
|
+
currentPeriod: 1,
|
|
150
|
+
onSelectWeek: o,
|
|
151
|
+
portalContainerRef: l,
|
|
152
|
+
optionContainerOffset: [-200, -250]
|
|
153
|
+
}
|
|
154
|
+
),
|
|
155
|
+
/* @__PURE__ */ t(
|
|
156
|
+
n,
|
|
157
|
+
{
|
|
158
|
+
...e,
|
|
159
|
+
defaultSelection: 45,
|
|
160
|
+
currentPeriod: 2,
|
|
161
|
+
onSelectWeek: o,
|
|
162
|
+
optionsHeader: "Kies een planning - Blok 2",
|
|
163
|
+
portalContainerRef: l,
|
|
164
|
+
optionContainerOffset: [-200, -250]
|
|
165
|
+
}
|
|
166
|
+
),
|
|
167
|
+
/* @__PURE__ */ t(
|
|
168
|
+
n,
|
|
169
|
+
{
|
|
170
|
+
...e,
|
|
171
|
+
defaultSelection: 6,
|
|
172
|
+
currentPeriod: 3,
|
|
173
|
+
onSelectWeek: o,
|
|
174
|
+
optionsHeader: "Kies een planning - Blok 3",
|
|
175
|
+
portalContainerRef: l,
|
|
176
|
+
optionContainerOffset: [-200, -250]
|
|
177
|
+
}
|
|
178
|
+
)
|
|
179
|
+
]
|
|
180
|
+
}
|
|
181
|
+
);
|
|
182
|
+
}, f = u.bind({});
|
|
183
|
+
f.args = {
|
|
184
|
+
...i
|
|
116
185
|
};
|
|
117
186
|
export {
|
|
118
|
-
|
|
119
|
-
|
|
187
|
+
f as InAPortal,
|
|
188
|
+
k as WeekSelectorExample,
|
|
189
|
+
g as default
|
|
120
190
|
};
|
|
121
191
|
//# sourceMappingURL=WeekSelector.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelector.stories.js","sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n currentPeriod?={number};\r\n defaultSelection?={number};\r\n weekPrefix={string};\r\n periodLabels={string[]};\r\n optionsHeader={string};\r\n onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/WeekSelector',\r\n component: WeekSelector,\r\n argTypes: {\r\n onSelectWeek: {\r\n action: 'selected week',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n currentPeriod: { table: { disable: true } },\r\n defaultSelection: { table: { disable: true } },\r\n },\r\n parameters: {\r\n inspectComponent: WeekSelector,\r\n codeString: codeString,\r\n },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n const handleSelectWeek = (weekNumber: number) => {\r\n args.onSelectWeek(weekNumber);\r\n };\r\n\r\n return (\r\n <div\r\n style={{\r\n padding: '1rem',\r\n backgroundColor: '#EEE',\r\n display: 'flex',\r\n gap: '1rem',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n }}\r\n >\r\n <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={45}\r\n currentPeriod={2}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 2\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={6}\r\n currentPeriod={3}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 3\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={13}\r\n currentPeriod={4}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 4\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={23}\r\n currentPeriod={5}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 5\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={28}\r\n currentPeriod={6}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 6\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={36}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Zomer\"\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nconst defaultArgs: Partial<WeekSelectorProps> = {\r\n weeks: mockWeeks,\r\n weekPrefix: 'week',\r\n periodLabels: ['Blok 1', 'Blok 2', 'Blok 3', 'Blok 4', 'Blok 5', 'Blok 6', 'Zomer'],\r\n optionsHeader: 'Kies een planning - Blok 1',\r\n};\r\n\r\nexport const WeekSelectorExample = Template.bind({});\r\n\r\nWeekSelectorExample.args = {\r\n ...defaultArgs,\r\n};\r\n"],"names":["codeString","WeekSelector_stories","WeekSelector","Template","args","handleSelectWeek","weekNumber","jsxs","jsx","defaultArgs","mockWeeks","WeekSelectorExample"],"mappings":"
|
|
1
|
+
{"version":3,"file":"WeekSelector.stories.js","sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import { useRef } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n currentPeriod?={number};\r\n defaultSelection?={number};\r\n weekPrefix={string};\r\n periodLabels={string[]};\r\n optionsHeader={string};\r\n onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/WeekSelector',\r\n component: WeekSelector,\r\n argTypes: {\r\n onSelectWeek: {\r\n action: 'selected week',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n portalContainerRef: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n optionContainerOffset: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n currentPeriod: { table: { disable: true } },\r\n defaultSelection: { table: { disable: true } },\r\n },\r\n parameters: {\r\n inspectComponent: WeekSelector,\r\n codeString: codeString,\r\n },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n const handleSelectWeek = (weekNumber: number) => {\r\n args.onSelectWeek(weekNumber);\r\n };\r\n\r\n return (\r\n <div\r\n style={{\r\n padding: '1rem',\r\n backgroundColor: '#EEE',\r\n display: 'flex',\r\n gap: '1rem',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n }}\r\n >\r\n <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={45}\r\n currentPeriod={2}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 2\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={6}\r\n currentPeriod={3}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 3\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={13}\r\n currentPeriod={4}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 4\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={23}\r\n currentPeriod={5}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 5\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={28}\r\n currentPeriod={6}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 6\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={36}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Zomer\"\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nconst defaultArgs: Partial<WeekSelectorProps> = {\r\n weeks: mockWeeks,\r\n weekPrefix: 'week',\r\n periodLabels: ['Blok 1', 'Blok 2', 'Blok 3', 'Blok 4', 'Blok 5', 'Blok 6', 'Zomer'],\r\n optionsHeader: 'Kies een planning - Blok 1',\r\n};\r\n\r\nexport const WeekSelectorExample = Template.bind({});\r\n\r\nWeekSelectorExample.args = {\r\n ...defaultArgs,\r\n};\r\n\r\nconst TemplateWithRef: StoryFn<WeekSelectorProps> = (args) => {\r\n const handleSelectWeek = (weekNumber: number) => {\r\n args.onSelectWeek(weekNumber);\r\n };\r\n\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n style={{\r\n padding: '1rem',\r\n backgroundColor: '#EEE',\r\n display: 'flex',\r\n gap: '1rem',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n }}\r\n >\r\n <WeekSelector\r\n {...args}\r\n currentPeriod={1}\r\n onSelectWeek={handleSelectWeek}\r\n portalContainerRef={containerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n optionContainerOffset={[-200, -250]}\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={45}\r\n currentPeriod={2}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 2\"\r\n portalContainerRef={containerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n optionContainerOffset={[-200, -250]}\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={6}\r\n currentPeriod={3}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 3\"\r\n portalContainerRef={containerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n optionContainerOffset={[-200, -250]}\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nexport const InAPortal = TemplateWithRef.bind({});\r\n\r\nInAPortal.args = {\r\n ...defaultArgs,\r\n};\r\n"],"names":["codeString","WeekSelector_stories","WeekSelector","Template","args","handleSelectWeek","weekNumber","jsxs","jsx","defaultArgs","mockWeeks","WeekSelectorExample","TemplateWithRef","containerRef","useRef","InAPortal"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as o, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { Icon as s } from "../../Icon/Icon.js";
|
|
3
|
-
import { s as n } from "../../../WeekSelector.module-
|
|
3
|
+
import { s as n } from "../../../WeekSelector.module-D9MD4nVJ.js";
|
|
4
4
|
const m = ({ label: e, onClick: t }) => /* @__PURE__ */ o(
|
|
5
5
|
"button",
|
|
6
6
|
{
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { c as f } from "../../../clsx-OuTLNxxd.js";
|
|
3
|
-
import { s as a } from "../../../WeekSelector.module-
|
|
3
|
+
import { s as a } from "../../../WeekSelector.module-D9MD4nVJ.js";
|
|
4
4
|
const h = ({
|
|
5
5
|
periodIndex: i,
|
|
6
6
|
weeks: d,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelectorOption.js","sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n periodIndex: string;\r\n weeks: Record<string, PeriodWeek[]>;\r\n selectedOption: number | null;\r\n disabled?: boolean;\r\n setSelectedOption: (weekNumber: number) => void;\r\n onSelectWeek: (weeknumber: number) => void;\r\n setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n periodIndex,\r\n weeks,\r\n selectedOption,\r\n disabled,\r\n setSelectedOption,\r\n onSelectWeek,\r\n setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n const handleKeyDown = (event:
|
|
1
|
+
{"version":3,"file":"WeekSelectorOption.js","sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n periodIndex: string;\r\n weeks: Record<string, PeriodWeek[]>;\r\n selectedOption: number | null;\r\n disabled?: boolean;\r\n setSelectedOption: (weekNumber: number) => void;\r\n onSelectWeek: (weeknumber: number) => void;\r\n setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n periodIndex,\r\n weeks,\r\n selectedOption,\r\n disabled,\r\n setSelectedOption,\r\n onSelectWeek,\r\n setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\r\n const current = event.currentTarget;\r\n\r\n switch (event.key) {\r\n case 'ArrowRight': {\r\n event.preventDefault();\r\n let nextElement = current.nextElementSibling as HTMLButtonElement | null;\r\n while (nextElement && nextElement.disabled) {\r\n nextElement = nextElement.nextElementSibling as HTMLButtonElement | null;\r\n }\r\n nextElement?.focus();\r\n break;\r\n }\r\n case 'ArrowLeft': {\r\n event.preventDefault();\r\n let prevElement = current.previousElementSibling as HTMLButtonElement | null;\r\n while (prevElement && prevElement.disabled) {\r\n prevElement = prevElement.previousElementSibling as HTMLButtonElement | null;\r\n }\r\n prevElement?.focus();\r\n break;\r\n }\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n let nextRow = current.parentElement?.nextElementSibling as HTMLElement | null;\r\n while (nextRow) {\r\n const candidate = nextRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n if (candidate && !candidate.disabled) {\r\n candidate.focus();\r\n break;\r\n }\r\n nextRow = nextRow.nextElementSibling as HTMLElement | null;\r\n }\r\n break;\r\n }\r\n case 'ArrowUp': {\r\n event.preventDefault();\r\n const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n let prevRow = current.parentElement?.previousElementSibling as HTMLElement | null;\r\n while (prevRow) {\r\n const candidate = prevRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n if (candidate && !candidate.disabled) {\r\n candidate.focus();\r\n break;\r\n }\r\n prevRow = prevRow.previousElementSibling as HTMLElement | null;\r\n }\r\n break;\r\n }\r\n case 'Tab':\r\n setIsOpen(false);\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n return (\r\n <div key={periodIndex} className={styles['week-selector-option-week-row']}>\r\n {weeks[periodIndex].map((week) => (\r\n <button\r\n key={week.weekNumber}\r\n type=\"button\"\r\n className={clsx(styles['week-selector-option-week'], [\r\n selectedOption === week.calendarWeekNumber && styles['week-selector-option-week--selected'],\r\n ])}\r\n disabled={week.isBlocked || disabled}\r\n onKeyDown={handleKeyDown}\r\n onClick={() => {\r\n if (!week.isBlocked) {\r\n setSelectedOption(week.calendarWeekNumber);\r\n onSelectWeek(week.calendarWeekNumber);\r\n setIsOpen(false);\r\n }\r\n }}\r\n autoFocus={selectedOption === week.calendarWeekNumber}\r\n >\r\n {week.calendarWeekNumber}\r\n </button>\r\n ))}\r\n </div>\r\n );\r\n};\r\n"],"names":["WeekSelectorOption","periodIndex","weeks","selectedOption","disabled","setSelectedOption","onSelectWeek","setIsOpen","handleKeyDown","event","current","nextElement","prevElement","currentIndex","nextRow","candidate","prevRow","jsx","styles","week","clsx"],"mappings":";;;AAgBO,MAAMA,IAAqB,CAAC;AAAA,EACjC,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AACF,MAA+B;AAC7B,QAAMC,IAAgB,CAACC,MAA4C;AACjE,UAAMC,IAAUD,EAAM;AAEtB,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK,cAAc;AACjB,QAAAA,EAAM,eAAA;AACN,YAAIE,IAAcD,EAAQ;AAC1B,eAAOC,KAAeA,EAAY;AAChC,UAAAA,IAAcA,EAAY;AAE5B,QAAAA,GAAa,MAAA;AACb;AAAA,MACF;AAAA,MACA,KAAK,aAAa;AAChB,QAAAF,EAAM,eAAA;AACN,YAAIG,IAAcF,EAAQ;AAC1B,eAAOE,KAAeA,EAAY;AAChC,UAAAA,IAAcA,EAAY;AAE5B,QAAAA,GAAa,MAAA;AACb;AAAA,MACF;AAAA,MACA,KAAK,aAAa;AAChB,QAAAH,EAAM,eAAA;AACN,cAAMI,IAAe,MAAM,KAAKH,EAAQ,eAAe,YAAY,CAAA,CAAE,EAAE,QAAQA,CAAO;AACtF,YAAII,IAAUJ,EAAQ,eAAe;AACrC,eAAOI,KAAS;AACd,gBAAMC,IAAYD,EAAQ,SAASD,CAAY;AAC/C,cAAIE,KAAa,CAACA,EAAU,UAAU;AACpC,YAAAA,EAAU,MAAA;AACV;AAAA,UACF;AACA,UAAAD,IAAUA,EAAQ;AAAA,QACpB;AACA;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,QAAAL,EAAM,eAAA;AACN,cAAMI,IAAe,MAAM,KAAKH,EAAQ,eAAe,YAAY,CAAA,CAAE,EAAE,QAAQA,CAAO;AACtF,YAAIM,IAAUN,EAAQ,eAAe;AACrC,eAAOM,KAAS;AACd,gBAAMD,IAAYC,EAAQ,SAASH,CAAY;AAC/C,cAAIE,KAAa,CAACA,EAAU,UAAU;AACpC,YAAAA,EAAU,MAAA;AACV;AAAA,UACF;AACA,UAAAC,IAAUA,EAAQ;AAAA,QACpB;AACA;AAAA,MACF;AAAA,MACA,KAAK;AACH,QAAAT,EAAU,EAAK;AACf;AAAA,IAEA;AAAA,EAEN;AACA,SACE,gBAAAU,EAAC,OAAA,EAAsB,WAAWC,EAAO,+BAA+B,GACrE,UAAAhB,EAAMD,CAAW,EAAE,IAAI,CAACkB,MACvB,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,MAAK;AAAA,MACL,WAAWG,EAAKF,EAAO,2BAA2B,GAAG;AAAA,QACnDf,MAAmBgB,EAAK,sBAAsBD,EAAO,qCAAqC;AAAA,MAAA,CAC3F;AAAA,MACD,UAAUC,EAAK,aAAaf;AAAA,MAC5B,WAAWI;AAAA,MACX,SAAS,MAAM;AACb,QAAKW,EAAK,cACRd,EAAkBc,EAAK,kBAAkB,GACzCb,EAAaa,EAAK,kBAAkB,GACpCZ,EAAU,EAAK;AAAA,MAEnB;AAAA,MACA,WAAWJ,MAAmBgB,EAAK;AAAA,MAElC,UAAAA,EAAK;AAAA,IAAA;AAAA,IAhBDA,EAAK;AAAA,EAAA,CAkBb,KArBOlB,CAsBV;AAEJ;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
1
2
|
export interface WeekSelectorOptionContainerProps {
|
|
2
3
|
header: string;
|
|
3
4
|
periodLabels?: string[];
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
children: React.ReactNode;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
style?: CSSProperties;
|
|
7
7
|
}
|
|
8
8
|
export declare const WeekSelectorOptionContainer: import('react').ForwardRefExoticComponent<WeekSelectorOptionContainerProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -1,28 +1,17 @@
|
|
|
1
1
|
import { jsxs as t, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { c as m } from "../../../clsx-OuTLNxxd.js";
|
|
3
2
|
import { forwardRef as d } from "react";
|
|
4
|
-
import { s as e } from "../../../WeekSelector.module-
|
|
5
|
-
const
|
|
6
|
-
({ header:
|
|
7
|
-
"
|
|
8
|
-
{
|
|
9
|
-
|
|
10
|
-
className:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
style: { top: a },
|
|
14
|
-
children: [
|
|
15
|
-
/* @__PURE__ */ o("h2", { className: e["week-selector-option-header"], children: r }),
|
|
16
|
-
/* @__PURE__ */ t("div", { className: e["week-selector-option-table"], children: [
|
|
17
|
-
/* @__PURE__ */ o("div", { className: e["week-selector-option-table-labels"], children: i?.map((s, p) => /* @__PURE__ */ o("div", { className: e["week-selector-option-table-label"], children: s }, `${s}-${p}`)) }),
|
|
18
|
-
/* @__PURE__ */ o("div", { className: e["week-selector-option-week-grid"], children: c })
|
|
19
|
-
] })
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
)
|
|
3
|
+
import { s as e } from "../../../WeekSelector.module-D9MD4nVJ.js";
|
|
4
|
+
const m = d(
|
|
5
|
+
({ header: s, periodLabels: i, children: l, style: a }, c) => /* @__PURE__ */ t("div", { ref: c, className: e["week-selector-option-container"], style: a, children: [
|
|
6
|
+
/* @__PURE__ */ o("h2", { className: e["week-selector-option-header"], children: s }),
|
|
7
|
+
/* @__PURE__ */ t("div", { className: e["week-selector-option-table"], children: [
|
|
8
|
+
/* @__PURE__ */ o("div", { className: e["week-selector-option-table-labels"], children: i?.map((r, n) => /* @__PURE__ */ o("div", { className: e["week-selector-option-table-label"], children: r }, `${r}-${n}`)) }),
|
|
9
|
+
/* @__PURE__ */ o("div", { className: e["week-selector-option-week-grid"], children: l })
|
|
10
|
+
] })
|
|
11
|
+
] })
|
|
23
12
|
);
|
|
24
|
-
|
|
13
|
+
m.displayName = "WeekSelectorOptionContainer";
|
|
25
14
|
export {
|
|
26
|
-
|
|
15
|
+
m as WeekSelectorOptionContainer
|
|
27
16
|
};
|
|
28
17
|
//# sourceMappingURL=WeekSelectorOptionContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelectorOptionContainer.js","sources":["../../../../src/components/WeekSelector/components/WeekSelectorOptionContainer.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"WeekSelectorOptionContainer.js","sources":["../../../../src/components/WeekSelector/components/WeekSelectorOptionContainer.tsx"],"sourcesContent":["import { forwardRef } from 'react';\r\n\r\nimport type { CSSProperties, ReactNode } from 'react';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\n\r\nexport interface WeekSelectorOptionContainerProps {\r\n header: string;\r\n periodLabels?: string[];\r\n children: ReactNode;\r\n style?: CSSProperties;\r\n}\r\n\r\nexport const WeekSelectorOptionContainer = forwardRef<HTMLDivElement, WeekSelectorOptionContainerProps>(\r\n ({ header, periodLabels, children, style }, ref) => {\r\n return (\r\n <div ref={ref} className={styles['week-selector-option-container']} style={style}>\r\n <h2 className={styles['week-selector-option-header']}>{header}</h2>\r\n <div className={styles['week-selector-option-table']}>\r\n <div className={styles['week-selector-option-table-labels']}>\r\n {periodLabels?.map((label, index) => (\r\n <div key={`${label}-${index}`} className={styles['week-selector-option-table-label']}>\r\n {label}\r\n </div>\r\n ))}\r\n </div>\r\n <div className={styles['week-selector-option-week-grid']}>{children}</div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nWeekSelectorOptionContainer.displayName = 'WeekSelectorOptionContainer';\r\n"],"names":["WeekSelectorOptionContainer","forwardRef","header","periodLabels","children","style","ref","styles","jsx","jsxs","label","index"],"mappings":";;;AAaO,MAAMA,IAA8BC;AAAA,EACzC,CAAC,EAAE,QAAAC,GAAQ,cAAAC,GAAc,UAAAC,GAAU,OAAAC,EAAA,GAASC,wBAEvC,OAAA,EAAI,KAAAA,GAAU,WAAWC,EAAO,gCAAgC,GAAG,OAAAF,GAClE,UAAA;AAAA,IAAA,gBAAAG,EAAC,MAAA,EAAG,WAAWD,EAAO,6BAA6B,GAAI,UAAAL,GAAO;AAAA,IAC9D,gBAAAO,EAAC,OAAA,EAAI,WAAWF,EAAO,4BAA4B,GACjD,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,mCAAmC,GACvD,UAAAJ,GAAc,IAAI,CAACO,GAAOC,MACzB,gBAAAH,EAAC,SAA8B,WAAWD,EAAO,kCAAkC,GAChF,UAAAG,EAAA,GADO,GAAGA,CAAK,IAAIC,CAAK,EAE3B,CACD,EAAA,CACH;AAAA,wBACC,OAAA,EAAI,WAAWJ,EAAO,gCAAgC,GAAI,UAAAH,EAAA,CAAS;AAAA,IAAA,EAAA,CACtE;AAAA,EAAA,GACF;AAGN;AAEAJ,EAA4B,cAAc;"}
|
|
@@ -52,6 +52,7 @@ export * from './SearchField';
|
|
|
52
52
|
export * from './SectionNotification';
|
|
53
53
|
export * from './SelectListbox';
|
|
54
54
|
export * from './SelectListbox/SelectProvider';
|
|
55
|
+
export * from './Slider';
|
|
55
56
|
export * from './Sortable';
|
|
56
57
|
export * from './Spinner';
|
|
57
58
|
export * from './StatusBadge';
|
package/dist/components/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { AppStatusBar as a } from "./AppStatusBar/AppStatusBar.js";
|
|
|
5
5
|
import { Attention as n } from "./Attention/Attention.js";
|
|
6
6
|
import { Backdrop as c } from "./Backdrop/Backdrop.js";
|
|
7
7
|
import { ButtonGroup as u } from "./ButtonGroup/ButtonGroup.js";
|
|
8
|
-
import { Button as
|
|
8
|
+
import { Button as B } from "./Buttons/Button.js";
|
|
9
9
|
import { LinkButton as b } from "./Buttons/LinkButton.js";
|
|
10
10
|
import { MenuButton as k } from "./Buttons/MenuButton.js";
|
|
11
11
|
import { Card as I } from "./Card/Card.js";
|
|
@@ -31,7 +31,7 @@ import { IconButton as fo } from "./IconButton/IconButton.js";
|
|
|
31
31
|
import { InfoBanner as ao } from "./InfoBanner/InfoBanner.js";
|
|
32
32
|
import { InfoMessage as no } from "./InfoMessage/InfoMessage.js";
|
|
33
33
|
import { Input as co } from "./Input/Input.js";
|
|
34
|
-
import { InputField as
|
|
34
|
+
import { InputField as So } from "./InputField/InputField.js";
|
|
35
35
|
import { Label as so } from "./Label/Label.js";
|
|
36
36
|
import { MenuLink as Co } from "./MenuLink/MenuLink.js";
|
|
37
37
|
import { MetaDataList as Fo } from "./MetaDataList/MetaDataList.js";
|
|
@@ -54,15 +54,16 @@ import { SearchField as or } from "./SearchField/SearchField.js";
|
|
|
54
54
|
import { SectionNotification as er } from "./SectionNotification/SectionNotification.js";
|
|
55
55
|
import { SelectListbox as pr } from "./SelectListbox/SelectListbox.js";
|
|
56
56
|
import { SelectProvider as fr, useSelect as mr } from "./SelectListbox/SelectProvider.js";
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
57
|
+
import { Slider as ir } from "./Slider/Slider.js";
|
|
58
|
+
import { Sortable as lr } from "./Sortable/Sortable.js";
|
|
59
|
+
import { Spinner as dr } from "./Spinner/Spinner.js";
|
|
60
|
+
import { StatusBadge as Sr } from "./StatusBadge/StatusBage.js";
|
|
61
|
+
import { StatusPill as sr } from "./StatusPill/StatusPill.js";
|
|
62
|
+
import { TextArea as Cr } from "./TextArea/TextArea.js";
|
|
63
|
+
import { ToggleSwitch as Fr } from "./ToggleSwitch/ToggleSwitch.js";
|
|
64
|
+
import { Tooltip as Mr } from "./Tooltip/Tooltip.js";
|
|
65
|
+
import { VarIndicator as Lr } from "./VarIndicator/VarIndicator.js";
|
|
66
|
+
import { WeekSelector as Rr } from "./WeekSelector/WeekSelector.js";
|
|
66
67
|
export {
|
|
67
68
|
e as Accordion,
|
|
68
69
|
p as AccordionCard,
|
|
@@ -70,7 +71,7 @@ export {
|
|
|
70
71
|
a as AppStatusBar,
|
|
71
72
|
n as Attention,
|
|
72
73
|
c as Backdrop,
|
|
73
|
-
|
|
74
|
+
B as Button,
|
|
74
75
|
u as ButtonGroup,
|
|
75
76
|
I as Card,
|
|
76
77
|
g as Checkbox,
|
|
@@ -95,7 +96,7 @@ export {
|
|
|
95
96
|
ao as InfoBanner,
|
|
96
97
|
no as InfoMessage,
|
|
97
98
|
co as Input,
|
|
98
|
-
|
|
99
|
+
So as InputField,
|
|
99
100
|
so as Label,
|
|
100
101
|
b as LinkButton,
|
|
101
102
|
k as MenuButton,
|
|
@@ -121,15 +122,16 @@ export {
|
|
|
121
122
|
er as SectionNotification,
|
|
122
123
|
pr as SelectListbox,
|
|
123
124
|
fr as SelectProvider,
|
|
124
|
-
ir as
|
|
125
|
-
lr as
|
|
126
|
-
dr as
|
|
127
|
-
|
|
128
|
-
sr as
|
|
129
|
-
Cr as
|
|
130
|
-
Fr as
|
|
131
|
-
Mr as
|
|
132
|
-
Lr as
|
|
125
|
+
ir as Slider,
|
|
126
|
+
lr as Sortable,
|
|
127
|
+
dr as Spinner,
|
|
128
|
+
Sr as StatusBadge,
|
|
129
|
+
sr as StatusPill,
|
|
130
|
+
Cr as TextArea,
|
|
131
|
+
Fr as ToggleSwitch,
|
|
132
|
+
Mr as Tooltip,
|
|
133
|
+
Lr as VarIndicator,
|
|
134
|
+
Rr as WeekSelector,
|
|
133
135
|
mr as useSelect
|
|
134
136
|
};
|
|
135
137
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { AppStatusBar as a } from "./components/AppStatusBar/AppStatusBar.js";
|
|
|
5
5
|
import { Attention as n } from "./components/Attention/Attention.js";
|
|
6
6
|
import { Backdrop as c } from "./components/Backdrop/Backdrop.js";
|
|
7
7
|
import { ButtonGroup as u } from "./components/ButtonGroup/ButtonGroup.js";
|
|
8
|
-
import { Button as
|
|
8
|
+
import { Button as B } from "./components/Buttons/Button.js";
|
|
9
9
|
import { LinkButton as b } from "./components/Buttons/LinkButton.js";
|
|
10
10
|
import { MenuButton as k } from "./components/Buttons/MenuButton.js";
|
|
11
11
|
import { Card as I } from "./components/Card/Card.js";
|
|
@@ -31,7 +31,7 @@ import { IconButton as fo } from "./components/IconButton/IconButton.js";
|
|
|
31
31
|
import { InfoBanner as ao } from "./components/InfoBanner/InfoBanner.js";
|
|
32
32
|
import { InfoMessage as no } from "./components/InfoMessage/InfoMessage.js";
|
|
33
33
|
import { Input as co } from "./components/Input/Input.js";
|
|
34
|
-
import { InputField as
|
|
34
|
+
import { InputField as So } from "./components/InputField/InputField.js";
|
|
35
35
|
import { Label as so } from "./components/Label/Label.js";
|
|
36
36
|
import { MenuLink as Co } from "./components/MenuLink/MenuLink.js";
|
|
37
37
|
import { MetaDataList as Fo } from "./components/MetaDataList/MetaDataList.js";
|
|
@@ -54,15 +54,16 @@ import { SearchField as or } from "./components/SearchField/SearchField.js";
|
|
|
54
54
|
import { SectionNotification as er } from "./components/SectionNotification/SectionNotification.js";
|
|
55
55
|
import { SelectListbox as pr } from "./components/SelectListbox/SelectListbox.js";
|
|
56
56
|
import { SelectProvider as fr, useSelect as mr } from "./components/SelectListbox/SelectProvider.js";
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
57
|
+
import { Slider as ir } from "./components/Slider/Slider.js";
|
|
58
|
+
import { Sortable as lr } from "./components/Sortable/Sortable.js";
|
|
59
|
+
import { Spinner as dr } from "./components/Spinner/Spinner.js";
|
|
60
|
+
import { StatusBadge as Sr } from "./components/StatusBadge/StatusBage.js";
|
|
61
|
+
import { StatusPill as sr } from "./components/StatusPill/StatusPill.js";
|
|
62
|
+
import { TextArea as Cr } from "./components/TextArea/TextArea.js";
|
|
63
|
+
import { ToggleSwitch as Fr } from "./components/ToggleSwitch/ToggleSwitch.js";
|
|
64
|
+
import { Tooltip as Mr } from "./components/Tooltip/Tooltip.js";
|
|
65
|
+
import { VarIndicator as Lr } from "./components/VarIndicator/VarIndicator.js";
|
|
66
|
+
import { WeekSelector as Rr } from "./components/WeekSelector/WeekSelector.js";
|
|
66
67
|
export {
|
|
67
68
|
e as Accordion,
|
|
68
69
|
p as AccordionCard,
|
|
@@ -70,7 +71,7 @@ export {
|
|
|
70
71
|
a as AppStatusBar,
|
|
71
72
|
n as Attention,
|
|
72
73
|
c as Backdrop,
|
|
73
|
-
|
|
74
|
+
B as Button,
|
|
74
75
|
u as ButtonGroup,
|
|
75
76
|
I as Card,
|
|
76
77
|
g as Checkbox,
|
|
@@ -95,7 +96,7 @@ export {
|
|
|
95
96
|
ao as InfoBanner,
|
|
96
97
|
no as InfoMessage,
|
|
97
98
|
co as Input,
|
|
98
|
-
|
|
99
|
+
So as InputField,
|
|
99
100
|
so as Label,
|
|
100
101
|
b as LinkButton,
|
|
101
102
|
k as MenuButton,
|
|
@@ -121,15 +122,16 @@ export {
|
|
|
121
122
|
er as SectionNotification,
|
|
122
123
|
pr as SelectListbox,
|
|
123
124
|
fr as SelectProvider,
|
|
124
|
-
ir as
|
|
125
|
-
lr as
|
|
126
|
-
dr as
|
|
127
|
-
|
|
128
|
-
sr as
|
|
129
|
-
Cr as
|
|
130
|
-
Fr as
|
|
131
|
-
Mr as
|
|
132
|
-
Lr as
|
|
125
|
+
ir as Slider,
|
|
126
|
+
lr as Sortable,
|
|
127
|
+
dr as Spinner,
|
|
128
|
+
Sr as StatusBadge,
|
|
129
|
+
sr as StatusPill,
|
|
130
|
+
Cr as TextArea,
|
|
131
|
+
Fr as ToggleSwitch,
|
|
132
|
+
Mr as Tooltip,
|
|
133
|
+
Lr as VarIndicator,
|
|
134
|
+
Rr as WeekSelector,
|
|
133
135
|
mr as useSelect
|
|
134
136
|
};
|
|
135
137
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
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.49.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -45,10 +45,11 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@commitlint/cli": "^20.1.0",
|
|
47
47
|
"@commitlint/config-conventional": "^20.0.0",
|
|
48
|
-
"@react-aria/button": "^3.14.
|
|
49
|
-
"@react-aria/dialog": "^3.5.
|
|
50
|
-
"@react-aria/
|
|
51
|
-
"@react-
|
|
48
|
+
"@react-aria/button": "^3.14.2",
|
|
49
|
+
"@react-aria/dialog": "^3.5.31",
|
|
50
|
+
"@react-aria/focus": "^3.21.2",
|
|
51
|
+
"@react-aria/overlays": "^3.30.0",
|
|
52
|
+
"@react-types/dialog": "^3.5.22",
|
|
52
53
|
"@semantic-release/git": "^10.0.1",
|
|
53
54
|
"@semantic-release/gitlab": "^13.2.9",
|
|
54
55
|
"@semantic-release/npm": "^12.0.2",
|
|
@@ -60,16 +61,16 @@
|
|
|
60
61
|
"@testing-library/jest-dom": "^6.9.1",
|
|
61
62
|
"@testing-library/react": "^16.3.0",
|
|
62
63
|
"@types/jest": "^30.0.0",
|
|
63
|
-
"@types/node": "^
|
|
64
|
-
"@types/react": "^19.2.
|
|
65
|
-
"@types/react-dom": "^19.2.
|
|
64
|
+
"@types/node": "^24.7.0",
|
|
65
|
+
"@types/react": "^19.2.2",
|
|
66
|
+
"@types/react-dom": "^19.2.1",
|
|
66
67
|
"@uva-glass/eslint-config": "^1.3.11",
|
|
67
68
|
"@uva-glass/stylelint-config": "^1.2.3",
|
|
68
69
|
"@vitejs/plugin-react": "^5.0.4",
|
|
69
70
|
"babel-jest": "^30.2.0",
|
|
70
71
|
"babel-plugin-transform-vite-meta-env": "^1.0.3",
|
|
71
72
|
"clsx": "^2.1.1",
|
|
72
|
-
"eslint-plugin-react-hooks": "^6.
|
|
73
|
+
"eslint-plugin-react-hooks": "^6.1.1",
|
|
73
74
|
"glob": "^11.0.3",
|
|
74
75
|
"husky": "^9.1.7",
|
|
75
76
|
"identity-obj-proxy": "^3.0.0",
|
|
@@ -83,14 +84,14 @@
|
|
|
83
84
|
"react-router": "^7.9.3",
|
|
84
85
|
"semantic-release": "^24.2.9",
|
|
85
86
|
"storybook": "^9.1.10",
|
|
86
|
-
"style-dictionary": "^5.1.
|
|
87
|
+
"style-dictionary": "^5.1.1",
|
|
87
88
|
"stylelint": "^16.24.0",
|
|
88
89
|
"stylelint-config-recommended": "^17.0.0",
|
|
89
|
-
"stylelint-config-standard": "^39.0.
|
|
90
|
+
"stylelint-config-standard": "^39.0.1",
|
|
90
91
|
"stylelint-order": "^7.0.0",
|
|
91
92
|
"ts-node": "^10.9.2",
|
|
92
93
|
"typescript": "^5.9.3",
|
|
93
|
-
"vite": "^7.1.
|
|
94
|
+
"vite": "^7.1.9",
|
|
94
95
|
"vite-plugin-dts": "^4.5.4",
|
|
95
96
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
96
97
|
"vite-plugin-static-copy": "^3.1.3",
|
|
@@ -108,8 +109,8 @@
|
|
|
108
109
|
"lexical": "^0.36.2"
|
|
109
110
|
},
|
|
110
111
|
"optionalDependencies": {
|
|
111
|
-
"@ast-grep/napi-linux-x64-gnu": "0.39.
|
|
112
|
-
"@rollup/rollup-linux-x64-gnu": "^4.52.
|
|
112
|
+
"@ast-grep/napi-linux-x64-gnu": "0.39.6",
|
|
113
|
+
"@rollup/rollup-linux-x64-gnu": "^4.52.4",
|
|
113
114
|
"@rspack/binding-darwin-arm64": "1.5.8",
|
|
114
115
|
"@rspack/binding-linux-x64-gnu": "1.5.8"
|
|
115
116
|
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import './assets/WeekSelector.css';const e = {
|
|
2
|
-
"week-selector": "_week-selector_shpxu_1",
|
|
3
|
-
"week-selector-button": "_week-selector-button_shpxu_5",
|
|
4
|
-
"week-selector-option-container": "_week-selector-option-container_shpxu_26",
|
|
5
|
-
"week-selector-option-header": "_week-selector-option-header_shpxu_40",
|
|
6
|
-
"week-selector-option-table": "_week-selector-option-table_shpxu_47",
|
|
7
|
-
"week-selector-option-table-labels": "_week-selector-option-table-labels_shpxu_52",
|
|
8
|
-
"week-selector-option-week-grid": "_week-selector-option-week-grid_shpxu_53",
|
|
9
|
-
"week-selector-option-table-label": "_week-selector-option-table-label_shpxu_52",
|
|
10
|
-
"week-selector-option-week-row": "_week-selector-option-week-row_shpxu_76",
|
|
11
|
-
"week-selector-option-week": "_week-selector-option-week_shpxu_53",
|
|
12
|
-
"week-selector-option-week--selected": "_week-selector-option-week--selected_shpxu_113"
|
|
13
|
-
};
|
|
14
|
-
export {
|
|
15
|
-
e as s
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=WeekSelector.module-P6WOVdLX.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelector.module-P6WOVdLX.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|