@elliemae/ds-floating-context 3.52.1 → 3.53.0-alpha.2

package/dist/cjs/DSFloatingContext.js

@@ -36,7 +36,6 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_hooks_headless_tooltip = require("@elliemae/ds-hooks-headless-tooltip");
-var import_ds_system = require("@elliemae/ds-system");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_useComputedPositionStyles = require("./useComputedPositionStyles.js");
 var import_positionObserver = require("./utils/positionObserver.js");
@@ -56,76 +55,65 @@ const useFloatingContext = (props = {}) => {
     externallyControlledIsOpen
   } = propsWithDefault;
   const [internalIsOpen, setInternalIsOpen] = import_react.default.useState(false);
-  const isOpenSourceOfTruth = (0, import_react.useMemo)(() => {
-    if (externallyControlledIsOpen !== void 0) return externallyControlledIsOpen;
-    return internalIsOpen;
-  }, [externallyControlledIsOpen, internalIsOpen]);
-  const overChargedOnOpen = import_react.default.useCallback(() => {
+  const isOpen = (0, import_react.useMemo)(
+    () => externallyControlledIsOpen !== void 0 ? externallyControlledIsOpen : internalIsOpen,
+    [externallyControlledIsOpen, internalIsOpen]
+  );
+  const handleOpen = import_react.default.useCallback(() => {
     setInternalIsOpen(true);
     onOpen?.();
   }, [onOpen]);
-  const overChargedOnClose = import_react.default.useCallback(() => {
+  const handleClose = import_react.default.useCallback(() => {
     setInternalIsOpen(false);
     onClose?.();
   }, [onClose]);
-  const tooltipHelpers = (0, import_ds_hooks_headless_tooltip.useHeadlessTooltip)({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });
-  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;
-  const [reference, _setReference] = import_react.default.useState(null);
+  const tooltipHelpers = (0, import_ds_hooks_headless_tooltip.useHeadlessTooltip)({ onOpen: handleOpen, onClose: handleClose });
+  const { setReferenceElement, referenceElement, hideTooltip, showTooltip } = tooltipHelpers;
   const [floating, setFloating] = import_react.default.useState(null);
-  const [workaroundToEnsureAPositionWasCalculatedIfOpen, setWorkaroundToEnsureAPositionWasCalculatedIfOpen] = import_react.default.useState(0);
-  const { arrowStyles, floatingStyles, mutableUpdateStyles, debouncedUpdateStyles } = (0, import_useComputedPositionStyles.useComputedPositionStyles)({
-    reference,
+  const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } = (0, import_useComputedPositionStyles.useComputedPositionStyles)({
+    reference: referenceElement,
     floating,
     placement,
     placementOrderPreference,
     customOffset,
-    withoutPortal
+    withoutPortal,
+    preventComputing: !isOpen,
+    debounceMs: 150
   });
   (0, import_react.useEffect)(() => {
-    requestAnimationFrame(() => {
-      mutableUpdateStyles?.current();
-    });
-  }, [reference, mutableUpdateStyles]);
-  const updatePosOnIntersection = import_react.default.useCallback(() => {
-    if (reference) {
-      requestAnimationFrame(() => {
-        debouncedUpdateStyles();
+    if (!isOpen) return;
+    const observers = [];
+    if (floating) {
+      const roFloating = new ResizeObserver(() => {
+        mutableUpdateStyles.current();
       });
+      roFloating.observe(floating);
+      observers.push(roFloating);
     }
-  }, [reference, debouncedUpdateStyles]);
-  (0, import_positionObserver.usePositionObserver)(reference, updatePosOnIntersection);
-  (0, import_react.useEffect)(() => {
-    requestAnimationFrame(() => {
-      mutableUpdateStyles?.current();
-    });
-  }, [isOpenSourceOfTruth, mutableUpdateStyles]);
-  const { visibility } = floatingStyles;
-  const needsToCalculateBecauseStillInvisibleWhenShouldBeOpen = isOpenSourceOfTruth && visibility === "hidden";
-  (0, import_react.useEffect)(() => {
-    if (needsToCalculateBecauseStillInvisibleWhenShouldBeOpen) {
-      mutableUpdateStyles?.current();
-      requestAnimationFrame(() => {
-        setWorkaroundToEnsureAPositionWasCalculatedIfOpen((o) => o + 1);
-      });
-    }
-  }, [
-    needsToCalculateBecauseStillInvisibleWhenShouldBeOpen,
-    mutableUpdateStyles,
-    // this dependency is the point of this useEffect
-    //  it will keep triggering until the position is calculated if it needs to be calculated
-    workaroundToEnsureAPositionWasCalculatedIfOpen
-  ]);
-  const setReference = (0, import_ds_system.mergeRefs)(_setReference, setReferenceElement);
-  const refs = import_react.default.useMemo(
+    return () => observers.forEach((o) => o.disconnect());
+  }, [isOpen, floating, updateStyles, mutableUpdateStyles]);
+  const onObservedMovement = import_react.default.useCallback(() => {
+    if (!isOpen) return;
+    debouncedUpdateStyles();
+  }, [isOpen, debouncedUpdateStyles]);
+  (0, import_positionObserver.usePositionObserver)(referenceElement, onObservedMovement);
+  const computedFloatingStyles = (0, import_react.useMemo)(
+    () => ({
+      ...floatingStyles,
+      visibility: isOpen && hasComputedOnce ? "visible" : "hidden"
+    }),
+    [floatingStyles, hasComputedOnce, isOpen]
+  );
+  const refs = (0, import_react.useMemo)(
     () => ({
-      setReference,
+      setReference: setReferenceElement,
       setFloating,
       floating,
-      reference
+      reference: referenceElement
     }),
-    [setReference, floating, reference]
+    [setReferenceElement, floating, referenceElement]
   );
-  const handlers = import_react.default.useMemo(
+  const handlers = (0, import_react.useMemo)(
     () => ({
       onMouseEnter: tooltipHelpers.onMouseEnter,
       onMouseLeave: tooltipHelpers.onMouseLeave,
@@ -137,9 +125,9 @@ const useFloatingContext = (props = {}) => {
   return (0, import_react.useMemo)(
     () => ({
       refs,
-      floatingStyles,
+      floatingStyles: computedFloatingStyles,
       handlers,
-      isOpen: isOpenSourceOfTruth,
+      isOpen,
       arrowStyles,
       hideTooltip,
       showTooltip,
@@ -149,13 +137,14 @@ const useFloatingContext = (props = {}) => {
         portalDOMContainer,
         animationDuration
       },
-      mutableUpdateStyles
+      mutableUpdateStyles,
+      forceUpdatePosition: updateStyles
     }),
     [
       refs,
-      floatingStyles,
+      computedFloatingStyles,
       handlers,
-      isOpenSourceOfTruth,
+      isOpen,
       arrowStyles,
       hideTooltip,
       showTooltip,
@@ -163,7 +152,8 @@ const useFloatingContext = (props = {}) => {
       withoutAnimation,
       portalDOMContainer,
       animationDuration,
-      mutableUpdateStyles
+      mutableUpdateStyles,
+      updateStyles
     ]
   );
 };

package/dist/cjs/DSFloatingContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSFloatingContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useEffect, useMemo } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\nimport { useComputedPositionStyles } from './useComputedPositionStyles.js';\nimport { usePositionObserver } from './utils/positionObserver.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n  const {\n    withoutPortal,\n    withoutAnimation,\n    portalDOMContainer,\n    animationDuration,\n    placement,\n    customOffset,\n    placementOrderPreference,\n    onOpen,\n    onClose,\n    externallyControlledIsOpen,\n  } = propsWithDefault;\n\n  const [internalIsOpen, setInternalIsOpen] = React.useState<boolean>(false);\n  const isOpenSourceOfTruth = useMemo(() => {\n    if (externallyControlledIsOpen !== undefined) return externallyControlledIsOpen;\n    return internalIsOpen;\n  }, [externallyControlledIsOpen, internalIsOpen]);\n\n  const overChargedOnOpen = React.useCallback(() => {\n    setInternalIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n  const overChargedOnClose = React.useCallback(() => {\n    setInternalIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n  const tooltipHelpers = useHeadlessTooltip({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });\n  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const [reference, _setReference] = React.useState<Element | null>(null);\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n  const [workaroundToEnsureAPositionWasCalculatedIfOpen, setWorkaroundToEnsureAPositionWasCalculatedIfOpen] =\n    React.useState<number>(0);\n\n  const { arrowStyles, floatingStyles, mutableUpdateStyles, debouncedUpdateStyles } = useComputedPositionStyles({\n    reference,\n    floating,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n  });\n\n  // calculate position on mount\n  //   AND everytime the reference (which is actually immutable because it's stored in a React.useState)\n  // changes\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      mutableUpdateStyles?.current();\n    });\n    // the dependency array is equal to being empty because mutableUpdateStyles is a ref.\n    //   this is effectively an \"on mount\"\n  }, [reference, mutableUpdateStyles]);\n\n  // use intersection observer to detect when the position of the reference changes needing to recalculate the position\n  const updatePosOnIntersection = React.useCallback(() => {\n    if (reference) {\n      requestAnimationFrame(() => {\n        debouncedUpdateStyles();\n      });\n    }\n  }, [reference, debouncedUpdateStyles]);\n  usePositionObserver(reference, updatePosOnIntersection);\n\n  // when we detect that the flag about it being open/closed changes\n  //   we refresh the position of the tooltip calculation\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      mutableUpdateStyles?.current();\n    });\n  }, [isOpenSourceOfTruth, mutableUpdateStyles]);\n\n  // this is a workaround to ensure that the position is calculated at least once when the tooltip is open\n  const { visibility } = floatingStyles;\n  const needsToCalculateBecauseStillInvisibleWhenShouldBeOpen = isOpenSourceOfTruth && visibility === 'hidden';\n  useEffect(() => {\n    if (needsToCalculateBecauseStillInvisibleWhenShouldBeOpen) {\n      mutableUpdateStyles?.current();\n      requestAnimationFrame(() => {\n        setWorkaroundToEnsureAPositionWasCalculatedIfOpen((o) => o + 1);\n      });\n    }\n  }, [\n    needsToCalculateBecauseStillInvisibleWhenShouldBeOpen,\n    mutableUpdateStyles,\n    // this dependency is the point of this useEffect\n    //  it will keep triggering until the position is calculated if it needs to be calculated\n    workaroundToEnsureAPositionWasCalculatedIfOpen,\n  ]);\n\n  const setReference = mergeRefs(_setReference, setReferenceElement);\n  const refs = React.useMemo(\n    () => ({\n      setReference,\n      setFloating,\n      floating,\n      reference,\n    }),\n    [setReference, floating, reference],\n  );\n\n  const handlers = React.useMemo(\n    () => ({\n      onMouseEnter: tooltipHelpers.onMouseEnter,\n      onMouseLeave: tooltipHelpers.onMouseLeave,\n      onFocus: tooltipHelpers.onFocus,\n      onBlur: tooltipHelpers.onBlur,\n    }),\n    [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n  );\n\n  return useMemo(\n    () => ({\n      refs,\n      floatingStyles,\n      handlers,\n      isOpen: isOpenSourceOfTruth,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      context: {\n        withoutPortal,\n        withoutAnimation,\n        portalDOMContainer,\n        animationDuration,\n      },\n      mutableUpdateStyles,\n    }),\n    [\n      refs,\n      floatingStyles,\n      handlers,\n      isOpenSourceOfTruth,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      withoutPortal,\n      withoutAnimation,\n      portalDOMContainer,\n      animationDuration,\n      mutableUpdateStyles,\n    ],\n  );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n  DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA0C;AAC1C,8BAKO;AACP,uCAAmC;AACnC,uBAA0B;AAE1B,mCAAyD;AACzD,uCAA0C;AAC1C,8BAAoC;AAEpC,MAAM,qBAAqB,CAAC,QAAsC,CAAC,MAAM;AACvE,QAAM,uBAAmB,sDAAmE,OAAO,yCAAY;AAC/G,8DAA+B,kBAAkB,yDAA4B,iBAAiB;AAE9F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAAkB,KAAK;AACzE,QAAM,0BAAsB,sBAAQ,MAAM;AACxC,QAAI,+BAA+B,OAAW,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,4BAA4B,cAAc,CAAC;AAE/C,QAAM,oBAAoB,aAAAA,QAAM,YAAY,MAAM;AAChD,sBAAkB,IAAI;AACtB,aAAS;AAAA,EACX,GAAG,CAAC,MAAM,CAAC;AACX,QAAM,qBAAqB,aAAAA,QAAM,YAAY,MAAM;AACjD,sBAAkB,KAAK;AACvB,cAAU;AAAA,EACZ,GAAG,CAAC,OAAO,CAAC;AACZ,QAAM,qBAAiB,qDAAmB,EAAE,QAAQ,mBAAmB,SAAS,mBAAmB,CAAC;AACpG,QAAM,EAAE,qBAAqB,aAAa,YAAY,IAAI;AAE1D,QAAM,CAAC,WAAW,aAAa,IAAI,aAAAA,QAAM,SAAyB,IAAI;AACtE,QAAM,CAAC,UAAU,WAAW,IAAI,aAAAA,QAAM,SAA6B,IAAI;AACvE,QAAM,CAAC,gDAAgD,iDAAiD,IACtG,aAAAA,QAAM,SAAiB,CAAC;AAE1B,QAAM,EAAE,aAAa,gBAAgB,qBAAqB,sBAAsB,QAAI,4DAA0B;AAAA,IAC5G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAKD,8BAAU,MAAM;AACd,0BAAsB,MAAM;AAC1B,2BAAqB,QAAQ;AAAA,IAC/B,CAAC;AAAA,EAGH,GAAG,CAAC,WAAW,mBAAmB,CAAC;AAGnC,QAAM,0BAA0B,aAAAA,QAAM,YAAY,MAAM;AACtD,QAAI,WAAW;AACb,4BAAsB,MAAM;AAC1B,8BAAsB;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,qBAAqB,CAAC;AACrC,mDAAoB,WAAW,uBAAuB;AAItD,8BAAU,MAAM;AACd,0BAAsB,MAAM;AAC1B,2BAAqB,QAAQ;AAAA,IAC/B,CAAC;AAAA,EACH,GAAG,CAAC,qBAAqB,mBAAmB,CAAC;AAG7C,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,wDAAwD,uBAAuB,eAAe;AACpG,8BAAU,MAAM;AACd,QAAI,uDAAuD;AACzD,2BAAqB,QAAQ;AAC7B,4BAAsB,MAAM;AAC1B,0DAAkD,CAAC,MAAM,IAAI,CAAC;AAAA,MAChE,CAAC;AAAA,IACH;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,EACF,CAAC;AAED,QAAM,mBAAe,4BAAU,eAAe,mBAAmB;AACjE,QAAM,OAAO,aAAAA,QAAM;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,UAAU,SAAS;AAAA,EACpC;AAEA,QAAM,WAAW,aAAAA,QAAM;AAAA,IACrB,OAAO;AAAA,MACL,cAAc,eAAe;AAAA,MAC7B,cAAc,eAAe;AAAA,MAC7B,SAAS,eAAe;AAAA,MACxB,QAAQ,eAAe;AAAA,IACzB;AAAA,IACA,CAAC,eAAe,QAAQ,eAAe,SAAS,eAAe,cAAc,eAAe,YAAY;AAAA,EAC1G;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAC3B;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable consistent-return */\n/* eslint-disable max-statements */\nimport React, { useMemo, useEffect } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\nimport { useComputedPositionStyles } from './useComputedPositionStyles.js';\nimport { usePositionObserver } from './utils/positionObserver.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n  const {\n    withoutPortal,\n    withoutAnimation,\n    portalDOMContainer,\n    animationDuration,\n    placement,\n    customOffset,\n    placementOrderPreference,\n    onOpen,\n    onClose,\n    externallyControlledIsOpen,\n  } = propsWithDefault;\n\n  const [internalIsOpen, setInternalIsOpen] = React.useState<boolean>(false);\n  const isOpen = useMemo(\n    () => (externallyControlledIsOpen !== undefined ? externallyControlledIsOpen : internalIsOpen),\n    [externallyControlledIsOpen, internalIsOpen],\n  );\n\n  const handleOpen = React.useCallback(() => {\n    setInternalIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const handleClose = React.useCallback(() => {\n    setInternalIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n\n  const tooltipHelpers = useHeadlessTooltip({ onOpen: handleOpen, onClose: handleClose });\n  const { setReferenceElement, referenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n\n  // Anchor and floating refs\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n\n  // Compute position (skip when closed)\n  const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } =\n    useComputedPositionStyles({\n      reference: referenceElement,\n      floating,\n      placement,\n      placementOrderPreference,\n      customOffset,\n      withoutPortal,\n      preventComputing: !isOpen,\n      debounceMs: 150,\n    });\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const observers: ResizeObserver[] = [];\n\n    if (floating) {\n      const roFloating = new ResizeObserver(() => {\n        mutableUpdateStyles.current();\n      });\n      roFloating.observe(floating);\n      observers.push(roFloating);\n    }\n\n    return () => observers.forEach((o) => o.disconnect());\n  }, [isOpen, floating, updateStyles, mutableUpdateStyles]);\n\n  const onObservedMovement = React.useCallback(() => {\n    if (!isOpen) return;\n    debouncedUpdateStyles();\n  }, [isOpen, debouncedUpdateStyles]);\n  usePositionObserver(referenceElement, onObservedMovement);\n\n  // Expose visibility: only visible if open and already computed at least once\n  const computedFloatingStyles = useMemo<React.CSSProperties>(\n    () => ({\n      ...floatingStyles,\n      visibility: isOpen && hasComputedOnce ? 'visible' : 'hidden',\n    }),\n    [floatingStyles, hasComputedOnce, isOpen],\n  );\n\n  const refs = useMemo(\n    () => ({\n      setReference: setReferenceElement,\n      setFloating,\n      floating,\n      reference: referenceElement,\n    }),\n    [setReferenceElement, floating, referenceElement],\n  );\n\n  const handlers = useMemo(\n    () => ({\n      onMouseEnter: tooltipHelpers.onMouseEnter,\n      onMouseLeave: tooltipHelpers.onMouseLeave,\n      onFocus: tooltipHelpers.onFocus,\n      onBlur: tooltipHelpers.onBlur,\n    }),\n    [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n  );\n\n  return useMemo(\n    () => ({\n      refs,\n      floatingStyles: computedFloatingStyles,\n      handlers,\n      isOpen,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      context: {\n        withoutPortal,\n        withoutAnimation,\n        portalDOMContainer,\n        animationDuration,\n      },\n      mutableUpdateStyles,\n      forceUpdatePosition: updateStyles,\n    }),\n    [\n      refs,\n      computedFloatingStyles,\n      handlers,\n      isOpen,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      withoutPortal,\n      withoutAnimation,\n      portalDOMContainer,\n      animationDuration,\n      mutableUpdateStyles,\n      updateStyles,\n    ],\n  );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n  DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/FloatingWrapper/FloatingWrapper.js

@@ -60,7 +60,6 @@ const ContentComponent = import_react.default.memo(
       innerRef,
       style: floatingStyles,
       ...xstyledProps,
-      role: "complementary",
       "data-testid": "ds-floating-wrapper-root",
       ...globalsAttrs,
       ...ownerPropsConfig,

package/dist/cjs/parts/FloatingWrapper/FloatingWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/FloatingWrapper/FloatingWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledFloatingAnimation, StyledFloatingWrapper } from './styled.js';\nimport { type DSFloatingWrapperT, DSFloatingWrapperPropTypes } from './react-desc-prop-types.js';\nimport { useFloatingWrapper } from './config/useFloatingWrapper.js';\nimport { DSFloatingWrapperName } from '../../constants/index.js';\nimport { getDocumentMainLandmarkOrBody } from '../../utils/getDocumentMainLandmarkOrBody.js';\n\ntype ContentComponentPropsT = {\n  xstyledProps: ReturnType<typeof useFloatingWrapper>['xstyledProps'];\n  globalsAttrs: ReturnType<typeof useFloatingWrapper>['globalsAttrs'];\n  ownerPropsConfig: {\n    getOwnerProps: () => DSFloatingWrapperT.Props;\n    getOwnerPropsArguments: () => object;\n  };\n  handleAnimationEnd: React.AnimationEventHandler<HTMLDivElement>;\n  // for performance reasons, it's better for pure component to not receive nested objects\n  // so the following is just the typescript way of describing we spread the props\n} & Omit<DSFloatingWrapperT.InternalProps, 'context'> &\n  DSFloatingWrapperT.InternalProps['context'];\n\nconst ContentComponent = React.memo<ContentComponentPropsT>(\n  ({\n    children,\n    innerRef,\n    floatingStyles,\n    isOpen,\n    animationDuration,\n    withoutAnimation,\n    handleAnimationEnd,\n    xstyledProps,\n    globalsAttrs,\n    ownerPropsConfig,\n  }) => (\n    <StyledFloatingWrapper\n      innerRef={innerRef}\n      style={floatingStyles}\n      {...xstyledProps}\n      role=\"complementary\"\n      data-testid=\"ds-floating-wrapper-root\"\n      {...globalsAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledFloatingAnimation\n        onAnimationEnd={handleAnimationEnd}\n        isOpen={isOpen}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n        {...ownerPropsConfig}\n      >\n        {children}\n      </StyledFloatingAnimation>\n    </StyledFloatingWrapper>\n  ),\n);\n\nconst FloatingWrapper: React.ComponentType<DSFloatingWrapperT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, globalsAttrs } = useFloatingWrapper(props);\n  const { isOpen } = propsWithDefault;\n  const ownerPropsConfig = useOwnerProps(props);\n\n  const { context, onAnimationEnd, onAnimationStartTriggered, ...contentProps } = propsWithDefault;\n  const { portalDOMContainer, withoutPortal, withoutAnimation } = context;\n\n  const [isAnimating, setIsAnimating] = React.useState(false);\n  React.useEffect(() => {\n    if (isOpen && !withoutAnimation) {\n      setIsAnimating(true);\n      onAnimationStartTriggered?.();\n    }\n  }, [isOpen, onAnimationStartTriggered, withoutAnimation]);\n\n  const handleAnimationEnd = React.useCallback<React.AnimationEventHandler<HTMLDivElement>>(\n    (e) => {\n      setIsAnimating(false);\n      if (onAnimationEnd) onAnimationEnd(e);\n    },\n    [onAnimationEnd],\n  );\n\n  if (isOpen || isAnimating) {\n    if (withoutPortal === true)\n      return (\n        <ContentComponent\n          xstyledProps={xstyledProps}\n          globalsAttrs={globalsAttrs}\n          ownerPropsConfig={ownerPropsConfig}\n          {...contentProps}\n          {...context}\n          handleAnimationEnd={handleAnimationEnd}\n        />\n      );\n    if (!withoutPortal)\n      return (\n        <>\n          {createPortal(\n            <ContentComponent\n              xstyledProps={xstyledProps}\n              globalsAttrs={globalsAttrs}\n              ownerPropsConfig={ownerPropsConfig}\n              {...contentProps}\n              {...context}\n              handleAnimationEnd={handleAnimationEnd}\n            />,\n            portalDOMContainer || getDocumentMainLandmarkOrBody(),\n          )}\n        </>\n      );\n  }\n  return null;\n};\n\nFloatingWrapper.displayName = DSFloatingWrapperName;\nconst FloatingWrapperWithSchema = describe(FloatingWrapper);\nFloatingWrapperWithSchema.propTypes = DSFloatingWrapperPropTypes as unknown as ValidationMap<DSFloatingWrapperT.Props>;\nexport { FloatingWrapper, FloatingWrapperWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4CjB;AA5CN,mBAAkB;AAClB,uBAA6B;AAC7B,8BAA4D;AAC5D,oBAA+D;AAC/D,mCAAoE;AACpE,gCAAmC;AACnC,uBAAsC;AACtC,2CAA8C;AAe9C,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,kBAAiE,CAAC,UAAU;AAChF,QAAM,EAAE,kBAAkB,cAAc,aAAa,QAAI,8CAAmB,KAAK;AACjF,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,uBAAmB,uCAAc,KAAK;AAE5C,QAAM,EAAE,SAAS,gBAAgB,2BAA2B,GAAG,aAAa,IAAI;AAChF,QAAM,EAAE,oBAAoB,eAAe,iBAAiB,IAAI;AAEhE,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,CAAC,kBAAkB;AAC/B,qBAAe,IAAI;AACnB,kCAA4B;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,QAAQ,2BAA2B,gBAAgB,CAAC;AAExD,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAM;AACL,qBAAe,KAAK;AACpB,UAAI,eAAgB,gBAAe,CAAC;AAAA,IACtC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,MAAI,UAAU,aAAa;AACzB,QAAI,kBAAkB;AACpB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ;AAAA;AAAA,MACF;AAEJ,QAAI,CAAC;AACH,aACE,2EACG;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA;AAAA,QACF;AAAA,QACA,0BAAsB,oEAA8B;AAAA,MACtD,GACF;AAAA,EAEN;AACA,SAAO;AACT;AAEA,gBAAgB,cAAc;AAC9B,MAAM,gCAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledFloatingAnimation, StyledFloatingWrapper } from './styled.js';\nimport { type DSFloatingWrapperT, DSFloatingWrapperPropTypes } from './react-desc-prop-types.js';\nimport { useFloatingWrapper } from './config/useFloatingWrapper.js';\nimport { DSFloatingWrapperName } from '../../constants/index.js';\nimport { getDocumentMainLandmarkOrBody } from '../../utils/getDocumentMainLandmarkOrBody.js';\n\ntype ContentComponentPropsT = {\n  xstyledProps: ReturnType<typeof useFloatingWrapper>['xstyledProps'];\n  globalsAttrs: ReturnType<typeof useFloatingWrapper>['globalsAttrs'];\n  ownerPropsConfig: {\n    getOwnerProps: () => DSFloatingWrapperT.Props;\n    getOwnerPropsArguments: () => object;\n  };\n  handleAnimationEnd: React.AnimationEventHandler<HTMLDivElement>;\n  // for performance reasons, it's better for pure component to not receive nested objects\n  // so the following is just the typescript way of describing we spread the props\n} & Omit<DSFloatingWrapperT.InternalProps, 'context'> &\n  DSFloatingWrapperT.InternalProps['context'];\n\nconst ContentComponent = React.memo<ContentComponentPropsT>(\n  ({\n    children,\n    innerRef,\n    floatingStyles,\n    isOpen,\n    animationDuration,\n    withoutAnimation,\n    handleAnimationEnd,\n    xstyledProps,\n    globalsAttrs,\n    ownerPropsConfig,\n  }) => (\n    <StyledFloatingWrapper\n      innerRef={innerRef}\n      style={floatingStyles}\n      {...xstyledProps}\n      data-testid=\"ds-floating-wrapper-root\"\n      {...globalsAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledFloatingAnimation\n        onAnimationEnd={handleAnimationEnd}\n        isOpen={isOpen}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n        {...ownerPropsConfig}\n      >\n        {children}\n      </StyledFloatingAnimation>\n    </StyledFloatingWrapper>\n  ),\n);\n\nconst FloatingWrapper: React.ComponentType<DSFloatingWrapperT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, globalsAttrs } = useFloatingWrapper(props);\n  const { isOpen } = propsWithDefault;\n  const ownerPropsConfig = useOwnerProps(props);\n\n  const { context, onAnimationEnd, onAnimationStartTriggered, ...contentProps } = propsWithDefault;\n  const { portalDOMContainer, withoutPortal, withoutAnimation } = context;\n\n  const [isAnimating, setIsAnimating] = React.useState(false);\n  React.useEffect(() => {\n    if (isOpen && !withoutAnimation) {\n      setIsAnimating(true);\n      onAnimationStartTriggered?.();\n    }\n  }, [isOpen, onAnimationStartTriggered, withoutAnimation]);\n\n  const handleAnimationEnd = React.useCallback<React.AnimationEventHandler<HTMLDivElement>>(\n    (e) => {\n      setIsAnimating(false);\n      if (onAnimationEnd) onAnimationEnd(e);\n    },\n    [onAnimationEnd],\n  );\n\n  if (isOpen || isAnimating) {\n    if (withoutPortal === true)\n      return (\n        <ContentComponent\n          xstyledProps={xstyledProps}\n          globalsAttrs={globalsAttrs}\n          ownerPropsConfig={ownerPropsConfig}\n          {...contentProps}\n          {...context}\n          handleAnimationEnd={handleAnimationEnd}\n        />\n      );\n    if (!withoutPortal)\n      return (\n        <>\n          {createPortal(\n            <ContentComponent\n              xstyledProps={xstyledProps}\n              globalsAttrs={globalsAttrs}\n              ownerPropsConfig={ownerPropsConfig}\n              {...contentProps}\n              {...context}\n              handleAnimationEnd={handleAnimationEnd}\n            />,\n            portalDOMContainer || getDocumentMainLandmarkOrBody(),\n          )}\n        </>\n      );\n  }\n  return null;\n};\n\nFloatingWrapper.displayName = DSFloatingWrapperName;\nconst FloatingWrapperWithSchema = describe(FloatingWrapper);\nFloatingWrapperWithSchema.propTypes = DSFloatingWrapperPropTypes as unknown as ValidationMap<DSFloatingWrapperT.Props>;\nexport { FloatingWrapper, FloatingWrapperWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CjB;AA3CN,mBAAkB;AAClB,uBAA6B;AAC7B,8BAA4D;AAC5D,oBAA+D;AAC/D,mCAAoE;AACpE,gCAAmC;AACnC,uBAAsC;AACtC,2CAA8C;AAe9C,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,kBAAiE,CAAC,UAAU;AAChF,QAAM,EAAE,kBAAkB,cAAc,aAAa,QAAI,8CAAmB,KAAK;AACjF,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,uBAAmB,uCAAc,KAAK;AAE5C,QAAM,EAAE,SAAS,gBAAgB,2BAA2B,GAAG,aAAa,IAAI;AAChF,QAAM,EAAE,oBAAoB,eAAe,iBAAiB,IAAI;AAEhE,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,CAAC,kBAAkB;AAC/B,qBAAe,IAAI;AACnB,kCAA4B;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,QAAQ,2BAA2B,gBAAgB,CAAC;AAExD,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAM;AACL,qBAAe,KAAK;AACpB,UAAI,eAAgB,gBAAe,CAAC;AAAA,IACtC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,MAAI,UAAU,aAAa;AACzB,QAAI,kBAAkB;AACpB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ;AAAA;AAAA,MACF;AAEJ,QAAI,CAAC;AACH,aACE,2EACG;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA;AAAA,QACF;AAAA,QACA,0BAAsB,oEAA8B;AAAA,MACtD,GACF;AAAA,EAEN;AACA,SAAO;AACT;AAEA,gBAAgB,cAAc;AAC9B,MAAM,gCAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
   "names": ["React"]
 }

package/dist/cjs/parts/PopoverArrow.js

@@ -37,15 +37,23 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../constants/index.js");
 const arrowWidth = 18;
-const arrowHeight = 18;
 const OFFSET_FIX_SHADOW_DEFECT = 0.25;
+const arrowDimensionBase13 = arrowWidth / 13;
+const OFFSET_FIX_SHADOW_DEFECT_BASE13 = OFFSET_FIX_SHADOW_DEFECT / 13;
+const arrowDimensionBase16 = arrowWidth / 16;
+const OFFSET_FIX_SHADOW_DEFECT_BASE16 = OFFSET_FIX_SHADOW_DEFECT / 16;
+const arrowPlacementBase13 = arrowDimensionBase13 - OFFSET_FIX_SHADOW_DEFECT_BASE13;
+const arrowPlacementBase16 = arrowDimensionBase16 - OFFSET_FIX_SHADOW_DEFECT_BASE16;
+const isTopOrBottom = (placement) => placement.startsWith("top") || placement.startsWith("bottom");
+const isLeftOrRight = (placement) => placement.startsWith("left") || placement.startsWith("right");
 const StyledArrow = (0, import_ds_system.styled)("div", {
   name: import_constants.DSFloatingWrapperName,
   slot: import_constants.DSFloatingWrapperSlots.ARROW
 })`
+  line-height: 0;
   position: absolute;
-  width: ${arrowWidth}px;
-  height: ${arrowHeight}px;
+  width: ${arrowDimensionBase16}rem;
+  height: ${arrowDimensionBase16}rem;
   pointer-events: none;
   background-color: transparent;
   & .stroke {
@@ -60,7 +68,7 @@ const StyledArrow = (0, import_ds_system.styled)("div", {
     svg {
       transform: rotateZ(180deg);
     }
-    bottom: -${arrowHeight - OFFSET_FIX_SHADOW_DEFECT}px;
+    bottom: -${arrowPlacementBase16}rem;
     left: ${(props) => {
   if (props["data-placement"].endsWith("start")) return `25%`;
   if (props["data-placement"].endsWith("end")) return `75%`;
@@ -71,10 +79,10 @@ const StyledArrow = (0, import_ds_system.styled)("div", {
     svg {
       transform: rotateZ(-90deg);
     }
-    left: -${arrowWidth - OFFSET_FIX_SHADOW_DEFECT}px;
+    left: -${arrowPlacementBase16}rem;
   }
   &[data-placement^='bottom'] {
-    top: -${arrowHeight - OFFSET_FIX_SHADOW_DEFECT}px;
+    top: -${arrowPlacementBase16}rem;
     left: ${(props) => {
   if (props["data-placement"].endsWith("start")) return `25%`;
   if (props["data-placement"].endsWith("end")) return `75%`;
@@ -85,10 +93,35 @@ const StyledArrow = (0, import_ds_system.styled)("div", {
     svg {
       transform: rotateZ(90deg);
     }
-    right: -${arrowWidth - OFFSET_FIX_SHADOW_DEFECT}px;
+    right: -${arrowPlacementBase16}rem;
+  }
+  margin-left: ${(props) => isTopOrBottom(props["data-placement"]) ? `-${arrowDimensionBase16 / 2}rem` : "0"};
+  margin-top: ${(props) => isLeftOrRight(props["data-placement"]) ? `-${arrowDimensionBase16 / 2}rem` : "0"};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    width: ${arrowDimensionBase13}rem;
+    height: ${arrowDimensionBase13}rem;
+
+    &[data-placement^='top'] {
+      bottom: -${arrowPlacementBase13}rem;
+    }
+
+    &[data-placement^='bottom'] {
+      top: -${arrowPlacementBase13}rem;
+    }
+
+    &[data-placement^='left'] {
+      right: -${arrowPlacementBase13}rem;
+    }
+
+    &[data-placement^='right'] {
+      left: -${arrowPlacementBase13}rem;
+    }
+
+    margin-left: ${(props) => isTopOrBottom(props["data-placement"]) ? `-${arrowDimensionBase13 / 2}rem` : "0"};
+
+    margin-top: ${(props) => isLeftOrRight(props["data-placement"]) ? `-${arrowDimensionBase13 / 2}rem` : "0"};
   }
-  margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
-  margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
 `;
 const StylePathShadow = (0, import_ds_system.styled)("path", {
   name: import_constants.DSFloatingWrapperName,

package/dist/cjs/parts/PopoverArrow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/PopoverArrow.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT\n  extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n  placement: string;\n  style: React.CSSProperties;\n  arrowElementRef?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst arrowHeight = 18;\n\nconst OFFSET_FIX_SHADOW_DEFECT = 0.25;\nconst StyledArrow = styled('div', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW,\n})<{ 'data-placement': string }>`\n  position: absolute;\n  width: ${arrowWidth}px;\n  height: ${arrowHeight}px;\n  pointer-events: none;\n  background-color: transparent;\n  & .stroke {\n    fill: rgb(105, 116, 137);\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: rgb(255, 255, 255);\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowHeight - OFFSET_FIX_SHADOW_DEFECT}px;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowWidth - OFFSET_FIX_SHADOW_DEFECT}px;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowHeight - OFFSET_FIX_SHADOW_DEFECT}px;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowWidth - OFFSET_FIX_SHADOW_DEFECT}px;\n  }\n  margin-left: ${(props) =>\n    props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom')\n      ? `-${arrowWidth / 2}px;`\n      : '0;'};\n  margin-top: ${(props) =>\n    props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right')\n      ? `-${arrowHeight / 2}px;`\n      : '0;'};\n`;\n\nconst StylePathShadow = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_SHADOW,\n})``;\n\nconst StylePathFill = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_FILL,\n})``;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }: PopoverArrowT): React.ReactElement => {\n  const ownerProps = useOwnerProps(rest);\n  const globalAttributes = useGetGlobalAttributes(rest);\n  const xstyledProps = useGetXstyledProps(rest);\n  return (\n    <StyledArrow\n      key=\"popper-arrow\"\n      data-placement={placement}\n      style={style}\n      innerRef={arrowElementRef}\n      data-testid=\"ds-tooltip-arrow\"\n      aria-hidden=\"true\"\n      {...ownerProps}\n      {...globalAttributes}\n      {...xstyledProps}\n    >\n      <svg viewBox=\"0 0 30 30\">\n        <StylePathShadow\n          {...ownerProps}\n          className=\"stroke\"\n          d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z\"\n        />\n        <StylePathFill\n          {...ownerProps}\n          className=\"fill\"\n          d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n        />\n      </svg>\n    </StyledArrow>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmGjB;AAlGN,8BAA0E;AAC1E,uBAAuB;AAEvB,uBAA8D;AAO9D,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,2BAA2B;AACjC,MAAM,kBAAc,yBAAO,OAAO;AAAA,EAChC,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAAA;AAAA,WAEU,UAAU;AAAA,YACT,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAeR,cAAc,wBAAwB;AAAA,YACzC,CAAC,UAAU;AACjB,MAAI,MAAM,gBAAgB,EAAE,SAAS,OAAO,EAAG,QAAO;AACtD,MAAI,MAAM,gBAAgB,EAAE,SAAS,KAAK,EAAG,QAAO;AACpD,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMQ,aAAa,wBAAwB;AAAA;AAAA;AAAA,YAGtC,cAAc,wBAAwB;AAAA,YACtC,CAAC,UAAU;AACjB,MAAI,MAAM,gBAAgB,EAAE,SAAS,OAAO,EAAG,QAAO;AACtD,MAAI,MAAM,gBAAgB,EAAE,SAAS,KAAK,EAAG,QAAO;AACpD,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMS,aAAa,wBAAwB;AAAA;AAAA,iBAElC,CAAC,UACd,MAAM,gBAAgB,EAAE,WAAW,KAAK,KAAK,MAAM,gBAAgB,EAAE,WAAW,QAAQ,IACpF,IAAI,aAAa,CAAC,QAClB,IAAI;AAAA,gBACI,CAAC,UACb,MAAM,gBAAgB,EAAE,WAAW,MAAM,KAAK,MAAM,gBAAgB,EAAE,WAAW,OAAO,IACpF,IAAI,cAAc,CAAC,QACnB,IAAI;AAAA;AAGZ,MAAM,sBAAkB,yBAAO,QAAQ;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAED,MAAM,oBAAgB,yBAAO,QAAQ;AAAA,EACnC,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAEM,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,iBAAiB,GAAG,KAAK,MAAyC;AACjH,QAAM,iBAAa,uCAAc,IAAI;AACrC,QAAM,uBAAmB,gDAAuB,IAAI;AACpD,QAAM,mBAAe,4CAAmB,IAAI;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,kBAAgB;AAAA,MAChB;AAAA,MACA,UAAU;AAAA,MACV,eAAY;AAAA,MACZ,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,uDAAC,SAAI,SAAQ,aACX;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAU;AAAA,YACV,GAAE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAU;AAAA,YACV,GAAE;AAAA;AAAA,QACJ;AAAA,SACF;AAAA;AAAA,IAtBI;AAAA,EAuBN;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT\n  extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n  placement: string;\n  style: React.CSSProperties;\n  arrowElementRef?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst OFFSET_FIX_SHADOW_DEFECT = 0.25;\n\nconst arrowDimensionBase13 = arrowWidth / 13;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE13 = OFFSET_FIX_SHADOW_DEFECT / 13;\nconst arrowDimensionBase16 = arrowWidth / 16;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE16 = OFFSET_FIX_SHADOW_DEFECT / 16;\n\nconst arrowPlacementBase13 = arrowDimensionBase13 - OFFSET_FIX_SHADOW_DEFECT_BASE13;\nconst arrowPlacementBase16 = arrowDimensionBase16 - OFFSET_FIX_SHADOW_DEFECT_BASE16;\n\nconst isTopOrBottom = (placement: string) => placement.startsWith('top') || placement.startsWith('bottom');\n\nconst isLeftOrRight = (placement: string) => placement.startsWith('left') || placement.startsWith('right');\n\nconst StyledArrow = styled('div', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW,\n})<{ 'data-placement': string }>`\n  line-height: 0;\n  position: absolute;\n  width: ${arrowDimensionBase16}rem;\n  height: ${arrowDimensionBase16}rem;\n  pointer-events: none;\n  background-color: transparent;\n  & .stroke {\n    fill: rgb(105, 116, 137);\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: rgb(255, 255, 255);\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowPlacementBase16}rem;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowPlacementBase16}rem;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowPlacementBase16}rem;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowPlacementBase16}rem;\n  }\n  margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n  margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    width: ${arrowDimensionBase13}rem;\n    height: ${arrowDimensionBase13}rem;\n\n    &[data-placement^='top'] {\n      bottom: -${arrowPlacementBase13}rem;\n    }\n\n    &[data-placement^='bottom'] {\n      top: -${arrowPlacementBase13}rem;\n    }\n\n    &[data-placement^='left'] {\n      right: -${arrowPlacementBase13}rem;\n    }\n\n    &[data-placement^='right'] {\n      left: -${arrowPlacementBase13}rem;\n    }\n\n    margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n\n    margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n  }\n`;\n\nconst StylePathShadow = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_SHADOW,\n})``;\n\nconst StylePathFill = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_FILL,\n})``;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }: PopoverArrowT): React.ReactElement => {\n  const ownerProps = useOwnerProps(rest);\n  const globalAttributes = useGetGlobalAttributes(rest);\n  const xstyledProps = useGetXstyledProps(rest);\n  return (\n    <StyledArrow\n      key=\"popper-arrow\"\n      data-placement={placement}\n      style={style}\n      innerRef={arrowElementRef}\n      data-testid=\"ds-tooltip-arrow\"\n      aria-hidden=\"true\"\n      {...ownerProps}\n      {...globalAttributes}\n      {...xstyledProps}\n    >\n      <svg viewBox=\"0 0 30 30\">\n        <StylePathShadow\n          {...ownerProps}\n          className=\"stroke\"\n          d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z\"\n        />\n        <StylePathFill\n          {...ownerProps}\n          className=\"fill\"\n          d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n        />\n      </svg>\n    </StyledArrow>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-floating-context-valid.js

@@ -0,0 +1,94 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import__ = require("../index.js");
+const testOptionalProps = {};
+const testPartialDefaults = {
+  withoutAnimation: false,
+  withoutPortal: false,
+  animationDuration: 300
+};
+const testCompleteDefaults = {
+  withoutAnimation: false,
+  withoutPortal: false,
+  animationDuration: 300,
+  placement: "top",
+  customOffset: [10, 10],
+  portalDOMContainer: document.body
+};
+const testInternalProps = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  animationDuration: 300,
+  withoutAnimation: false,
+  withoutPortal: false,
+  placement: "top",
+  customOffset: [10, 10],
+  portalDOMContainer: document.body,
+  ...testOptionalProps
+};
+const testInferedTypeCompatibility = {
+  ...testOptionalProps,
+  ...testPartialDefaults,
+  animationDuration: 300
+};
+const testDefinitionAsConst = {
+  animationDuration: 300,
+  withoutAnimation: false,
+  withoutPortal: false,
+  placement: "top",
+  portalDOMContainer: document.body
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.FloatingWrapper,
+    {
+      ...testExplicitDefinition,
+      innerRef: import_react.default.createRef(),
+      isOpen: true,
+      floatingStyles: {},
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Content" })
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.FloatingWrapper,
+    {
+      ...testInferedTypeCompatibility,
+      innerRef: import_react.default.createRef(),
+      isOpen: true,
+      floatingStyles: {},
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Content" })
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.FloatingWrapper, { ...testDefinitionAsConst, innerRef: import_react.default.createRef(), isOpen: true, floatingStyles: {}, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Content" }) })
+] });
+//# sourceMappingURL=typescript-floating-context-valid.js.map

package/dist/cjs/typescript-testing/typescript-floating-context-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-floating-context-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { FloatingWrapper } from '../index.js';\nimport type { DSHookFloatingContextT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSHookFloatingContextT.Props;\ntype ComponentPropsInternals = DSHookFloatingContextT.InternalProps;\ntype ComponentPropsDefaultProps = DSHookFloatingContextT.DefaultProps;\ntype ComponentPropsOptionalProps = DSHookFloatingContextT.OptionalProps;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  withoutAnimation: false,\n  withoutPortal: false,\n  animationDuration: 300,\n};\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  withoutAnimation: false,\n  withoutPortal: false,\n  animationDuration: 300,\n  placement: 'top',\n  customOffset: [10, 10],\n  portalDOMContainer: document.body,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  animationDuration: 300,\n  withoutAnimation: false,\n  withoutPortal: false,\n  placement: 'top',\n  customOffset: [10, 10],\n  portalDOMContainer: document.body,\n  ...testOptionalProps,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n  animationDuration: 300,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  animationDuration: 300,\n  withoutAnimation: false,\n  withoutPortal: false,\n  placement: 'top',\n  portalDOMContainer: document.body,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <FloatingWrapper\n      {...testExplicitDefinition}\n      innerRef={React.createRef<HTMLDivElement>()}\n      isOpen\n      floatingStyles={{}}\n    >\n      <div>Content</div>\n    </FloatingWrapper>\n    <FloatingWrapper\n      {...testInferedTypeCompatibility}\n      innerRef={React.createRef<HTMLDivElement>()}\n      isOpen\n      floatingStyles={{}}\n    >\n      <div>Content</div>\n    </FloatingWrapper>\n    <FloatingWrapper {...testDefinitionAsConst} innerRef={React.createRef<HTMLDivElement>()} isOpen floatingStyles={{}}>\n      <div>Content</div>\n    </FloatingWrapper>\n    {/* works with inline values */}\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACoErB;AAnEF,mBAAkB;AAClB,eAAgC;AAShC,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,mBAAmB;AACrB;AAGA,MAAM,uBAA6D;AAAA,EACjE,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,cAAc,CAAC,IAAI,EAAE;AAAA,EACrB,oBAAoB,SAAS;AAC/B;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc,CAAC,IAAI,EAAE;AAAA,EACrB,oBAAoB,SAAS;AAAA,EAC7B,GAAG;AACL;AAGA,MAAM,+BAA+B;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,mBAAmB;AACrB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,oBAAoB,SAAS;AAC/B;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,aAAAA,QAAM,UAA0B;AAAA,MAC1C,QAAM;AAAA,MACN,gBAAgB,CAAC;AAAA,MAEjB,sDAAC,SAAI,qBAAO;AAAA;AAAA,EACd;AAAA,EACA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,aAAAA,QAAM,UAA0B;AAAA,MAC1C,QAAM;AAAA,MACN,gBAAgB,CAAC;AAAA,MAEjB,sDAAC,SAAI,qBAAO;AAAA;AAAA,EACd;AAAA,EACA,4CAAC,4BAAiB,GAAG,uBAAuB,UAAU,aAAAA,QAAM,UAA0B,GAAG,QAAM,MAAC,gBAAgB,CAAC,GAC/G,sDAAC,SAAI,qBAAO,GACd;AAAA,GAEF;",
+  "names": ["React"]
+}