@elliemae/ds-floating-context 3.48.2-next.0 → 3.49.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSFloatingContext.js +4 -2
- package/dist/cjs/DSFloatingContext.js.map +2 -2
- package/dist/cjs/parts/FloatingWrapper/FloatingWrapper.js +1 -1
- package/dist/cjs/parts/FloatingWrapper/FloatingWrapper.js.map +2 -2
- package/dist/esm/DSFloatingContext.js +4 -2
- package/dist/esm/DSFloatingContext.js.map +2 -2
- package/dist/esm/parts/FloatingWrapper/FloatingWrapper.js +1 -1
- package/dist/esm/parts/FloatingWrapper/FloatingWrapper.js.map +2 -2
- package/dist/types/DSFloatingContext.d.ts +2 -0
- package/package.json +6 -6
|
@@ -101,9 +101,11 @@ const useFloatingContext = (props = {}) => {
|
|
|
101
101
|
const refs = import_react.default.useMemo(
|
|
102
102
|
() => ({
|
|
103
103
|
setReference,
|
|
104
|
-
setFloating
|
|
104
|
+
setFloating,
|
|
105
|
+
floating,
|
|
106
|
+
reference
|
|
105
107
|
}),
|
|
106
|
-
[setReference,
|
|
108
|
+
[setReference, floating, reference]
|
|
107
109
|
);
|
|
108
110
|
const handlers = import_react.default.useMemo(
|
|
109
111
|
() => ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSFloatingContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable arrow-body-style */\n/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { debounce } from 'lodash';\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 CSSProperties } from 'styled-components';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.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 } = propsWithDefault;\n\n const tooltipHelpers = useHeadlessTooltip({ onOpen, onClose });\n\n const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n });\n const [arrowStyles, setArrowStyles] = useState<{ style: CSSProperties; placement: string }>({\n style: { left: 0 },\n placement: 'top',\n });\n\n const [reference, _setReference] = React.useState<Element | null>(null);\n const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n useEffect(() => {\n const update = () => {\n if (reference && floating) {\n const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n });\n\n const styles: CSSProperties = {\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n ...coordsStyle,\n };\n setFloatingStyles(styles);\n setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n }\n };\n\n // initial position calculation\n update();\n\n const debouncedCb = debounce(update, 300);\n\n // auto update position on scrolling\n window.addEventListener('scroll', debouncedCb);\n\n return () => {\n window.removeEventListener('scroll', debouncedCb);\n };\n }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n const setReference = mergeRefs(_setReference, setReferenceElement);\n\n const refs = React.useMemo(\n () => ({\n setReference,\n setFloating,\n }),\n [setReference,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMvB,mBAAoD;AACpD,oBAAyB;AACzB,8BAKO;AACP,uCAAmC;AAEnC,uBAA0B;AAC1B,6BAAgC;AAEhC,mCAAyD;AAEzD,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,EACF,IAAI;AAEJ,QAAM,qBAAiB,qDAAmB,EAAE,QAAQ,QAAQ,CAAC;AAE7D,QAAM,EAAE,qBAAqB,aAAa,YAAY,IAAI;AAC1D,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAsD;AAAA,IAC1F,OAAO,EAAE,MAAM,EAAE;AAAA,IACjB,WAAW;AAAA,EACb,CAAC;AAED,QAAM,CAAC,WAAW,aAAa,IAAI,aAAAA,QAAM,SAAyB,IAAI;AACtE,QAAM,CAAC,UAAU,WAAW,IAAI,aAAAA,QAAM,SAA6B,IAAI;AACvE,8BAAU,MAAM;AACd,UAAM,SAAS,MAAM;AACnB,UAAI,aAAa,UAAU;AACzB,cAAM,EAAE,aAAa,gBAAgB,YAAY,QAAI,wCAAgB;AAAA,UACnE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAED,cAAM,SAAwB;AAAA,UAC5B,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,MAAM;AAAA,UACN,GAAG;AAAA,QACL;AACA,0BAAkB,MAAM;AACxB,uBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAAA,MAClE;AAAA,IACF;AAGA,WAAO;AAEP,UAAM,kBAAc,wBAAS,QAAQ,GAAG;AAGxC,WAAO,iBAAiB,UAAU,WAAW;AAE7C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,WAAW;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAE1F,QAAM,mBAAe,4BAAU,eAAe,mBAAmB;AAEjE,QAAM,OAAO,aAAAA,QAAM;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable arrow-body-style */\n/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { debounce } from 'lodash';\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 CSSProperties } from 'styled-components';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.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 } = propsWithDefault;\n\n const tooltipHelpers = useHeadlessTooltip({ onOpen, onClose });\n\n const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n });\n const [arrowStyles, setArrowStyles] = useState<{ style: CSSProperties; placement: string }>({\n style: { left: 0 },\n placement: 'top',\n });\n\n const [reference, _setReference] = React.useState<Element | null>(null);\n const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n useEffect(() => {\n const update = () => {\n if (reference && floating) {\n const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n });\n\n const styles: CSSProperties = {\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n ...coordsStyle,\n };\n setFloatingStyles(styles);\n setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n }\n };\n\n // initial position calculation\n update();\n\n const debouncedCb = debounce(update, 300);\n\n // auto update position on scrolling\n window.addEventListener('scroll', debouncedCb);\n\n return () => {\n window.removeEventListener('scroll', debouncedCb);\n };\n }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n const setReference = mergeRefs(_setReference, setReferenceElement);\n\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: tooltipHelpers.shouldShowPopover,\n arrowStyles,\n hideTooltip,\n showTooltip,\n context: {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n },\n }),\n [\n animationDuration,\n arrowStyles,\n floatingStyles,\n handlers,\n hideTooltip,\n portalDOMContainer,\n refs,\n showTooltip,\n tooltipHelpers.shouldShowPopover,\n withoutAnimation,\n withoutPortal,\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -52,7 +52,7 @@ const ContentComponent = import_react.default.memo(
|
|
|
52
52
|
withoutAnimation,
|
|
53
53
|
handleAnimationEnd,
|
|
54
54
|
xstyledProps
|
|
55
|
-
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFloatingWrapper, { innerRef, style: floatingStyles, ...xstyledProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFloatingWrapper, { innerRef, style: floatingStyles, ...xstyledProps, role: "complementary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
56
|
import_styled.StyledFloatingAnimation,
|
|
57
57
|
{
|
|
58
58
|
onAnimationEnd: handleAnimationEnd,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/FloatingWrapper/FloatingWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap } 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 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 }) => (\n <StyledFloatingWrapper innerRef={innerRef} style={floatingStyles} {...xstyledProps}>\n <StyledFloatingAnimation\n onAnimationEnd={handleAnimationEnd}\n isOpen={isOpen}\n animationDuration={animationDuration}\n withoutAnimation={withoutAnimation}\n >\n {children}\n </StyledFloatingAnimation>\n </StyledFloatingWrapper>\n ),\n);\n\nconst FloatingWrapper: React.ComponentType<DSFloatingWrapperT.Props> = (props) => {\n const { propsWithDefault, xstyledProps } = useFloatingWrapper(props);\n const { isOpen } = propsWithDefault;\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 {...contentProps}\n {...context}\n handleAnimationEnd={handleAnimationEnd}\n />\n );\n if (!withoutPortal)\n return (\n <>\n {createPortal(\n <ContentComponent\n xstyledProps={xstyledProps}\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"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BjB;AA7BN,mBAAkB;AAClB,uBAA6B;AAC7B,8BAA6C;AAC7C,oBAA+D;AAC/D,mCAAoE;AACpE,gCAAmC;AACnC,uBAAsC;AACtC,2CAA8C;AAU9C,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE,4CAAC,uCAAsB,UAAoB,OAAO,gBAAiB,GAAG,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap } 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 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 }) => (\n <StyledFloatingWrapper innerRef={innerRef} style={floatingStyles} {...xstyledProps} role=\"complementary\">\n <StyledFloatingAnimation\n onAnimationEnd={handleAnimationEnd}\n isOpen={isOpen}\n animationDuration={animationDuration}\n withoutAnimation={withoutAnimation}\n >\n {children}\n </StyledFloatingAnimation>\n </StyledFloatingWrapper>\n ),\n);\n\nconst FloatingWrapper: React.ComponentType<DSFloatingWrapperT.Props> = (props) => {\n const { propsWithDefault, xstyledProps } = useFloatingWrapper(props);\n const { isOpen } = propsWithDefault;\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 {...contentProps}\n {...context}\n handleAnimationEnd={handleAnimationEnd}\n />\n );\n if (!withoutPortal)\n return (\n <>\n {createPortal(\n <ContentComponent\n xstyledProps={xstyledProps}\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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BjB;AA7BN,mBAAkB;AAClB,uBAA6B;AAC7B,8BAA6C;AAC7C,oBAA+D;AAC/D,mCAAoE;AACpE,gCAAmC;AACnC,uBAAsC;AACtC,2CAA8C;AAU9C,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE,4CAAC,uCAAsB,UAAoB,OAAO,gBAAiB,GAAG,cAAc,MAAK,iBACvF;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,MAAM,kBAAiE,CAAC,UAAU;AAChF,QAAM,EAAE,kBAAkB,aAAa,QAAI,8CAAmB,KAAK;AACnE,QAAM,EAAE,OAAO,IAAI;AAEnB,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,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ;AAAA;AAAA,MACF;AAEJ,QAAI,CAAC;AACH,aACE,2EACG;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC;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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -71,9 +71,11 @@ const useFloatingContext = (props = {}) => {
|
|
|
71
71
|
const refs = React2.useMemo(
|
|
72
72
|
() => ({
|
|
73
73
|
setReference,
|
|
74
|
-
setFloating
|
|
74
|
+
setFloating,
|
|
75
|
+
floating,
|
|
76
|
+
reference
|
|
75
77
|
}),
|
|
76
|
-
[setReference,
|
|
78
|
+
[setReference, floating, reference]
|
|
77
79
|
);
|
|
78
80
|
const handlers = React2.useMemo(
|
|
79
81
|
() => ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSFloatingContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable arrow-body-style */\n/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { debounce } from 'lodash';\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 CSSProperties } from 'styled-components';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.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 } = propsWithDefault;\n\n const tooltipHelpers = useHeadlessTooltip({ onOpen, onClose });\n\n const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n });\n const [arrowStyles, setArrowStyles] = useState<{ style: CSSProperties; placement: string }>({\n style: { left: 0 },\n placement: 'top',\n });\n\n const [reference, _setReference] = React.useState<Element | null>(null);\n const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n useEffect(() => {\n const update = () => {\n if (reference && floating) {\n const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n });\n\n const styles: CSSProperties = {\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n ...coordsStyle,\n };\n setFloatingStyles(styles);\n setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n }\n };\n\n // initial position calculation\n update();\n\n const debouncedCb = debounce(update, 300);\n\n // auto update position on scrolling\n window.addEventListener('scroll', debouncedCb);\n\n return () => {\n window.removeEventListener('scroll', debouncedCb);\n };\n }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n const setReference = mergeRefs(_setReference, setReferenceElement);\n\n const refs = React.useMemo(\n () => ({\n setReference,\n setFloating,\n }),\n [setReference,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACMvB,OAAOA,UAAS,UAAU,WAAW,eAAe;AACpD,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,0BAA0B;AAEnC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,SAAS,cAAc,kCAAkC;AAEzD,MAAM,qBAAqB,CAAC,QAAsC,CAAC,MAAM;AACvE,QAAM,mBAAmB,6BAAmE,OAAO,YAAY;AAC/G,iCAA+B,kBAAkB,4BAA4B,iBAAiB;AAE9F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,iBAAiB,mBAAmB,EAAE,QAAQ,QAAQ,CAAC;AAE7D,QAAM,EAAE,qBAAqB,aAAa,YAAY,IAAI;AAC1D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsD;AAAA,IAC1F,OAAO,EAAE,MAAM,EAAE;AAAA,IACjB,WAAW;AAAA,EACb,CAAC;AAED,QAAM,CAAC,WAAW,aAAa,IAAIA,OAAM,SAAyB,IAAI;AACtE,QAAM,CAAC,UAAU,WAAW,IAAIA,OAAM,SAA6B,IAAI;AACvE,YAAU,MAAM;AACd,UAAM,SAAS,MAAM;AACnB,UAAI,aAAa,UAAU;AACzB,cAAM,EAAE,aAAa,gBAAgB,YAAY,IAAI,gBAAgB;AAAA,UACnE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAED,cAAM,SAAwB;AAAA,UAC5B,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,MAAM;AAAA,UACN,GAAG;AAAA,QACL;AACA,0BAAkB,MAAM;AACxB,uBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAAA,MAClE;AAAA,IACF;AAGA,WAAO;AAEP,UAAM,cAAc,SAAS,QAAQ,GAAG;AAGxC,WAAO,iBAAiB,UAAU,WAAW;AAE7C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,WAAW;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAE1F,QAAM,eAAe,UAAU,eAAe,mBAAmB;AAEjE,QAAM,OAAOA,OAAM;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable arrow-body-style */\n/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { debounce } from 'lodash';\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 CSSProperties } from 'styled-components';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.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 } = propsWithDefault;\n\n const tooltipHelpers = useHeadlessTooltip({ onOpen, onClose });\n\n const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n });\n const [arrowStyles, setArrowStyles] = useState<{ style: CSSProperties; placement: string }>({\n style: { left: 0 },\n placement: 'top',\n });\n\n const [reference, _setReference] = React.useState<Element | null>(null);\n const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n useEffect(() => {\n const update = () => {\n if (reference && floating) {\n const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n });\n\n const styles: CSSProperties = {\n position: 'absolute',\n zIndex: 3000,\n top: 0,\n left: 0,\n ...coordsStyle,\n };\n setFloatingStyles(styles);\n setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n }\n };\n\n // initial position calculation\n update();\n\n const debouncedCb = debounce(update, 300);\n\n // auto update position on scrolling\n window.addEventListener('scroll', debouncedCb);\n\n return () => {\n window.removeEventListener('scroll', debouncedCb);\n };\n }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n const setReference = mergeRefs(_setReference, setReferenceElement);\n\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: tooltipHelpers.shouldShowPopover,\n arrowStyles,\n hideTooltip,\n showTooltip,\n context: {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n },\n }),\n [\n animationDuration,\n arrowStyles,\n floatingStyles,\n handlers,\n hideTooltip,\n portalDOMContainer,\n refs,\n showTooltip,\n tooltipHelpers.shouldShowPopover,\n withoutAnimation,\n withoutPortal,\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -18,7 +18,7 @@ const ContentComponent = React2.memo(
|
|
|
18
18
|
withoutAnimation,
|
|
19
19
|
handleAnimationEnd,
|
|
20
20
|
xstyledProps
|
|
21
|
-
}) => /* @__PURE__ */ jsx(StyledFloatingWrapper, { innerRef, style: floatingStyles, ...xstyledProps, children: /* @__PURE__ */ jsx(
|
|
21
|
+
}) => /* @__PURE__ */ jsx(StyledFloatingWrapper, { innerRef, style: floatingStyles, ...xstyledProps, role: "complementary", children: /* @__PURE__ */ jsx(
|
|
22
22
|
StyledFloatingAnimation,
|
|
23
23
|
{
|
|
24
24
|
onAnimationEnd: handleAnimationEnd,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FloatingWrapper/FloatingWrapper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap } 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 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 }) => (\n <StyledFloatingWrapper innerRef={innerRef} style={floatingStyles} {...xstyledProps}>\n <StyledFloatingAnimation\n onAnimationEnd={handleAnimationEnd}\n isOpen={isOpen}\n animationDuration={animationDuration}\n withoutAnimation={withoutAnimation}\n >\n {children}\n </StyledFloatingAnimation>\n </StyledFloatingWrapper>\n ),\n);\n\nconst FloatingWrapper: React.ComponentType<DSFloatingWrapperT.Props> = (props) => {\n const { propsWithDefault, xstyledProps } = useFloatingWrapper(props);\n const { isOpen } = propsWithDefault;\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 {...contentProps}\n {...context}\n handleAnimationEnd={handleAnimationEnd}\n />\n );\n if (!withoutPortal)\n return (\n <>\n {createPortal(\n <ContentComponent\n xstyledProps={xstyledProps}\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC6BjB,SA+CE,UA/CF;AA7BN,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,gBAAoC;AAC7C,SAAS,yBAAyB,6BAA6B;AAC/D,SAAkC,kCAAkC;AACpE,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,qCAAqC;AAU9C,MAAM,mBAAmBA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE,oBAAC,yBAAsB,UAAoB,OAAO,gBAAiB,GAAG,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap } 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 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 }) => (\n <StyledFloatingWrapper innerRef={innerRef} style={floatingStyles} {...xstyledProps} role=\"complementary\">\n <StyledFloatingAnimation\n onAnimationEnd={handleAnimationEnd}\n isOpen={isOpen}\n animationDuration={animationDuration}\n withoutAnimation={withoutAnimation}\n >\n {children}\n </StyledFloatingAnimation>\n </StyledFloatingWrapper>\n ),\n);\n\nconst FloatingWrapper: React.ComponentType<DSFloatingWrapperT.Props> = (props) => {\n const { propsWithDefault, xstyledProps } = useFloatingWrapper(props);\n const { isOpen } = propsWithDefault;\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 {...contentProps}\n {...context}\n handleAnimationEnd={handleAnimationEnd}\n />\n );\n if (!withoutPortal)\n return (\n <>\n {createPortal(\n <ContentComponent\n xstyledProps={xstyledProps}\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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6BjB,SA+CE,UA/CF;AA7BN,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,gBAAoC;AAC7C,SAAS,yBAAyB,6BAA6B;AAC/D,SAAkC,kCAAkC;AACpE,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,qCAAqC;AAU9C,MAAM,mBAAmBA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE,oBAAC,yBAAsB,UAAoB,OAAO,gBAAiB,GAAG,cAAc,MAAK,iBACvF;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,MAAM,kBAAiE,CAAC,UAAU;AAChF,QAAM,EAAE,kBAAkB,aAAa,IAAI,mBAAmB,KAAK;AACnE,QAAM,EAAE,OAAO,IAAI;AAEnB,QAAM,EAAE,SAAS,gBAAgB,2BAA2B,GAAG,aAAa,IAAI;AAChF,QAAM,EAAE,oBAAoB,eAAe,iBAAiB,IAAI;AAEhE,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAC1D,EAAAA,OAAM,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,qBAAqBA,OAAM;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,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ;AAAA;AAAA,MACF;AAEJ,QAAI,CAAC;AACH,aACE,gCACG;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA;AAAA,QACF;AAAA,QACA,sBAAsB,8BAA8B;AAAA,MACtD,GACF;AAAA,EAEN;AACA,SAAO;AACT;AAEA,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -6,6 +6,8 @@ declare const useFloatingContext: {
|
|
|
6
6
|
refs: {
|
|
7
7
|
setReference: (node: HTMLElement | null) => void;
|
|
8
8
|
setFloating: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
|
|
9
|
+
floating: HTMLElement | null;
|
|
10
|
+
reference: Element | null;
|
|
9
11
|
};
|
|
10
12
|
floatingStyles: CSSProperties;
|
|
11
13
|
handlers: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-floating-context",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.49.0-beta.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Popper Hook",
|
|
6
6
|
"files": [
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-hooks-headless-tooltip": "3.
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-hooks-headless-tooltip": "3.49.0-beta.1",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.49.0-beta.1",
|
|
41
|
+
"@elliemae/ds-system": "3.49.0-beta.1",
|
|
42
|
+
"@elliemae/ds-typescript-helpers": "3.49.0-beta.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
46
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
46
|
+
"@elliemae/ds-monorepo-devops": "3.49.0-beta.1"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"lodash": "^4.17.21",
|