@scrippsproduct/networks-ui-library 1.1.0-alpha.1 → 1.1.0-alpha.3

package/dist/components/ResponsiveImage/ResponsiveImage.d.ts

@@ -1,14 +1,15 @@
-export function ResponsiveImage({ fullSizeUrl, sources, altText, classname, handleClick, loading, decoding, fetchpriority, }: {
-    fullSizeUrl: any;
-    sources?: {
-        srcsets: string[];
+type ResponsiveImageProps = {
+    fullSizeUrl: string;
+    sources?: Array<{
         media: string;
-    }[] | undefined;
-    altText?: string | undefined;
-    classname?: string | undefined;
-    handleClick?: (() => boolean) | undefined;
-    loading?: string | undefined;
-    decoding?: string | undefined;
-    fetchpriority?: null | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+        srcsets: string[];
+    }>;
+    altText?: string;
+    classname?: string;
+    handleClick?: (e: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
+    loading?: 'eager' | 'lazy' | undefined;
+    decoding?: 'sync' | 'async' | 'auto';
+    fetchPriority?: 'low' | 'high' | 'auto';
+};
+export declare function ResponsiveImage({ fullSizeUrl, sources, altText, classname, handleClick, loading, decoding, }: ResponsiveImageProps): JSX.Element;
 export default ResponsiveImage;

package/dist/components/ResponsiveImage/ResponsiveImage.js

@@ -1,34 +1,30 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import "react";
-function f({
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+function d({
   fullSizeUrl: r,
   sources: a = [{ srcsets: [""], media: "" }],
-  altText: i = "",
-  classname: t = "",
-  handleClick: c = () => !0,
+  altText: c = "",
+  classname: i = "",
+  handleClick: t = () => !0,
   loading: m = "lazy",
-  // null/'eager', 'lazy'
-  decoding: n = "async",
-  // 'sync', 'async', 'auto'
-  fetchpriority: o = null
-  // null/'low', 'high'
+  decoding: n = "async"
 }) {
-  return /* @__PURE__ */ u("picture", { className: t, children: [
-    a.map((s, l) => /* @__PURE__ */ e("source", { media: `(${s.media})`, srcSet: s.srcsets.join(", ") }, `source-${l}`)),
+  return /* @__PURE__ */ l("picture", { className: i, children: [
+    a.map(
+      (s, o) => /* @__PURE__ */ e("source", { media: `(${s.media})`, srcSet: s.srcsets.join(", ") }, `source-${o}`)
+    ),
     /* @__PURE__ */ e(
       "img",
       {
-        src: r,
-        alt: i,
-        onClick: c,
-        loading: m,
+        alt: c,
         decoding: n,
-        fetchpriority: o
+        loading: m,
+        src: r,
+        onClick: t
       }
     )
   ] });
 }
 export {
-  f as ResponsiveImage,
-  f as default
+  d as ResponsiveImage,
+  d as default
 };

package/dist/components/ResponsiveImage/index.d.ts

@@ -1 +1,2 @@
-export { ResponsiveImage, ResponsiveImage as default } from './ResponsiveImage';
+export { ResponsiveImage } from './ResponsiveImage';
+export { ResponsiveImage as default } from './ResponsiveImage';

package/dist/components/ResultsTable/ResultsTable.d.ts

@@ -1,7 +1,11 @@
-export function ResultsTable({ columns, results, noResultsMsg, compactLayout }: {
-    columns?: never[] | undefined;
-    results?: never[] | undefined;
-    noResultsMsg?: string | undefined;
-    compactLayout?: boolean | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+type ResultsTableProps = {
+    columns: {
+        title: string;
+        resultKey: string;
+    }[];
+    results: Record<string, string | number>[] | [];
+    noResultsMsg?: string;
+    compactLayout?: boolean;
+};
+export declare function ResultsTable({ columns, results, noResultsMsg, compactLayout, }: ResultsTableProps): JSX.Element;
 export default ResultsTable;

package/dist/components/ResultsTable/ResultsTable.js

@@ -1,26 +1,31 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import "react";
 import { classes as m } from "../../utils/helpers.js";
-import { ResultsTableBody as i } from "../ResultsTableBody/ResultsTableBody.js";
-import { ResultsTableHeader as p } from "../ResultsTableHeader/ResultsTableHeader.js";
-import { s as e } from "../../ResultsTable.module-B7M9y7hd.mjs";
-function x({
+import { ResultsTableBody as f } from "../ResultsTableBody/ResultsTableBody.js";
+import { ResultsTableHeader as i } from "../ResultsTableHeader/ResultsTableHeader.js";
+import { s as e } from "../../ResultsTable.module-1zxhXaem.mjs";
+function n({
   columns: s = [],
   results: l = [],
   noResultsMsg: a = "No results were returned",
   compactLayout: r = !1
 }) {
-  return /* @__PURE__ */ o("div", { className: m([
-    e["results-table"],
-    e["fade-in__wrapper"],
-    r ? e["results-table--compact"] : "",
-    r ? "results-table--compact" : ""
-  ]), children: [
-    /* @__PURE__ */ t(p, { columns: s }),
-    /* @__PURE__ */ t(i, { columns: s, results: l, noResultsMsg: a })
-  ] });
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: m([
+        e["results-table"],
+        e["fade-in__wrapper"],
+        r ? e["results-table--compact"] : "",
+        r ? "results-table--compact" : ""
+      ]),
+      children: [
+        /* @__PURE__ */ t(i, { columns: s }),
+        /* @__PURE__ */ t(f, { columns: s, noResultsMsg: a, results: l })
+      ]
+    }
+  );
 }
 export {
-  x as ResultsTable,
-  x as default
+  n as ResultsTable,
+  n as default
 };

package/dist/components/ResultsTable/index.d.ts

@@ -1 +1,2 @@
-export { ResultsTable, ResultsTable as default } from './ResultsTable';
+export { ResultsTable } from './ResultsTable';
+export { ResultsTable as default } from './ResultsTable';

package/dist/components/ResultsTableBody/ResultsTableBody.d.ts

@@ -1,6 +1,10 @@
-export function ResultsTableBody({ results, columns, noResultsMsg }: {
-    results?: never[] | undefined;
-    columns?: never[] | undefined;
-    noResultsMsg?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+type ResultsTableBodyProps = {
+    results?: Record<string, unknown>[];
+    columns?: {
+        title: string;
+        resultKey: string;
+    }[];
+    noResultsMsg?: string;
+};
+export declare function ResultsTableBody({ results, columns, noResultsMsg }: ResultsTableBodyProps): JSX.Element;
 export default ResultsTableBody;

package/dist/components/ResultsTableBody/ResultsTableBody.js

@@ -1,31 +1,36 @@
-import { jsx as l, jsxs as _ } from "react/jsx-runtime";
-import "react";
-import { classes as t } from "../../utils/helpers.js";
-import { s as e } from "../../ResultsTable.module-B7M9y7hd.mjs";
+import { jsx as t, Fragment as m, jsxs as _ } from "react/jsx-runtime";
+import { classes as l } from "../../utils/helpers.js";
+import { s as e } from "../../ResultsTable.module-1zxhXaem.mjs";
 function c({ results: r = [], columns: u = [], noResultsMsg: b = "No results were returned" }) {
-  return r.length > 0 ? r.map((a, i) => /* @__PURE__ */ l(
+  return r.length > 0 ? /* @__PURE__ */ t(m, { children: r.map((a, i) => /* @__PURE__ */ t(
     "div",
     {
-      className: t([
+      className: l([
         e["results-table__row"],
         "results-table__row"
       ]),
       children: u.map((s) => /* @__PURE__ */ _(
         "div",
         {
-          className: t([
+          className: l([
             e["results-table__item"],
             `results-table__${s.title.replace(" ", "-").toLowerCase()}`,
             "results-table__item"
           ]),
           children: [
-            /* @__PURE__ */ _("span", { className: t([
-              e["results-table__mobile-label"],
-              "results-table__mobile-label"
-            ]), children: [
-              s.title,
-              ":"
-            ] }),
+            /* @__PURE__ */ _(
+              "span",
+              {
+                className: l([
+                  e["results-table__mobile-label"],
+                  "results-table__mobile-label"
+                ]),
+                children: [
+                  s.title,
+                  ":"
+                ]
+              }
+            ),
             Object.keys(a).includes(s.resultKey) ? a[s.resultKey] : ""
           ]
         },
@@ -33,10 +38,10 @@ function c({ results: r = [], columns: u = [], noResultsMsg: b = "No results wer
       ))
     },
     `result-${i}`
-  )) : /* @__PURE__ */ l("div", { className: e["results-table__row"], children: /* @__PURE__ */ l(
+  )) }) : /* @__PURE__ */ t("div", { className: e["results-table__row"], children: /* @__PURE__ */ t(
     "div",
     {
-      className: t([
+      className: l([
         e["results-table__item"],
         e["results-table__no-results"],
         "results-table__no-results"

package/dist/components/ResultsTableBody/index.d.ts

@@ -1 +1,2 @@
-export { ResultsTableBody, ResultsTableBody as default } from './ResultsTableBody';
+export { ResultsTableBody } from './ResultsTableBody';
+export { ResultsTableBody as default } from './ResultsTableBody';

package/dist/components/ResultsTableHeader/ResultsTableHeader.d.ts

@@ -1,4 +1,8 @@
-export function ResultsTableHeader({ columns }: {
-    columns?: never[] | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+type ResultsTableHeaderProps = {
+    columns: {
+        title: string;
+        resultKey: string;
+    }[];
+};
+export declare function ResultsTableHeader({ columns }: ResultsTableHeaderProps): JSX.Element;
 export default ResultsTableHeader;

package/dist/components/ResultsTableHeader/ResultsTableHeader.js

@@ -1,7 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
-import "react";
-import { s as r } from "../../ResultsTable.module-B7M9y7hd.mjs";
-function o({ columns: s = [] }) {
+import { s as r } from "../../ResultsTable.module-1zxhXaem.mjs";
+function i({ columns: s = [] }) {
   return /* @__PURE__ */ t("div", { className: [r["results-table__row"], r["results-table__header-row"], "results-table__header-row"].join(" "), children: s.map((e) => /* @__PURE__ */ t(
     "div",
     {
@@ -16,6 +15,6 @@ function o({ columns: s = [] }) {
   )) });
 }
 export {
-  o as ResultsTableHeader,
-  o as default
+  i as ResultsTableHeader,
+  i as default
 };

package/dist/components/ResultsTableHeader/index.d.ts

@@ -1 +1,2 @@
-export { ResultsTableHeader, ResultsTableHeader as default } from './ResultsTableHeader';
+export { ResultsTableHeader } from './ResultsTableHeader';
+export { ResultsTableHeader as default } from './ResultsTableHeader';

package/dist/components/ScheduleLayout/ScheduleContext.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { ScheduleResponse } from '../../types.d.ts';
+type Day = {
+    date: Date;
+    dayStr: string;
+    dateStr: string;
+    monthStr: string;
+    fullDateStr: string;
+};
+type ScheduleContextValue = {
+    schedule: ScheduleResponse;
+    weeks: Day[][];
+    currentDate: Date;
+    isLoading: boolean;
+    setCurrentDate: (date: Date) => void;
+};
+export declare const ScheduleContext: import('react').Context<ScheduleContextValue | undefined>;
+type ScheduleProviderProps = {
+    schedule: ScheduleResponse;
+    weeks: Day[][];
+    handleDateChanged?: (date: Date) => boolean | void;
+    children: ReactNode;
+};
+export declare function ScheduleProvider({ schedule, weeks, handleDateChanged, children, }: ScheduleProviderProps): JSX.Element;
+export default ScheduleProvider;

package/dist/components/ScheduleLayout/ScheduleContext.js

@@ -0,0 +1,33 @@
+import { jsx as C } from "react/jsx-runtime";
+import { createContext as S, useState as c, useRef as g, useCallback as v, useEffect as x, useMemo as b } from "react";
+const j = S(void 0);
+function q({
+  schedule: r,
+  weeks: a,
+  handleDateChanged: o = () => !0,
+  children: y
+}) {
+  const [i, A] = c(a[0][0].date), [n, u] = c(!1), t = g(r), s = v((e) => {
+    u(!0), A(e), o(e);
+  }, [o]);
+  x(() => {
+    let e = !1;
+    typeof r == "object" && !Array.isArray(r) && "queryStatus" in r ? e = !(typeof t.current == "object" && !Array.isArray(t.current) && "queryStatus" in t.current) : Array.isArray(r) && Array.isArray(t.current) ? e = t.current.length !== r.length || t.current.some((m, p) => {
+      var f;
+      return m.id !== ((f = r[p]) == null ? void 0 : f.id);
+    }) : e = !0, e && n && (u(!1), t.current = r);
+  }, [r, n]);
+  const l = b(() => ({
+    schedule: r,
+    weeks: a,
+    currentDate: i,
+    isLoading: n,
+    setCurrentDate: s
+  }), [r, a, i, n, s]);
+  return /* @__PURE__ */ C(j.Provider, { value: l, children: y });
+}
+export {
+  j as ScheduleContext,
+  q as ScheduleProvider,
+  q as default
+};

package/dist/components/ScheduleLayout/ScheduleLayout.d.ts

@@ -1,6 +1,16 @@
-export function ScheduleLayout({ schedule, handleScheduleClicks, handleDateChanged }: {
-    schedule?: never[] | undefined;
-    handleScheduleClicks?: (() => boolean) | undefined;
-    handleDateChanged?: (() => boolean) | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import { ScheduleResponse, HandleClicksDetails } from '../../types.d.ts';
+type Day = {
+    date: Date;
+    dayStr: string;
+    dateStr: string;
+    monthStr: string;
+    fullDateStr: string;
+};
+type ScheduleLayoutProps = {
+    schedule?: ScheduleResponse;
+    weeks?: Day[][];
+    handleScheduleClicks?: (details: HandleClicksDetails) => boolean | void;
+    handleDateChanged?: (date: Date) => boolean | void;
+};
+export declare function ScheduleLayout({ schedule, weeks, handleScheduleClicks, handleDateChanged, }: ScheduleLayoutProps): JSX.Element;
 export default ScheduleLayout;

package/dist/components/ScheduleLayout/ScheduleLayout.js

@@ -1,28 +1,100 @@
-import { jsxs as y, jsx as s } from "react/jsx-runtime";
-import { useState as a, useEffect as f } from "react";
-import { DateNavigation as x } from "../DateNavigation/DateNavigation.js";
-import { ScheduleList as w } from "../ScheduleList/ScheduleList.js";
-import { chunkArray as L, create2WeeksList as S } from "../../utils/date-helpers.js";
-import { f as u } from "../../format-YhWt2D8M.mjs";
-import { s as b } from "../../sub-CoUmnfhv.mjs";
-function F({ schedule: o = [], handleScheduleClicks: e = () => !0, handleDateChanged: c = () => !0 }) {
-  const l = (/* @__PURE__ */ new Date()).toLocaleString("en-US", { timeZone: "America/New_York" }), t = new Date(l), [r, d] = a(Number.parseInt(u(t, "H"), 10) < 6 ? b(t, { days: 1 }) : t), g = L(S(), 7), [p, n] = a(!1), [D, i] = a(!1), h = (m) => {
-    i(!0), setTimeout(() => {
-      n(!0);
-    }, 325), setTimeout(() => {
-      d(m), c(m);
-    }, 2e3);
-  };
-  return f(() => {
-    i(!1), n(!1);
-  }, [o]), f(() => {
-    e(r);
-  }, [r, e]), /* @__PURE__ */ y("schedule-layout", { children: [
-    /* @__PURE__ */ s(x, { weeks: g, handleDateChanged: h }),
-    /* @__PURE__ */ s("div", { id: u(r, "yyyy-MM-dd"), role: "tabpanel", children: /* @__PURE__ */ s(w, { schedule: o, handleClicks: e, fetching: p, exiting: D }) })
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { useRef as d, useCallback as S, useEffect as y } from "react";
+import { f as w } from "../../format-YhWt2D8M.mjs";
+import { l as c } from "../../logger-C0N7U0YY.mjs";
+import { classes as L } from "../../utils/helpers.js";
+import { ScheduleProvider as E } from "./ScheduleContext.js";
+import { useScheduleContext as T } from "./useScheduleContext.js";
+import { DateNavigation as k } from "../DateNavigation/DateNavigation.js";
+import { ScheduleList as q } from "../ScheduleList/ScheduleList.js";
+c.setComponent("ScheduleLayout");
+import '../../assets/ScheduleLayout.css';function x({
+  handleScheduleClicks: f = () => !0
+}) {
+  const { currentDate: n } = T(), r = d(null), p = d(0), i = d(null), s = d(null), l = d(null), a = S((u) => {
+    c.log("Determining pointer position for date: ", u);
+    const o = () => {
+      let e;
+      const v = document.querySelector(`.date-navigation__day[aria-controls="${w(u, "yyyy-MM-dd")}"]`);
+      if (v && (e = v.parentElement), e && r.current) {
+        const g = e.offsetLeft + e.offsetWidth / 2;
+        p.current = g, r.current.style.setProperty(
+          "--pointer-position",
+          `${g}px`
+        );
+      }
+    }, h = () => {
+      c.log("Scrolling schedule list to top"), c.log("Schedule list element: ", s.current), c.log("Sticky wrapper element: ", l.current);
+      const e = document.querySelector(".mobile-nav");
+      s.current && l.current && (c.log("Mobile nav element: ", e), window.scrollTo({
+        behavior: "auto",
+        top: e && window.getComputedStyle(e).display !== "none" ? s.current.offsetTop - l.current.offsetHeight - e.offsetHeight - 8 : s.current.offsetTop - l.current.offsetHeight - 16,
+        left: 0
+      }));
+    };
+    if (!r.current) {
+      const e = setInterval(() => {
+        r.current = document.querySelector(".date-navigation__list"), r.current && (clearInterval(e), s.current = document.querySelector(".schedule-list"), l.current = document.querySelector("sticky-content-wrapper"), o(), h());
+      }, 100);
+      setTimeout(() => {
+        clearInterval(e);
+      }, 3e3);
+      return;
+    }
+    o(), h();
+  }, []), m = S(() => {
+    i.current && clearTimeout(i.current), i.current = window.setTimeout(() => {
+      a(n);
+    }, 250);
+  }, [n, a]);
+  return y(() => (window.addEventListener("resize", m), () => {
+    window.removeEventListener("resize", m), i.current && clearTimeout(i.current);
+  }), [a, m]), y(() => {
+    const u = document.querySelector(".header-divider"), o = document.querySelector("sticky-content-wrapper");
+    o && u && new IntersectionObserver(
+      ([e]) => {
+        e.intersectionRatio < 1 ? o.dataset.pinnedState = "pinned" : o.dataset.pinnedState = "unpinned";
+      },
+      {
+        threshold: [1],
+        rootMargin: "-37px"
+      }
+    ).observe(u);
+  }, []), y(() => {
+    a(n);
+  }, [n, a]), /* @__PURE__ */ b("schedule-layout", { children: [
+    /* @__PURE__ */ t("sticky-content-wrapper", { "data-pinned-state": "unpinned", children: /* @__PURE__ */ t(
+      "content-constrainer",
+      {
+        class: L([
+          "content-constrainer--no-padding",
+          "content-constrainer--no-border",
+          "content-constrainer--lead-container",
+          "schedule-date-nav-constrainer"
+        ]),
+        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(n, "yyyy-MM-dd"), role: "tabpanel", children: /* @__PURE__ */ t(q, { handleClicks: f }) }) }) })
   ] });
 }
+function N({
+  schedule: f = [],
+  weeks: n = [],
+  handleScheduleClicks: r = () => !0,
+  handleDateChanged: p = () => !0
+}) {
+  return /* @__PURE__ */ t(
+    E,
+    {
+      handleDateChanged: p,
+      schedule: f,
+      weeks: n,
+      children: /* @__PURE__ */ t(x, { handleScheduleClicks: r })
+    }
+  );
+}
 export {
-  F as ScheduleLayout,
-  F as default
+  N as ScheduleLayout,
+  N as default
 };

package/dist/components/ScheduleLayout/index.d.ts

@@ -1 +1,2 @@
-export { ScheduleLayout, ScheduleLayout as default } from './ScheduleLayout';
+export { ScheduleLayout } from './ScheduleLayout';
+export { ScheduleLayout as default } from './ScheduleLayout';

package/dist/components/ScheduleLayout/useScheduleContext.d.ts

@@ -0,0 +1,14 @@
+export declare function useScheduleContext(): {
+    schedule: import('../../types').ScheduleResponse;
+    weeks: {
+        date: Date;
+        dayStr: string;
+        dateStr: string;
+        monthStr: string;
+        fullDateStr: string;
+    }[][];
+    currentDate: Date;
+    isLoading: boolean;
+    setCurrentDate: (date: Date) => void;
+};
+export default useScheduleContext;

package/dist/components/ScheduleLayout/useScheduleContext.js

@@ -0,0 +1,12 @@
+import { useContext as t } from "react";
+import { ScheduleContext as o } from "./ScheduleContext.js";
+function n() {
+  const e = t(o);
+  if (e === void 0)
+    throw new Error("useScheduleContext must be used within a ScheduleProvider");
+  return e;
+}
+export {
+  n as default,
+  n as useScheduleContext
+};

package/dist/components/ScheduleList/ScheduleList.d.ts

@@ -1,6 +1,6 @@
-export function ScheduleList({ schedule, handleClicks, exiting, }: {
-    schedule?: never[] | undefined;
-    handleClicks?: (() => boolean) | undefined;
-    exiting?: boolean | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import { HandleClicksDetails } from '../../types.d.ts';
+type ScheduleListProps = {
+    handleClicks?: (details: HandleClicksDetails) => boolean | void;
+};
+export declare function ScheduleList({ handleClicks, }: ScheduleListProps): JSX.Element;
 export default ScheduleList;