@makeswift/runtime 0.0.0-20230109233611 → 0.0.0-20230110205857

package/dist/Box.cjs.js

@@ -35,8 +35,8 @@ var React = require("react");
 var css = require("@emotion/css");
 var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
-var gridItem = require("./grid-item.cjs.js");
 var boxModels = require("./box-models.cjs.js");
+var gridItem = require("./grid-item.cjs.js");
 var uuid = require("uuid");
 require("use-sync-external-store/shim/with-selector");
 require("./react-page.cjs.js");
@@ -64,10 +64,10 @@ require("http-proxy");
 require("set-cookie-parser");
 require("uuid/v4");
 require("corporate-ipsum");
+require("css-box-model");
 require("next/image");
 require("react-player");
 require("./useMediaQuery.cjs.js");
-require("css-box-model");
 var Placeholder = React.forwardRef(function Placeholder2(_a, ref) {
   var _b = _a, {
     hide = false
@@ -172,13 +172,37 @@ const Box = React.forwardRef(function Box2({
     alignItems
   })));
   const key = React.useMemo(() => uuid.v4(), [boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType, itemAnimateDuration, itemAnimateDelay, itemStaggerDuration]);
-  const {
-    isEntered,
-    resetEntered
-  } = gridItem.useIsEntered(boxElement);
+  const observerRef = React.useRef(null);
   React.useEffect(() => {
-    resetEntered();
-  }, [boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType, itemAnimateDuration, itemAnimateDelay, itemStaggerDuration]);
+    var _a;
+    if (boxElement) {
+      if (observerRef.current == null) {
+        observerRef.current = new IntersectionObserver(function intersectionCallback([entry]) {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("show");
+          }
+        }, {
+          root: null,
+          rootMargin: `0px 0px -10% 0px`,
+          threshold: 0.2
+        });
+      }
+      observerRef.current.observe(boxElement);
+    } else {
+      (_a = observerRef.current) == null ? void 0 : _a.disconnect();
+      observerRef.current = null;
+    }
+    return () => {
+      var _a2;
+      if (boxElement)
+        (_a2 = observerRef.current) == null ? void 0 : _a2.unobserve(boxElement);
+    };
+  }, [boxElement]);
+  React.useEffect(() => {
+    boxElement == null ? void 0 : boxElement.classList.remove("show");
+    const timeout = setTimeout(() => boxElement == null ? void 0 : boxElement.classList.add("show"), 100);
+    return () => clearTimeout(timeout);
+  }, [key]);
   return /* @__PURE__ */ jsxRuntime.jsx(gridItem.BackgroundsContainer, {
     ref: setBoxElement,
     id,
@@ -190,7 +214,7 @@ const Box = React.forwardRef(function Box2({
     boxAnimateType,
     boxAnimateDuration,
     boxAnimateDelay,
-    isEntered,
+    itemAnimationType: itemAnimateType,
     backgrounds,
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
       ref: innerRef,
@@ -209,7 +233,6 @@ const Box = React.forwardRef(function Box2({
         itemAnimateDuration,
         itemAnimateDelay,
         itemStaggerDuration,
-        isEntered,
         columnGap,
         rowGap,
         children: /* @__PURE__ */ jsxRuntime.jsx(next.Element, {
@@ -218,8 +241,8 @@ const Box = React.forwardRef(function Box2({
       }, child.key)) : /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {
         hide: hidePlaceholder
       })
-    })
-  }, key);
+    }, key)
+  });
 });
 exports["default"] = Box;
 //# sourceMappingURL=Box.cjs.js.map

