@windstream/react-shared-components 0.1.94 → 0.1.95

package/src/hooks/contentful/use-processed-check-list.ts

@@ -1,63 +1,63 @@
-import { createElement, useMemo, type ReactNode } from "react";
-import { renderContentfulRichText } from "./use-contentful-rich-text";
-
-import { type Options } from "@contentful/rich-text-react-renderer";
-import { MARKS } from "@contentful/rich-text-types";
-import { toDocument } from "@shared/utils/contentful/to-document";
-
-export const label1BoldOptions = {
-  renderMark: {
-    [MARKS.BOLD]: (text: ReactNode) =>
-      createElement("span", { className: "label1" }, text),
-  },
-};
-
-export interface ProcessedChecklistItem {
-  title: string;
-  iconUrl?: string;
-  anchorId?: string;
-}
-
-// titlesOnly as a boolean parameter with a conditional return type
-export function useProcessedChecklist<T extends boolean = false>(
-  checklistData?: any,
-  titlesOnly?: T,
-  richTextOptions?: Options,
-  richTextClassName?: string
-): T extends true ? string[] : ProcessedChecklistItem[] {
-  return useMemo(() => {
-    const rawItems: any[] = checklistData?.list?.items ?? [];
-
-    if (titlesOnly) {
-      return rawItems.map(
-        item =>
-          renderContentfulRichText(
-            toDocument(item?.checkListTitle ?? ""),
-            undefined,
-            richTextClassName,
-            undefined,
-            richTextOptions
-          ) ?? ""
-      ) as any;
-    }
-
-    return rawItems.map(item => ({
-      title:
-        renderContentfulRichText(
-          toDocument(item?.checkListTitle ?? ""),
-          undefined,
-          richTextClassName,
-          undefined,
-          richTextOptions
-        ) ?? "",
-      iconUrl: item?.icon?.url ?? undefined,
-      anchorId: item?.anchorId ?? undefined,
-    })) as any;
-  }, [checklistData, titlesOnly, richTextOptions, richTextClassName]) as any;
-}
-
-// Usage:
-// Full items
-//const items = useProcessedChecklist(checklistData); // ProcessedChecklistItem[]
-// Titles only
-//const titles = useProcessedChecklist(checklistData, true); // string[]
+import { createElement, useMemo, type ReactNode } from "react";
+import { renderContentfulRichText } from "./use-contentful-rich-text";
+
+import { type Options } from "@contentful/rich-text-react-renderer";
+import { MARKS } from "@contentful/rich-text-types";
+import { toDocument } from "@shared/utils/contentful/to-document";
+
+export const label1BoldOptions = {
+  renderMark: {
+    [MARKS.BOLD]: (text: ReactNode) =>
+      createElement("span", { className: "label1" }, text),
+  },
+};
+
+export interface ProcessedChecklistItem {
+  title: string;
+  iconUrl?: string;
+  anchorId?: string;
+}
+
+// titlesOnly as a boolean parameter with a conditional return type
+export function useProcessedChecklist<T extends boolean = false>(
+  checklistData?: any,
+  titlesOnly?: T,
+  richTextOptions?: Options,
+  richTextClassName?: string
+): T extends true ? string[] : ProcessedChecklistItem[] {
+  return useMemo(() => {
+    const rawItems: any[] = checklistData?.list?.items ?? [];
+
+    if (titlesOnly) {
+      return rawItems.map(
+        item =>
+          renderContentfulRichText(
+            toDocument(item?.checkListTitle ?? ""),
+            undefined,
+            richTextClassName,
+            undefined,
+            richTextOptions
+          ) ?? ""
+      ) as any;
+    }
+
+    return rawItems.map(item => ({
+      title:
+        renderContentfulRichText(
+          toDocument(item?.checkListTitle ?? ""),
+          undefined,
+          richTextClassName,
+          undefined,
+          richTextOptions
+        ) ?? "",
+      iconUrl: item?.icon?.url ?? undefined,
+      anchorId: item?.anchorId ?? undefined,
+    })) as any;
+  }, [checklistData, titlesOnly, richTextOptions, richTextClassName]) as any;
+}
+
+// Usage:
+// Full items
+//const items = useProcessedChecklist(checklistData); // ProcessedChecklistItem[]
+// Titles only
+//const titles = useProcessedChecklist(checklistData, true); // string[]

