@scrippsproduct/networks-ui-library 1.1.0-alpha.0 → 1.1.0-alpha.10

package/dist/components/CustomSelect/CustomSelect.js

@@ -1,217 +1,287 @@
-import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import F, { forwardRef as le, useState as y, useRef as E } from "react";
-import { publish as X } from "../../utils/events.js";
-import { classes as f } from "../../utils/helpers.js";
-import { s as a, C as oe } from "../../ChoicesItem-CGIr6Qga.mjs";
-import { s as v, C as ie, A as ne } from "../../Form.module-Cd8qH2rj.mjs";
-import { X as ae } from "../../x-C-QzJ-qD.mjs";
-import { T as ue } from "../../triangle-PcCcGXjr.mjs";
-import { P as j } from "../../index-DC2JJV3a.mjs";
-function I() {
-  return I = Object.assign || function(t) {
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import X, { forwardRef as ne, useState as C, useRef as I } from "react";
+import { publish as G } from "../../utils/events.js";
+import { classes as m } from "../../utils/helpers.js";
+import { s as a, C as ie } from "../../ChoicesItem-CT9fXB0I.mjs";
+import { s as v, C as oe, A as ae } from "../../Form.module-Cd8qH2rj.mjs";
+import { X as ue } from "../../x-C-QzJ-qD.mjs";
+import { T as de } from "../../triangle-PcCcGXjr.mjs";
+import { P as x } from "../../index-DC2JJV3a.mjs";
+function R() {
+  return R = Object.assign || function(t) {
     for (var u = 1; u < arguments.length; u++) {
       var l = arguments[u];
-      for (var o in l)
-        Object.prototype.hasOwnProperty.call(l, o) && (t[o] = l[o]);
+      for (var n in l)
+        Object.prototype.hasOwnProperty.call(l, n) && (t[n] = l[n]);
     }
     return t;
-  }, I.apply(this, arguments);
+  }, R.apply(this, arguments);
 }
-function de(t, u) {
+function fe(t, u) {
   if (t == null) return {};
-  var l = he(t, u), o, c;
+  var l = he(t, u), n, c;
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(t);
     for (c = 0; c < i.length; c++)
-      o = i[c], !(u.indexOf(o) >= 0) && Object.prototype.propertyIsEnumerable.call(t, o) && (l[o] = t[o]);
+      n = i[c], !(u.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(t, n) && (l[n] = t[n]);
   }
   return l;
 }
 function he(t, u) {
   if (t == null) return {};
-  var l = {}, o = Object.keys(t), c, i;
-  for (i = 0; i < o.length; i++)
-    c = o[i], !(u.indexOf(c) >= 0) && (l[c] = t[c]);
+  var l = {}, n = Object.keys(t), c, i;
+  for (i = 0; i < n.length; i++)
+    c = n[i], !(u.indexOf(c) >= 0) && (l[c] = t[c]);
   return l;
 }
-var R = le(function(t, u) {
-  var l = t.color, o = l === void 0 ? "currentColor" : l, c = t.size, i = c === void 0 ? 24 : c, P = de(t, ["color", "size"]);
-  return /* @__PURE__ */ F.createElement("svg", I({
+var L = ne(function(t, u) {
+  var l = t.color, n = l === void 0 ? "currentColor" : l, c = t.size, i = c === void 0 ? 24 : c, T = fe(t, ["color", "size"]);
+  return /* @__PURE__ */ X.createElement("svg", R({
     ref: u,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
     height: i,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: o,
+    stroke: n,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, P), /* @__PURE__ */ F.createElement("polyline", {
+  }, T), /* @__PURE__ */ X.createElement("polyline", {
     points: "6 9 12 15 18 9"
   }));
 });
-R.propTypes = {
-  color: j.string,
-  size: j.oneOfType([j.string, j.number])
+L.propTypes = {
+  color: x.string,
+  size: x.oneOfType([x.string, x.number])
 };
-R.displayName = "ChevronDown";
-function Ce({
+L.displayName = "ChevronDown";
+function ke({
   name: t,
   options: u,
   label: l = "",
-  width: o = 100,
+  width: n = 100,
   multiple: c = !1,
   placeholder: i = "",
-  ValidIcon: P = ie,
-  InvalidIcon: G = ne,
-  expandIconType: L = "default",
+  ValidIcon: T = oe,
+  InvalidIcon: J = ae,
+  expandIconType: V = "default",
   // default, chevron
-  showValidation: x = !0,
-  ...J
+  showValidation: E = !0,
+  ...Q
 }) {
-  var H, U, B;
-  const [Q, Y] = y(`${v["form-field__input"]}`), w = E(), T = E(), [V, q] = y(""), [D, Z] = y("clean"), [k, K] = y([]), [m, $] = y(u.map((e, d) => ({
+  var U, B, F;
+  const [Y, Z] = C(`${v["form-field__input"]}`), p = I(null), $ = I(null), [q, K] = C(""), [D, ee] = C("clean"), [N, M] = C([]), [h, O] = C(u.map((e, d) => ({
     ...e,
     id: e != null && e.id ? e == null ? void 0 : e.id : `${t}-${d + 1}`,
     status: "active"
-  }))), [A, ee] = y(null), [p, M] = y("hidden"), n = E(-1), te = `input-width--${o}`, z = (e, d, h = "selected") => {
-    if (!c && h === "selected" || h === "highlighted") {
+  }))), [A, te] = C(null), [g, W] = C("hidden"), o = I(-1), se = `input-width--${n}`, z = (e, d, f = "selected") => {
+    if (!c && f === "selected" || f === "highlighted") {
       for (const s of e)
-        if (s.status === h) {
+        if (s.status === f) {
           s.status = "active";
           break;
         }
     }
     for (const s of e)
-      if (s.id === d && (c && s.status !== "selected" && h === "selected" && K([...k, s]), s.status !== "selected" && (s.status = h), h === "selected")) {
-        ee(s);
+      if (s.id === d && (c && s.status !== "selected" && f === "selected" && M([...N, s]), s.status !== "selected" && (s.status = f), f === "selected")) {
+        te(s);
         break;
       }
     return e;
-  }, se = () => {
+  }, ce = () => {
     setTimeout(() => {
-      w.current.checkValidity() ? q("") : q(w.current.validationMessage);
+      p.current && p.current.checkValidity() ? K("") : p.current && K(p.current.validationMessage);
     }, 100);
-  }, C = (e) => {
-    e == null || e.stopPropagation(), Z("touched"), Y(`${v["form-field__input"]} ${v["input--touched"]}`), p === "hidden" ? M("visible") : (M("hidden"), se());
-  }, ce = (e) => {
-    const h = k.filter((g) => g.id !== e);
-    K([...h]);
-    let s = m;
-    const _ = (g, N) => {
-      for (const O of g) {
-        if (O.id === N) {
-          O.status = "active";
+  }, k = (e) => {
+    e == null || e.stopPropagation(), ee("touched"), Z(`${v["form-field__input"]} ${v["input--touched"]}`), g === "hidden" ? W("visible") : (W("hidden"), ce());
+  }, re = (e) => {
+    const f = N.filter((y) => y.id !== e);
+    M([...f]);
+    let s = h;
+    const _ = (y, j) => {
+      for (const P of y) {
+        if (P.id === j) {
+          P.status = "active";
           break;
         }
-        O.subcategories.length && _(O.subcategories, N);
+        P.subcategories.length && _(P.subcategories, j);
       }
-      return g;
-    }, S = _(s, e);
-    $([...S]), document.querySelector(`select[name="${t}"] > option[value="${e}"]`).selected = !1;
-  }, re = (e) => {
-    const d = structuredClone(m), h = z(d, e);
-    $([...h]), C(), n.current = -1;
-    const s = m.find((_) => _.id === e);
-    document.querySelector(`select[name="${t}"] > option[value="${s.value}"]`).selected = !0, X("scripps:customselect:selected", { value: s.value });
-  }, W = (e) => {
-    if (e.key === "Tab" || (e.key === "ArrowDown" || e.key === "ArrowUp") && p !== "visible") return !0;
+      return y;
+    }, b = _(s, e);
+    O([...b]);
+    const S = document.querySelector(`select[name="${t}"] > option[value="${e}"]`);
+    S && (S.selected = !1);
+  }, le = (e) => {
+    const d = structuredClone(h), f = z(d, e);
+    O([...f]), k(null), o.current = -1;
+    const s = h.find((b) => b.id === e);
+    if (!s) return;
+    const _ = document.querySelector(`select[name="${t}"] > option[value="${s.value}"]`);
+    _ && (_.selected = !0), G("scripps:customselect:selected", { value: s.value });
+  }, H = (e) => {
+    if (e.key === "Tab" || (e.key === "ArrowDown" || e.key === "ArrowUp") && g !== "visible") return !0;
     e.stopPropagation(), e.preventDefault();
-    const d = e.key, h = m, s = (_) => {
-      const S = z(h, m[_].id, "highlighted");
-      $([...S]);
+    const d = e.key, f = h, s = (_) => {
+      const b = z(f, h[_].id, "highlighted");
+      O([...b]);
     };
-    if (d === "ArrowDown" && p === "visible")
-      n.current < m.length - 1 ? (s(n.current + 1), n.current++) : (s(0), n.current = 0);
-    else if (d === "ArrowUp" && p === "visible")
-      n.current > 0 ? (s(n.current - 1), n.current--) : (s(m.length - 1), n.current = m.length - 1);
+    if (d === "ArrowDown" && g === "visible")
+      o.current < h.length - 1 ? (s(o.current + 1), o.current++) : (s(0), o.current = 0);
+    else if (d === "ArrowUp" && g === "visible")
+      o.current > 0 ? (s(o.current - 1), o.current--) : (s(h.length - 1), o.current = h.length - 1);
     else if (d === "Enter")
-      if (p === "visible" && n.current !== -1) {
-        const _ = m[n.current].id, S = z(h, _);
-        $([...S]), C(), n.current = -1;
-        const g = m.find((N) => N.id === _);
-        document.querySelector(`select[name="${t}"] > option[value="${g.value}"]`).selected = !0, X("scripps:customselect:selected", { value: g.value });
+      if (g === "visible" && o.current !== -1) {
+        const _ = h[o.current].id, b = z(f, _);
+        O([...b]), k(null), o.current = -1;
+        const S = h.find((j) => j.id === _);
+        if (!S) return;
+        const y = document.querySelector(`select[name="${t}"] > option[value="${S.value}"]`);
+        y && (y.selected = !0), G("scripps:customselect:selected", { value: S.value });
       } else
-        C();
-    else if (d === "Escape" && p === "visible")
-      C(), n.current = -1;
+        k(null);
+    else if (d === "Escape" && g === "visible")
+      k(null), o.current = -1;
     else
       return !1;
-    30 * n.current > 160 ? T.current.scrollTo(0, 30 * n.current) : T.current.scrollTo(0, 0);
+    30 * o.current > 160 && $.current ? $.current.scrollTo(0, 30 * o.current) : $.current && $.current.scrollTo(0, 0);
   };
-  return /* @__PURE__ */ b("label", { htmlFor: t, className: f([
-    v["form-field"],
-    v[te]
-  ]), children: [
-    x && /* @__PURE__ */ b(
-      "i",
-      {
-        className: [
-          v["form-field__icon"],
-          (H = w.current) != null && H.validity.valid ? "" : v["form-field__icon--invalid"]
-        ].join(" "),
-        style: l === "" ? { top: "0.4em" } : {},
-        children: [
-          ((U = w.current) == null ? void 0 : U.checkValidity()) && D === "touched" && /* @__PURE__ */ r(P, {}),
-          !((B = w.current) != null && B.checkValidity()) && D === "touched" && /* @__PURE__ */ r(G, {})
-        ]
-      }
-    ),
-    l !== "" && /* @__PURE__ */ r("span", { className: v["form-field__label"], children: l }),
-    /* @__PURE__ */ b(
-      "select",
-      {
-        name: t,
-        className: f([
-          a["custom-select__select"],
-          D === "touched" && x ? a["custom-select__select--touched"] : ""
-        ]),
-        multiple: c,
-        ref: w,
-        tabIndex: "-1",
-        ...J,
-        children: [
-          /* @__PURE__ */ r("option", { value: "" }),
-          u.length && u.map((e) => /* @__PURE__ */ r("option", { value: e.value, selected: e.selected, children: e.label }, `option-${e.value}`))
-        ]
-      }
-    ),
-    /* @__PURE__ */ b("div", { className: f([Q, a["custom-select"], "custom-select"]), onKeyDown: W, tabIndex: "0", children: [
-      c && /* @__PURE__ */ b("ul", { className: f([a["custom-select__selections"], "custom-select__selections"]), onClick: C, children: [
-        k.length !== 0 && k.map((e) => /* @__PURE__ */ b("li", { className: f([a["custom-select__selected"], "custom-select__selected"]), children: [
-          e.label,
-          /* @__PURE__ */ r(
-            "button",
-            {
-              title: "remove",
-              type: "button",
-              className: a["custom-select__remove"],
-              onClick: (d) => {
-                d.stopPropagation(), ce(e.id);
-              },
-              children: /* @__PURE__ */ r(ae, { width: 16, height: 16 })
-            }
-          )
-        ] })),
-        k.length === 0 && i !== "" && /* @__PURE__ */ r("span", { className: f([a["custom-select__placeholder"], "custom-select__placeholder"]), children: i })
-      ] }),
-      !c && /* @__PURE__ */ b("div", { className: `${a["custom-select__selection"]}`, onClick: C, children: [
-        A && A.label,
-        !A && i !== "" && /* @__PURE__ */ r("span", { className: f([a["custom-select__placeholder"], "custom-select__placeholder"]), children: i })
-      ] }),
-      /* @__PURE__ */ r("div", { className: f([
-        a["custom-select__choices-wrapper"],
-        "custom-select__choices-wrapper",
-        p === "visible" ? "" : a["custom-select__choices-wrapper--hidden"]
-      ]), children: /* @__PURE__ */ r("div", { className: f([a["custom-select__choices"], "custom-select__choices"]), ref: T, onKeyDown: W, children: /* @__PURE__ */ r("ul", { children: m.length !== 0 && m.map((e) => /* @__PURE__ */ r(oe, { item: e, handleOnClick: re }, `choice-${e.id}`)) }) }) }),
-      L === "default" && /* @__PURE__ */ r("i", { className: a["custom-select__icon"], children: /* @__PURE__ */ r(ue, {}) }),
-      L === "chevron" && /* @__PURE__ */ r("i", { className: f([a["custom-select__icon"], a["custom-select__icon--chevron"], "custom-select__icon--chevron"]), children: /* @__PURE__ */ r(R, {}) })
-    ] }),
-    V !== "" && x && /* @__PURE__ */ r("div", { className: f([v["form-field__error-message"], "form-field__error-message"]), children: V })
-  ] });
+  return /* @__PURE__ */ w(
+    "label",
+    {
+      className: m([
+        v["form-field"],
+        v[se]
+      ]),
+      htmlFor: t,
+      children: [
+        E && /* @__PURE__ */ w(
+          "i",
+          {
+            className: [
+              v["form-field__icon"],
+              (U = p.current) != null && U.validity.valid ? "" : v["form-field__icon--invalid"]
+            ].join(" "),
+            style: l === "" ? { top: "0.4em" } : {},
+            children: [
+              ((B = p.current) == null ? void 0 : B.checkValidity()) && D === "touched" && /* @__PURE__ */ r(T, {}),
+              !((F = p.current) != null && F.checkValidity()) && D === "touched" && /* @__PURE__ */ r(J, {})
+            ]
+          }
+        ),
+        l !== "" && /* @__PURE__ */ r("span", { className: v["form-field__label"], children: l }),
+        /* @__PURE__ */ w(
+          "select",
+          {
+            className: m([
+              a["custom-select__select"],
+              D === "touched" && E ? a["custom-select__select--touched"] : ""
+            ]),
+            multiple: c,
+            name: t,
+            ref: p,
+            tabIndex: -1,
+            ...Q,
+            children: [
+              /* @__PURE__ */ r("option", { value: "" }),
+              u.length && u.map((e) => /* @__PURE__ */ r(
+                "option",
+                {
+                  selected: e.selected,
+                  value: e.value,
+                  children: e.label
+                },
+                `option-${e.value}`
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ w(
+          "div",
+          {
+            className: m([Y, a["custom-select"], "custom-select"]),
+            tabIndex: 0,
+            onKeyDown: H,
+            children: [
+              c && /* @__PURE__ */ w(
+                "ul",
+                {
+                  className: m([a["custom-select__selections"], "custom-select__selections"]),
+                  onClick: k,
+                  children: [
+                    N.length !== 0 && N.map((e) => /* @__PURE__ */ w(
+                      "li",
+                      {
+                        className: m([a["custom-select__selected"], "custom-select__selected"]),
+                        children: [
+                          e.label,
+                          /* @__PURE__ */ r(
+                            "button",
+                            {
+                              className: a["custom-select__remove"],
+                              title: "remove",
+                              type: "button",
+                              onClick: (d) => {
+                                d.stopPropagation(), re(e.id);
+                              },
+                              children: /* @__PURE__ */ r(ue, { height: 16, width: 16 })
+                            }
+                          )
+                        ]
+                      }
+                    )),
+                    N.length === 0 && i !== "" && /* @__PURE__ */ r("li", { className: m([a["custom-select__placeholder"], "custom-select__placeholder"]), children: i })
+                  ]
+                }
+              ),
+              !c && /* @__PURE__ */ w(
+                "div",
+                {
+                  className: `${a["custom-select__selection"]}`,
+                  onClick: k,
+                  children: [
+                    A && A.label,
+                    !A && i !== "" && /* @__PURE__ */ r("span", { className: m([a["custom-select__placeholder"], "custom-select__placeholder"]), children: i })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  className: m([
+                    a["custom-select__choices-wrapper"],
+                    "custom-select__choices-wrapper",
+                    g === "visible" ? "" : a["custom-select__choices-wrapper--hidden"]
+                  ]),
+                  children: /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: m([a["custom-select__choices"], "custom-select__choices"]),
+                      ref: $,
+                      onKeyDown: H,
+                      children: /* @__PURE__ */ r("ul", { children: h.length !== 0 && h.map((e) => /* @__PURE__ */ r(
+                        ie,
+                        {
+                          handleOnClick: le,
+                          item: e
+                        },
+                        `choice-${e.id}`
+                      )) })
+                    }
+                  )
+                }
+              ),
+              V === "default" && /* @__PURE__ */ r("i", { className: a["custom-select__icon"], children: /* @__PURE__ */ r(de, {}) }),
+              V === "chevron" && /* @__PURE__ */ r("i", { className: m([a["custom-select__icon"], a["custom-select__icon--chevron"], "custom-select__icon--chevron"]), children: /* @__PURE__ */ r(L, {}) })
+            ]
+          }
+        ),
+        q !== "" && E && /* @__PURE__ */ r("div", { className: m([v["form-field__error-message"], "form-field__error-message"]), children: q })
+      ]
+    }
+  );
 }
 export {
-  Ce as CustomSelect,
-  Ce as default
+  ke as CustomSelect,
+  ke as default
 };

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

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

package/dist/components/DateNavigation/DateNavigation.d.ts

@@ -1,5 +1,2 @@
-export function DateNavigation({ weeks, handleDateChanged }: {
-    weeks?: never[][] | undefined;
-    handleDateChanged?: (() => boolean) | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function DateNavigation(): JSX.Element;
 export default DateNavigation;