npm - @cntrl-site/sdk-nextjs - Versions diffs - 1.6.11 → 1.6.12 - Mend

@cntrl-site/sdk-nextjs 1.6.11 → 1.6.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/LICENSE +21 -21
package/README.md +4 -4
package/TODO.md +1 -1
package/eslint.config.mjs +35 -35
package/jest.config.js +6 -6
package/lib/common/useItemFXData.js +7 -7
package/lib/components/Article.js +5 -5
package/lib/components/LayoutStyle.js +4 -4
package/lib/components/Section/Section.js +14 -14
package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js +40 -29
package/lib/components/items/CompoundItem/CompoundChild.js +20 -20
package/lib/components/items/CompoundItem/CompoundItem.js +14 -14
package/lib/components/items/CustomItem/CustomItem.js +9 -9
package/lib/components/items/EmbedVideoItem/VimeoEmbed.js +23 -23
package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js +26 -26
package/lib/components/items/FileItem/ImageItem.js +38 -38
package/lib/components/items/FileItem/VideoItem.js +45 -45
package/lib/components/items/GroupItem/GroupItem.js +13 -13
package/lib/components/items/Item.js +30 -30
package/lib/components/items/RectangleItem/RectangleItem.js +20 -20
package/lib/components/items/RichTextItem/RichTextItem.js +21 -21
package/lib/provider/CntrlSdkContext.js +8 -0
package/lib/utils/RichTextConverter/RichTextConverter.js +21 -21
package/package.json +57 -57
package/src/common/useCurrentLayout.ts +52 -52
package/src/common/useExemplary.ts +9 -9
package/src/common/useItemFXData.ts +47 -47
package/src/common/useKeyframeValue.ts +85 -85
package/src/common/useRegisterResize.ts +17 -17
package/src/components/Article.tsx +66 -66
package/src/components/ArticleWrapper.tsx +21 -21
package/src/components/Head.tsx +56 -56
package/src/components/LayoutStyle.tsx +21 -21
package/src/components/Page.tsx +33 -33
package/src/components/ScrollPlaybackVideo.tsx +56 -56
package/src/components/Section/Section.tsx +77 -77
package/src/components/Section/useSectionColor.ts +19 -19
package/src/components/Section/useSectionHeightMap.ts +19 -19
package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx +132 -120
package/src/components/items/CodeEmbedItem/useCodeEmbedItem.ts +36 -36
package/src/components/items/CompoundItem/CompoundChild.tsx +150 -150
package/src/components/items/CompoundItem/CompoundItem.tsx +71 -71
package/src/components/items/CompoundItem/useCompoundItem.ts +21 -21
package/src/components/items/CustomItem/CustomItem.tsx +47 -47
package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +202 -202
package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +187 -187
package/src/components/items/EmbedVideoItem/useEmbedVideoItem.ts +46 -46
package/src/components/items/FileItem/ImageItem.tsx +156 -156
package/src/components/items/FileItem/VideoItem.tsx +185 -185
package/src/components/items/FileItem/useFileItem.ts +73 -73
package/src/components/items/GroupItem/GroupItem.tsx +79 -79
package/src/components/items/GroupItem/useGroupItem.ts +34 -34
package/src/components/items/Item.tsx +251 -251
package/src/components/items/LinkWrapper.tsx +39 -39
package/src/components/items/RectangleItem/RectangleItem.tsx +95 -95
package/src/components/items/RectangleItem/useRectangleItem.ts +82 -82
package/src/components/items/RichTextItem/RichTextItem.tsx +105 -105
package/src/components/items/RichTextItem/useRichTextItem.ts +12 -12
package/src/components/items/RichTextWrapper.tsx +15 -15
package/src/components/items/itemsMap.ts +26 -26
package/src/components/items/useDraggable.ts +252 -252
package/src/components/items/useItemAngle.ts +13 -13
package/src/components/items/useItemArea.ts +35 -35
package/src/components/items/useItemPointerEvents.ts +23 -23
package/src/components/items/useItemScale.ts +17 -17
package/src/components/items/useItemTriggers.ts +15 -15
package/src/components/items/useRichTextItemValues.ts +65 -65
package/src/components/items/useSizing.ts +25 -25
package/src/components/items/useStickyItemTop.ts +21 -21
package/src/components/useLayoutContext.ts +7 -7
package/src/index.ts +24 -24
package/src/interactions/CSSPropertyNameMap.ts +38 -38
package/src/interactions/InteractionsRegistry.ts +275 -275
package/src/interactions/ItemInteractionCtrl.ts +77 -77
package/src/interactions/getTransition.ts +27 -27
package/src/interactions/types.ts +36 -36
package/src/interactions/useItemInteractionCtrl.ts +18 -18
package/src/provider/ArticleRectContext.ts +4 -4
package/src/provider/CntrlContext.ts +5 -5
package/src/provider/CntrlProvider.tsx +11 -11
package/src/provider/CntrlSdkContext.ts +69 -59
package/src/provider/CustomItemRegistry.ts +14 -14
package/src/provider/CustomItemTypes.ts +3 -3
package/src/provider/CustomSectionRegistry.ts +25 -25
package/src/provider/InteractionsContext.old.tsx +65 -65
package/src/provider/InteractionsContext.test.tsx +97 -97
package/src/provider/InteractionsContext.tsx +28 -28
package/src/provider/Keyframes.ts +11 -11
package/src/provider/KeyframesContext.ts +5 -5
package/src/provider/LayoutContext.ts +3 -3
package/src/provider/defaultContext.ts +8 -8
package/src/provider/useCntrlContext.ts +8 -8
package/src/styled-jsx.d.ts +1 -1
package/src/utils/Animator/Animator.ts +371 -371
package/src/utils/ArticleRectManager/ArticleRectObserver.ts +93 -93
package/src/utils/ArticleRectManager/useArticleRectObserver.ts +17 -17
package/src/utils/ArticleRectManager/useSectionRegistry.ts +11 -11
package/src/utils/EventEmitter.ts +41 -41
package/src/utils/RichTextConverter/RichTextConverter.tsx +326 -326
package/src/utils/ScaleAnchorMap.ts +13 -13
package/src/utils/StickyManager/StickyManager.ts +23 -23
package/src/utils/Youtube/YouTubeIframeApiLoader.ts +58 -58
package/src/utils/Youtube/YoutubeIframeApi.ts +101 -101
package/src/utils/Youtube/useYouTubeIframeApi.ts +12 -12
package/src/utils/binSearchInsertAt.ts +33 -33
package/src/utils/castObject.ts +10 -10
package/src/utils/effects/useImageFx.ts +113 -113
package/src/utils/effects/useVideoFx.ts +116 -116
package/src/utils/getAnchoredItemTop.ts +12 -12
package/src/utils/getCompoundBondaryStyles.ts +62 -62
package/src/utils/getFontFamilyValue.ts +3 -3
package/src/utils/getInvertedRanges.ts +43 -43
package/src/utils/getItemTopStyle.ts +14 -14
package/src/utils/getStyleFromItemStateAndParams.ts +8 -8
package/src/utils/getValidYoutubeUrl.ts +29 -29
package/src/utils/isItemType.ts +6 -6
package/src/utils/rangeMap.ts +13 -13
package/src/utils/useElementRect.ts +23 -23
package/.idea/modules.xml +0 -8
package/.idea/sdk-nextjs.iml +0 -12
package/.idea/vcs.xml +0 -6
package/cntrl-site-sdk-nextjs-1.6.11-alpha.0.tgz +0 -0