package/src/hooks/use-body-scroll-lock.test.ts

@@ -1,134 +1,134 @@
-import useBodyScrollLock from "./use-body-scroll-lock";
-
-import { cleanup, renderHook } from "@testing-library/react";
-
-describe("useBodyScrollLock", () => {
-  beforeEach(() => {
-    cleanup();
-    document.body.style.overflow = "";
-    document.body.style.marginRight = "";
-  });
-
-  afterEach(() => {
-    cleanup();
-    document.body.style.overflow = "";
-    document.body.style.marginRight = "";
-  });
-
-  describe("Scroll locking (isOpen=true)", () => {
-    it("sets body overflow to hidden when isOpen is true", () => {
-      renderHook(() => useBodyScrollLock(true, false));
-      expect(document.body.style.overflow).toBe("hidden");
-    });
-
-    it("sets marginRight based on scrollbar width when isOpen is true", () => {
-      renderHook(() => useBodyScrollLock(true, false));
-      const scrollbarWidth =
-        window.innerWidth - document.documentElement.clientWidth;
-      expect(document.body.style.marginRight).toBe(`${scrollbarWidth}px`);
-    });
-  });
-
-  describe("Scroll unlocking (isOpen=false)", () => {
-    it("resets overflow to unset when isOpen=false and hideScrollOnIsOpenFalse=true", () => {
-      renderHook(() => useBodyScrollLock(false, true));
-      expect(document.body.style.overflow).toBe("unset");
-    });
-
-    it("preserves existing overflow when isOpen=false and hideScrollOnIsOpenFalse=false", () => {
-      document.body.style.overflow = "auto";
-      renderHook(() => useBodyScrollLock(false, false));
-      expect(document.body.style.overflow).toBe("auto");
-    });
-
-    it("attempts to set marginRight to unset when isOpen is false", () => {
-      const calls: string[] = [];
-      const original = Object.getOwnPropertyDescriptor(
-        CSSStyleDeclaration.prototype,
-        "marginRight"
-      );
-      Object.defineProperty(document.body.style, "marginRight", {
-        set(val: string) {
-          calls.push(val);
-        },
-        get() {
-          return "";
-        },
-        configurable: true,
-      });
-      renderHook(() => useBodyScrollLock(false, false));
-      expect(calls).toContain("unset");
-      // Restore
-      if (original) {
-        Object.defineProperty(
-          CSSStyleDeclaration.prototype,
-          "marginRight",
-          original
-        );
-      }
-    });
-
-    it("attempts to set marginRight to unset for isOpen false regardless of hideScroll", () => {
-      const calls: string[] = [];
-      Object.defineProperty(document.body.style, "marginRight", {
-        set(val: string) {
-          calls.push(val);
-        },
-        get() {
-          return "";
-        },
-        configurable: true,
-      });
-      renderHook(() => useBodyScrollLock(false, true));
-      expect(calls).toContain("unset");
-    });
-  });
-
-  describe("Cleanup on unmount", () => {
-    it("resets body overflow to unset on unmount", () => {
-      const { unmount } = renderHook(() => useBodyScrollLock(true, false));
-      expect(document.body.style.overflow).toBe("hidden");
-      unmount();
-      expect(document.body.style.overflow).toBe("unset");
-    });
-
-    it("resets overflow on unmount even when isOpen was false", () => {
-      const { unmount } = renderHook(() => useBodyScrollLock(false, true));
-      unmount();
-      expect(document.body.style.overflow).toBe("unset");
-    });
-  });
-
-  describe("Dependency changes", () => {
-    it("locks scroll when isOpen changes from false to true", () => {
-      const { rerender } = renderHook(
-        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
-        { initialProps: { isOpen: false, hide: false } }
-      );
-      expect(document.body.style.overflow).not.toBe("hidden");
-      rerender({ isOpen: true, hide: false });
-      expect(document.body.style.overflow).toBe("hidden");
-    });
-
-    it("unlocks scroll when isOpen changes from true to false with hideScroll=true", () => {
-      const { rerender } = renderHook(
-        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
-        { initialProps: { isOpen: true, hide: true } }
-      );
-      expect(document.body.style.overflow).toBe("hidden");
-      rerender({ isOpen: false, hide: true });
-      expect(document.body.style.overflow).toBe("unset");
-    });
-
-    it("runs cleanup then effect when dependencies change", () => {
-      const { rerender } = renderHook(
-        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
-        { initialProps: { isOpen: true, hide: false } }
-      );
-      expect(document.body.style.overflow).toBe("hidden");
-      // Change hideScrollOnIsOpenFalse - triggers cleanup + re-run
-      rerender({ isOpen: true, hide: true });
-      expect(document.body.style.overflow).toBe("hidden");
-    });
-  });
-});
+import useBodyScrollLock from "./use-body-scroll-lock";
+
+import { cleanup, renderHook } from "@testing-library/react";
+
+describe("useBodyScrollLock", () => {
+  beforeEach(() => {
+    cleanup();
+    document.body.style.overflow = "";
+    document.body.style.marginRight = "";
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.style.overflow = "";
+    document.body.style.marginRight = "";
+  });
+
+  describe("Scroll locking (isOpen=true)", () => {
+    it("sets body overflow to hidden when isOpen is true", () => {
+      renderHook(() => useBodyScrollLock(true, false));
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+
+    it("sets marginRight based on scrollbar width when isOpen is true", () => {
+      renderHook(() => useBodyScrollLock(true, false));
+      const scrollbarWidth =
+        window.innerWidth - document.documentElement.clientWidth;
+      expect(document.body.style.marginRight).toBe(`${scrollbarWidth}px`);
+    });
+  });
+
+  describe("Scroll unlocking (isOpen=false)", () => {
+    it("resets overflow to unset when isOpen=false and hideScrollOnIsOpenFalse=true", () => {
+      renderHook(() => useBodyScrollLock(false, true));
+      expect(document.body.style.overflow).toBe("unset");
+    });
+
+    it("preserves existing overflow when isOpen=false and hideScrollOnIsOpenFalse=false", () => {
+      document.body.style.overflow = "auto";
+      renderHook(() => useBodyScrollLock(false, false));
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    it("attempts to set marginRight to unset when isOpen is false", () => {
+      const calls: string[] = [];
+      const original = Object.getOwnPropertyDescriptor(
+        CSSStyleDeclaration.prototype,
+        "marginRight"
+      );
+      Object.defineProperty(document.body.style, "marginRight", {
+        set(val: string) {
+          calls.push(val);
+        },
+        get() {
+          return "";
+        },
+        configurable: true,
+      });
+      renderHook(() => useBodyScrollLock(false, false));
+      expect(calls).toContain("unset");
+      // Restore
+      if (original) {
+        Object.defineProperty(
+          CSSStyleDeclaration.prototype,
+          "marginRight",
+          original
+        );
+      }
+    });
+
+    it("attempts to set marginRight to unset for isOpen false regardless of hideScroll", () => {
+      const calls: string[] = [];
+      Object.defineProperty(document.body.style, "marginRight", {
+        set(val: string) {
+          calls.push(val);
+        },
+        get() {
+          return "";
+        },
+        configurable: true,
+      });
+      renderHook(() => useBodyScrollLock(false, true));
+      expect(calls).toContain("unset");
+    });
+  });
+
+  describe("Cleanup on unmount", () => {
+    it("resets body overflow to unset on unmount", () => {
+      const { unmount } = renderHook(() => useBodyScrollLock(true, false));
+      expect(document.body.style.overflow).toBe("hidden");
+      unmount();
+      expect(document.body.style.overflow).toBe("unset");
+    });
+
+    it("resets overflow on unmount even when isOpen was false", () => {
+      const { unmount } = renderHook(() => useBodyScrollLock(false, true));
+      unmount();
+      expect(document.body.style.overflow).toBe("unset");
+    });
+  });
+
+  describe("Dependency changes", () => {
+    it("locks scroll when isOpen changes from false to true", () => {
+      const { rerender } = renderHook(
+        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
+        { initialProps: { isOpen: false, hide: false } }
+      );
+      expect(document.body.style.overflow).not.toBe("hidden");
+      rerender({ isOpen: true, hide: false });
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+
+    it("unlocks scroll when isOpen changes from true to false with hideScroll=true", () => {
+      const { rerender } = renderHook(
+        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
+        { initialProps: { isOpen: true, hide: true } }
+      );
+      expect(document.body.style.overflow).toBe("hidden");
+      rerender({ isOpen: false, hide: true });
+      expect(document.body.style.overflow).toBe("unset");
+    });
+
+    it("runs cleanup then effect when dependencies change", () => {
+      const { rerender } = renderHook(
+        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
+        { initialProps: { isOpen: true, hide: false } }
+      );
+      expect(document.body.style.overflow).toBe("hidden");
+      // Change hideScrollOnIsOpenFalse - triggers cleanup + re-run
+      rerender({ isOpen: true, hide: true });
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+  });
+});

package/src/hooks/use-body-scroll-lock.ts

@@ -1,34 +1,34 @@
-"use client";
-
-import { useEffect } from "react";
-
-/**
- * A custom hook that locks the body scroll based on the `isOpen` and `hideScrollOnIsOpenFalse` flags.
- *
- * @param {boolean} isOpen - Determines if the scroll should be locked (hidden).
- * @param {boolean} hideScrollOnIsOpenFalse - Determines if the scroll should be reset when `isOpen` is false.
- */
-function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean) {
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-
-    // To avoid content shifting when the scrollbar appears/disappears
-    const scrollbarWidth =
-      window.innerWidth - document.documentElement.clientWidth;
-    document.body.style.marginRight = isOpen ? `${scrollbarWidth}px` : "unset";
-
-    // Set the body overflow style based on the `isOpen` and `hideScrollOnIsOpenFalse` values.
-    document.body.style.overflow = isOpen
-      ? "hidden"
-      : hideScrollOnIsOpenFalse
-        ? "unset"
-        : document.body.style.overflow;
-
-    // Cleanup function to reset body overflow when the component unmounts or dependencies change.
-    return () => {
-      document.body.style.overflow = "unset";
-    };
-  }, [isOpen, hideScrollOnIsOpenFalse]);
-}
-
-export default useBodyScrollLock;
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * A custom hook that locks the body scroll based on the `isOpen` and `hideScrollOnIsOpenFalse` flags.
+ *
+ * @param {boolean} isOpen - Determines if the scroll should be locked (hidden).
+ * @param {boolean} hideScrollOnIsOpenFalse - Determines if the scroll should be reset when `isOpen` is false.
+ */
+function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean) {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    // To avoid content shifting when the scrollbar appears/disappears
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.marginRight = isOpen ? `${scrollbarWidth}px` : "unset";
+
+    // Set the body overflow style based on the `isOpen` and `hideScrollOnIsOpenFalse` values.
+    document.body.style.overflow = isOpen
+      ? "hidden"
+      : hideScrollOnIsOpenFalse
+        ? "unset"
+        : document.body.style.overflow;
+
+    // Cleanup function to reset body overflow when the component unmounts or dependencies change.
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, hideScrollOnIsOpenFalse]);
+}
+
+export default useBodyScrollLock;