@autoguru/overdrive 4.15.0 → 4.15.2

package/dist/components/FillHeightBox/FillHeightBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FillHeightBox.d.ts","sourceRoot":"","sources":["../../../lib/components/FillHeightBox/FillHeightBox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAA4B,EAC3B,wBAAwB,EACxB,MAAM,qDAAqD,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,KAAK,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,cAAc,CAAC,GAC1D,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,KAAK,CAsBlD,CAAC"}
+{"version":3,"file":"FillHeightBox.d.ts","sourceRoot":"","sources":["../../../lib/components/FillHeightBox/FillHeightBox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAA4B,EAC3B,wBAAwB,EACxB,MAAM,qDAAqD,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,KAAK,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,cAAc,CAAC,GAC1D,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,KAAK,CAwBlD,CAAC"}

package/dist/components/FillHeightBox/FillHeightBox.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["includeMobile", "bottomGap", "serverVhFallback", "style"];
+const _excluded = ["includeMobile", "bottomGap", "serverVhFallback", "observedElementRef", "style"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
@@ -14,6 +14,7 @@ export const FillHeightBox = _ref => {
       includeMobile,
       bottomGap,
       serverVhFallback,
+      observedElementRef,
       style
     } = _ref,
     scrollPaneProps = _objectWithoutProperties(_ref, _excluded);
@@ -21,6 +22,7 @@ export const FillHeightBox = _ref => {
   const containerHeight = useWindowHeightFill({
     containerRef,
     includeMobile,
+    observedElementRef,
     bottomGap,
     serverVhFallback
   });

package/dist/hooks/useWindowHeightFill/useWindowHeightFill.d.ts

@@ -4,8 +4,10 @@ export interface UseWindowHeightFillProps {
     bottomGap?: keyof Tokens['space'];
     serverVhFallback?: number;
     includeMobile?: boolean;
+    observeDomChanges?: boolean;
     containerRef: RefObject<HTMLDivElement>;
+    observedElementRef?: RefObject<HTMLDivElement>;
 }
-export declare const useWindowHeightFill: ({ bottomGap, includeMobile, serverVhFallback, containerRef, }: UseWindowHeightFillProps) => string;
+export declare const useWindowHeightFill: ({ bottomGap, includeMobile, serverVhFallback, containerRef, observedElementRef, }: UseWindowHeightFillProps) => string;
 export default useWindowHeightFill;
 //# sourceMappingURL=useWindowHeightFill.d.ts.map

package/dist/hooks/useWindowHeightFill/useWindowHeightFill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowHeightFill.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useWindowHeightFill/useWindowHeightFill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,WAAW,wBAAwB;IACxC,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,mBAAmB,kEAK7B,wBAAwB,KAAG,MAiD7B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"useWindowHeightFill.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useWindowHeightFill/useWindowHeightFill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqC,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,WAAW,wBAAwB;IACxC,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,kBAAkB,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,mBAAmB,sFAM7B,wBAAwB,KAAG,MA8D7B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/hooks/useWindowHeightFill/useWindowHeightFill.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { useResponsiveValue, useTheme } from "../../index.js";
 import { themeContractVars } from "../../themes/theme.css.js";
 import { getThemeTokenValue } from "../../utils/css.js";
@@ -10,23 +10,36 @@ export const useWindowHeightFill = _ref => {
     bottomGap = 'none',
     includeMobile = false,
     serverVhFallback = 100,
-    containerRef
+    containerRef,
+    observedElementRef
   } = _ref;
   const cappedHeight = useResponsiveValue([includeMobile,, true]);
   const {
     themeClass
   } = useTheme();
   const [containerHeight, setContainerHeight] = useState("".concat(serverVhFallback, "vh"));
+  const containerHeightRef = useRef(containerHeight);
   useLayoutEffect(() => {
     var _window, _document;
     if (!(containerRef !== null && containerRef !== void 0 && containerRef.current) || !((_window = window) !== null && _window !== void 0 && _window.innerHeight) || !((_document = document) !== null && _document !== void 0 && _document.body)) return void 0;
     const resize = () => {
       const gap = getThemeTokenValue(themeClass, themeContractVars.space[bottomGap]) || '0px';
       const availableHeight = window.innerHeight - containerRef.current.getBoundingClientRect().top;
-      setContainerHeight(gap ? "calc(".concat(availableHeight, "px - ").concat(gap, ")") : "".concat(availableHeight, "px"));
+      const newHeight = gap ? "calc(".concat(availableHeight, "px - ").concat(gap, ")") : "".concat(availableHeight, "px");
+      if (containerHeightRef.current !== newHeight) {
+        setContainerHeight(newHeight);
+        containerHeightRef.current = newHeight;
+      }
     };
+    const mutationObserver = new MutationObserver(resize);
+    mutationObserver.observe((observedElementRef === null || observedElementRef === void 0 ? void 0 : observedElementRef.current) || document.body, {
+      childList: true,
+      subtree: true,
+      attributes: false,
+      characterData: false
+    });
     const resizeObserver = new ResizeObserver(resize);
-    resizeObserver.observe(document.body);
+    resizeObserver.observe((observedElementRef === null || observedElementRef === void 0 ? void 0 : observedElementRef.current) || document.body);
     window.removeEventListener('resize', resize);
     window.addEventListener('resize', resize, {
       passive: true
@@ -34,6 +47,7 @@ export const useWindowHeightFill = _ref => {
     resize();
     return () => {
       window.removeEventListener('resize', resize);
+      mutationObserver.disconnect();
       resizeObserver.disconnect();
     };
   }, [containerRef === null || containerRef === void 0 ? void 0 : containerRef.current, (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.innerHeight, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.body, themeClass, bottomGap]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.15.0",
+	"version": "4.15.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",