enjanga-components-library 1.0.35 → 1.0.36

package/dist/index.d.mts

@@ -11,7 +11,7 @@ interface AH_propsType {
     globalBarItems: React.ReactNode;
 }
 
-declare const AppHeader: ({ brand, brandLabel, brandRoute, navigation }: AH_propsType) => react_jsx_runtime.JSX.Element | null;
+declare const AppHeader: ({ brand, brandLabel, brandRoute, navigation, }: AH_propsType) => react_jsx_runtime.JSX.Element | null;
 
 declare const BL_roleOpt: readonly ["img", "presentation", "none"];
 type BL_roleOptPropsType = (typeof BL_roleOpt)[number];

package/dist/index.d.ts

@@ -11,7 +11,7 @@ interface AH_propsType {
     globalBarItems: React.ReactNode;
 }
 
-declare const AppHeader: ({ brand, brandLabel, brandRoute, navigation }: AH_propsType) => react_jsx_runtime.JSX.Element | null;
+declare const AppHeader: ({ brand, brandLabel, brandRoute, navigation, }: AH_propsType) => react_jsx_runtime.JSX.Element | null;
 
 declare const BL_roleOpt: readonly ["img", "presentation", "none"];
 type BL_roleOptPropsType = (typeof BL_roleOpt)[number];

package/dist/index.js

