@scrippsproduct/networks-ui-library 1.1.1 → 1.1.3

package/dist/components/ScheduleLayout/ScheduleLayout.js

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

package/package.json

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