enjanga-components-library 1.0.30 → 1.0.31

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Node } from '@contentful/rich-text-types';
+import * as react from 'react';
 import { ComponentType, SVGProps } from 'react';
 
 interface AH_propsType {
@@ -225,4 +226,28 @@ interface CRT_propsType {
 
 declare const CMSRichText: ({ data, className }: CRT_propsType) => react_jsx_runtime.JSX.Element;
 
-export { AppHeader, Banner, BrandLogo, CMSRichText, CP_getPictogram, type CP_nameType, CP_pictogramMap, type CQ_quote_propsType, type CTL_valid_linkTo, ContactButton, CustomPictogram, CustomQuotes, CustomTabs, CustomTile, FeatureText, HeadlinedList, List, SmartText };
+/**
+ * Custom hook for tracking a component's wrapper and assigning the most appropriate breakpoint.
+ * -----------------------------
+ */
+type SizeClass = 'sm' | 'md' | 'lg' | 'xlg' | 'max';
+interface UseContainerSizeOptions {
+    /**
+     * Record<SizeClass, number> is a TypeScript utility type that creates an object type where:
+     * - All keys are from SizeClass ('sm', 'md', 'lg', 'xlg', 'max')
+     * - All values are number
+     * All keys are from SizeClass ('sm', 'md', 'lg', 'xlg', 'max')
+     * - So: { sm: number; md: number; lg: number; xlg: number; max: number; }
+     *
+     * Partial<...> utility type makes all properties of the object optional.
+     * - So: { sm?: number; md?: number; lg?: number; xlg?: number; max?: number; }
+     */
+    customBreakpoints?: Partial<Record<SizeClass, number>>;
+    defaultSize?: SizeClass;
+}
+declare const useContainerSize: (options?: UseContainerSizeOptions) => {
+    containerRef: react.RefObject<HTMLDivElement | null>;
+    activeBreakpoint: SizeClass;
+};
+
+export { AppHeader, Banner, BrandLogo, CMSRichText, CP_getPictogram, type CP_nameType, CP_pictogramMap, type CQ_quote_propsType, type CTL_valid_linkTo, ContactButton, CustomPictogram, CustomQuotes, CustomTabs, CustomTile, FeatureText, HeadlinedList, List, SmartText, useContainerSize };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Node } from '@contentful/rich-text-types';
+import * as react from 'react';
 import { ComponentType, SVGProps } from 'react';
 
 interface AH_propsType {
@@ -225,4 +226,28 @@ interface CRT_propsType {
 
 declare const CMSRichText: ({ data, className }: CRT_propsType) => react_jsx_runtime.JSX.Element;
 
-export { AppHeader, Banner, BrandLogo, CMSRichText, CP_getPictogram, type CP_nameType, CP_pictogramMap, type CQ_quote_propsType, type CTL_valid_linkTo, ContactButton, CustomPictogram, CustomQuotes, CustomTabs, CustomTile, FeatureText, HeadlinedList, List, SmartText };
+/**
+ * Custom hook for tracking a component's wrapper and assigning the most appropriate breakpoint.
+ * -----------------------------
+ */
+type SizeClass = 'sm' | 'md' | 'lg' | 'xlg' | 'max';
+interface UseContainerSizeOptions {
+    /**
+     * Record<SizeClass, number> is a TypeScript utility type that creates an object type where:
+     * - All keys are from SizeClass ('sm', 'md', 'lg', 'xlg', 'max')
+     * - All values are number
+     * All keys are from SizeClass ('sm', 'md', 'lg', 'xlg', 'max')
+     * - So: { sm: number; md: number; lg: number; xlg: number; max: number; }
+     *
+     * Partial<...> utility type makes all properties of the object optional.
+     * - So: { sm?: number; md?: number; lg?: number; xlg?: number; max?: number; }
+     */
+    customBreakpoints?: Partial<Record<SizeClass, number>>;
+    defaultSize?: SizeClass;
+}
+declare const useContainerSize: (options?: UseContainerSizeOptions) => {
+    containerRef: react.RefObject<HTMLDivElement | null>;
+    activeBreakpoint: SizeClass;
+};
+
+export { AppHeader, Banner, BrandLogo, CMSRichText, CP_getPictogram, type CP_nameType, CP_pictogramMap, type CQ_quote_propsType, type CTL_valid_linkTo, ContactButton, CustomPictogram, CustomQuotes, CustomTabs, CustomTile, FeatureText, HeadlinedList, List, SmartText, useContainerSize };

package/dist/index.js

@@ -2338,12 +2338,12 @@ var calcRemToPx = (remVal) => remVal * 16;
 // src/libs/useContainerSize.ts
 var useContainerSize = (options) => {
   const ref = React4.useRef(null);
-  const [size, setSize] = React4.useState("max");
+  const [size, setSize] = React4.useState(options?.defaultSize || "max");
   const effectiveBreakpoints = {
-    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))
+    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;
@@ -25870,3 +25870,4 @@ exports.FeatureText = FeatureText_default;
 exports.HeadlinedList = HeadlinedList_default;
 exports.List = List_default;
 exports.SmartText = SmartText_default;
+exports.useContainerSize = useContainerSize;

package/dist/index.mjs

@@ -2310,12 +2310,12 @@ var calcRemToPx = (remVal) => remVal * 16;
 // src/libs/useContainerSize.ts
 var useContainerSize = (options) => {
   const ref = useRef(null);
-  const [size, setSize] = useState("max");
+  const [size, setSize] = useState(options?.defaultSize || "max");
   const effectiveBreakpoints = {
-    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))
+    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;
@@ -25827,4 +25827,4 @@ object-assign/index.js:
   *)
 */
 
-export { AppHeader_default as AppHeader, Banner_default as Banner, BrandLogo_default as BrandLogo, CMSRichText_default as CMSRichText, CP_getPictogram, CP_pictogramMap, ContactButton_default as ContactButton, CustomPictogram_default as CustomPictogram, CustomQuotes_default as CustomQuotes, CustomTabs_default as CustomTabs, CustomTile_default as CustomTile, FeatureText_default as FeatureText, HeadlinedList_default as HeadlinedList, List_default as List, SmartText_default as SmartText };
+export { AppHeader_default as AppHeader, Banner_default as Banner, BrandLogo_default as BrandLogo, CMSRichText_default as CMSRichText, CP_getPictogram, CP_pictogramMap, ContactButton_default as ContactButton, CustomPictogram_default as CustomPictogram, CustomQuotes_default as CustomQuotes, CustomTabs_default as CustomTabs, CustomTile_default as CustomTile, FeatureText_default as FeatureText, HeadlinedList_default as HeadlinedList, List_default as List, SmartText_default as SmartText, useContainerSize };

package/package.json

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