package/src/components/Head.tsx CHANGED Viewed

@@ -1,56 +1,56 @@
-import React, { FC } from 'react';
-import HTMLReactParser, { domToReact } from 'html-react-parser';
-import Head from 'next/head';
-import { FontFaceGenerator, Meta, Project } from '@cntrl-site/sdk';
-interface Props {
-  project: Project;
-  meta: Meta;
-}
-export const CNTRLHead: FC<Props> = ({ meta, project }) => {
-  const googleFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.google);
-  const adobeFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.adobe);
-  const parsedFonts = {
-    ...(typeof googleFonts === 'object' ? googleFonts : {}),
-    ...(typeof adobeFonts === 'object' ? adobeFonts : {})
-  };
-  const customFonts = project.fonts.custom;
-  const htmlHead = HTMLReactParser(project.html.head);
-  const ffGenerator = new FontFaceGenerator(customFonts);
-  const links = Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value) => {
-    if (!value) return;
-    const rel = value?.rel || value.props?.rel;
-    const href = value?.href || value.props?.href;
-    if (!rel || !href) return;
-    return (
-      <link key={`link-${rel}-${href}`} rel={rel} href={href} />
-    );
-  });
-  return (
-    <Head>
-      <title>{meta.title}</title>
-      <meta name="description" content={meta.description}/>
-      <meta name="keywords" content={meta.keywords}/>
-      <meta name="og:title" content={meta.title}/>
-      <meta name="og:image" content={meta.opengraphThumbnail}/>
-      <meta name="og:description" content={meta.description}/>
-      <meta name="twitter:title" content={meta.title}/>
-      <meta name="twitter:image" content={meta.opengraphThumbnail}/>
-      <meta name="twitter:description" content={meta.description}/>
-      <meta property="twitter:card" content="summary_large_image"/>
-      <meta name="generator" content="https://cntrl.site"/>
-      <link rel="icon" href={meta.favicon}/>
-      {customFonts.length > 0 && (
-        <style
-          dangerouslySetInnerHTML={{
-            __html: ffGenerator.generate()
-          }}
-        />
-      )}
-      {links}
-      {htmlHead}
-    </Head>
-  );
-};
+import React, { FC } from 'react';
+import HTMLReactParser, { domToReact } from 'html-react-parser';
+import Head from 'next/head';
+import { FontFaceGenerator, Meta, Project } from '@cntrl-site/sdk';
+interface Props {
+  project: Project;
+  meta: Meta;
+}
+export const CNTRLHead: FC<Props> = ({ meta, project }) => {
+  const googleFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.google);
+  const adobeFonts: ReturnType<typeof domToReact> = HTMLReactParser(project.fonts.adobe);
+  const parsedFonts = {
+    ...(typeof googleFonts === 'object' ? googleFonts : {}),
+    ...(typeof adobeFonts === 'object' ? adobeFonts : {})
+  };
+  const customFonts = project.fonts.custom;
+  const htmlHead = HTMLReactParser(project.html.head);
+  const ffGenerator = new FontFaceGenerator(customFonts);
+  const links = Object.values(parsedFonts as ReturnType<typeof domToReact>).map((value) => {
+    if (!value) return;
+    const rel = value?.rel || value.props?.rel;
+    const href = value?.href || value.props?.href;
+    if (!rel || !href) return;
+    return (
+      <link key={`link-${rel}-${href}`} rel={rel} href={href} />
+    );
+  });
+  return (
+    <Head>
+      <title>{meta.title}</title>
+      <meta name="description" content={meta.description}/>
+      <meta name="keywords" content={meta.keywords}/>
+      <meta name="og:title" content={meta.title}/>
+      <meta name="og:image" content={meta.opengraphThumbnail}/>
+      <meta name="og:description" content={meta.description}/>
+      <meta name="twitter:title" content={meta.title}/>
+      <meta name="twitter:image" content={meta.opengraphThumbnail}/>
+      <meta name="twitter:description" content={meta.description}/>
+      <meta property="twitter:card" content="summary_large_image"/>
+      <meta name="generator" content="https://cntrl.site"/>
+      <link rel="icon" href={meta.favicon}/>
+      {customFonts.length > 0 && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: ffGenerator.generate()
+          }}
+        />
+      )}
+      {links}
+      {htmlHead}
+    </Head>
+  );
+};

