@scrippsproduct/networks-ui-library 1.1.2 → 1.1.4

package/dist/components/ScheduleLayout/ScheduleLayout.js

@@ -1,102 +1,110 @@
-import { jsx as t, jsxs as L } from "react/jsx-runtime";
-import { useRef as l, useCallback as S, useEffect as m } from "react";
-import { f as w } from "../../format-YhWt2D8M.mjs";
-import { l as b } from "../../logger-C0N7U0YY.mjs";
-import { classes as g } from "../../utils/helpers.js";
-import { ScheduleProvider as E } from "./ScheduleContext.js";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { useRef as s, useCallback as w, useEffect as h } from "react";
+import { f as L } from "../../format-YhWt2D8M.mjs";
+import { l as g } from "../../logger-C0N7U0YY.mjs";
+import { classes as E } from "../../utils/helpers.js";
+import { ScheduleProvider as q } from "./ScheduleContext.js";
 import { useScheduleContext as T } from "./useScheduleContext.js";
-import { DateNavigation as q } from "../DateNavigation/DateNavigation.js";
-import { ScheduleList as k } from "../ScheduleList/ScheduleList.js";
-b.setComponent("ScheduleLayout");
-import '../../assets/ScheduleLayout.css';function C({
-  handleScheduleClicks: d = () => !0
+import { DateNavigation as k } from "../DateNavigation/DateNavigation.js";
+import { ScheduleList as C } from "../ScheduleList/ScheduleList.js";
+g.setComponent("ScheduleLayout");
+import '../../assets/ScheduleLayout.css';function x({
+  handleScheduleClicks: f = () => !0
 }) {
   console.warn("ScheduleLayoutContent rendered");
-  const { currentDate: r } = T(), n = l(null), f = l(0), o = l(null), c = l(null), i = l(null), u = S((a) => {
-    const s = () => {
+  const { currentDate: n } = T(), r = s(null), m = s(0), o = s(null), u = s(null), a = s(null), p = s(!0), l = w((c) => {
+    const i = () => {
       let e;
-      const h = document.querySelector(`.date-navigation__day[aria-controls="${w(a, "yyyy-MM-dd")}"]`);
-      if (h && (e = h.parentElement), e && n.current) {
-        const v = e.offsetLeft + e.offsetWidth / 2;
-        f.current = v, n.current.style.setProperty(
+      const d = document.querySelector(`.date-navigation__day[aria-controls="${L(c, "yyyy-MM-dd")}"]`);
+      if (d && (e = d.parentElement), e && r.current) {
+        const S = e.offsetLeft + e.offsetWidth / 2;
+        m.current = S, r.current.style.setProperty(
           "--pointer-position",
-          `${v}px`
+          `${S}px`
         );
       }
-    }, y = () => {
-      c.current || (c.current = document.querySelector(".schedule-list")), i.current || (i.current = document.querySelector("sticky-content-wrapper"));
+    }, v = () => {
+      a.current || (a.current = document.querySelector("sticky-content-wrapper")), u.current || (u.current = document.querySelector(".schedule-list"));
       const e = document.querySelector(".mobile-nav");
-      c.current && i.current && window.scrollTo({
-        behavior: "auto",
-        top: e && window.getComputedStyle(e).display !== "none" ? c.current.offsetTop - i.current.offsetHeight - e.offsetHeight - 8 : c.current.offsetTop - i.current.offsetHeight - 16,
-        left: 0
-      });
+      if (u.current && (u.current.scrollTop = 0), a.current) {
+        const d = e && window.getComputedStyle(e).display !== "none" ? e.offsetHeight + 8 : 16;
+        window.scrollTo({
+          behavior: "smooth",
+          top: a.current.offsetTop - d,
+          left: 0
+        });
+      }
     };
-    if (!n.current) {
+    if (!r.current) {
       const e = setInterval(() => {
-        n.current = document.querySelector(".date-navigation__list"), n.current && (clearInterval(e), c.current = document.querySelector(".schedule-list"), i.current = document.querySelector("sticky-content-wrapper"), s());
+        r.current = document.querySelector(".date-navigation__list"), r.current && (clearInterval(e), a.current = document.querySelector("sticky-content-wrapper"), i());
       }, 100);
       setTimeout(() => {
         clearInterval(e);
       }, 3e3);
       return;
     }
-    s(), y();
-  }, []), p = S(() => {
+    i(), p.current || v();
+  }, []), y = w(() => {
     o.current && clearTimeout(o.current), o.current = window.setTimeout(() => {
-      u(r);
+      l(n);
     }, 250);
-  }, [r, u]);
-  return m(() => (window.addEventListener("resize", p), () => {
-    window.removeEventListener("resize", p), o.current && clearTimeout(o.current);
-  }), [u, p]), m(() => {
-    const a = document.querySelector(".header-divider"), s = document.querySelector("sticky-content-wrapper");
-    s && a && new IntersectionObserver(
+  }, [n, l]);
+  return h(() => (window.addEventListener("resize", y), () => {
+    window.removeEventListener("resize", y), o.current && clearTimeout(o.current);
+  }), [l, y]), h(() => {
+    const c = document.querySelector(".header-divider"), i = document.querySelector("sticky-content-wrapper");
+    i && c && new IntersectionObserver(
       ([e]) => {
-        e.intersectionRatio < 1 ? s.dataset.pinnedState = "pinned" : s.dataset.pinnedState = "unpinned";
+        e.intersectionRatio < 1 ? i.dataset.pinnedState = "pinned" : i.dataset.pinnedState = "unpinned";
       },
       {
         threshold: [1],
         rootMargin: "-37px"
       }
-    ).observe(a);
-  }, []), m(() => {
-    u(r);
-  }, [r, u]), /* @__PURE__ */ L("schedule-layout", { children: [
+    ).observe(c);
+  }, []), h(() => {
+    const c = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        l(n), p.current && (p.current = !1);
+      });
+    });
+    return () => cancelAnimationFrame(c);
+  }, [n, l]), /* @__PURE__ */ b("schedule-layout", { children: [
     /* @__PURE__ */ t("sticky-content-wrapper", { "data-pinned-state": "unpinned", children: /* @__PURE__ */ t(
       "content-constrainer",
       {
-        class: g([
+        class: E([
           "content-constrainer--no-padding",
           "content-constrainer--no-border",
           "content-constrainer--lead-container",
           "schedule-date-nav-constrainer"
         ]),
-        children: /* @__PURE__ */ t(q, {})
+        children: /* @__PURE__ */ t(k, {})
       }
     ) }),
-    /* @__PURE__ */ t("section", { className: "page-section", id: "schedule-section", children: /* @__PURE__ */ t("content-constrainer", { class: "content-constrainer--no-border schedule-content-constrainer", children: /* @__PURE__ */ t("div", { id: w(r, "yyyy-MM-dd"), role: "tabpanel", children: /* @__PURE__ */ t(k, { handleClicks: d }) }) }) })
+    /* @__PURE__ */ t("section", { className: "page-section", id: "schedule-section", children: /* @__PURE__ */ t("content-constrainer", { class: "content-constrainer--no-border schedule-content-constrainer", children: /* @__PURE__ */ t("div", { id: L(n, "yyyy-MM-dd"), role: "tabpanel", children: /* @__PURE__ */ t(C, { handleClicks: f }) }) }) })
   ] });
 }
-function N({
-  fetchSchedule: d,
-  initialSchedule: r = [],
-  weeks: n = [],
-  handleScheduleClicks: f = () => !0,
+function A({
+  fetchSchedule: f,
+  initialSchedule: n = [],
+  weeks: r = [],
+  handleScheduleClicks: m = () => !0,
   handleDateChanged: o = () => !0
 }) {
   return /* @__PURE__ */ t(
-    E,
+    q,
     {
-      fetchSchedule: d,
+      fetchSchedule: f,
       handleDateChanged: o,
-      initialSchedule: r,
-      weeks: n,
-      children: /* @__PURE__ */ t(C, { handleScheduleClicks: f })
+      initialSchedule: n,
+      weeks: r,
+      children: /* @__PURE__ */ t(x, { handleScheduleClicks: m })
     }
   );
 }
 export {
-  N as ScheduleLayout,
-  N as default
+  A as ScheduleLayout,
+  A as default
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.2",
+  "version": "1.1.4",
   "name": "@scrippsproduct/networks-ui-library",
   "description": "React Component Library for use in Scripps Networks external applications",
   "author": {