@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10

package/dist/components/CustomSelect/CustomSelect.test.js

@@ -0,0 +1,313 @@
+import { jsx as s } from "react/jsx-runtime";
+import { v as w, d as r, i as n, r as c, s as m, g as o, w as h, f as d } from "../../react.esm-DLSrfVwM.mjs";
+import { u as y } from "../../index-BUN4jQ3m.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { CustomSelect as l } from "./CustomSelect.js";
+Element.prototype.scrollTo = w.fn();
+r("CustomSelect", () => {
+  const i = [
+    { id: 1, parent_id: null, label: "Option 1", value: "opt1", subcategories: [], status: "normal" },
+    { id: 2, parent_id: null, label: "Option 2", value: "opt2", subcategories: [], status: "normal" },
+    { id: 3, parent_id: null, label: "Option 3", value: "opt3", subcategories: [], status: "normal" }
+  ];
+  r("Basic Rendering", () => {
+    n("should render with required props", () => {
+      c(/* @__PURE__ */ s(l, { name: "test-select", options: i }));
+      const t = m.getByRole("combobox");
+      o(t).toBeInTheDocument();
+    }), n("should render label when provided", () => {
+      c(/* @__PURE__ */ s(l, { label: "Select an option", name: "test-select", options: i })), o(m.getByText("Select an option")).toBeInTheDocument();
+    }), n("should not render label when empty string", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { label: "", name: "test-select", options: i })), e = t.querySelector(".form-field__label");
+      o(e).not.toBeInTheDocument();
+    }), n("should render placeholder in single select mode", () => {
+      c(/* @__PURE__ */ s(l, { name: "test-select", options: i, placeholder: "Choose one" })), o(m.getByText("Choose one")).toBeInTheDocument();
+    }), n("should render placeholder in multiple select mode", () => {
+      c(/* @__PURE__ */ s(
+        l,
+        {
+          multiple: !0,
+          name: "test-select",
+          options: i,
+          placeholder: "Choose multiple"
+        }
+      )), o(m.getByText("Choose multiple")).toBeInTheDocument();
+    }), n("should render native select element", () => {
+      c(/* @__PURE__ */ s(l, { name: "test-select", options: i }));
+      const t = m.getByRole("combobox");
+      o(t).toHaveAttribute("name", "test-select");
+    }), n("should render all options in native select", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelectorAll("select option");
+      o(e).toHaveLength(i.length + 1);
+    });
+  }), r("Options Rendering", () => {
+    n("should render options with correct values", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector('option[value="opt1"]');
+      o(e).toBeInTheDocument(), o(e == null ? void 0 : e.textContent).toBe("Option 1");
+    }), n("should handle empty options array", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: [] })), e = t.querySelectorAll("select option");
+      o(e).toHaveLength(1);
+    }), n("should generate IDs for options without IDs", () => {
+      c(/* @__PURE__ */ s(l, { name: "test-select", options: [
+        { id: "noid1", parent_id: null, label: "No ID 1", value: "noid1", subcategories: [], status: "normal" },
+        { id: "noid2", parent_id: null, label: "No ID 2", value: "noid2", subcategories: [], status: "normal" }
+      ] }));
+      const e = m.getByRole("combobox");
+      o(e).toBeInTheDocument();
+    }), n("should use provided IDs for options", () => {
+      c(/* @__PURE__ */ s(l, { name: "test-select", options: [
+        { id: "custom-1", parent_id: null, label: "Custom 1", value: "c1", subcategories: [], status: "normal" },
+        { id: "custom-2", parent_id: null, label: "Custom 2", value: "c2", subcategories: [], status: "normal" }
+      ] }));
+      const e = m.getByRole("combobox");
+      o(e).toBeInTheDocument();
+    });
+  }), r("Single Selection Mode", () => {
+    n("should default to single selection mode", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector("select");
+      o(e).not.toHaveAttribute("multiple");
+    }), n("should show selected option", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select");
+      o(e).toBeInTheDocument(), o(t.textContent).toContain("Option 1");
+    }), n("should not show selections list in single mode", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select__selections");
+      o(e).not.toBeInTheDocument();
+    }), n("should show custom-select__selection div in single mode", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select__selection");
+      o(e).toBeInTheDocument();
+    });
+  }), r("Multiple Selection Mode", () => {
+    n("should set multiple attribute on native select", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { multiple: !0, name: "test-select", options: i })), e = t.querySelector("select");
+      o(e).toHaveAttribute("multiple");
+    }), n("should render selections list in multiple mode", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { multiple: !0, name: "test-select", options: i })), e = t.querySelector(".custom-select__selections");
+      o(e).toBeInTheDocument();
+    }), n("should allow multiple selections", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { multiple: !0, name: "test-select", options: i })), e = t.querySelector(".custom-select__selections");
+      o(e).toBeInTheDocument();
+      const a = t.querySelector("select");
+      o(a).toHaveAttribute("multiple");
+    }), n("should show remove button for selected items", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { multiple: !0, name: "test-select", options: i })), e = t.querySelector(".custom-select__selections");
+      o(e).toBeInTheDocument();
+    }), n("should remove selection when remove button clicked", async () => {
+      const t = y.setup(), { container: e } = c(/* @__PURE__ */ s(l, { multiple: !0, name: "test-select", options: i })), a = e.querySelector(".custom-select__selections");
+      a && await t.click(a);
+      const u = e.querySelectorAll(".choices-item");
+      u[0] && await t.click(u[0]), await h(async () => {
+        const p = e.querySelector(".custom-select__remove");
+        if (p) {
+          await t.click(p);
+          const b = e.querySelectorAll(".custom-select__selected");
+          o(b.length).toBe(0);
+        }
+      });
+    });
+  }), r("Choices List Visibility", () => {
+    n("should start with choices hidden", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select__choices-wrapper");
+      o(e).toHaveClass("custom-select__choices-wrapper--hidden");
+    }), n("should show choices when custom select is clicked", async () => {
+      const t = y.setup(), { container: e } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), a = e.querySelector(".custom-select");
+      if (a) {
+        await t.click(a);
+        const u = e.querySelector(".custom-select__choices");
+        o(u).toBeInTheDocument();
+      }
+    }), n("should hide choices after selection", async () => {
+      const t = y.setup(), { container: e } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), a = e.querySelector(".custom-select");
+      a && await t.click(a);
+      const u = e.querySelectorAll(".choices-item");
+      u[0] && await t.click(u[0]), await h(() => {
+        const p = e.querySelector(".custom-select__choices-wrapper");
+        o(p).toHaveClass("custom-select__choices-wrapper--hidden");
+      });
+    });
+  }), r("Keyboard Navigation", () => {
+    n("should open choices on Enter key", async () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select");
+      e && (d.keyDown(e, { key: "Enter" }), await h(() => {
+        const a = t.querySelector(".custom-select__choices-wrapper");
+        o(a).not.toHaveClass("custom-select__choices-wrapper--hidden");
+      }));
+    }), n("should close choices on Escape key", async () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select");
+      e && (d.keyDown(e, { key: "Enter" }), d.keyDown(e, { key: "Escape" }), await h(() => {
+        const a = t.querySelector(".custom-select__choices-wrapper");
+        o(a).toHaveClass("custom-select__choices-wrapper--hidden");
+      }));
+    }), n("should allow Tab key without preventing default", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select");
+      if (e) {
+        const a = new KeyboardEvent("keydown", { key: "Tab", bubbles: !0 }), u = w.spyOn(a, "preventDefault");
+        e.dispatchEvent(a), o(u).not.toHaveBeenCalled();
+      }
+    }), n("should navigate down with ArrowDown when list is open", async () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select");
+      e && (d.keyDown(e, { key: "Enter" }), d.keyDown(e, { key: "ArrowDown" }), o(e).toBeInTheDocument());
+    }), n("should navigate up with ArrowUp when list is open", async () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select");
+      e && (d.keyDown(e, { key: "Enter" }), d.keyDown(e, { key: "ArrowUp" }), o(e).toBeInTheDocument());
+    }), n("should allow arrow keys to scroll page when select is closed", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select");
+      if (e) {
+        const a = new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: !0 }), u = w.spyOn(a, "preventDefault");
+        e.dispatchEvent(a), o(u).not.toHaveBeenCalled();
+      }
+    });
+  }), r("Validation", () => {
+    n("should show validation icon when showValidation is true", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { showValidation: !0, name: "test-select", options: i })), e = t.querySelector(".form-field__icon");
+      o(e).toBeInTheDocument();
+    }), n("should not show validation icon when showValidation is false", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i, showValidation: !1 })), e = t.querySelector(".form-field__icon");
+      o(e).not.toBeInTheDocument();
+    }), n("should use custom ValidIcon when provided", () => {
+      c(/* @__PURE__ */ s(l, { ValidIcon: () => /* @__PURE__ */ s("span", { "data-testid": "custom-valid-icon", children: "✓" }), name: "test-select", options: i })), o(m.getByRole("combobox")).toBeInTheDocument();
+    }), n("should use custom InvalidIcon when provided", () => {
+      c(/* @__PURE__ */ s(l, { InvalidIcon: () => /* @__PURE__ */ s("span", { "data-testid": "custom-invalid-icon", children: "✗" }), name: "test-select", options: i })), o(m.getByRole("combobox")).toBeInTheDocument();
+    }), n("should show validation message when invalid", () => {
+      const { container: t } = c(
+        /* @__PURE__ */ s(
+          l,
+          {
+            required: !0,
+            showValidation: !0,
+            name: "test-select",
+            options: i
+          }
+        )
+      ), e = t.querySelector("select");
+      o(e).toHaveAttribute("required");
+      const a = t.querySelector(".custom-select");
+      o(a).toBeInTheDocument();
+    }), n("should default to showValidation true", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".form-field__icon");
+      o(e).toBeInTheDocument();
+    });
+  }), r("Width Options", () => {
+    n("should apply default width of 100", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector("label");
+      o(e).toHaveClass("input-width--100");
+    }), n("should apply width of 25", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i, width: 25 })), e = t.querySelector("label");
+      o(e).toHaveClass("input-width--25");
+    }), n("should apply width of 50", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i, width: 50 })), e = t.querySelector("label");
+      o(e).toHaveClass("input-width--50");
+    }), n("should apply width of 75", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i, width: 75 })), e = t.querySelector("label");
+      o(e).toHaveClass("input-width--75");
+    });
+  }), r("Expand Icon Types", () => {
+    n("should render default triangle icon", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select__icon");
+      o(e).toBeInTheDocument(), o(e).not.toHaveClass("custom-select__icon--chevron");
+    }), n("should render chevron icon when expandIconType is chevron", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { expandIconType: "chevron", name: "test-select", options: i })), e = t.querySelector(".custom-select__icon--chevron");
+      o(e).toBeInTheDocument();
+    }), n("should default to triangle icon", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { expandIconType: "default", name: "test-select", options: i })), e = t.querySelector(".custom-select__icon");
+      o(e).toBeInTheDocument();
+    });
+  }), r("CSS Classes", () => {
+    n("should apply form-field class", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".form-field");
+      o(e).toBeInTheDocument();
+    }), n("should apply custom-select class", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select");
+      o(e).toBeInTheDocument();
+    }), n("should apply custom-select__choices class", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector(".custom-select__choices");
+      o(e).toBeInTheDocument();
+    }), n("should apply placeholder class when no selection", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i, placeholder: "Test" })), e = t.querySelector(".custom-select__placeholder");
+      o(e).toBeInTheDocument();
+    });
+  }), r("Native Select Integration", () => {
+    n("should set tabIndex to -1 on native select", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector("select");
+      o(e).toHaveAttribute("tabindex", "-1");
+    }), n("should set name attribute on native select", () => {
+      c(/* @__PURE__ */ s(l, { name: "my-select", options: i }));
+      const t = m.getByRole("combobox");
+      o(t).toHaveAttribute("name", "my-select");
+    }), n("should include empty option in native select", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i })), e = t.querySelector('option[value=""]');
+      o(e).toBeInTheDocument();
+    }), n("should mark selected options in native select", () => {
+      const t = [
+        { id: 1, parent_id: null, label: "Option 1", value: "opt1", subcategories: [], status: "normal", selected: !0 },
+        { id: 2, parent_id: null, label: "Option 2", value: "opt2", subcategories: [], status: "normal" }
+      ], { container: e } = c(/* @__PURE__ */ s(l, { name: "test-select", options: t })), a = e.querySelector('option[value="opt1"]');
+      o(a).toHaveProperty("selected", !0);
+    });
+  }), r("Additional Props", () => {
+    n("should pass additional attributes to select element", () => {
+      const { container: t } = c(
+        /* @__PURE__ */ s(
+          l,
+          {
+            required: !0,
+            "data-testid": "custom-attr",
+            name: "test-select",
+            options: i
+          }
+        )
+      ), e = t.querySelector("select");
+      o(e).toHaveAttribute("required"), o(e).toHaveAttribute("data-testid", "custom-attr");
+    }), n("should handle aria attributes", () => {
+      const { container: t } = c(
+        /* @__PURE__ */ s(
+          l,
+          {
+            "aria-label": "Test Select",
+            name: "test-select",
+            options: i
+          }
+        )
+      ), e = t.querySelector("select");
+      o(e).toHaveAttribute("aria-label", "Test Select");
+    });
+  }), r("Label Behavior", () => {
+    n("should associate label with select using htmlFor", () => {
+      const { container: t } = c(
+        /* @__PURE__ */ s(l, { label: "Test Label", name: "test-select", options: i })
+      ), e = t.querySelector("label");
+      o(e).toHaveAttribute("for", "test-select");
+    }), n("should adjust icon position when no label", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { label: "", name: "test-select", options: i })), e = t.querySelector(".form-field__icon");
+      o(e).toHaveStyle({ top: "0.4em" });
+    });
+  }), r("Edge Cases", () => {
+    n("should handle options with subcategories", () => {
+      c(/* @__PURE__ */ s(l, { name: "test-select", options: [
+        {
+          id: 1,
+          parent_id: null,
+          label: "Parent",
+          value: "parent",
+          subcategories: [
+            { id: 2, parent_id: 1, label: "Child", value: "child", subcategories: [], status: "normal" }
+          ],
+          status: "normal"
+        }
+      ] })), o(m.getByRole("combobox")).toBeInTheDocument();
+    }), n("should handle empty placeholder", () => {
+      const { container: t } = c(/* @__PURE__ */ s(l, { name: "test-select", options: i, placeholder: "" })), e = t.querySelector(".custom-select__placeholder");
+      o(e).not.toBeInTheDocument();
+    }), n("should handle selection and deselection in multiple mode", async () => {
+      const t = y.setup(), { container: e } = c(/* @__PURE__ */ s(l, { multiple: !0, name: "test-select", options: i })), a = e.querySelector(".custom-select__selections");
+      if (a) {
+        await t.click(a);
+        const u = e.querySelectorAll(".choices-item");
+        u[0] && (await t.click(u[0]), await h(async () => {
+          const p = e.querySelector(".custom-select__remove");
+          p && await t.click(p);
+        }));
+      }
+      o(e.querySelector(".custom-select")).toBeInTheDocument();
+    });
+  });
+});