package/src/components/LayoutStyle.tsx CHANGED Viewed

@@ -1,21 +1,21 @@
-import React, { FC } from 'react';
-import { getLayoutMediaQuery, Layout } from '@cntrl-site/sdk';
-import JSXStyle from 'styled-jsx/style';
-export interface LayoutStyleProps {
-  id: string;
-  layouts: Layout[];
-  layoutId: string;
-  children?: (layout: Layout) => string;
-}
-export const LayoutStyle: FC<LayoutStyleProps> = ({ id, layouts, layoutId, children }) => {
-  const layout = layouts.find(l => l.id === layoutId)!;
-  return (
-    <JSXStyle id={id}>{`
-      ${getLayoutMediaQuery(layoutId, layouts)} {
-        ${children?.(layout)}
-      }
-    `}</JSXStyle>
-  );
-};
+import React, { FC } from 'react';
+import { getLayoutMediaQuery, Layout } from '@cntrl-site/sdk';
+import JSXStyle from 'styled-jsx/style';
+export interface LayoutStyleProps {
+  id: string;
+  layouts: Layout[];
+  layoutId: string;
+  children?: (layout: Layout) => string;
+}
+export const LayoutStyle: FC<LayoutStyleProps> = ({ id, layouts, layoutId, children }) => {
+  const layout = layouts.find(l => l.id === layoutId)!;
+  return (
+    <JSXStyle id={id}>{`
+      ${getLayoutMediaQuery(layoutId, layouts)} {
+        ${children?.(layout)}
+      }
+    `}</JSXStyle>
+  );
+};

