@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _systemConstants = require("@telus-uds/system-constants");
+const inherit = _ref => {
+  let {
+    xs,
+    sm = xs,
+    md = sm,
+    lg = md,
+    xl = lg
+  } = _ref;
+  return {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  };
+};
+
+/**
+ * @typedef { Object } CssStyles
+ */
+
+/**
+ * @typedef { Object } ViewportStyles
+ * @property { CssStyles } xs - The CSS styles for the "xs" viewport (required).
+ * @property { CssStyles } [sm] - Optional styles for the "sm" viewport. Inherits from "xs" if not specified.
+ * @property { CssStyles } [md] - Optional styles for the "md" viewport. Inherits from "sm" if not specified.
+ * @property { CssStyles } [lg] - Optional styles for the "lg" viewport. Inherits from "md" if not specified.
+ * @property { CssStyles } [xl] - Optional styles for the "xl" viewport. Inherits from "lg" if not specified.
+ */
+
+/**
+ * @typedef { Record<String, CssStyles> } MediaQueryStyles
+ */
+
+/**
+ * Generates media query styles based on specified viewport styles.
+ * @param { Object } viewportStyles - The styles for different viewports.
+ * @param { boolean } [shouldInherit=true] - Flag indicating whether to inherit styles.
+ * @returns { Object } - The media query styles.
+ */
+
+function createMediaQueryStyles(viewportStyles) {
+  let shouldInherit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles;
+  const viewportsArray = _systemConstants.viewports.keys;
+  const mediaQueries = Object.entries(effectiveStyles).reduce((acc, _ref2) => {
+    let [viewport, styles] = _ref2;
+    const minWidth = _systemConstants.viewports.map.get(viewport);
+    const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1];
+    const maxWidth = _systemConstants.viewports.map.get(nextViewport);
+    const mediaQuery = `@media (min-width: ${minWidth}px)${maxWidth ? ` and (max-width: ${maxWidth}px)` : ''}`;
+    return {
+      ...acc,
+      [mediaQuery]: styles
+    };
+  }, {});
+  return mediaQueries;
+}
+var _default = exports.default = createMediaQueryStyles;

package/lib/cjs/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
+const toHyphenLower = match => `-${match.toLowerCase()}`;
+const hyphenateStyleName = name => {
+  if (Object.prototype.hasOwnProperty.call(cache, name)) {
+    return cache[name];
+  }
+  const hName = name.replace(uppercasePattern, toHyphenLower);
+  return cache[name] === msPattern.test(hName) ? `-${hName}` : hName;
+};
+var _default = exports.default = hyphenateStyleName;

package/lib/cjs/utils/ssr-media-query/utils/inject.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasCss = exports.flush = exports.addCss = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const rules = {};
+let styleSheet;
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  styleSheet = (() => {
+    const style = document.createElement('style');
+    style.id = 'RNMQCSS';
+    style.appendChild(document.createTextNode(''));
+    document.head.appendChild(style);
+    return style.sheet;
+  })();
+}
+const hasCss = (id, text) => {
+  return !!rules[id] && !!rules[id].text?.includes?.(text);
+};
+exports.hasCss = hasCss;
+const addCss = (id, text) => {
+  if (!hasCss(id, text)) {
+    rules[id] = rules?.[id] || {};
+    rules[id].text = (rules[id]?.text || '') + text;
+    if (styleSheet) {
+      styleSheet.insertRule(text, Object.keys(rules).length - 1);
+    }
+  }
+};
+exports.addCss = addCss;
+const flush = () => {
+  if (_Platform.default.OS === 'web') {
+    return /*#__PURE__*/_react.default.createElement('style', {
+      id: 'rnmq',
+      key: 'rnmq',
+      dangerouslySetInnerHTML: {
+        __html: Object.keys(rules).map(key => rules[key].text).join('\n')
+      }
+    });
+  }
+  return {};
+};
+exports.flush = flush;

