@uva-glass/component-library/dist/components/WeekSelector/WeekSelector.js

React components UvA

import { jsx as t, jsxs as F } from "react/jsx-runtime";
import { useState as b, useRef as k, useMemo as $, useEffect as y } from "react";
import { createPortal as x } from "react-dom";
import { useOverlay as A, usePreventScroll as C, OverlayContainer as D } from "@react-aria/overlays";
import { FocusScope as L } from "@react-aria/focus";
import { WeekSelectorButton as E } from "./components/WeekSelectorButton.js";
import { WeekSelectorOptionContainer as K } from "./components/WeekSelectorOptionContainer.js";
import { WeekSelectorOption as M } from "./components/WeekSelectorOption.js";
import { s as O } from "../../WeekSelector.module-Clco7jTs.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: h,
  optionsHeader: N,
  periodLabels: v,
  onSelectWeek: W,
  portalContainerRef: u,
  optionContainerOffset: m = []
}) => {
  const [a, p] = b(null), [o, l] = b(!1), f = k(null), s = k(null), B = $(() => Object.keys(r ?? {}), [r]);
  y(() => {
    if (n) {
      for (const e in r)
        if (r[e].some((c) => c.calendarWeekNumber === n && !c.isBlocked) && Number(e) > i) {
          p(n);
          return;
        }
    }
    for (const e in r) {
      const c = r[e].find((q) => !q.isBlocked);
      if (c && Number(e) > i) {
        p(c.calendarWeekNumber);
        return;
      }
    }
  }, [r, i, n]), y(() => {
    o && requestAnimationFrame(() => {
      const e = s.current?.querySelector(
        `.${O["week-selector-option-week--selected"]}`
      );
      e ? e.focus() : s.current?.querySelector("button:not(:disabled)")?.focus();
    });
  }, [o, a]);
  const S = () => `${h} ${a ?? n ?? "?"}`;
  R(f, (e) => {
    s.current && s.current.contains(e.target) || l(!1);
  });
  const { overlayProps: g, underlayProps: j } = A(
    {
      isOpen: o,
      isDismissable: !0,
      onClose: () => l(!1)
    },
    s
  );
  C({ isDisabled: !o || !u?.current });
  const d = /* @__PURE__ */ t(
    K,
    {
      header: N,
      periodLabels: v,
      ref: s,
      ...m.length === 2 ? {
        style: {
          top: m[0],
          left: m[1]
        }
      } : {},
      children: B.map((e) => /* @__PURE__ */ t(
        M,
        {
          periodIndex: e,
          weeks: r,
          disabled: Number(e) <= i,
          selectedOption: a,
          setSelectedOption: p,
          onSelectWeek: W,
          setIsOpen: l
        },
        e
      ))
    }
  );
  return /* @__PURE__ */ F("div", { className: O["week-selector"], tabIndex: -1, ref: f, children: [
    /* @__PURE__ */ t(E, { label: S(), onClick: () => l(!o) }),
    o && (u?.current ? x(
      /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(P, { ...j, children: /* @__PURE__ */ t(L, { contain: !0, restoreFocus: !0, children: /* @__PURE__ */ t("div", { ...g, children: d }) }) }) }),
      u.current
    ) : d)
  ] });
};
export {
  Z as WeekSelector
};
//# sourceMappingURL=WeekSelector.js.map