@uva-glass/component-library 3.47.8 → 3.48.0

package/dist/components/WeekSelector/WeekSelector.js

@@ -1,81 +1,95 @@
-import { jsxs as L, jsx as a } from "react/jsx-runtime";
-import { useState as f, useRef as h, useMemo as w, useEffect as y, useLayoutEffect as S } from "react";
-import { WeekSelectorButton as T } from "./components/WeekSelectorButton.js";
-import { WeekSelectorOptionContainer as j } from "./components/WeekSelectorOptionContainer.js";
-import { WeekSelectorOption as z } from "./components/WeekSelectorOption.js";
-import { s as P } from "../../WeekSelector.module-P6WOVdLX.js";
-import { useOnClickOutside as x } from "../hooks/useOnClickOutside.js";
-const K = ({
-  weeks: n,
-  currentPeriod: s = 0,
-  defaultSelection: r,
-  weekPrefix: O,
-  optionsHeader: g,
-  periodLabels: C,
-  onSelectWeek: k
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+import { useState as d, useRef as O, useMemo as x, useEffect as h } from "react";
+import { createPortal as A } from "react-dom";
+import { useOverlay as C, usePreventScroll as D, OverlayContainer as L } from "@react-aria/overlays";
+import { FocusScope as $ } from "@react-aria/focus";
+import { WeekSelectorButton as q } from "./components/WeekSelectorButton.js";
+import { WeekSelectorOptionContainer as E } from "./components/WeekSelectorOptionContainer.js";
+import { WeekSelectorOption as K } from "./components/WeekSelectorOption.js";
+import { s as M } from "../../WeekSelector.module-D9MD4nVJ.js";
+import { Backdrop as P } from "../Backdrop/Backdrop.js";
+import { useOnClickOutside as R } from "../hooks/useOnClickOutside.js";
+const Z = ({
+  weeks: r,
+  currentPeriod: i = 0,
+  defaultSelection: n,
+  weekPrefix: k,
+  optionsHeader: y,
+  periodLabels: N,
+  onSelectWeek: v,
+  portalContainerRef: m,
+  optionContainerOffset: u = []
 }) => {
-  const [m, c] = f(null), [o, l] = f(!1), i = h(null), p = h(null), [N, R] = f(void 0), v = w(() => Object.keys(n ?? {}), [n]), B = () => {
-    if (r) {
-      for (const e in n)
-        if (n[e].some((t) => t.calendarWeekNumber === r && !t.isBlocked) && Number(e) > s) {
-          c(r);
+  const [p, a] = d(null), [o, l] = d(!1), f = O(null), s = O(null), W = x(() => Object.keys(r ?? {}), [r]);
+  h(() => {
+    if (n) {
+      for (const e in r)
+        if (r[e].some((c) => c.calendarWeekNumber === n && !c.isBlocked) && Number(e) > i) {
+          a(n);
           return;
         }
     }
-    for (const e in n) {
-      const t = n[e].find((u) => !u.isBlocked);
-      if (t && Number(e) > s) {
-        c(t.calendarWeekNumber);
+    for (const e in r) {
+      const c = r[e].find((g) => !g.isBlocked);
+      if (c && Number(e) > i) {
+        a(c.calendarWeekNumber);
         return;
       }
     }
-  };
-  y(() => {
-    B();
-  }, []);
-  const W = () => `${O} ${m ?? r ?? "?"}`, d = () => {
-    if (!i.current || !p.current)
-      return;
-    const e = i.current.getBoundingClientRect(), t = p.current.getBoundingClientRect(), u = window.innerHeight - e.bottom, E = e.top;
-    let b = e.height;
-    u < t.height && E > t.height && (b = -t.height), R(b);
-  };
-  return S(() => {
-    d();
-    const e = () => {
-      o && d();
-    };
-    return window.addEventListener("resize", e), !o && i.current?.children[0] instanceof HTMLElement && i.current.children[0].focus(), () => {
-      window.removeEventListener("resize", e);
-    };
-  }, [o]), x(i, l.bind(null, !1)), /* @__PURE__ */ L("div", { className: P["week-selector"], tabIndex: -1, ref: i, children: [
-    /* @__PURE__ */ a(T, { label: W(), onClick: () => l(!o) }),
-    o && /* @__PURE__ */ a(
-      j,
-      {
-        header: g,
-        periodLabels: C,
-        isVisible: o,
-        topPosition: N,
-        ref: p,
-        children: v.map((e) => /* @__PURE__ */ a(
-          z,
-          {
-            periodIndex: e,
-            weeks: n,
-            disabled: Number(e) <= s,
-            selectedOption: m,
-            setSelectedOption: c,
-            onSelectWeek: k,
-            setIsOpen: l
-          },
-          e
-        ))
-      }
-    )
+  }, [r, i, n]), h(() => {
+    o && s.current && requestAnimationFrame(() => {
+      s.current?.focus();
+    });
+  }, [o]);
+  const B = () => `${k} ${p ?? n ?? "?"}`;
+  R(f, (e) => {
+    s.current && s.current.contains(e.target) || l(!1);
+  });
+  const { overlayProps: F, underlayProps: S } = C(
+    {
+      isOpen: o,
+      isDismissable: !0,
+      onClose: () => l(!1)
+    },
+    s
+  );
+  D({ isDisabled: !o || !m?.current });
+  const b = /* @__PURE__ */ t(
+    E,
+    {
+      header: y,
+      periodLabels: N,
+      ref: s,
+      ...u.length === 2 ? {
+        style: {
+          top: u[0],
+          left: u[1]
+        }
+      } : {},
+      children: W.map((e) => /* @__PURE__ */ t(
+        K,
+        {
+          periodIndex: e,
+          weeks: r,
+          disabled: Number(e) <= i,
+          selectedOption: p,
+          setSelectedOption: a,
+          onSelectWeek: v,
+          setIsOpen: l
+        },
+        e
+      ))
+    }
+  );
+  return /* @__PURE__ */ j("div", { className: M["week-selector"], tabIndex: -1, ref: f, children: [
+    /* @__PURE__ */ t(q, { label: B(), onClick: () => l(!o) }),
+    o && (m?.current ? A(
+      /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(P, { ...S, children: /* @__PURE__ */ t($, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ t("div", { ...F, children: b }) }) }) }),
+      m.current
+    ) : b)
   ] });
 };
 export {
-  K as WeekSelector
+  Z as WeekSelector
 };
 //# sourceMappingURL=WeekSelector.js.map

package/dist/components/WeekSelector/WeekSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeekSelector.js","sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport type { RefObject } from 'react';\r\n\r\nimport { WeekSelectorButton } from './components/WeekSelectorButton';\r\nimport { WeekSelectorOptionContainer } from './components/WeekSelectorOptionContainer';\r\nimport { WeekSelectorOption } from './components/WeekSelectorOption';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\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}\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}: 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 [optionContainerOpenTopPosition, setOptionContainerOpenTopPosition] = useState<number | undefined>(undefined);\r\n\r\n  const periodKeys = useMemo(() => Object.keys(weeks ?? {}), [weeks]);\r\n\r\n  const checkIfDefaultSelectionIsValid = () => {\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\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  };\r\n\r\n  useEffect(() => {\r\n    checkIfDefaultSelectionIsValid();\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n\r\n  const getButtonLabel = () => {\r\n    const weekNumber = selectedOption ?? defaultSelection ?? '?';\r\n    return `${weekPrefix} ${weekNumber}`;\r\n  };\r\n\r\n  const getTopPositionOptionContainer = () => {\r\n    if (!wrapperRef.current || !optionContainerRef.current) {\r\n      return;\r\n    }\r\n    const buttonRect = wrapperRef.current.getBoundingClientRect();\r\n    const optionContainerRect = optionContainerRef.current.getBoundingClientRect();\r\n    const spaceBelow = window.innerHeight - buttonRect.bottom;\r\n    const spaceAbove = buttonRect.top;\r\n    let topPosition = buttonRect.height;\r\n\r\n    if (spaceBelow < optionContainerRect.height && spaceAbove > optionContainerRect.height) {\r\n      topPosition = -optionContainerRect.height;\r\n    }\r\n\r\n    setOptionContainerOpenTopPosition(topPosition);\r\n  };\r\n\r\n  useLayoutEffect(() => {\r\n    getTopPositionOptionContainer();\r\n\r\n    const handleResize = () => {\r\n      if (isOpen) {\r\n        getTopPositionOptionContainer();\r\n      }\r\n    };\r\n\r\n    window.addEventListener('resize', handleResize);\r\n\r\n    if (!isOpen && wrapperRef.current?.children[0] instanceof HTMLElement) {\r\n      wrapperRef.current.children[0].focus();\r\n    }\r\n    return () => {\r\n      window.removeEventListener('resize', handleResize);\r\n    };\r\n  }, [isOpen]);\r\n\r\n  useOnClickOutside(wrapperRef as RefObject<HTMLElement>, setIsOpen.bind(null, false));\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        <WeekSelectorOptionContainer\r\n          header={optionsHeader}\r\n          periodLabels={periodLabels}\r\n          isVisible={isOpen}\r\n          topPosition={optionContainerOpenTopPosition}\r\n          ref={optionContainerRef}\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    </div>\r\n  );\r\n};\r\n"],"names":["WeekSelector","weeks","currentPeriod","defaultSelection","weekPrefix","optionsHeader","periodLabels","onSelectWeek","selectedOption","setSelectedOption","useState","isOpen","setIsOpen","wrapperRef","useRef","optionContainerRef","optionContainerOpenTopPosition","setOptionContainerOpenTopPosition","periodKeys","useMemo","checkIfDefaultSelectionIsValid","period","week","firstAvailableWeek","useEffect","getButtonLabel","getTopPositionOptionContainer","buttonRect","optionContainerRect","spaceBelow","spaceAbove","topPosition","useLayoutEffect","handleResize","useOnClickOutside","jsxs","styles","jsx","WeekSelectorButton","WeekSelectorOptionContainer","periodIndex","WeekSelectorOption"],"mappings":"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"}
+{"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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"}

package/dist/components/WeekSelector/WeekSelector.stories.d.ts

@@ -3,3 +3,4 @@ import { WeekSelectorProps } from 'components/WeekSelector';
 declare const _default: Meta<WeekSelectorProps>;
 export default _default;
 export declare const WeekSelectorExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, WeekSelectorProps>;
+export declare const InAPortal: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, WeekSelectorProps>;

package/dist/components/WeekSelector/WeekSelector.stories.js

@@ -1,7 +1,8 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { mockWeeks as i } from "./mockdata.js";
-import { WeekSelector as e } from "./WeekSelector.js";
-const c = `<WeekSelector 
+import { useRef as c } from "react";
+import { mockWeeks as d } from "./mockdata.js";
+import { WeekSelector as n } from "./WeekSelector.js";
+const s = `<WeekSelector 
   weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};
   currentPeriod?={number};
   defaultSelection?={number};
@@ -9,9 +10,9 @@ const c = `<WeekSelector
   periodLabels={string[]};
   optionsHeader={string};
   onSelectWeek={(weeknumber: {number}) => void};
- />`, S = {
+ />`, g = {
   title: "Molecules/WeekSelector",
-  component: e,
+  component: n,
   argTypes: {
     onSelectWeek: {
       action: "selected week",
@@ -19,16 +20,26 @@ const c = `<WeekSelector
         disable: !0
       }
     },
+    portalContainerRef: {
+      table: {
+        disable: !0
+      }
+    },
+    optionContainerOffset: {
+      table: {
+        disable: !0
+      }
+    },
     currentPeriod: { table: { disable: !0 } },
     defaultSelection: { table: { disable: !0 } }
   },
   parameters: {
-    inspectComponent: e,
-    codeString: c
+    inspectComponent: n,
+    codeString: s
   }
-}, d = (o) => {
-  const n = (l) => {
-    o.onSelectWeek(l);
+}, p = (e) => {
+  const o = (l) => {
+    e.onSelectWeek(l);
   };
   return /* @__PURE__ */ r(
     "div",
@@ -42,80 +53,139 @@ const c = `<WeekSelector
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ t(e, { ...o, currentPeriod: 1, onSelectWeek: n }),
+        /* @__PURE__ */ t(n, { ...e, currentPeriod: 1, onSelectWeek: o }),
         /* @__PURE__ */ t(
-          e,
+          n,
           {
-            ...o,
+            ...e,
             defaultSelection: 45,
             currentPeriod: 2,
-            onSelectWeek: n,
+            onSelectWeek: o,
             optionsHeader: "Kies een planning - Blok 2"
           }
         ),
         /* @__PURE__ */ t(
-          e,
+          n,
           {
-            ...o,
+            ...e,
             defaultSelection: 6,
             currentPeriod: 3,
-            onSelectWeek: n,
+            onSelectWeek: o,
             optionsHeader: "Kies een planning - Blok 3"
           }
         ),
         /* @__PURE__ */ t(
-          e,
+          n,
           {
-            ...o,
+            ...e,
             defaultSelection: 13,
             currentPeriod: 4,
-            onSelectWeek: n,
+            onSelectWeek: o,
             optionsHeader: "Kies een planning - Blok 4"
           }
         ),
         /* @__PURE__ */ t(
-          e,
+          n,
           {
-            ...o,
+            ...e,
             defaultSelection: 23,
             currentPeriod: 5,
-            onSelectWeek: n,
+            onSelectWeek: o,
             optionsHeader: "Kies een planning - Blok 5"
           }
         ),
         /* @__PURE__ */ t(
-          e,
+          n,
           {
-            ...o,
+            ...e,
             defaultSelection: 28,
             currentPeriod: 6,
-            onSelectWeek: n,
+            onSelectWeek: o,
             optionsHeader: "Kies een planning - Blok 6"
           }
         ),
         /* @__PURE__ */ t(
-          e,
+          n,
           {
-            ...o,
+            ...e,
             defaultSelection: 36,
-            onSelectWeek: n,
+            onSelectWeek: o,
             optionsHeader: "Kies een planning - Zomer"
           }
         )
       ]
     }
   );
-}, s = {
-  weeks: i,
+}, i = {
+  weeks: d,
   weekPrefix: "week",
   periodLabels: ["Blok 1", "Blok 2", "Blok 3", "Blok 4", "Blok 5", "Blok 6", "Zomer"],
   optionsHeader: "Kies een planning - Blok 1"
-}, a = d.bind({});
-a.args = {
-  ...s
+}, k = p.bind({});
+k.args = {
+  ...i
+};
+const u = (e) => {
+  const o = (a) => {
+    e.onSelectWeek(a);
+  }, l = c(null);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: l,
+      style: {
+        padding: "1rem",
+        backgroundColor: "#EEE",
+        display: "flex",
+        gap: "1rem",
+        alignItems: "flex-start",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ t(
+          n,
+          {
+            ...e,
+            currentPeriod: 1,
+            onSelectWeek: o,
+            portalContainerRef: l,
+            optionContainerOffset: [-200, -250]
+          }
+        ),
+        /* @__PURE__ */ t(
+          n,
+          {
+            ...e,
+            defaultSelection: 45,
+            currentPeriod: 2,
+            onSelectWeek: o,
+            optionsHeader: "Kies een planning - Blok 2",
+            portalContainerRef: l,
+            optionContainerOffset: [-200, -250]
+          }
+        ),
+        /* @__PURE__ */ t(
+          n,
+          {
+            ...e,
+            defaultSelection: 6,
+            currentPeriod: 3,
+            onSelectWeek: o,
+            optionsHeader: "Kies een planning - Blok 3",
+            portalContainerRef: l,
+            optionContainerOffset: [-200, -250]
+          }
+        )
+      ]
+    }
+  );
+}, f = u.bind({});
+f.args = {
+  ...i
 };
 export {
-  a as WeekSelectorExample,
-  S as default
+  f as InAPortal,
+  k as WeekSelectorExample,
+  g as default
 };
 //# sourceMappingURL=WeekSelector.stories.js.map

package/dist/components/WeekSelector/WeekSelector.stories.js.map

@@ -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":";;;AAOA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,eAAe,EAAE,OAAO,EAAE,SAAS,KAAK;AAAA,IACxC,kBAAkB,EAAE,OAAO,EAAE,SAAS,KAAK;AAAA,EAAE;AAAA,EAE/C,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAAS;AACrD,QAAMC,IAAmB,CAACC,MAAuB;AAC/C,IAAAF,EAAK,aAAaE,CAAU;AAAA,EAC9B;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,MAGjB,UAAA;AAAA,QAAA,gBAAAC,EAACN,KAAc,GAAGE,GAAM,eAAe,GAAG,cAAcC,GAAkB;AAAA,QAC1E,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMI,IAA0C;AAAA,EAC9C,OAAOC;AAAA,EACP,YAAY;AAAA,EACZ,cAAc,CAAC,UAAU,UAAU,UAAU,UAAU,UAAU,UAAU,OAAO;AAAA,EAClF,eAAe;AACjB,GAEaC,IAAsBR,EAAS,KAAK,CAAA,CAAE;AAEnDQ,EAAoB,OAAO;AAAA,EACzB,GAAGF;AACL;"}
+{"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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"}

package/dist/components/WeekSelector/components/WeekSelectorButton.js

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
 import { Icon as s } from "../../Icon/Icon.js";
-import { s as n } from "../../../WeekSelector.module-P6WOVdLX.js";
+import { s as n } from "../../../WeekSelector.module-D9MD4nVJ.js";
 const m = ({ label: e, onClick: t }) => /* @__PURE__ */ o(
   "button",
   {

package/dist/components/WeekSelector/components/WeekSelectorOption.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { c as f } from "../../../clsx-OuTLNxxd.js";
-import { s as a } from "../../../WeekSelector.module-P6WOVdLX.js";
+import { s as a } from "../../../WeekSelector.module-D9MD4nVJ.js";
 const h = ({
   periodIndex: i,
   weeks: d,

package/dist/components/WeekSelector/components/WeekSelectorOption.js.map

@@ -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: React.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":";;;AAeO,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,MAAkD;AACvE,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;"}
+{"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;"}

package/dist/components/WeekSelector/components/WeekSelectorOptionContainer.d.ts

@@ -1,8 +1,8 @@
+import { CSSProperties, ReactNode } from 'react';
 export interface WeekSelectorOptionContainerProps {
     header: string;
     periodLabels?: string[];
-    isVisible?: boolean;
-    topPosition?: number;
-    children: React.ReactNode;
+    children: ReactNode;
+    style?: CSSProperties;
 }
 export declare const WeekSelectorOptionContainer: import('react').ForwardRefExoticComponent<WeekSelectorOptionContainerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/WeekSelector/components/WeekSelectorOptionContainer.js

@@ -1,28 +1,17 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { c as m } from "../../../clsx-OuTLNxxd.js";
 import { forwardRef as d } from "react";
-import { s as e } from "../../../WeekSelector.module-P6WOVdLX.js";
-const k = d(
-  ({ header: r, periodLabels: i, isVisible: l = !1, topPosition: a, children: c }, n) => /* @__PURE__ */ t(
-    "div",
-    {
-      ref: n,
-      className: m(e["week-selector-option-container"], {
-        [e["week-selector-option-container-is-visible"]]: l
-      }),
-      style: { top: a },
-      children: [
-        /* @__PURE__ */ o("h2", { className: e["week-selector-option-header"], children: r }),
-        /* @__PURE__ */ t("div", { className: e["week-selector-option-table"], children: [
-          /* @__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}`)) }),
-          /* @__PURE__ */ o("div", { className: e["week-selector-option-week-grid"], children: c })
-        ] })
-      ]
-    }
-  )
+import { s as e } from "../../../WeekSelector.module-D9MD4nVJ.js";
+const m = d(
+  ({ header: s, periodLabels: i, children: l, style: a }, c) => /* @__PURE__ */ t("div", { ref: c, className: e["week-selector-option-container"], style: a, children: [
+    /* @__PURE__ */ o("h2", { className: e["week-selector-option-header"], children: s }),
+    /* @__PURE__ */ t("div", { className: e["week-selector-option-table"], children: [
+      /* @__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}`)) }),
+      /* @__PURE__ */ o("div", { className: e["week-selector-option-week-grid"], children: l })
+    ] })
+  ] })
 );