@@ -1039,20 +1039,19 @@ var breakpoints = {
 // src/libs/helpers.ts
 var calcRemToPx = (remVal) => remVal * 16;
 
-// src/libs/useContainerSize.ts
-var useContainerSize = (options) => {
-  const ref = React4.useRef(null);
-  const [size, setSize] = React4.useState(options?.defaultSize || "max");
+// src/libs/useWindowBreakpoint.ts
+var useWindowBreakpoint = (options) => {
+  const [size, setSize] = React4.useState("max");
   const effectiveBreakpoints = {
-    sm: options?.customBreakpoints?.sm ?? calcRemToPx(parseInt(breakpoints?.sm?.width, 10)),
-    md: options?.customBreakpoints?.md ?? calcRemToPx(parseInt(breakpoints?.md?.width, 10)),
-    lg: options?.customBreakpoints?.lg ?? calcRemToPx(parseInt(breakpoints?.lg?.width, 10)),
-    xlg: options?.customBreakpoints?.xlg ?? calcRemToPx(parseInt(breakpoints?.xlg?.width, 10))
+    sm: calcRemToPx(parseInt(breakpoints?.sm?.width, 10)),
+    md: calcRemToPx(parseInt(breakpoints?.md?.width, 10)),
+    lg: calcRemToPx(parseInt(breakpoints?.lg?.width, 10)),
+    xlg: calcRemToPx(parseInt(breakpoints?.xlg?.width, 10))
   };
   React4.useEffect(() => {
-    if (!ref.current) return;
-    const observer = new ResizeObserver((entries) => {
-      const width = entries[0].contentRect.width;
+    if (typeof window === "undefined") return;
+    const updateSize = () => {
+      const width = window.innerWidth;
       if (width < effectiveBreakpoints.sm) {
         setSize("sm");
       } else if (width < effectiveBreakpoints.md) {
@@ -1064,10 +1063,11 @@ var useContainerSize = (options) => {
       } else {
         setSize("max");
       }
-    });
-    observer.observe(ref.current);
+    };
+    updateSize();
+    window.addEventListener("resize", updateSize);
     return () => {
-      observer.disconnect();
+      window.removeEventListener("resize", updateSize);
     };
   }, [
     effectiveBreakpoints.sm,
@@ -1076,10 +1076,7 @@ var useContainerSize = (options) => {
     effectiveBreakpoints.xlg
   ]);
   return {
-    containerRef: ref,
-    // Reference to component container
     activeBreakpoint: size
-    // Closest possible breakpoint to container's width
   };
 };
 
@@ -1131,7 +1128,7 @@ var AppHeader = ({
   const labelOpenMenu = "Open menu";
   const labelSideNav = "Side navigation";
   const [visible, setVisible] = React4.useState(true);
-  const { containerRef, activeBreakpoint } = useContainerSize();
+  const { activeBreakpoint } = useWindowBreakpoint();
   React4.useEffect(() => {
     const handleOpen = () => {
       if (activeBreakpoint !== "sm" && activeBreakpoint !== "md") return;
@@ -1149,7 +1146,7 @@ var AppHeader = ({
     };
   }, [activeBreakpoint]);
   if (!visible) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     react.HeaderContainer,
     {
       render: ({ isSideNavExpanded, onClickSideNavExpand }) => /* @__PURE__ */ jsxRuntime.jsx(react.Header, { "aria-label": brandLabel, className: "enj-AppHeader", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `header-inner header-inner-${activeBreakpoint}`, children: [
@@ -1176,7 +1173,7 @@ var AppHeader = ({
         )
       ] }) })
     }
-  ) });
+  );
 };
 var AppHeader_default = AppHeader;
 var BrandLogoString = ({ style, className, value, role }) => {
@@ -2437,6 +2434,48 @@ var FeatureText = ({
   ] });
 };
 var FeatureText_default = FeatureText;
+var useContainerSize = (options) => {
+  const ref = React4.useRef(null);
+  const [size, setSize] = React4.useState(options?.defaultSize || "max");
+  const effectiveBreakpoints = {
+    sm: options?.customBreakpoints?.sm ?? calcRemToPx(parseInt(breakpoints?.sm?.width, 10)),
+    md: options?.customBreakpoints?.md ?? calcRemToPx(parseInt(breakpoints?.md?.width, 10)),
+    lg: options?.customBreakpoints?.lg ?? calcRemToPx(parseInt(breakpoints?.lg?.width, 10)),
+    xlg: options?.customBreakpoints?.xlg ?? calcRemToPx(parseInt(breakpoints?.xlg?.width, 10))
+  };
+  React4.useEffect(() => {
+    if (!ref.current) return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0].contentRect.width;
+      if (width < effectiveBreakpoints.sm) {
+        setSize("sm");
+      } else if (width < effectiveBreakpoints.md) {
+        setSize("md");
+      } else if (width < effectiveBreakpoints.lg) {
+        setSize("lg");
+      } else if (width < effectiveBreakpoints.xlg) {
+        setSize("xlg");
+      } else {
+        setSize("max");
+      }
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [
+    effectiveBreakpoints.sm,
+    effectiveBreakpoints.md,
+    effectiveBreakpoints.lg,
+    effectiveBreakpoints.xlg
+  ]);
+  return {
+    containerRef: ref,
+    // Reference to component container
+    activeBreakpoint: size
+    // Closest possible breakpoint to container's width
+  };
+};
 var Banner = ({
   id,
   className,

package/dist/index.mjs

@@ -1011,20 +1011,19 @@ var breakpoints = {
 // src/libs/helpers.ts
 var calcRemToPx = (remVal) => remVal * 16;
 
-// src/libs/useContainerSize.ts
-var useContainerSize = (options) => {
-  const ref = useRef(null);
-  const [size, setSize] = useState(options?.defaultSize || "max");
+// src/libs/useWindowBreakpoint.ts
+var useWindowBreakpoint = (options) => {
+  const [size, setSize] = useState("max");
   const effectiveBreakpoints = {
-    sm: options?.customBreakpoints?.sm ?? calcRemToPx(parseInt(breakpoints?.sm?.width, 10)),
-    md: options?.customBreakpoints?.md ?? calcRemToPx(parseInt(breakpoints?.md?.width, 10)),
-    lg: options?.customBreakpoints?.lg ?? calcRemToPx(parseInt(breakpoints?.lg?.width, 10)),
-    xlg: options?.customBreakpoints?.xlg ?? calcRemToPx(parseInt(breakpoints?.xlg?.width, 10))
+    sm: calcRemToPx(parseInt(breakpoints?.sm?.width, 10)),
+    md: calcRemToPx(parseInt(breakpoints?.md?.width, 10)),
+    lg: calcRemToPx(parseInt(breakpoints?.lg?.width, 10)),
+    xlg: calcRemToPx(parseInt(breakpoints?.xlg?.width, 10))
   };
   useEffect(() => {
-    if (!ref.current) return;
-    const observer = new ResizeObserver((entries) => {
-      const width = entries[0].contentRect.width;
+    if (typeof window === "undefined") return;
+    const updateSize = () => {
+      const width = window.innerWidth;
       if (width < effectiveBreakpoints.sm) {
         setSize("sm");
       } else if (width < effectiveBreakpoints.md) {
@@ -1036,10 +1035,11 @@ var useContainerSize = (options) => {
       } else {
         setSize("max");
       }
-    });
-    observer.observe(ref.current);
+    };
+    updateSize();
+    window.addEventListener("resize", updateSize);
     return () => {
-      observer.disconnect();
+      window.removeEventListener("resize", updateSize);
     };
   }, [
     effectiveBreakpoints.sm,
@@ -1048,10 +1048,7 @@ var useContainerSize = (options) => {
     effectiveBreakpoints.xlg
   ]);
   return {
-    containerRef: ref,
-    // Reference to component container
     activeBreakpoint: size
-    // Closest possible breakpoint to container's width
   };
 };
 
@@ -1103,7 +1100,7 @@ var AppHeader = ({
   const labelOpenMenu = "Open menu";
   const labelSideNav = "Side navigation";
   const [visible, setVisible] = useState(true);
-  const { containerRef, activeBreakpoint } = useContainerSize();
+  const { activeBreakpoint } = useWindowBreakpoint();
   useEffect(() => {
     const handleOpen = () => {
       if (activeBreakpoint !== "sm" && activeBreakpoint !== "md") return;
@@ -1121,7 +1118,7 @@ var AppHeader = ({
     };
   }, [activeBreakpoint]);
   if (!visible) return null;
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     HeaderContainer,
     {
       render: ({ isSideNavExpanded, onClickSideNavExpand }) => /* @__PURE__ */ jsx(Header, { "aria-label": brandLabel, className: "enj-AppHeader", children: /* @__PURE__ */ jsxs("div", { className: `header-inner header-inner-${activeBreakpoint}`, children: [
@@ -1148,7 +1145,7 @@ var AppHeader = ({
         )
       ] }) })
     }
-  ) });
+  );
 };
 var AppHeader_default = AppHeader;
 var BrandLogoString = ({ style, className, value, role }) => {
@@ -2409,6 +2406,48 @@ var FeatureText = ({
   ] });
 };
 var FeatureText_default = FeatureText;
+var useContainerSize = (options) => {
+  const ref = useRef(null);
+  const [size, setSize] = useState(options?.defaultSize || "max");
+  const effectiveBreakpoints = {
+    sm: options?.customBreakpoints?.sm ?? calcRemToPx(parseInt(breakpoints?.sm?.width, 10)),
+    md: options?.customBreakpoints?.md ?? calcRemToPx(parseInt(breakpoints?.md?.width, 10)),
+    lg: options?.customBreakpoints?.lg ?? calcRemToPx(parseInt(breakpoints?.lg?.width, 10)),
+    xlg: options?.customBreakpoints?.xlg ?? calcRemToPx(parseInt(breakpoints?.xlg?.width, 10))
+  };
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0].contentRect.width;
+      if (width < effectiveBreakpoints.sm) {
+        setSize("sm");
+      } else if (width < effectiveBreakpoints.md) {
+        setSize("md");
+      } else if (width < effectiveBreakpoints.lg) {
+        setSize("lg");
+      } else if (width < effectiveBreakpoints.xlg) {
+        setSize("xlg");
+      } else {
+        setSize("max");
+      }
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [
+    effectiveBreakpoints.sm,
+    effectiveBreakpoints.md,
+    effectiveBreakpoints.lg,
+    effectiveBreakpoints.xlg
+  ]);
+  return {
+    containerRef: ref,
+    // Reference to component container
+    activeBreakpoint: size
+    // Closest possible breakpoint to container's width
+  };
+};
 var Banner = ({
   id,
   className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "enjanga-components-library",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "Reusable component library for Next.js 13+ projects with Carbon design system.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",