package/src/components/Page.tsx CHANGED Viewed

@@ -1,33 +1,33 @@
-import React, { FC, useMemo } from 'react';
-import HTMLReactParser from 'html-react-parser';
-import { Article as TArticle, Project, Meta, KeyframeAny } from '@cntrl-site/sdk';
-import { Article } from './Article';
-import { KeyframesContext } from '../provider/KeyframesContext';
-import { CNTRLHead } from './Head';
-import { Keyframes } from '../provider/Keyframes';
-export interface PageProps {
-  article: TArticle;
-  project: Project;
-  meta: Meta;
-  keyframes: KeyframeAny[];
-  sectionData: Record<SectionName, any>;
-}
-export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData }) => {
-  const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
-  const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
-  const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
-  return (
-    <>
-      <CNTRLHead project={project} meta={meta} />
-      {afterBodyOpen}
-      <KeyframesContext.Provider value={keyframesRepo}>
-        <Article article={article} sectionData={sectionData} />
-      </KeyframesContext.Provider>
-      {beforeBodyClose}
-    </>
-  );
-};
-type SectionName = string;
+import React, { FC, useMemo } from 'react';
+import HTMLReactParser from 'html-react-parser';
+import { Article as TArticle, Project, Meta, KeyframeAny } from '@cntrl-site/sdk';
+import { Article } from './Article';
+import { KeyframesContext } from '../provider/KeyframesContext';
+import { CNTRLHead } from './Head';
+import { Keyframes } from '../provider/Keyframes';
+export interface PageProps {
+  article: TArticle;
+  project: Project;
+  meta: Meta;
+  keyframes: KeyframeAny[];
+  sectionData: Record<SectionName, any>;
+}
+export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData }) => {
+  const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
+  const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
+  const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
+  return (
+    <>
+      <CNTRLHead project={project} meta={meta} />
+      {afterBodyOpen}
+      <KeyframesContext.Provider value={keyframesRepo}>
+        <Article article={article} sectionData={sectionData} />
+      </KeyframesContext.Provider>
+      {beforeBodyClose}
+    </>
+  );
+};
+type SectionName = string;

package/src/components/ScrollPlaybackVideo.tsx CHANGED Viewed