-k.displayName = "WeekSelectorOptionContainer";
+m.displayName = "WeekSelectorOptionContainer";
 export {
-  k as WeekSelectorOptionContainer
+  m as WeekSelectorOptionContainer
 };
 //# sourceMappingURL=WeekSelectorOptionContainer.js.map

package/dist/components/WeekSelector/components/WeekSelectorOptionContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeekSelectorOptionContainer.js","sources":["../../../../src/components/WeekSelector/components/WeekSelectorOptionContainer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\nimport { forwardRef } 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  isVisible?: boolean;\r\n  topPosition?: number;\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const WeekSelectorOptionContainer = forwardRef<HTMLDivElement, WeekSelectorOptionContainerProps>(\r\n  ({ header, periodLabels, isVisible = false, topPosition, children }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={clsx(styles['week-selector-option-container'], {\r\n          [styles['week-selector-option-container-is-visible']]: isVisible,\r\n        })}\r\n        style={{ top: topPosition }}\r\n      >\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","isVisible","topPosition","children","ref","jsxs","clsx","styles","jsx","label","index"],"mappings":";;;;AAaO,MAAMA,IAA8BC;AAAA,EACzC,CAAC,EAAE,QAAAC,GAAQ,cAAAC,GAAc,WAAAC,IAAY,IAAO,aAAAC,GAAa,UAAAC,EAAA,GAAYC,MAEjE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAKC,EAAO,gCAAgC,GAAG;AAAA,QACxD,CAACA,EAAO,2CAA2C,CAAC,GAAGN;AAAA,MAAA,CACxD;AAAA,MACD,OAAO,EAAE,KAAKC,EAAA;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAM,EAAC,MAAA,EAAG,WAAWD,EAAO,6BAA6B,GAAI,UAAAR,GAAO;AAAA,QAC9D,gBAAAM,EAAC,OAAA,EAAI,WAAWE,EAAO,4BAA4B,GACjD,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,mCAAmC,GACvD,UAAAP,GAAc,IAAI,CAACS,GAAOC,MACzB,gBAAAF,EAAC,SAA8B,WAAWD,EAAO,kCAAkC,GAChF,UAAAE,EAAA,GADO,GAAGA,CAAK,IAAIC,CAAK,EAE3B,CACD,EAAA,CACH;AAAA,4BACC,OAAA,EAAI,WAAWH,EAAO,gCAAgC,GAAI,UAAAJ,EAAA,CAAS;AAAA,QAAA,EAAA,CACtE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAN,EAA4B,cAAc;"}
+{"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;"}

package/dist/components/index.js

@@ -36,7 +36,7 @@ import { Label as so } from "./Label/Label.js";
 import { MenuLink as Co } from "./MenuLink/MenuLink.js";
 import { MetaDataList as Fo } from "./MetaDataList/MetaDataList.js";
 import { ModalDialog as Mo } from "./ModalDialog/ModalDialog.js";
-import { M as Lo } from "../TablePlugin-CfTWvWk1.js";
+import { M as Lo } from "../TablePlugin-Cvw0NmoH.js";
 import { MultiSelectBox as Ro } from "./MultiSelectBox/MultiSelectBox.js";
 import { Notification as yo } from "./Notification/Notification.js";
 import { OverlayCloseButton as To } from "./OverlayCloseButton/OverlayCloseButton.js";