@elliemae/ds-floating-context 3.46.0-rc.6 → 3.46.0-rc.8
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/parts/FloatingWrapper/FloatingWrapper.js +10 -19
- package/dist/cjs/parts/FloatingWrapper/FloatingWrapper.js.map +2 -2
- package/dist/cjs/parts/FloatingWrapper/react-desc-prop-types.js +1 -2
- package/dist/cjs/parts/FloatingWrapper/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +1 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/utils/getDocumentMainLandmarkOrBody.js +44 -0
- package/dist/cjs/utils/getDocumentMainLandmarkOrBody.js.map +7 -0
- package/dist/esm/parts/FloatingWrapper/FloatingWrapper.js +10 -19
- package/dist/esm/parts/FloatingWrapper/FloatingWrapper.js.map +2 -2
- package/dist/esm/parts/FloatingWrapper/react-desc-prop-types.js +1 -2
- package/dist/esm/parts/FloatingWrapper/react-desc-prop-types.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/utils/getDocumentMainLandmarkOrBody.js +14 -0
- package/dist/esm/utils/getDocumentMainLandmarkOrBody.js.map +7 -0
- package/dist/types/DSFloatingContext.d.ts +1 -1
- package/dist/types/parts/FloatingWrapper/react-desc-prop-types.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +1 -1
- package/dist/types/utils/getDocumentMainLandmarkOrBody.d.ts +1 -0
- package/package.json +6 -6
|
@@ -41,36 +41,27 @@ var import_styled = require("./styled.js");
|
|
|
41
41
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
42
42
|
var import_useFloatingWrapper = require("./config/useFloatingWrapper.js");
|
|
43
43
|
var import_constants = require("./constants/index.js");
|
|
44
|
+
var import_getDocumentMainLandmarkOrBody = require("../../utils/getDocumentMainLandmarkOrBody.js");
|
|
44
45
|
const ContentComponent = import_react.default.memo(
|
|
45
46
|
({
|
|
46
47
|
children,
|
|
47
48
|
innerRef,
|
|
48
49
|
floatingStyles,
|
|
49
50
|
isOpen,
|
|
50
|
-
withoutPortal,
|
|
51
51
|
animationDuration,
|
|
52
52
|
withoutAnimation,
|
|
53
53
|
handleAnimationEnd,
|
|
54
54
|
xstyledProps
|
|
55
|
-
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
|
-
import_styled.
|
|
55
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFloatingWrapper, { innerRef, style: floatingStyles, ...xstyledProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
|
+
import_styled.StyledFloatingAnimation,
|
|
57
57
|
{
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
children
|
|
63
|
-
import_styled.StyledFloatingAnimation,
|
|
64
|
-
{
|
|
65
|
-
onAnimationEnd: handleAnimationEnd,
|
|
66
|
-
isOpen,
|
|
67
|
-
animationDuration,
|
|
68
|
-
withoutAnimation,
|
|
69
|
-
children
|
|
70
|
-
}
|
|
71
|
-
)
|
|
58
|
+
onAnimationEnd: handleAnimationEnd,
|
|
59
|
+
isOpen,
|
|
60
|
+
animationDuration,
|
|
61
|
+
withoutAnimation,
|
|
62
|
+
children
|
|
72
63
|
}
|
|
73
|
-
)
|
|
64
|
+
) })
|
|
74
65
|
);
|
|
75
66
|
const FloatingWrapper = (props) => {
|
|
76
67
|
const { propsWithDefault, xstyledProps } = (0, import_useFloatingWrapper.useFloatingWrapper)(props);
|
|
@@ -113,7 +104,7 @@ const FloatingWrapper = (props) => {
|
|
|
113
104
|
handleAnimationEnd
|
|
114
105
|
}
|
|
115
106
|
),
|
|
116
|
-
portalDOMContainer ||
|
|
107
|
+
portalDOMContainer || (0, import_getDocumentMainLandmarkOrBody.getDocumentMainLandmarkOrBody)()
|
|
117
108
|
) });
|
|
118
109
|
}
|
|
119
110
|
return null;
|
|
@@ -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';\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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,cACpE;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
|
}
|
|
@@ -38,7 +38,6 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
|
38
38
|
var import_constants = require("./constants/index.js");
|
|
39
39
|
const defaultProps = {
|
|
40
40
|
context: {
|
|
41
|
-
portalDOMContainer: document.body,
|
|
42
41
|
withoutPortal: false,
|
|
43
42
|
animationDuration: 300,
|
|
44
43
|
withoutAnimation: false
|
|
@@ -53,7 +52,7 @@ const DSFloatingWrapperPropTypes = {
|
|
|
53
52
|
isOpen: import_ds_props_helpers.PropTypes.bool.description("Whether the floating wrapper is open").isRequired,
|
|
54
53
|
floatingStyles: import_ds_props_helpers.PropTypes.object.description("Style for the floating wrapper").isRequired,
|
|
55
54
|
context: import_ds_props_helpers.PropTypes.shape({
|
|
56
|
-
portalDOMContainer: import_ds_props_helpers.PropTypes.instanceOf(HTMLElement).description("DOM
|
|
55
|
+
portalDOMContainer: import_ds_props_helpers.PropTypes.instanceOf(HTMLElement).description("The DOM element where the tooltip will be rendered.").defaultValue('the first "main" landmark available in the document or the body if no "main" is found'),
|
|
57
56
|
withoutPortal: import_ds_props_helpers.PropTypes.bool.description("Whether to render the floating wrapper without a portal"),
|
|
58
57
|
animationDuration: import_ds_props_helpers.PropTypes.number.description("Duration of the animation"),
|
|
59
58
|
withoutAnimation: import_ds_props_helpers.PropTypes.bool.description("Whether to render the floating wrapper without animation")
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/FloatingWrapper/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperName, DSFloatingWrapperSlots } from './constants/index.js';\n\nexport declare namespace DSFloatingWrapperT {\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n isOpen: boolean;\n floatingStyles: React.CSSProperties;\n }\n\n export interface DefaultProps {\n context: {\n portalDOMContainer
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAA8D;AAgDvD,MAAM,eAAyD;AAAA,EACpE,SAAS;AAAA,IACP,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperName, DSFloatingWrapperSlots } from './constants/index.js';\n\nexport declare namespace DSFloatingWrapperT {\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n isOpen: boolean;\n floatingStyles: React.CSSProperties;\n }\n\n export interface DefaultProps {\n context: {\n portalDOMContainer?: HTMLElement;\n withoutPortal: boolean;\n animationDuration: number;\n withoutAnimation: boolean;\n };\n }\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;\n onAnimationStartTriggered?: () => void;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n RequiredProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n RequiredProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export type ExampleState = '0' | '1';\n}\n\nexport const defaultProps: Partial<DSFloatingWrapperT.DefaultProps> = {\n context: {\n withoutPortal: false,\n animationDuration: 300,\n withoutAnimation: false,\n },\n};\n\nexport const DSFloatingWrapperPropTypes: DSPropTypesSchema<DSFloatingWrapperT.InternalProps> = {\n ...getPropsPerSlotPropTypes(DSFloatingWrapperName, DSFloatingWrapperSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.node.description('Content of the floating wrapper').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Ref for the floating wrapper')\n .isRequired,\n isOpen: PropTypes.bool.description('Whether the floating wrapper is open').isRequired,\n floatingStyles: PropTypes.object.description('Style for the floating wrapper').isRequired,\n context: PropTypes.shape({\n portalDOMContainer: PropTypes.instanceOf(HTMLElement)\n .description('The DOM element where the tooltip will be rendered.')\n .defaultValue('the first \"main\" landmark available in the document or the body if no \"main\" is found'),\n withoutPortal: PropTypes.bool.description('Whether to render the floating wrapper without a portal'),\n animationDuration: PropTypes.number.description('Duration of the animation'),\n withoutAnimation: PropTypes.bool.description('Whether to render the floating wrapper without animation'),\n }).description('Context for the floating wrapper'),\n onAnimationStartTriggered: PropTypes.func.description(\n 'Callback invoked when the component trigger the animation start. Required to properly position nested floating context without visual artefacts in case animations are used.',\n ),\n onAnimationEnd: PropTypes.func.description(\n 'Callback when the animation ends. Required to properly position nested floating context without visual artefacts in case animations are used.',\n ),\n};\n\nexport const DSFloatingWrapperPropTypesSchema =\n DSFloatingWrapperPropTypes as unknown as ValidationMap<DSFloatingWrapperT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAA8D;AAgDvD,MAAM,eAAyD;AAAA,EACpE,SAAS;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB;AACF;AAEO,MAAM,6BAAkF;AAAA,EAC7F,OAAG,kDAAyB,wCAAuB,uCAAsB;AAAA,EACzE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,iCAAiC,EAAE;AAAA,EACxE,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B,EACzG;AAAA,EACH,QAAQ,kCAAU,KAAK,YAAY,sCAAsC,EAAE;AAAA,EAC3E,gBAAgB,kCAAU,OAAO,YAAY,gCAAgC,EAAE;AAAA,EAC/E,SAAS,kCAAU,MAAM;AAAA,IACvB,oBAAoB,kCAAU,WAAW,WAAW,EACjD,YAAY,qDAAqD,EACjE,aAAa,uFAAuF;AAAA,IACvG,eAAe,kCAAU,KAAK,YAAY,yDAAyD;AAAA,IACnG,mBAAmB,kCAAU,OAAO,YAAY,2BAA2B;AAAA,IAC3E,kBAAkB,kCAAU,KAAK,YAAY,0DAA0D;AAAA,EACzG,CAAC,EAAE,YAAY,kCAAkC;AAAA,EACjD,2BAA2B,kCAAU,KAAK;AAAA,IACxC;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF;AACF;AAEO,MAAM,mCACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,6 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
|
37
37
|
const defaultProps = {
|
|
38
38
|
withoutAnimation: false,
|
|
39
39
|
animationDuration: 300,
|
|
40
|
-
portalDOMContainer: document.body,
|
|
41
40
|
withoutPortal: false,
|
|
42
41
|
placement: "top",
|
|
43
42
|
customOffset: [12, 12]
|
|
@@ -45,7 +44,7 @@ const defaultProps = {
|
|
|
45
44
|
const DSFloatingContextPropTypes = {
|
|
46
45
|
withoutPortal: import_ds_props_helpers.PropTypes.bool.description("If true, the tooltip will not be rendered inside a portal.").defaultValue(false),
|
|
47
46
|
withoutAnimation: import_ds_props_helpers.PropTypes.bool.description("If true, the tooltip will not have an animation.").defaultValue(false),
|
|
48
|
-
portalDOMContainer: import_ds_props_helpers.PropTypes.instanceOf(HTMLElement).description("The DOM element where the tooltip will be rendered.").defaultValue(document
|
|
47
|
+
portalDOMContainer: import_ds_props_helpers.PropTypes.instanceOf(HTMLElement).description("The DOM element where the tooltip will be rendered.").defaultValue('the first "main" landmark available in the document or the body if no "main" is found'),
|
|
49
48
|
animationDuration: import_ds_props_helpers.PropTypes.number.description("The duration of the animation in milliseconds.").defaultValue(300),
|
|
50
49
|
placement: import_ds_props_helpers.PropTypes.oneOf([
|
|
51
50
|
"top-start",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSHookFloatingContextT {\n export interface DefaultProps {\n withoutPortal: boolean;\n withoutAnimation: boolean;\n portalDOMContainer
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAmCnB,MAAM,eAAoD;AAAA,EAC/D,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSHookFloatingContextT {\n export interface DefaultProps {\n withoutPortal: boolean;\n withoutAnimation: boolean;\n portalDOMContainer?: HTMLElement;\n animationDuration: number;\n placement: PopperPlacementsT;\n customOffset: [number, number];\n }\n\n export interface OptionalProps {\n placementOrderPreference?: PopperPlacementsT[];\n onOpen?: () => void;\n onClose?: () => void;\n }\n export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n export interface InternalProps extends DefaultProps, OptionalProps {}\n\n export type PopperPlacementsT =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n}\n\nexport const defaultProps: DSHookFloatingContextT.DefaultProps = {\n withoutAnimation: false,\n animationDuration: 300,\n withoutPortal: false,\n placement: 'top',\n customOffset: [12, 12],\n};\n\nexport const DSFloatingContextPropTypes: DSPropTypesSchema<DSHookFloatingContextT.Props> = {\n withoutPortal: PropTypes.bool\n .description('If true, the tooltip will not be rendered inside a portal.')\n .defaultValue(false),\n withoutAnimation: PropTypes.bool.description('If true, the tooltip will not have an animation.').defaultValue(false),\n portalDOMContainer: PropTypes.instanceOf(HTMLElement)\n .description('The DOM element where the tooltip will be rendered.')\n .defaultValue('the first \"main\" landmark available in the document or the body if no \"main\" is found'),\n animationDuration: PropTypes.number.description('The duration of the animation in milliseconds.').defaultValue(300),\n placement: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('The placement of the tooltip.')\n .defaultValue('top'),\n customOffset: PropTypes.arrayOf(PropTypes.number)\n .description('The custom offset of the tooltip.')\n .defaultValue([12, 12]),\n placementOrderPreference: PropTypes.oneOfType([\n PropTypes.tuple([PropTypes.oneOf(['top-start'])]),\n PropTypes.tuple([PropTypes.oneOf(['top'])]),\n PropTypes.tuple([PropTypes.oneOf(['top-end'])]),\n PropTypes.tuple([PropTypes.oneOf(['right-start'])]),\n PropTypes.tuple([PropTypes.oneOf(['right'])]),\n PropTypes.tuple([PropTypes.oneOf(['right-end'])]),\n PropTypes.tuple([PropTypes.oneOf(['bottom-end'])]),\n PropTypes.tuple([PropTypes.oneOf(['bottom'])]),\n PropTypes.tuple([PropTypes.oneOf(['bottom-start'])]),\n PropTypes.tuple([PropTypes.oneOf(['left-end'])]),\n PropTypes.tuple([PropTypes.oneOf(['left'])]),\n PropTypes.tuple([PropTypes.oneOf(['left-start'])]),\n ]).description('The order of the placement preference.'),\n onOpen: PropTypes.func.description('Callback when the tooltip is opened.'),\n onClose: PropTypes.func.description('Callback when the tooltip is closed.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAmCnB,MAAM,eAAoD;AAAA,EAC/D,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc,CAAC,IAAI,EAAE;AACvB;AAEO,MAAM,6BAA8E;AAAA,EACzF,eAAe,kCAAU,KACtB,YAAY,4DAA4D,EACxE,aAAa,KAAK;AAAA,EACrB,kBAAkB,kCAAU,KAAK,YAAY,kDAAkD,EAAE,aAAa,KAAK;AAAA,EACnH,oBAAoB,kCAAU,WAAW,WAAW,EACjD,YAAY,qDAAqD,EACjE,aAAa,uFAAuF;AAAA,EACvG,mBAAmB,kCAAU,OAAO,YAAY,gDAAgD,EAAE,aAAa,GAAG;AAAA,EAClH,WAAW,kCAAU,MAAM;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+BAA+B,EAC3C,aAAa,KAAK;AAAA,EACrB,cAAc,kCAAU,QAAQ,kCAAU,MAAM,EAC7C,YAAY,mCAAmC,EAC/C,aAAa,CAAC,IAAI,EAAE,CAAC;AAAA,EACxB,0BAA0B,kCAAU,UAAU;AAAA,IAC5C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAAA,IAC1C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;AAAA,IAC9C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAAA,IAClD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;AAAA,IAC5C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,IACjD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAA,IAC7C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;AAAA,IACnD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;AAAA,IAC/C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,IAC3C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,EACnD,CAAC,EAAE,YAAY,wCAAwC;AAAA,EACvD,QAAQ,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,kCAAU,KAAK,YAAY,sCAAsC;AAC5E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var getDocumentMainLandmarkOrBody_exports = {};
|
|
30
|
+
__export(getDocumentMainLandmarkOrBody_exports, {
|
|
31
|
+
getDocumentMainLandmarkOrBody: () => getDocumentMainLandmarkOrBody
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(getDocumentMainLandmarkOrBody_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
const getDocumentMainLandmarkOrBody = () => {
|
|
36
|
+
const main = document.querySelector("main");
|
|
37
|
+
if (!main) {
|
|
38
|
+
console.error(
|
|
39
|
+
'No "main" element found in the document. Using body instead.\nNot having a main element is usually the start of accessibility issues related to landmarks.\nIf this is actually intentional, you should provide the correct DOM element to host the portal via portalDOMContainer'
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
return main || document.body;
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=getDocumentMainLandmarkOrBody.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/getDocumentMainLandmarkOrBody.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export const getDocumentMainLandmarkOrBody = () => {\n const main = document.querySelector('main');\n if (!main) {\n // eslint-disable-next-line no-console\n console.error(\n 'No \"main\" element found in the document. Using body instead.' +\n '\\nNot having a main element is usually the start of accessibility issues related to landmarks.' +\n '\\nIf this is actually intentional, you should provide the correct DOM element to host the portal via portalDOMContainer',\n );\n }\n return main || document.body;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,gCAAgC,MAAM;AACjD,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,MAAI,CAAC,MAAM;AAET,YAAQ;AAAA,MACN;AAAA,IAGF;AAAA,EACF;AACA,SAAO,QAAQ,SAAS;AAC1B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -7,36 +7,27 @@ import { StyledFloatingAnimation, StyledFloatingWrapper } from "./styled.js";
|
|
|
7
7
|
import { DSFloatingWrapperPropTypes } from "./react-desc-prop-types.js";
|
|
8
8
|
import { useFloatingWrapper } from "./config/useFloatingWrapper.js";
|
|
9
9
|
import { DSFloatingWrapperName } from "./constants/index.js";
|
|
10
|
+
import { getDocumentMainLandmarkOrBody } from "../../utils/getDocumentMainLandmarkOrBody.js";
|
|
10
11
|
const ContentComponent = React2.memo(
|
|
11
12
|
({
|
|
12
13
|
children,
|
|
13
14
|
innerRef,
|
|
14
15
|
floatingStyles,
|
|
15
16
|
isOpen,
|
|
16
|
-
withoutPortal,
|
|
17
17
|
animationDuration,
|
|
18
18
|
withoutAnimation,
|
|
19
19
|
handleAnimationEnd,
|
|
20
20
|
xstyledProps
|
|
21
|
-
}) => /* @__PURE__ */ jsx(
|
|
22
|
-
|
|
21
|
+
}) => /* @__PURE__ */ jsx(StyledFloatingWrapper, { innerRef, style: floatingStyles, ...xstyledProps, children: /* @__PURE__ */ jsx(
|
|
22
|
+
StyledFloatingAnimation,
|
|
23
23
|
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
children
|
|
29
|
-
StyledFloatingAnimation,
|
|
30
|
-
{
|
|
31
|
-
onAnimationEnd: handleAnimationEnd,
|
|
32
|
-
isOpen,
|
|
33
|
-
animationDuration,
|
|
34
|
-
withoutAnimation,
|
|
35
|
-
children
|
|
36
|
-
}
|
|
37
|
-
)
|
|
24
|
+
onAnimationEnd: handleAnimationEnd,
|
|
25
|
+
isOpen,
|
|
26
|
+
animationDuration,
|
|
27
|
+
withoutAnimation,
|
|
28
|
+
children
|
|
38
29
|
}
|
|
39
|
-
)
|
|
30
|
+
) })
|
|
40
31
|
);
|
|
41
32
|
const FloatingWrapper = (props) => {
|
|
42
33
|
const { propsWithDefault, xstyledProps } = useFloatingWrapper(props);
|
|
@@ -79,7 +70,7 @@ const FloatingWrapper = (props) => {
|
|
|
79
70
|
handleAnimationEnd
|
|
80
71
|
}
|
|
81
72
|
),
|
|
82
|
-
portalDOMContainer ||
|
|
73
|
+
portalDOMContainer || getDocumentMainLandmarkOrBody()
|
|
83
74
|
) });
|
|
84
75
|
}
|
|
85
76
|
return null;
|
|
@@ -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';\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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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,cACpE;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
|
}
|
|
@@ -8,7 +8,6 @@ import {
|
|
|
8
8
|
import { DSFloatingWrapperName, DSFloatingWrapperSlots } from "./constants/index.js";
|
|
9
9
|
const defaultProps = {
|
|
10
10
|
context: {
|
|
11
|
-
portalDOMContainer: document.body,
|
|
12
11
|
withoutPortal: false,
|
|
13
12
|
animationDuration: 300,
|
|
14
13
|
withoutAnimation: false
|
|
@@ -23,7 +22,7 @@ const DSFloatingWrapperPropTypes = {
|
|
|
23
22
|
isOpen: PropTypes.bool.description("Whether the floating wrapper is open").isRequired,
|
|
24
23
|
floatingStyles: PropTypes.object.description("Style for the floating wrapper").isRequired,
|
|
25
24
|
context: PropTypes.shape({
|
|
26
|
-
portalDOMContainer: PropTypes.instanceOf(HTMLElement).description("DOM
|
|
25
|
+
portalDOMContainer: PropTypes.instanceOf(HTMLElement).description("The DOM element where the tooltip will be rendered.").defaultValue('the first "main" landmark available in the document or the body if no "main" is found'),
|
|
27
26
|
withoutPortal: PropTypes.bool.description("Whether to render the floating wrapper without a portal"),
|
|
28
27
|
animationDuration: PropTypes.number.description("Duration of the animation"),
|
|
29
28
|
withoutAnimation: PropTypes.bool.description("Whether to render the floating wrapper without animation")
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FloatingWrapper/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperName, DSFloatingWrapperSlots } from './constants/index.js';\n\nexport declare namespace DSFloatingWrapperT {\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n isOpen: boolean;\n floatingStyles: React.CSSProperties;\n }\n\n export interface DefaultProps {\n context: {\n portalDOMContainer
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,uBAAuB,8BAA8B;AAgDvD,MAAM,eAAyD;AAAA,EACpE,SAAS;AAAA,IACP,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperName, DSFloatingWrapperSlots } from './constants/index.js';\n\nexport declare namespace DSFloatingWrapperT {\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n isOpen: boolean;\n floatingStyles: React.CSSProperties;\n }\n\n export interface DefaultProps {\n context: {\n portalDOMContainer?: HTMLElement;\n withoutPortal: boolean;\n animationDuration: number;\n withoutAnimation: boolean;\n };\n }\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;\n onAnimationStartTriggered?: () => void;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n RequiredProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n RequiredProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps {}\n\n export type ExampleState = '0' | '1';\n}\n\nexport const defaultProps: Partial<DSFloatingWrapperT.DefaultProps> = {\n context: {\n withoutPortal: false,\n animationDuration: 300,\n withoutAnimation: false,\n },\n};\n\nexport const DSFloatingWrapperPropTypes: DSPropTypesSchema<DSFloatingWrapperT.InternalProps> = {\n ...getPropsPerSlotPropTypes(DSFloatingWrapperName, DSFloatingWrapperSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n children: PropTypes.node.description('Content of the floating wrapper').isRequired,\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Ref for the floating wrapper')\n .isRequired,\n isOpen: PropTypes.bool.description('Whether the floating wrapper is open').isRequired,\n floatingStyles: PropTypes.object.description('Style for the floating wrapper').isRequired,\n context: PropTypes.shape({\n portalDOMContainer: PropTypes.instanceOf(HTMLElement)\n .description('The DOM element where the tooltip will be rendered.')\n .defaultValue('the first \"main\" landmark available in the document or the body if no \"main\" is found'),\n withoutPortal: PropTypes.bool.description('Whether to render the floating wrapper without a portal'),\n animationDuration: PropTypes.number.description('Duration of the animation'),\n withoutAnimation: PropTypes.bool.description('Whether to render the floating wrapper without animation'),\n }).description('Context for the floating wrapper'),\n onAnimationStartTriggered: PropTypes.func.description(\n 'Callback invoked when the component trigger the animation start. Required to properly position nested floating context without visual artefacts in case animations are used.',\n ),\n onAnimationEnd: PropTypes.func.description(\n 'Callback when the animation ends. Required to properly position nested floating context without visual artefacts in case animations are used.',\n ),\n};\n\nexport const DSFloatingWrapperPropTypesSchema =\n DSFloatingWrapperPropTypes as unknown as ValidationMap<DSFloatingWrapperT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,uBAAuB,8BAA8B;AAgDvD,MAAM,eAAyD;AAAA,EACpE,SAAS;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB;AACF;AAEO,MAAM,6BAAkF;AAAA,EAC7F,GAAG,yBAAyB,uBAAuB,sBAAsB;AAAA,EACzE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,iCAAiC,EAAE;AAAA,EACxE,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B,EACzG;AAAA,EACH,QAAQ,UAAU,KAAK,YAAY,sCAAsC,EAAE;AAAA,EAC3E,gBAAgB,UAAU,OAAO,YAAY,gCAAgC,EAAE;AAAA,EAC/E,SAAS,UAAU,MAAM;AAAA,IACvB,oBAAoB,UAAU,WAAW,WAAW,EACjD,YAAY,qDAAqD,EACjE,aAAa,uFAAuF;AAAA,IACvG,eAAe,UAAU,KAAK,YAAY,yDAAyD;AAAA,IACnG,mBAAmB,UAAU,OAAO,YAAY,2BAA2B;AAAA,IAC3E,kBAAkB,UAAU,KAAK,YAAY,0DAA0D;AAAA,EACzG,CAAC,EAAE,YAAY,kCAAkC;AAAA,EACjD,2BAA2B,UAAU,KAAK;AAAA,IACxC;AAAA,EACF;AAAA,EACA,gBAAgB,UAAU,KAAK;AAAA,IAC7B;AAAA,EACF;AACF;AAEO,MAAM,mCACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,6 @@ import { PropTypes } from "@elliemae/ds-props-helpers";
|
|
|
3
3
|
const defaultProps = {
|
|
4
4
|
withoutAnimation: false,
|
|
5
5
|
animationDuration: 300,
|
|
6
|
-
portalDOMContainer: document.body,
|
|
7
6
|
withoutPortal: false,
|
|
8
7
|
placement: "top",
|
|
9
8
|
customOffset: [12, 12]
|
|
@@ -11,7 +10,7 @@ const defaultProps = {
|
|
|
11
10
|
const DSFloatingContextPropTypes = {
|
|
12
11
|
withoutPortal: PropTypes.bool.description("If true, the tooltip will not be rendered inside a portal.").defaultValue(false),
|
|
13
12
|
withoutAnimation: PropTypes.bool.description("If true, the tooltip will not have an animation.").defaultValue(false),
|
|
14
|
-
portalDOMContainer: PropTypes.instanceOf(HTMLElement).description("The DOM element where the tooltip will be rendered.").defaultValue(document
|
|
13
|
+
portalDOMContainer: PropTypes.instanceOf(HTMLElement).description("The DOM element where the tooltip will be rendered.").defaultValue('the first "main" landmark available in the document or the body if no "main" is found'),
|
|
15
14
|
animationDuration: PropTypes.number.description("The duration of the animation in milliseconds.").defaultValue(300),
|
|
16
15
|
placement: PropTypes.oneOf([
|
|
17
16
|
"top-start",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSHookFloatingContextT {\n export interface DefaultProps {\n withoutPortal: boolean;\n withoutAnimation: boolean;\n portalDOMContainer
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AAmCnB,MAAM,eAAoD;AAAA,EAC/D,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSHookFloatingContextT {\n export interface DefaultProps {\n withoutPortal: boolean;\n withoutAnimation: boolean;\n portalDOMContainer?: HTMLElement;\n animationDuration: number;\n placement: PopperPlacementsT;\n customOffset: [number, number];\n }\n\n export interface OptionalProps {\n placementOrderPreference?: PopperPlacementsT[];\n onOpen?: () => void;\n onClose?: () => void;\n }\n export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n export interface InternalProps extends DefaultProps, OptionalProps {}\n\n export type PopperPlacementsT =\n | 'top-start'\n | 'top'\n | 'top-end'\n | 'right-start'\n | 'right'\n | 'right-end'\n | 'bottom-end'\n | 'bottom'\n | 'bottom-start'\n | 'left-end'\n | 'left'\n | 'left-start';\n}\n\nexport const defaultProps: DSHookFloatingContextT.DefaultProps = {\n withoutAnimation: false,\n animationDuration: 300,\n withoutPortal: false,\n placement: 'top',\n customOffset: [12, 12],\n};\n\nexport const DSFloatingContextPropTypes: DSPropTypesSchema<DSHookFloatingContextT.Props> = {\n withoutPortal: PropTypes.bool\n .description('If true, the tooltip will not be rendered inside a portal.')\n .defaultValue(false),\n withoutAnimation: PropTypes.bool.description('If true, the tooltip will not have an animation.').defaultValue(false),\n portalDOMContainer: PropTypes.instanceOf(HTMLElement)\n .description('The DOM element where the tooltip will be rendered.')\n .defaultValue('the first \"main\" landmark available in the document or the body if no \"main\" is found'),\n animationDuration: PropTypes.number.description('The duration of the animation in milliseconds.').defaultValue(300),\n placement: PropTypes.oneOf([\n 'top-start',\n 'top',\n 'top-end',\n 'right-start',\n 'right',\n 'right-end',\n 'bottom-end',\n 'bottom',\n 'bottom-start',\n 'left-end',\n 'left',\n 'left-start',\n ])\n .description('The placement of the tooltip.')\n .defaultValue('top'),\n customOffset: PropTypes.arrayOf(PropTypes.number)\n .description('The custom offset of the tooltip.')\n .defaultValue([12, 12]),\n placementOrderPreference: PropTypes.oneOfType([\n PropTypes.tuple([PropTypes.oneOf(['top-start'])]),\n PropTypes.tuple([PropTypes.oneOf(['top'])]),\n PropTypes.tuple([PropTypes.oneOf(['top-end'])]),\n PropTypes.tuple([PropTypes.oneOf(['right-start'])]),\n PropTypes.tuple([PropTypes.oneOf(['right'])]),\n PropTypes.tuple([PropTypes.oneOf(['right-end'])]),\n PropTypes.tuple([PropTypes.oneOf(['bottom-end'])]),\n PropTypes.tuple([PropTypes.oneOf(['bottom'])]),\n PropTypes.tuple([PropTypes.oneOf(['bottom-start'])]),\n PropTypes.tuple([PropTypes.oneOf(['left-end'])]),\n PropTypes.tuple([PropTypes.oneOf(['left'])]),\n PropTypes.tuple([PropTypes.oneOf(['left-start'])]),\n ]).description('The order of the placement preference.'),\n onOpen: PropTypes.func.description('Callback when the tooltip is opened.'),\n onClose: PropTypes.func.description('Callback when the tooltip is closed.'),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AAmCnB,MAAM,eAAoD;AAAA,EAC/D,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc,CAAC,IAAI,EAAE;AACvB;AAEO,MAAM,6BAA8E;AAAA,EACzF,eAAe,UAAU,KACtB,YAAY,4DAA4D,EACxE,aAAa,KAAK;AAAA,EACrB,kBAAkB,UAAU,KAAK,YAAY,kDAAkD,EAAE,aAAa,KAAK;AAAA,EACnH,oBAAoB,UAAU,WAAW,WAAW,EACjD,YAAY,qDAAqD,EACjE,aAAa,uFAAuF;AAAA,EACvG,mBAAmB,UAAU,OAAO,YAAY,gDAAgD,EAAE,aAAa,GAAG;AAAA,EAClH,WAAW,UAAU,MAAM;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+BAA+B,EAC3C,aAAa,KAAK;AAAA,EACrB,cAAc,UAAU,QAAQ,UAAU,MAAM,EAC7C,YAAY,mCAAmC,EAC/C,aAAa,CAAC,IAAI,EAAE,CAAC;AAAA,EACxB,0BAA0B,UAAU,UAAU;AAAA,IAC5C,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAAA,IAC1C,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;AAAA,IAC9C,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAAA,IAClD,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;AAAA,IAC5C,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,IACjD,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAA,IAC7C,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;AAAA,IACnD,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;AAAA,IAC/C,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,IAC3C,UAAU,MAAM,CAAC,UAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,EACnD,CAAC,EAAE,YAAY,wCAAwC;AAAA,EACvD,QAAQ,UAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,UAAU,KAAK,YAAY,sCAAsC;AAC5E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const getDocumentMainLandmarkOrBody = () => {
|
|
3
|
+
const main = document.querySelector("main");
|
|
4
|
+
if (!main) {
|
|
5
|
+
console.error(
|
|
6
|
+
'No "main" element found in the document. Using body instead.\nNot having a main element is usually the start of accessibility issues related to landmarks.\nIf this is actually intentional, you should provide the correct DOM element to host the portal via portalDOMContainer'
|
|
7
|
+
);
|
|
8
|
+
}
|
|
9
|
+
return main || document.body;
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
getDocumentMainLandmarkOrBody
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=getDocumentMainLandmarkOrBody.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/getDocumentMainLandmarkOrBody.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const getDocumentMainLandmarkOrBody = () => {\n const main = document.querySelector('main');\n if (!main) {\n // eslint-disable-next-line no-console\n console.error(\n 'No \"main\" element found in the document. Using body instead.' +\n '\\nNot having a main element is usually the start of accessibility issues related to landmarks.' +\n '\\nIf this is actually intentional, you should provide the correct DOM element to host the portal via portalDOMContainer',\n );\n }\n return main || document.body;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,gCAAgC,MAAM;AACjD,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,MAAI,CAAC,MAAM;AAET,YAAQ;AAAA,MACN;AAAA,IAGF;AAAA,EACF;AACA,SAAO,QAAQ,SAAS;AAC1B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -3,7 +3,7 @@ export declare namespace DSHookFloatingContextT {
|
|
|
3
3
|
interface DefaultProps {
|
|
4
4
|
withoutPortal: boolean;
|
|
5
5
|
withoutAnimation: boolean;
|
|
6
|
-
portalDOMContainer
|
|
6
|
+
portalDOMContainer?: HTMLElement;
|
|
7
7
|
animationDuration: number;
|
|
8
8
|
placement: PopperPlacementsT;
|
|
9
9
|
customOffset: [number, number];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getDocumentMainLandmarkOrBody: () => HTMLElement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-floating-context",
|
|
3
|
-
"version": "3.46.0-rc.
|
|
3
|
+
"version": "3.46.0-rc.8",
|
|
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.46.0-rc.
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.46.0-rc.
|
|
41
|
-
"@elliemae/ds-system": "3.46.0-rc.
|
|
42
|
-
"@elliemae/ds-typescript-helpers": "3.46.0-rc.
|
|
39
|
+
"@elliemae/ds-hooks-headless-tooltip": "3.46.0-rc.8",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.46.0-rc.8",
|
|
41
|
+
"@elliemae/ds-system": "3.46.0-rc.8",
|
|
42
|
+
"@elliemae/ds-typescript-helpers": "3.46.0-rc.8"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
46
|
-
"@elliemae/ds-monorepo-devops": "3.46.0-rc.
|
|
46
|
+
"@elliemae/ds-monorepo-devops": "3.46.0-rc.8"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"lodash": "^4.17.21",
|