package/lib/cjs/utils/ssr.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ssrStyles = exports.getSSRStyles = exports.getReactNativeWebSSRStyles = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AppRegistry = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AppRegistry"));
+var _inject = require("./ssr-media-query/utils/inject");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @typedef {import('react').ComponentType} ReactComponent */
+/** @typedef {import('react').ReactElement} ReactElement */
+
+/**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
+  let {
+    styleGetters = [],
+    collectStyles
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let hasAppRendered = false;
+  return {
+    /**
+     * Server-side-renders the provided app in a way that supports collecting
+     * styles for Styled Components and React Native Web stylesheets.
+     *
+     * @param {ReactComponent} App - the root component for the app
+     * @param {object} [props] - props for this render e.g. page routing props
+     * @param {object} [options] -
+     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
+     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
+     * @param {boolean} [options.renderedByRNW]
+     * @param {ReactComponent} [options.WrapperComponent]
+     *
+     * @returns {ReactElement} - the rendered app output
+     */
+    renderApp: function (App, props) {
+      let {
+        renderedByRNW = false,
+        WrapperComponent
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      _AppRegistry.default.registerComponent(appName, () => App);
+      // AppRegistry.getApplication renders the app in a container, and collects styles.
+      const {
+        element,
+        getStyleElement
+      } = _AppRegistry.default.getApplication(appName, {
+        WrapperComponent,
+        initialProps: props
+      });
+      let renderedApp =
+      // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+      // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
+      // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
+      // So, use that IF user says AppRegistry.runApplication will do the client-side render.
+      renderedByRNW && element ||
+      // If the live app is not rendered using AppRegistry.runApplication, we need to
+      // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
+      // Default to this as many platforms (e.g. NextJS) will use their own renderers.
+      WrapperComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+          ...props
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+        ...props
+      });
+      const getRNWStyle = () => getStyleElement({
+        key: 'react-native-stylesheet'
+      });
+      styleGetters.push(getRNWStyle);
+      if (typeof collectStyles === 'function') {
+        renderedApp = collectStyles(renderedApp);
+      }
+      hasAppRendered = true;
+      return renderedApp;
+    },
+    /**
+     * Turns styles collected during renderApp into an array of React elements of
+     * HTML <style> tags ready for insertion into the SSR HTML's <head>.
+     *
+     * Must be called after `renderApp` has completed.
+     *
+     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
+     * @returns {ReactElement[]} - flat array of <style> React elements
+     */
+    getStyles: function () {
+      if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
+      for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
+        existingStyles[_key] = arguments[_key];
+      }
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter()), (0, _inject.flush)()];
+    }
+  };
+};
+exports.ssrStyles = ssrStyles;
+var _default = exports.default = ssrStyles;
+/**
+ * @deprecated - use ssrStyles instead
+ *
+ * Registers the app's root component with React Native Web and generates
+ * the main <style> tag containing React Native Web stylesheet styles.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @returns {ReactElement[]}
+ */
+const getReactNativeWebSSRStyles = function (AppRoot) {
+  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
+  _AppRegistry.default.registerComponent(appName, () => AppRoot);
+  const {
+    getStyleElement
+  } = _AppRegistry.default.getApplication(appName);
+  return [getStyleElement()];
+};
+
+/**
+ * @deprecated - use ssrStyles instead
+ *
+ * Gets style tags for each currently supported CSS-in-JS library and returns
+ * them alongside any existing style tags.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @param {ReactElement[]} [existingStyles]
+ * @returns {ReactElement[]}
+ */
+exports.getReactNativeWebSSRStyles = getReactNativeWebSSRStyles;
+const getSSRStyles = function (AppRoot) {
+  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
+  let existingStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName)
+  // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
+  ];
+};
+exports.getSSRStyles = getSSRStyles;

package/lib/cjs/utils/transformGradient.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformGradient = exports.default = void 0;
+/**
+ * Transforms a gradient object into a CSS gradient string.
+ *
+ * @param {Object} gradient - The gradient object to transform.
+ * @param {string} gradient.type - The type of gradient (linear or radial).
+ * @param {number} gradient.angle - The angle of the linear gradient in degrees.
+ * @param {Array} gradient.stops - An array of gradient stops.
+ * @param {string} gradient.stops[].color - The color of the gradient stop.
+ * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
+ * @returns {string} The CSS gradient string.
+ */
+const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
+exports.transformGradient = transformGradient;
+var _default = exports.default = {
+  transformGradient
+};