@@ -1,56 +1,56 @@
-import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
-import { rangeMap } from '../utils/rangeMap';
-import { ArticleRectContext } from '../provider/ArticleRectContext';
-import { ScrollPlaybackVideoManager } from '@cntrl-site/sdk';
-type PlaybackParams = { from: number, to: number };
-interface Props {
-  sectionId: string;
-  src: string;
-  playbackParams: PlaybackParams | null;
-  style?: React.CSSProperties;
-  className: string;
-}
-export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams, style, className}) => {
-  const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
-  const [time, setTime] = useState(0);
-  const articleRectObserver = useContext(ArticleRectContext);
-  useEffect(() => {
-    if (!playbackParams || !articleRectObserver) return;
-    return articleRectObserver.on('scroll', () => {
-      const scrollPos = articleRectObserver.getSectionScroll(sectionId);
-      const time = rangeMap(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
-      setTime(toFixed(time));
-    })
-  }, [playbackParams?.from, playbackParams?.to, time]);
-  const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {
-    if (!containerElement) return null;
-    const manager = new ScrollPlaybackVideoManager({
-      src,
-      videoContainer: containerElement
-    });
-    return manager;
-  }, [containerElement, src]);
-  useEffect(() => {
-    return () => {
-      scrollVideoManager?.destroy();
-    };
-  }, [scrollVideoManager]);
-  useEffect(() => {
-    if (scrollVideoManager && time >= 0 && time <= 1) {
-      scrollVideoManager.setTargetTimePercent(time);
-    }
-  }, [time, scrollVideoManager]);
-  return <div className={className} style={style} ref={setContainerElement} />;
-};
-function toFixed(num: number) {
-  return Number(num.toFixed(3));
-}
+import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
+import { rangeMap } from '../utils/rangeMap';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { ScrollPlaybackVideoManager } from '@cntrl-site/sdk';
+type PlaybackParams = { from: number, to: number };
+interface Props {
+  sectionId: string;
+  src: string;
+  playbackParams: PlaybackParams | null;
+  style?: React.CSSProperties;
+  className: string;
+}
+export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams, style, className}) => {
+  const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
+  const [time, setTime] = useState(0);
+  const articleRectObserver = useContext(ArticleRectContext);
+  useEffect(() => {
+    if (!playbackParams || !articleRectObserver) return;
+    return articleRectObserver.on('scroll', () => {
+      const scrollPos = articleRectObserver.getSectionScroll(sectionId);
+      const time = rangeMap(scrollPos, playbackParams.from, playbackParams.to, 0, 1, true);
+      setTime(toFixed(time));
+    })
+  }, [playbackParams?.from, playbackParams?.to, time]);
+  const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {
+    if (!containerElement) return null;
+    const manager = new ScrollPlaybackVideoManager({
+      src,
+      videoContainer: containerElement
+    });
+    return manager;
+  }, [containerElement, src]);
+  useEffect(() => {
+    return () => {
+      scrollVideoManager?.destroy();
+    };
+  }, [scrollVideoManager]);
+  useEffect(() => {
+    if (scrollVideoManager && time >= 0 && time <= 1) {
+      scrollVideoManager.setTargetTimePercent(time);
+    }
+  }, [time, scrollVideoManager]);
+  return <div className={className} style={style} ref={setContainerElement} />;
+};
+function toFixed(num: number) {
+  return Number(num.toFixed(3));
+}

package/src/components/Section/Section.tsx CHANGED Viewed

@@ -1,77 +1,77 @@
-import { FC, ReactElement, useId, useRef } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import {
-  getLayoutMediaQuery,
-  getLayoutStyles,
-  Section as TSection,
-  SectionHeight,
-  SectionHeightMode
-} from '@cntrl-site/sdk';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
-import { CntrlColor } from '@cntrl-site/color';
-type SectionChild = ReactElement<any, any>;
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-interface Props {
-  section: TSection;
-  children: SectionChild[];
-  data?: any;
-}
-export const Section: FC<Props> = ({ section, data, children }) => {
-  const id = useId();
-  const sectionRef = useRef<HTMLDivElement | null>(null);
-  const { layouts, customSections } = useCntrlContext();
-  const layoutValues: Record<string, any>[] = [section.height, section.color];
-  const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
-  useSectionRegistry(section.id, sectionRef.current);
-  const getSectionVisibilityStyles = () => {
-    return layouts
-      .sort((a, b) => a.startsWith - b.startsWith)
-      .reduce((acc, layout) => {
-        const isHidden = section.hidden[layout.id];
-        return `
-          ${acc}
-          ${getLayoutMediaQuery(layout.id, layouts)} {
-            .section-${section.id} {
-              display: ${isHidden ? 'none': 'block'};
-            }
-          }`;
-      }, '');
-  };
-  if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
- return (
-    <>
-      <div
-        className={`section-${section.id}`}
-        id={section.name}
-        ref={sectionRef}
-      >
-        {children}
-      </div>
-      <JSXStyle id={id}>{`
-      ${
-        getLayoutStyles(layouts, layoutValues, ([height, color]) => (`
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
-         }`
-        ))
-      }
-      ${getSectionVisibilityStyles()}
-    `}</JSXStyle>
-    </>
-  );
-};
-export function getSectionHeight(heightData: SectionHeight): string {
-  const { units, vhUnits, mode } = heightData;
-  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
-  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
-  return '0';
-}
+import { FC, ReactElement, useId, useRef } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import {
+  getLayoutMediaQuery,
+  getLayoutStyles,
+  Section as TSection,
+  SectionHeight,
+  SectionHeightMode
+} from '@cntrl-site/sdk';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
+import { CntrlColor } from '@cntrl-site/color';
+type SectionChild = ReactElement<any, any>;
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+interface Props {
+  section: TSection;
+  children: SectionChild[];
+  data?: any;
+}
+export const Section: FC<Props> = ({ section, data, children }) => {
+  const id = useId();
+  const sectionRef = useRef<HTMLDivElement | null>(null);
+  const { layouts, customSections } = useCntrlContext();
+  const layoutValues: Record<string, any>[] = [section.height, section.color];
+  const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+  useSectionRegistry(section.id, sectionRef.current);
+  const getSectionVisibilityStyles = () => {
+    return layouts
+      .sort((a, b) => a.startsWith - b.startsWith)
+      .reduce((acc, layout) => {
+        const isHidden = section.hidden[layout.id];
+        return `
+          ${acc}
+          ${getLayoutMediaQuery(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none': 'block'};
+            }
+          }`;
+      }, '');
+  };
+  if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
+ return (
+    <>
+      <div
+        className={`section-${section.id}`}
+        id={section.name}
+        ref={sectionRef}
+      >
+        {children}
+      </div>
+      <JSXStyle id={id}>{`
+      ${
+        getLayoutStyles(layouts, layoutValues, ([height, color]) => (`
+         .section-${section.id} {
+            height: ${getSectionHeight(height)};
+            position: relative;
+            background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
+         }`
+        ))
+      }
+      ${getSectionVisibilityStyles()}
+    `}</JSXStyle>
+    </>
+  );
+};
+export function getSectionHeight(heightData: SectionHeight): string {
+  const { units, vhUnits, mode } = heightData;
+  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
+  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
+  return '0';
+}