package/dist/Box.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import { forwardRef, Ref, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { useIsEntered } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  ResponsiveSelectValue,\n  ResponsiveNumberValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { BoxAnimateIn } from './constants'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { v4 } from 'uuid'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  boxAnimateDuration?: ResponsiveNumberValue\n  boxAnimateDelay?: ResponsiveNumberValue\n  itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n}\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const key = useMemo(\n    () => v4(),\n    [\n      boxAnimateType,\n      boxAnimateDuration,\n      boxAnimateDelay,\n      itemAnimateType,\n      itemAnimateDuration,\n      itemAnimateDelay,\n      itemStaggerDuration,\n    ],\n  )\n\n  const { isEntered, resetEntered } = useIsEntered(boxElement)\n\n  useEffect(() => {\n    resetEntered()\n  }, [\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  ])\n\n  return (\n    <BackgroundsContainer\n      ref={setBoxElement}\n      id={id}\n      key={key}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n      )}\n      boxAnimateType={boxAnimateType}\n      boxAnimateDuration={boxAnimateDuration}\n      boxAnimateDelay={boxAnimateDelay}\n      isEntered={isEntered}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({\n              alignContent,\n            })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateType={itemAnimateType}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              isEntered={isEntered}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElement","setBoxElement","useState","useImperativeHandle","getBoxModel","paddingBoxElement","current","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","useMemo","v4","isEntered","resetEntered","useIsEntered","useEffect","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}
+{"version":3,"file":"Box.cjs.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import { forwardRef, Ref, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  ResponsiveSelectValue,\n  ResponsiveNumberValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { BoxAnimateIn } from './constants'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { v4 } from 'uuid'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  boxAnimateDuration?: ResponsiveNumberValue\n  boxAnimateDelay?: ResponsiveNumberValue\n  itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n}\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const key = useMemo(\n    () => v4(),\n    [\n      boxAnimateType,\n      boxAnimateDuration,\n      boxAnimateDelay,\n      itemAnimateType,\n      itemAnimateDuration,\n      itemAnimateDelay,\n      itemStaggerDuration,\n    ],\n  )\n\n  const observerRef = useRef<IntersectionObserver | null>(null)\n\n  useEffect(() => {\n    if (boxElement) {\n      if (observerRef.current == null) {\n        observerRef.current = new IntersectionObserver(\n          function intersectionCallback([entry]: IntersectionObserverEntry[]) {\n            if (entry.isIntersecting) {\n              entry.target.classList.add('show')\n            }\n          },\n          {\n            root: null,\n            rootMargin: `0px 0px -10% 0px`,\n            threshold: 0.2,\n          },\n        )\n      }\n      observerRef.current.observe(boxElement)\n    } else {\n      observerRef.current?.disconnect()\n      observerRef.current = null\n    }\n\n    return () => {\n      if (boxElement) observerRef.current?.unobserve(boxElement)\n    }\n  }, [boxElement])\n\n  useEffect(() => {\n    boxElement?.classList.remove('show')\n    const timeout = setTimeout(() => boxElement?.classList.add('show'), 100)\n    return () => clearTimeout(timeout)\n  }, [key])\n\n  return (\n    <BackgroundsContainer\n      ref={setBoxElement}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n      )}\n      boxAnimateType={boxAnimateType}\n      boxAnimateDuration={boxAnimateDuration}\n      boxAnimateDelay={boxAnimateDelay}\n      itemAnimationType={itemAnimateType}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({\n              alignContent,\n            })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateType={itemAnimateType}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElement","setBoxElement","useState","useImperativeHandle","getBoxModel","paddingBoxElement","current","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","useMemo","v4","observerRef","useEffect","IntersectionObserver","entry","isIntersecting","target","classList","add","root","rootMargin","threshold","observe","disconnect","unobserve","remove","timeout","setTimeout","clearTimeout","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}

package/dist/Box.es.js

@@ -33,8 +33,8 @@ import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useEffect }
 import { cx } from "@emotion/css";
 import { n as useStyle, r as responsiveStyle, E as Element } from "./index.es.js";
 import { jsx } from "react/jsx-runtime";
-import { a as useIsEntered, B as BackgroundsContainer, G as GridItem } from "./grid-item.es.js";
 import { p as parse, c as createBox } from "./box-models.es.js";
+import { B as BackgroundsContainer, G as GridItem } from "./grid-item.es.js";
 import { v4 } from "uuid";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
@@ -62,10 +62,10 @@ import "http-proxy";
 import "set-cookie-parser";
 import "uuid/v4";
 import "corporate-ipsum";
+import "css-box-model";
 import "next/image";
 import "react-player";
 import "./useMediaQuery.es.js";