package/lib/cjs/utils/useCopy.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_COPY = void 0;
+const DEFAULT_COPY = exports.DEFAULT_COPY = 'en';
+
+/**
+ * Extract translations from a keyed dictionary for a given language.
+ * Returns a getter.
+ *
+ * @example
+ * const getCopy = useCopy({
+ *   copy: 'en',
+ *   dictionary: {
+ *     en: { label: 'english label' },
+ *     fr: { label: 'french label' }
+ *   }
+ * })
+ *
+ * getCopy('label') => 'english label'
+ *
+ * @description The entire dictionary may be overridden by simply passing a single language object as `copy`:
+ * @example
+ * const getCopy = useCopy({
+ *   copy: { label: 'custom label' }
+ * })
+ *
+ * getCopy('label') => 'custom label'
+ *
+ * @param {object} [dictionary]
+ * @param {'en'|'fr'|object} copy - language
+ * @return {function(string): string}
+ */
+function useCopy(_ref) {
+  let {
+    dictionary,
+    copy = DEFAULT_COPY
+  } = _ref;
+  if (typeof copy === 'string') {
+    return key => key ? dictionary[copy][key] : dictionary[copy];
+  }
+
+  // support overriding the entire copy dictionary with an object for a single language
+  return key => copy[key];
+}
+var _default = exports.default = useCopy;

package/lib/cjs/utils/useHash.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const doAction = (action, event) => typeof action === 'function' && action(window?.location?.hash, event);
+
+/**
+ * @typedef {import('react').SyntheticEvent} SyntheticEvent
+ */
+
+/**
+ * Calls a function (passing it the current hash) based on the current hash state on mount,
+ * and binds it to call it again any time the hash changes.
+ *
+ * Consider using `useCallback` on the function to minimise adding and removing of event listeners.
+ *
+ * On Native, this is replaced with a harmless no-op function as there is no direct equivalent.
+ *
+ * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
+ * @returns
+ */
+const useHash = function (action) {
+  let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const [isDone, setIsDone] = (0, _react.useState)(false);
+  // Do the action just once when ready after component mount, from hash on page load
+  const isToDo = isReady && !isDone;
+  (0, _react.useEffect)(() => {
+    if (isToDo) {
+      setIsDone(true);
+      doAction(action);
+    }
+  }, [isToDo, action]);
+
+  // Bind the action for each hash change; do re-bind if the function changes.
+  (0, _react.useEffect)(() => {
+    const handleChange = event => doAction(action, event);
+    window.addEventListener('hashchange', handleChange);
+    return () => window.removeEventListener('hashchange', handleChange);
+  }, [action]);
+};
+var _default = exports.default = useHash;

package/lib/cjs/utils/useHash.native.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * No URL hashes on Native, so do a no-op. Remembering scenes for reloads
+ * is handled at OS level and deep links have completely different usage.
+ */
+const useHash = () => {};
+var _default = exports.default = useHash;