package/src/components/Section/useSectionColor.ts CHANGED Viewed

@@ -1,19 +1,19 @@
-import { useMemo } from 'react';
-import { CntrlColor } from '@cntrl-site/color';
-import { useLayoutContext } from '../useLayoutContext';
-type LayoutIdentifier = string;
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
-  const layoutId = useLayoutContext();
-   return useMemo(() => {
-     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
-     const layoutColor = colorData[layoutId];
-     return CntrlColor.parse(
-       !layoutColor
-         ? DEFAULT_COLOR
-         : layoutColor
-     );
-   }, [layoutId]);
-};
+import { useMemo } from 'react';
+import { CntrlColor } from '@cntrl-site/color';
+import { useLayoutContext } from '../useLayoutContext';
+type LayoutIdentifier = string;
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
+  const layoutId = useLayoutContext();
+   return useMemo(() => {
+     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
+     const layoutColor = colorData[layoutId];
+     return CntrlColor.parse(
+       !layoutColor
+         ? DEFAULT_COLOR
+         : layoutColor
+     );
+   }, [layoutId]);
+};

package/src/components/Section/useSectionHeightMap.ts CHANGED Viewed

@@ -1,19 +1,19 @@
-import { useContext } from 'react';
-import { CntrlContext } from '../../provider/CntrlContext';
-import { Layout, SectionHeight } from '@cntrl-site/sdk';
-import { getSectionHeight } from './Section';
-export const useSectionHeightData = (sectionId: string): Record<string, string> => {
-  const sectionHeightContext = useContext(CntrlContext);
-  const layouts = sectionHeightContext.layouts;
-  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
-  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
-};
-export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
-  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
-}
-function getDefaultHeightData(layouts: Layout[]) {
-  return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
-}
+import { useContext } from 'react';
+import { CntrlContext } from '../../provider/CntrlContext';
+import { Layout, SectionHeight } from '@cntrl-site/sdk';
+import { getSectionHeight } from './Section';
+export const useSectionHeightData = (sectionId: string): Record<string, string> => {
+  const sectionHeightContext = useContext(CntrlContext);
+  const layouts = sectionHeightContext.layouts;
+  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
+  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
+};
+export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
+  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
+}
+function getDefaultHeightData(layouts: Layout[]) {
+  return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
+}