-import "css-box-model";
 var Placeholder = forwardRef(function Placeholder2(_a, ref) {
   var _b = _a, {
     hide = false
@@ -170,13 +170,37 @@ const Box = forwardRef(function Box2({
     alignItems
   })));
   const key = useMemo(() => v4(), [boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType, itemAnimateDuration, itemAnimateDelay, itemStaggerDuration]);
-  const {
-    isEntered,
-    resetEntered
-  } = useIsEntered(boxElement);
+  const observerRef = useRef(null);
   useEffect(() => {
-    resetEntered();
-  }, [boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimateType, itemAnimateDuration, itemAnimateDelay, itemStaggerDuration]);
+    var _a;
+    if (boxElement) {
+      if (observerRef.current == null) {
+        observerRef.current = new IntersectionObserver(function intersectionCallback([entry]) {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("show");
+          }
+        }, {
+          root: null,
+          rootMargin: `0px 0px -10% 0px`,
+          threshold: 0.2
+        });
+      }
+      observerRef.current.observe(boxElement);
+    } else {
+      (_a = observerRef.current) == null ? void 0 : _a.disconnect();
+      observerRef.current = null;
+    }
+    return () => {
+      var _a2;
+      if (boxElement)
+        (_a2 = observerRef.current) == null ? void 0 : _a2.unobserve(boxElement);
+    };
+  }, [boxElement]);
+  useEffect(() => {
+    boxElement == null ? void 0 : boxElement.classList.remove("show");
+    const timeout = setTimeout(() => boxElement == null ? void 0 : boxElement.classList.add("show"), 100);
+    return () => clearTimeout(timeout);
+  }, [key]);
   return /* @__PURE__ */ jsx(BackgroundsContainer, {
     ref: setBoxElement,
     id,
@@ -188,7 +212,7 @@ const Box = forwardRef(function Box2({
     boxAnimateType,
     boxAnimateDuration,
     boxAnimateDelay,
-    isEntered,
+    itemAnimationType: itemAnimateType,
     backgrounds,
     children: /* @__PURE__ */ jsx("div", {
       ref: innerRef,
@@ -207,7 +231,6 @@ const Box = forwardRef(function Box2({
         itemAnimateDuration,
         itemAnimateDelay,
         itemStaggerDuration,
-        isEntered,
         columnGap,
         rowGap,
         children: /* @__PURE__ */ jsx(Element, {
@@ -216,8 +239,8 @@ const Box = forwardRef(function Box2({
       }, child.key)) : /* @__PURE__ */ jsx(Placeholder, {
         hide: hidePlaceholder
       })
-    })
-  }, key);
+    }, key)
+  });
 });
 export { Box as default };
 //# sourceMappingURL=Box.es.js.map

package/dist/Box.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.es.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import { forwardRef, Ref, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { useIsEntered } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  ResponsiveSelectValue,\n  ResponsiveNumberValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { BoxAnimateIn } from './constants'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { v4 } from 'uuid'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  boxAnimateDuration?: ResponsiveNumberValue\n  boxAnimateDelay?: ResponsiveNumberValue\n  itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n}\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const key = useMemo(\n    () => v4(),\n    [\n      boxAnimateType,\n      boxAnimateDuration,\n      boxAnimateDelay,\n      itemAnimateType,\n      itemAnimateDuration,\n      itemAnimateDelay,\n      itemStaggerDuration,\n    ],\n  )\n\n  const { isEntered, resetEntered } = useIsEntered(boxElement)\n\n  useEffect(() => {\n    resetEntered()\n  }, [\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  ])\n\n  return (\n    <BackgroundsContainer\n      ref={setBoxElement}\n      id={id}\n      key={key}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n      )}\n      boxAnimateType={boxAnimateType}\n      boxAnimateDuration={boxAnimateDuration}\n      boxAnimateDelay={boxAnimateDelay}\n      isEntered={isEntered}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({\n              alignContent,\n            })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateType={itemAnimateType}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              isEntered={isEntered}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElement","setBoxElement","useState","useImperativeHandle","getBoxModel","paddingBoxElement","current","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","useMemo","v4","isEntered","resetEntered","useIsEntered","useEffect","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAA,cAAeA,WAAW,sBACxB,IACAC,KACA;AAFA,eAAEC;AAAAA,WAAO;AAAA,MAAT,IAAmBC,wBAAnB,IAAmBA;AAAAA,IAAjBD;AAAAA;AAGF,qEAEQC;IACJ;AAAA,IACA,OAAO;AAAA,MAAEC,YAAYF,OAAO,WAAW;AAAA,IAHzC;AAAA,IAIE,WAAWG,SAAS;AAAA,MAClBC,OAAO;AAAA,MACPC,YAAY;AAAA,MACZC,QAAQ;AAAA,MACRC,SAAS;AAAA,IAAA,CAJQ;AAAA,IAOnB,8BAAA,OAAA;AAAA,MACE,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,OAAO;AAAA,QAAEC,UAAU;AAAA,MAJrB;AAAA,MAME,8BAAA,QAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,IAAG;AAAA,QACH,IAAG;AAAA,MAAA,CAVL;AAAA,IAAA,CANF;AAAA,EAAA,EAZJ;AAiCD,CArCwB;AC8CnBC,MAAAA,MAAMX,WAAW,cACrB;AAAA,EACEY;AAAAA,EACAC;AAAAA,EACAP;AAAAA,EACAE;AAAAA,EACAM;AAAAA,EACAL;AAAAA,EACAM;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,GAEF5B,KACA;AACM6B,QAAAA,WAAWC,OAA8B,IAAxB;AACvB,QAAM,CAACC,YAAYC,iBAAiBC,SAA6B,IAArB;AAE5CC,sBACElC,KACA,MAAO;AAAA,IACLmC,cAAc;;AACZ,YAAMC,oBAAoBP,SAASQ;AACnC,YAAMC,mBAAmBT,SAASQ;AAC5BE,YAAAA,mBAAmBR;AACnBS,YAAAA,YAAYX,eAASQ,YAATR,mBAAkBY;AAC9BC,YAAAA,0BACJN,6DAAmBO,cAAcC,gBAAjCR,mBAA8CS,iBAAiBT;AAC3DU,YAAAA,yBACJR,2DAAkBK,cAAcC,gBAAhCN,mBAA6CO,iBAAiBP;AAC1DS,YAAAA,yBACJR,2DAAkBI,cAAcC,gBAAhCL,mBAA6CM,iBAAiBN;AAC1D/B,YAAAA,WAAUkC,2BAA2B;AAAA,QACzCM,KAAKC,MAAMP,wBAAwBQ,UAAzB;AAAA,QACVC,OAAOF,MAAMP,wBAAwBU,YAAzB;AAAA,QACZC,QAAQJ,MAAMP,wBAAwBY,aAAzB;AAAA,QACbC,MAAMN,MAAMP,wBAAwBc,WAAzB;AAAA,MAAA;AAEP1C,YAAAA,UAASgC,0BAA0B;AAAA,QACvCE,KAAKC,MAAMH,uBAAuBW,cAAxB;AAAA,QACVN,OAAOF,MAAMH,uBAAuBY,gBAAxB;AAAA,QACZL,QAAQJ,MAAMH,uBAAuBa,iBAAxB;AAAA,QACbJ,MAAMN,MAAMH,uBAAuBc,eAAxB;AAAA,MAAA;AAEP/C,YAAAA,UAASkC,0BAA0B;AAAA,QACvCC,KAAKC,MAAMF,uBAAuBc,SAAxB;AAAA,QACVV,OAAOF,MAAMF,uBAAuBe,WAAxB;AAAA,QACZT,QAAQJ,MAAMF,uBAAuBgB,YAAxB;AAAA,QACbR,MAAMN,MAAMF,uBAAuBiB,UAAxB;AAAA,MAAA;AAGNxB,aAAAA,YAAYyB,UAAU;AAAA,QAAEzB;AAAAA,QAAWhC,SAAAA;AAAAA,QAASM,QAAAA;AAAAA,QAAQD,QAAAA;AAAAA,MAA/B,CAAA,IAA2C;AAAA,IACxE;AAAA,EAAA,IAEH,CAACkB,UAAD,CApCiB;AAuCbmC,QAAAA,oBAAoB9D,SACxB+D,gBAAgB,CAAC9C,aAAD,GAAiB,CAAC,CAAC+C,aAAa,kBAAmB;AAAA,IAAEA;AAAAA,IAAtD,CADiB;AAI5BC,QAAAA,MAAMC,QACV,MAAMC,GAAAA,GACN,CACEjD,gBACAC,oBACAC,iBACAE,iBACAC,qBACAF,kBACAG,mBAPF,CAFiB;AAab,QAAA;AAAA,IAAE4C;AAAAA,IAAWC;AAAAA,MAAiBC,aAAa3C,UAAD;AAEhD4C,YAAU,MAAM;AACF;EAAA,GACX,CACDrD,gBACAC,oBACAC,iBACAE,iBACAC,qBACAF,kBACAG,mBAPC,CAFM;AAYT,6BACG,sBAAD;AAAA,IACE,KAAKI;AAAAA,IACL;AAAA,IAEA,WAAW4C,GACTvE,OACAQ,QACAG,cACAZ,SAAS;AAAA,MAAEyE,SAAS;AAAA,IAAA,CAAZ,GACRzE,SAAS+D,gBAAgB,CAAC5D,MAAD,GAAU,CAAC,CAACuE,YAAY,YAAa;AAAA,MAAEA;AAAAA,IAA7B,EAAX,CAAhB,CALG;AAAA,IAOb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,8BAAA,OAAA;AAAA,MACE,KAAKjD;AAAAA,MACL,WAAW+C,GACTpE,SACAS,WACAH,QACAV,SAAS;AAAA,QAAEyE,SAAS;AAAA,QAAQE,UAAU;AAAA,QAAQ1E,OAAO;AAAA,MAAA,CAA7C,GACRD,SACE+D,gBAAgB,CAAC9C,aAAD,GAAiB,CAAC,CAAC2D,eAAe,kBAAmB;AAAA,QACnEA;AAAAA,MAD+B,EAAlB,CADT,CALG;AAAA,MAYZjE,UAAAA,YAAYA,SAASkE,SAASC,SAAS,IACtCnE,SAASkE,SAASE,IAAI,CAACC,OAAOC,8BAC3B,UAAD;AAAA,QAEE,WAAWnB;AAAAA,QACX,MAAMnD,SAASuE;AAAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAXF,8BAaG,SAAD;AAAA,UAAS,SAASF;AAAAA,QAAAA,CAAlB;AAAA,SAZKA,MAAMf,GADb,CADF,wBAkBC,aAAD;AAAA,QAAa,MAAMjD;AAAAA,MAAAA,CAAnB;AAAA,IAAA,CAjCJ;AAAA,KAdKiD,GAHP;AAuDH,CA3JqB;;"}
+{"version":3,"file":"Box.es.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import { forwardRef, Ref, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport { cx } from '@emotion/css'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  ResponsiveSelectValue,\n  ResponsiveNumberValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { BoxAnimateIn } from './constants'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { v4 } from 'uuid'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  boxAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  boxAnimateDuration?: ResponsiveNumberValue\n  boxAnimateDelay?: ResponsiveNumberValue\n  itemAnimateType?: ResponsiveSelectValue<BoxAnimateIn>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n}\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const [boxElement, setBoxElement] = useState<HTMLElement | null>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElement\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [boxElement],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const key = useMemo(\n    () => v4(),\n    [\n      boxAnimateType,\n      boxAnimateDuration,\n      boxAnimateDelay,\n      itemAnimateType,\n      itemAnimateDuration,\n      itemAnimateDelay,\n      itemStaggerDuration,\n    ],\n  )\n\n  const observerRef = useRef<IntersectionObserver | null>(null)\n\n  useEffect(() => {\n    if (boxElement) {\n      if (observerRef.current == null) {\n        observerRef.current = new IntersectionObserver(\n          function intersectionCallback([entry]: IntersectionObserverEntry[]) {\n            if (entry.isIntersecting) {\n              entry.target.classList.add('show')\n            }\n          },\n          {\n            root: null,\n            rootMargin: `0px 0px -10% 0px`,\n            threshold: 0.2,\n          },\n        )\n      }\n      observerRef.current.observe(boxElement)\n    } else {\n      observerRef.current?.disconnect()\n      observerRef.current = null\n    }\n\n    return () => {\n      if (boxElement) observerRef.current?.unobserve(boxElement)\n    }\n  }, [boxElement])\n\n  useEffect(() => {\n    boxElement?.classList.remove('show')\n    const timeout = setTimeout(() => boxElement?.classList.add('show'), 100)\n    return () => clearTimeout(timeout)\n  }, [key])\n\n  return (\n    <BackgroundsContainer\n      ref={setBoxElement}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n      )}\n      boxAnimateType={boxAnimateType}\n      boxAnimateDuration={boxAnimateDuration}\n      boxAnimateDelay={boxAnimateDelay}\n      itemAnimationType={itemAnimateType}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({\n              alignContent,\n            })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateType={itemAnimateType}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElement","setBoxElement","useState","useImperativeHandle","getBoxModel","paddingBoxElement","current","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","useMemo","v4","observerRef","useEffect","IntersectionObserver","entry","isIntersecting","target","classList","add","root","rootMargin","threshold","observe","disconnect","unobserve","remove","timeout","setTimeout","clearTimeout","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":"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"}

package/dist/grid-item.cjs.js

@@ -198,56 +198,44 @@ const enteredBoxAnimationProperties = {
     opacity: 1
   }
 };