package/dist/components/DateNavigation/DateNavigation.js

@@ -1,10 +1,10 @@
 import { jsxs as _, jsx as e } from "react/jsx-runtime";
 import { useState as g, useReducer as I, useRef as m, useCallback as M, useEffect as p } from "react";
-import { f as l } from "../../format-YhWt2D8M.mjs";
+import { f as s } from "../../format-YhWt2D8M.mjs";
 import { classes as o } from "../../utils/helpers.js";
-import { useScheduleContext as S } from "../ScheduleLayout/useScheduleContext.js";
-import { C as W } from "../../chevron-left-DRvpaLmK.mjs";
-import { C as w } from "../../chevron-right-C8yCnmfx.mjs";
+import { u as S } from "../../useScheduleContext-D7FdzNxe.mjs";
+import { C as W } from "../../chevron-left-D0UjbrKw.mjs";
+import { C as w } from "../../chevron-right-0ZF3LruR.mjs";
 import '../../assets/DateNavigation.css';const a = {
   "date-navigation__list": "_date-navigation__list_1jjng_1",
   "date-navigation__control": "_date-navigation__control_1jjng_72",
@@ -27,10 +27,10 @@ function A(n, i) {
   }
 }
 function V() {
-  const { weeks: n, setCurrentDate: i } = S(), [r, j] = g(0), [x, b] = g(n[0]), [s, y] = g(n[0][0]), [C, h] = I(A, "idle"), d = m(null), N = m(0), f = m(l(new Date(s.fullDateStr), "yyyy-MM-dd")), k = (t) => {
+  const { weeks: n, setCurrentDate: i } = S(), [r, j] = g(0), [x, b] = g(n[0]), [l, y] = g(n[0][0]), [C, h] = I(A, "idle"), d = m(null), N = m(0), f = m(s(new Date(l.fullDateStr), "yyyy-MM-dd")), k = (t) => {
     h({ type: "NAVIGATE_TO_WEEK", currentWeekIndex: r, targetWeekIndex: t }), j(t);
   }, D = (t) => {
-    l(t.date, "yyyy-MM-dd") !== f.current && (f.current = l(t.date, "yyyy-MM-dd"), y(t), i(t.date));
+    s(t.date, "yyyy-MM-dd") !== f.current && (f.current = s(t.date, "yyyy-MM-dd"), y(t), i(t.date));
   }, c = M(() => {
     if (d.current === null) return;
     const t = d.current;
@@ -42,14 +42,14 @@ function V() {
     d.current !== null && (d.current.removeEventListener("animationend", c), d.current.addEventListener("animationend", c, { once: !0 }));
   }, [c]), p(() => {
     b(n[r]);
-    const t = r ? 0 : 1, E = l(s.date, "yyyy-MM-dd"), u = n[t].findIndex(
-      (v) => l(v.date, "yyyy-MM-dd") === E
+    const t = r ? 0 : 1, E = s(l.date, "yyyy-MM-dd"), u = n[t].findIndex(
+      (v) => s(v.date, "yyyy-MM-dd") === E
     );
     if (u !== -1 && n[r][u]) {
       const v = n[r][u];
       N.current = u, y(v), i(v.date);
     }
-  }, [r, n, i, s]), /* @__PURE__ */ _("date-navigation", { "data-state": C, children: [
+  }, [r, n, i, l]), /* @__PURE__ */ _("date-navigation", { "data-state": C, children: [
     /* @__PURE__ */ _("date-navigation-controls", { children: [
       /* @__PURE__ */ _(
         "button",
@@ -108,7 +108,7 @@ function V() {
               "button",
               {
                 "aria-controls": `${t.fullDateStr}`,
-                "aria-selected": s.fullDateStr === t.fullDateStr,
+                "aria-selected": l.fullDateStr === t.fullDateStr,
                 className: o([a["date-navigation__day"], "date-navigation__day"]),
                 role: "tab",
                 type: "button",