package/lib/cjs/utils/useOverlaidPosition.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEBOUNCE_DELAY = 100;
+const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
+  const offset = Math.max(0, initialOffset);
+  const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
+  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
+  const adjusted = {
+    offset: Math.max(0, offset - otherEdgeOverflow)
+  };
+  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
+  return adjusted;
+};
+const getPosition = _ref => {
+  let {
+    edge,
+    fromEdge,
+    sourceSize
+  } = _ref;
+  switch (edge) {
+    case 'near':
+      return fromEdge;
+    case 'mid':
+      return fromEdge + sourceSize / 2;
+    case 'far':
+      return fromEdge + sourceSize;
+    default:
+      return 0;
+  }
+};
+const getEdgeType = (align, alignSide) => {
+  const alignTo = align[alignSide];
+  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
+  return edge;
+};
+
+/**
+ * Based on UDS's private getTooltipPosition but generalised.
+ *
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the source (button) and we have a limited set of positions, an easy and consistent way
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
+ * rendering, etc.
+ */
+function getOverlaidPosition(_ref2) {
+  let {
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets = {},
+    align
+  } = _ref2;
+  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
+  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
+  // that can be passed to the appropriate ScrollView?
+  const {
+    scrollX = 0,
+    scrollY = 0
+  } = typeof window === 'object' ? window : {};
+
+  // Will have top, bottom, left and/or right offsets depending on `align`
+  const positioning = {};
+  if (align.top) positioning.top = getPosition({
+    edge: getEdgeType(align, 'top'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    sourceSize: sourceLayout.height
+  });
+  if (align.middle) positioning.top = getPosition({
+    edge: getEdgeType(align, 'middle'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    sourceSize: sourceLayout.height
+  });
+  if (align.bottom) positioning.bottom = getPosition({
+    edge: getEdgeType(align, 'bottom'),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    sourceSize: sourceLayout.height
+  });
+  if (align.left) positioning.left = getPosition({
+    edge: getEdgeType(align, 'left'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    sourceSize: sourceLayout.width
+  });
+  if (align.center) positioning.left = getPosition({
+    edge: getEdgeType(align, 'center'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    sourceSize: sourceLayout.width
+  });
+  if (align.right) positioning.right = getPosition({
+    edge: getEdgeType(align, 'right'),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    sourceSize: sourceLayout.width
+  });
+  if (!(align.left && align.right)) {
+    // Check if the position and/or width need adjusting to fit on the screen
+    const side = align.right ? 'right' : 'left';
+    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
+    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
+    if (typeof adjusted.offset === 'number') {
+      positioning[side] = adjusted.offset;
+    }
+  }
+  return positioning;
+}
+
+/**
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
+ * target element.
+ *
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
+ * a small task because UDS's tooltip logic only really works for short text - it might be
+ * better to use a third-party library).
+ */
+const useOverlaidPosition = _ref3 => {
+  let {
+    isShown = false,
+    offsets,
+    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
+    align = {
+      center: 'center',
+      top: 'bottom'
+    }
+  } = _ref3;
+  // Element in main document flow that the targetRef element is positioned around
+  const sourceRef = (0, _react.useRef)(null);
+  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null);
+
+  // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+  const targetRef = (0, _react.useRef)(null);
+  const [targetDimensions, setTargetDimensions] = (0, _react.useState)(null);
+  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(null);
+  const onTargetLayout = (0, _react.useCallback)(_ref4 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref4;
+    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
+    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
+    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
+    setTargetDimensions(previousDimensions => {
+      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
+      // if user scrolls while a slidedown animation is changing the height and recalculating position.
+      if (!previousDimensions && width && height) {
+        return {
+          width,
+          height
+        };
+      }
+      return previousDimensions;
+    });
+  }, []);
+  const readyToShow = Boolean(isShown && sourceRef.current);
+  (0, _react.useEffect)(() => {
+    const handleDimensionsChange = _ref5 => {
+      let {
+        window
+      } = _ref5;
+      const measurementFunction = _Platform.default.OS === 'web' ? 'measureInWindow' : 'measure';
+      sourceRef.current?.[measurementFunction]((x, y, width, height) => {
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    };
+    let subscription;
+    const unsubscribe = () => {
+      if (typeof subscription?.remove === 'function') {
+        // React Native >=0.65.0
+        subscription.remove();
+      } else if (typeof _Dimensions.default.remove === 'function') {
+        // React Native <0.65.0
+        _Dimensions.default.remove('change', handleDimensionsChange);
+      }
+      setSourceLayout(null);
+      setTargetDimensions(null);
+    };
+    if (readyToShow) {
+      subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
+      handleDimensionsChange({
+        window: _Dimensions.default.get('window')
+      });
+    } else {
+      unsubscribe();
+    }
+    return unsubscribe;
+  }, [readyToShow]);
+  (0, _react.useEffect)(() => {
+    if (_Platform.default.OS !== 'web') {
+      return undefined;
+    }
+    const handleScroll = (0, _lodash.default)(() => {
+      sourceRef.current?.measureInWindow((x, y, width, height) => {
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    }, DEBOUNCE_DELAY);
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
+    };
+  }, [sourceRef]);
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  const overlaidPosition = isReady ? getOverlaidPosition({
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets,
+    align
+  }) : {};
+  return {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  };
+};
+var _default = exports.default = useOverlaidPosition;