-function useAnimation(responsiveAnimationType, responsiveDuration, responisveDelay, responsiveStagger, index) {
+function useBoxAnimation(responsiveAnimationType, responsiveDuration, responisveDelay, itemResponsiveAnimationType) {
   const reducedMotion = usePrefersReducedMotion();
   const animationType = useMediaQuery.useMediaQuery(responsiveAnimationType) || next.DEFAULT_BOX_ANIMATE_TYPE;
+  const itemAnimationType = useMediaQuery.useMediaQuery(itemResponsiveAnimationType) || next.DEFAULT_ITEM_ANIMATE_TYPE;
+  const duration = useMediaQuery.useMediaQuery(responsiveDuration) || next.DEFAULT_BOX_ANIMATE_DURATION;
+  const delay = useMediaQuery.useMediaQuery(responisveDelay) || next.DEFAULT_BOX_ANIMATE_DELAY;
+  const actualDelay = delay * 1e3;
+  const actualDuration = duration * 1e3;
+  const className = next.useStyle(__spreadProps(__spreadValues({}, exitedBoxAnimationProperties[animationType]), {
+    transition: `all 0ms`,
+    "&.show": __spreadProps(__spreadValues({}, enteredBoxAnimationProperties[animationType]), {
+      transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`
+    }),
+    "&:not(.show) > div > div": __spreadProps(__spreadValues({}, exitedBoxAnimationProperties[itemAnimationType]), {
+      transition: `all 0ms !important`
+    }),
+    "&.show > div > div": __spreadValues({}, enteredBoxAnimationProperties[itemAnimationType])
+  }));
+  if (reducedMotion) {
+    return "";
+  }
+  return className;
+}
+function useItemAnimation(responsiveDuration, responisveDelay, responsiveStagger, index) {
+  const reducedMotion = usePrefersReducedMotion();
   const duration = useMediaQuery.useMediaQuery(responsiveDuration) || next.DEFAULT_BOX_ANIMATE_DURATION;
   const delay = useMediaQuery.useMediaQuery(responisveDelay) || next.DEFAULT_BOX_ANIMATE_DELAY;
   const stagger = useMediaQuery.useMediaQuery(responsiveStagger) || next.DEFAULT_ITEM_STAGGER_DURATION;
   const delayFromStagger = responsiveStagger == null || index == null ? 0 : stagger * index;
   const actualDelay = (delay + delayFromStagger) * 1e3;
   const actualDuration = duration * 1e3;
-  const exited = next.useStyle(__spreadProps(__spreadValues({}, exitedBoxAnimationProperties[animationType]), {
-    transition: `all 0ms`
-  }));
-  const entered = next.useStyle(__spreadProps(__spreadValues({}, enteredBoxAnimationProperties[animationType]), {
-    transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms`
-  }));
-  if (animationType === "none" || reducedMotion) {
-    return {
-      exited: "",
-      entered: ""
-    };
+  const className = next.useStyle({
+    transition: `transform ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms,filter ${actualDuration}ms cubic-bezier(0.16, 0.84, 0.44, 1) ${actualDelay}ms, opacity ${actualDuration}ms ease ${actualDelay}ms !important`
+  });
+  if (reducedMotion) {
+    return "";
   }
-  return {
-    exited,
-    entered
-  };
-}
-function useIsEntered(element) {
-  const [isEntered, setEntered] = React.useState(false);
-  React.useEffect(() => {
-    const observer = new IntersectionObserver(intersectionCallback, {
-      root: null,
-      rootMargin: `0px 0px -10% 0px`,
-      threshold: 0.2
-    });
-    if (element)
-      observer.observe(element);
-    return () => {
-      if (element)
-        observer.unobserve(element);
-    };
-    function intersectionCallback([entry]) {
-      if (entry == null ? void 0 : entry.isIntersecting) {
-        setEntered(true);
-      }
-    }
-  }, [element]);
-  return {
-    isEntered,
-    resetEntered: () => setEntered(false)
-  };
+  return className;
 }
 const clamp = (min, val, max) => Math.min(Math.max(min, val), max);
 function isScrollable(element) {
@@ -672,7 +660,7 @@ var BackgroundsContainer = React.forwardRef(function BackgroundsContainer2(_e, r
     boxAnimateType,
     boxAnimateDuration,
     boxAnimateDelay,
-    isEntered
+    itemAnimationType
   } = _f, restOfProps = __objRest(_f, [
     "backgrounds",
     "children",
@@ -680,14 +668,11 @@ var BackgroundsContainer = React.forwardRef(function BackgroundsContainer2(_e, r
     "boxAnimateType",
     "boxAnimateDuration",
     "boxAnimateDelay",
-    "isEntered"
+    "itemAnimationType"
   ]);
   const [handle, setHandle] = React.useState(null);
   React.useImperativeHandle(ref, () => handle, [handle]);
-  const {
-    exited,
-    entered
-  } = useAnimation(boxAnimateType, boxAnimateDuration, boxAnimateDelay);
+  const animationClassName = useBoxAnimation(boxAnimateType, boxAnimateDuration, boxAnimateDelay, itemAnimationType);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, restOfProps), {
     ref: setHandle,
     className: css.cx(next.useStyle({
@@ -701,7 +686,7 @@ var BackgroundsContainer = React.forwardRef(function BackgroundsContainer2(_e, r
       "> :last-child": {
         position: "relative"
       }
-    }), className, exited, isEntered && entered),
+    }), className, animationClassName),
     children: [/* @__PURE__ */ jsxRuntime.jsx(Backgrounds, {
       backgrounds: useBackgrounds(backgrounds)
     }), React.Children.only(children)]
@@ -717,8 +702,7 @@ function GridItem(_g) {
     itemAnimateType,
     itemAnimateDuration,
     itemAnimateDelay,
-    itemStaggerDuration,
-    isEntered
+    itemStaggerDuration
   } = _h, restOfProps = __objRest(_h, [
     "grid",
     "index",
@@ -728,8 +712,7 @@ function GridItem(_g) {
     "itemAnimateType",
     "itemAnimateDuration",
     "itemAnimateDelay",
-    "itemStaggerDuration",
-    "isEntered"
+    "itemStaggerDuration"
   ]);
   const gridItemClassName = next.useStyle(next.responsiveGridItem({
     grid,
@@ -737,16 +720,12 @@ function GridItem(_g) {
     columnGap,
     rowGap
   }));
-  const {
-    entered,
-    exited
-  } = useAnimation(itemAnimateType, itemAnimateDuration, itemAnimateDelay, itemStaggerDuration, index);
+  const animationClassName = useItemAnimation(itemAnimateDuration, itemAnimateDelay, itemStaggerDuration, index);
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(gridItemClassName, className, exited, isEntered && entered)
+    className: css.cx(gridItemClassName, className, animationClassName)
   }));
 }
 exports.BackgroundsContainer = BackgroundsContainer;
 exports.GridItem = GridItem;
 exports.useBackgrounds = useBackgrounds;
-exports.useIsEntered = useIsEntered;
 //# sourceMappingURL=grid-item.cjs.js.map