@elliemae/ds-tooltip 2.3.0-alpha.9 → 2.3.0-next.3
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/cjs/index.js +23 -0
- package/cjs/v1/DSTooltip.js +115 -0
- package/cjs/v1/TooltipType.js +10 -0
- package/cjs/v2/DSTooltip.js +147 -0
- package/cjs/v2/DSTooltipArrow.js +39 -0
- package/cjs/v2/TooltipType.js +10 -0
- package/cjs/v2/index.d.js +2 -0
- package/cjs/v2/propTypes.js +27 -0
- package/cjs/v2/styles.js +62 -0
- package/cjs/v2/utils/setMultipleRefs.js +30 -0
- package/cjs/v2/utils/tooltipPositions.js +20 -0
- package/cjs/v3/TooltipV3DatatestId.js +10 -0
- package/cjs/v3/config/useWithDefaultProps.js +18 -0
- package/cjs/v3/index.d.js +2 -0
- package/cjs/v3/index.js +128 -0
- package/cjs/v3/propsTypes.js +96 -0
- package/cjs/v3/styleds.js +47 -0
- package/esm/index.js +5 -0
- package/esm/v1/DSTooltip.js +100 -0
- package/esm/v1/TooltipType.js +6 -0
- package/esm/v2/DSTooltip.js +136 -0
- package/esm/v2/DSTooltipArrow.js +31 -0
- package/esm/v2/TooltipType.js +6 -0
- package/esm/v2/index.d.js +1 -0
- package/esm/v2/propTypes.js +23 -0
- package/esm/v2/styles.js +49 -0
- package/esm/v2/utils/setMultipleRefs.js +26 -0
- package/esm/v2/utils/tooltipPositions.js +16 -0
- package/esm/v3/TooltipV3DatatestId.js +6 -0
- package/esm/v3/config/useWithDefaultProps.js +14 -0
- package/esm/v3/index.d.js +1 -0
- package/esm/v3/index.js +116 -0
- package/esm/v3/propsTypes.js +92 -0
- package/esm/v3/styleds.js +36 -0
- package/package.json +57 -59
- package/{dist/types → types}/index.d.ts +1 -1
- package/{dist/types → types}/v1/DSTooltip.d.ts +0 -0
- package/{dist/types → types}/v1/TooltipType.d.ts +0 -0
- package/{dist/types → types}/v2/DSTooltip.d.ts +0 -0
- package/{dist/types → types}/v2/DSTooltipArrow.d.ts +0 -0
- package/{dist/types → types}/v2/TooltipType.d.ts +0 -0
- package/{dist/types → types}/v2/propTypes.d.ts +0 -0
- package/{dist/types → types}/v2/styles.d.ts +0 -0
- package/{dist/types → types}/v2/tests/DSTooltipV2.test.d.ts +0 -0
- package/{dist/types → types}/v2/utils/setMultipleRefs.d.ts +0 -0
- package/{dist/types → types}/v2/utils/tooltipPositions.d.ts +0 -0
- package/{dist/types → types}/v3/TooltipV3DatatestId.d.ts +0 -0
- package/{dist/types → types}/v3/config/useWithDefaultProps.d.ts +0 -0
- package/{dist/types → types}/v3/index.d.ts +0 -0
- package/{dist/types → types}/v3/propsTypes.d.ts +0 -0
- package/{dist/types → types}/v3/styleds.d.ts +0 -0
- package/dist/cjs/index.js +0 -41
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/v1/DSTooltip.js +0 -118
- package/dist/cjs/v1/DSTooltip.js.map +0 -7
- package/dist/cjs/v1/TooltipType.js +0 -38
- package/dist/cjs/v1/TooltipType.js.map +0 -7
- package/dist/cjs/v2/DSTooltip.js +0 -143
- package/dist/cjs/v2/DSTooltip.js.map +0 -7
- package/dist/cjs/v2/DSTooltipArrow.js +0 -51
- package/dist/cjs/v2/DSTooltipArrow.js.map +0 -7
- package/dist/cjs/v2/TooltipType.js +0 -38
- package/dist/cjs/v2/TooltipType.js.map +0 -7
- package/dist/cjs/v2/index.d.js +0 -27
- package/dist/cjs/v2/index.d.js.map +0 -7
- package/dist/cjs/v2/propTypes.js +0 -56
- package/dist/cjs/v2/propTypes.js.map +0 -7
- package/dist/cjs/v2/styles.js +0 -131
- package/dist/cjs/v2/styles.js.map +0 -7
- package/dist/cjs/v2/utils/setMultipleRefs.js +0 -50
- package/dist/cjs/v2/utils/setMultipleRefs.js.map +0 -7
- package/dist/cjs/v2/utils/tooltipPositions.js +0 -48
- package/dist/cjs/v2/utils/tooltipPositions.js.map +0 -7
- package/dist/cjs/v3/TooltipV3DatatestId.js +0 -38
- package/dist/cjs/v3/TooltipV3DatatestId.js.map +0 -7
- package/dist/cjs/v3/config/useWithDefaultProps.js +0 -44
- package/dist/cjs/v3/config/useWithDefaultProps.js.map +0 -7
- package/dist/cjs/v3/index.d.js +0 -27
- package/dist/cjs/v3/index.d.js.map +0 -7
- package/dist/cjs/v3/index.js +0 -115
- package/dist/cjs/v3/index.js.map +0 -7
- package/dist/cjs/v3/propsTypes.js +0 -80
- package/dist/cjs/v3/propsTypes.js.map +0 -7
- package/dist/cjs/v3/styleds.js +0 -70
- package/dist/cjs/v3/styleds.js.map +0 -7
- package/dist/esm/index.js +0 -12
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/v1/DSTooltip.js +0 -101
- package/dist/esm/v1/DSTooltip.js.map +0 -7
- package/dist/esm/v1/TooltipType.js +0 -9
- package/dist/esm/v1/TooltipType.js.map +0 -7
- package/dist/esm/v2/DSTooltip.js +0 -119
- package/dist/esm/v2/DSTooltip.js.map +0 -7
- package/dist/esm/v2/DSTooltipArrow.js +0 -22
- package/dist/esm/v2/DSTooltipArrow.js.map +0 -7
- package/dist/esm/v2/TooltipType.js +0 -9
- package/dist/esm/v2/TooltipType.js.map +0 -7
- package/dist/esm/v2/index.d.js +0 -2
- package/dist/esm/v2/index.d.js.map +0 -7
- package/dist/esm/v2/propTypes.js +0 -27
- package/dist/esm/v2/propTypes.js.map +0 -7
- package/dist/esm/v2/styles.js +0 -102
- package/dist/esm/v2/styles.js.map +0 -7
- package/dist/esm/v2/utils/setMultipleRefs.js +0 -21
- package/dist/esm/v2/utils/setMultipleRefs.js.map +0 -7
- package/dist/esm/v2/utils/tooltipPositions.js +0 -19
- package/dist/esm/v2/utils/tooltipPositions.js.map +0 -7
- package/dist/esm/v3/TooltipV3DatatestId.js +0 -9
- package/dist/esm/v3/TooltipV3DatatestId.js.map +0 -7
- package/dist/esm/v3/config/useWithDefaultProps.js +0 -15
- package/dist/esm/v3/config/useWithDefaultProps.js.map +0 -7
- package/dist/esm/v3/index.d.js +0 -2
- package/dist/esm/v3/index.d.js.map +0 -7
- package/dist/esm/v3/index.js +0 -91
- package/dist/esm/v3/index.js.map +0 -7
- package/dist/esm/v3/propsTypes.js +0 -51
- package/dist/esm/v3/propsTypes.js.map +0 -7
- package/dist/esm/v3/styleds.js +0 -41
- package/dist/esm/v3/styleds.js.map +0 -7
package/dist/esm/v1/DSTooltip.js
DELETED
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
import { describe, PropTypes } from "react-desc";
|
|
4
|
-
import {
|
|
5
|
-
aggregatedClasses,
|
|
6
|
-
convertPropToCssClassName
|
|
7
|
-
} from "@elliemae/ds-classnames";
|
|
8
|
-
import { getComponentFromProps } from "@elliemae/ds-utilities";
|
|
9
|
-
import {
|
|
10
|
-
DEFAULT_DELAY_OPEN,
|
|
11
|
-
DEFAULT_DELAY_CLOSE
|
|
12
|
-
} from "@elliemae/ds-shared/constants";
|
|
13
|
-
import {
|
|
14
|
-
DSPopper,
|
|
15
|
-
PopperPositions,
|
|
16
|
-
PopperInteractions,
|
|
17
|
-
interactions,
|
|
18
|
-
positions
|
|
19
|
-
} from "@elliemae/ds-popper";
|
|
20
|
-
import { TooltipType } from "./TooltipType";
|
|
21
|
-
const blockName = "tooltip";
|
|
22
|
-
const TooltipContainer = aggregatedClasses("div")(blockName, false, false, {
|
|
23
|
-
propsToRemoveFromFinalElement: ["isHovered", "isDragged"]
|
|
24
|
-
});
|
|
25
|
-
const TooltipText = aggregatedClasses("span")(blockName, "text", false, {
|
|
26
|
-
propsToRemoveFromFinalElement: ["isHovered", "isDragged"]
|
|
27
|
-
});
|
|
28
|
-
const DSTooltip = ({
|
|
29
|
-
containerProps = {},
|
|
30
|
-
innerRef,
|
|
31
|
-
placement = PopperPositions.TOP,
|
|
32
|
-
title = "",
|
|
33
|
-
delayClose = DEFAULT_DELAY_CLOSE,
|
|
34
|
-
delayOpen = DEFAULT_DELAY_OPEN,
|
|
35
|
-
interactionType = PopperInteractions.HOVER,
|
|
36
|
-
triggerComponent = null,
|
|
37
|
-
className = "",
|
|
38
|
-
isOpen = void 0,
|
|
39
|
-
onOpen = () => null,
|
|
40
|
-
springAnimationComponent = void 0,
|
|
41
|
-
tooltipType = TooltipType.TOOLTIP,
|
|
42
|
-
showArrow = true,
|
|
43
|
-
zIndex,
|
|
44
|
-
...otherTooltipProps
|
|
45
|
-
}) => {
|
|
46
|
-
const { cssClassName: tooltipBlockName } = convertPropToCssClassName(blockName);
|
|
47
|
-
let Content = title;
|
|
48
|
-
if (typeof title === "string") {
|
|
49
|
-
Content = /* @__PURE__ */ React2.createElement(TooltipText, null, title);
|
|
50
|
-
}
|
|
51
|
-
return /* @__PURE__ */ React2.createElement(DSPopper, {
|
|
52
|
-
blockName: tooltipBlockName,
|
|
53
|
-
contentComponent: /* @__PURE__ */ React2.createElement(TooltipContainer, {
|
|
54
|
-
...containerProps,
|
|
55
|
-
...otherTooltipProps,
|
|
56
|
-
className: `tooltip-container--${tooltipType} ${className}`,
|
|
57
|
-
innerRef
|
|
58
|
-
}, Content),
|
|
59
|
-
delayClose,
|
|
60
|
-
delayOpen,
|
|
61
|
-
interactionType,
|
|
62
|
-
isOpen,
|
|
63
|
-
onOpen,
|
|
64
|
-
placement,
|
|
65
|
-
showArrow: tooltipType === TooltipType.TOOLTIP ? showArrow : false,
|
|
66
|
-
springAnimationComponent,
|
|
67
|
-
triggerComponent: getComponentFromProps(triggerComponent),
|
|
68
|
-
zIndex
|
|
69
|
-
});
|
|
70
|
-
};
|
|
71
|
-
const tooltipProps = {
|
|
72
|
-
containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
|
|
73
|
-
placement: PropTypes.oneOf(positions).description("Tooltip position").defaultValue(PopperPositions.TOP),
|
|
74
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description("Tooltip content").isRequired,
|
|
75
|
-
delayClose: PropTypes.string.description("Delay to close the tooltip").defaultValue(DEFAULT_DELAY_CLOSE),
|
|
76
|
-
delayOpen: PropTypes.string.description("Delay to open the tooltip ").defaultValue(DEFAULT_DELAY_OPEN),
|
|
77
|
-
interactionType: PropTypes.oneOf(interactions).description("A type indicating how to open/close the tooltip").defaultValue(PopperInteractions.HOVER),
|
|
78
|
-
triggerComponent: PropTypes.element.description(`The component that will open/close the tooltip.
|
|
79
|
-
Cannot be used with disabled elements.
|
|
80
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled`).isRequired,
|
|
81
|
-
isOpen: PropTypes.bool.description("Whether the tooltip is visible or not").defaultValue(void 0),
|
|
82
|
-
onOpen: PropTypes.func.description("Handler when the tooltip opens"),
|
|
83
|
-
springAnimationComponent: PropTypes.element.description("Spring animation component"),
|
|
84
|
-
showArrow: PropTypes.bool.description("Whether to show an arrow or not").defaultValue(true),
|
|
85
|
-
className: PropTypes.string.description("css class"),
|
|
86
|
-
tooltipType: PropTypes.oneOf(["tooltip", "toolbar"]).description("Type of tooltip").defaultValue(TooltipType.TOOLTIP),
|
|
87
|
-
zIndex: PropTypes.number.description("z-index value assigned to the tooltip").defaultValue(void 0),
|
|
88
|
-
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Ref to the tooltip container element")
|
|
89
|
-
};
|
|
90
|
-
DSTooltip.propTypes = tooltipProps;
|
|
91
|
-
const TooltipWithSchema = describe(DSTooltip);
|
|
92
|
-
TooltipWithSchema.propTypes = tooltipProps;
|
|
93
|
-
var DSTooltip_default = DSTooltip;
|
|
94
|
-
export {
|
|
95
|
-
DSTooltip,
|
|
96
|
-
TooltipContainer,
|
|
97
|
-
TooltipText,
|
|
98
|
-
TooltipWithSchema,
|
|
99
|
-
DSTooltip_default as default
|
|
100
|
-
};
|
|
101
|
-
//# sourceMappingURL=DSTooltip.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/DSTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport {\n aggregatedClasses,\n convertPropToCssClassName,\n} from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport {\n DEFAULT_DELAY_OPEN,\n DEFAULT_DELAY_CLOSE,\n} from '@elliemae/ds-shared/constants';\nimport { DSPopper,\n PopperPositions,\n PopperInteractions,\n interactions,\n positions\n} from '@elliemae/ds-popper';\nimport { TooltipType } from './TooltipType';\n\nconst blockName = 'tooltip';\n\nconst TooltipContainer = aggregatedClasses('div')(blockName, false, false, {\n propsToRemoveFromFinalElement: ['isHovered', 'isDragged'],\n});\nconst TooltipText = aggregatedClasses('span')(blockName, 'text', false, {\n propsToRemoveFromFinalElement: ['isHovered', 'isDragged'],\n});\n\nconst DSTooltip = ({\n containerProps = {},\n innerRef,\n placement = PopperPositions.TOP,\n title = '',\n delayClose = DEFAULT_DELAY_CLOSE,\n delayOpen = DEFAULT_DELAY_OPEN,\n interactionType = PopperInteractions.HOVER,\n triggerComponent = null,\n className = '',\n isOpen = undefined,\n onOpen = () => null,\n springAnimationComponent = undefined,\n tooltipType = TooltipType.TOOLTIP,\n showArrow = true,\n zIndex,\n ...otherTooltipProps\n}) => {\n const { cssClassName: tooltipBlockName } = convertPropToCssClassName(\n blockName,\n );\n\n let Content = title;\n if (typeof title === 'string') {\n Content = <TooltipText>{title}</TooltipText>;\n }\n return (\n <DSPopper\n blockName={tooltipBlockName}\n contentComponent={\n <TooltipContainer\n {...containerProps}\n {...otherTooltipProps}\n className={`tooltip-container--${tooltipType} ${className}`}\n innerRef={innerRef}\n >\n {Content}\n </TooltipContainer>\n }\n delayClose={delayClose}\n delayOpen={delayOpen}\n interactionType={interactionType}\n isOpen={isOpen}\n onOpen={onOpen}\n placement={placement}\n showArrow={tooltipType === TooltipType.TOOLTIP ? showArrow : false}\n springAnimationComponent={springAnimationComponent}\n triggerComponent={getComponentFromProps(triggerComponent)}\n zIndex={zIndex}\n />\n );\n};\n\nconst tooltipProps = {\n containerProps: PropTypes.object.description(\n 'Set of Properties attached to the main container',\n ),\n placement: PropTypes.oneOf(positions)\n .description('Tooltip position')\n .defaultValue(PopperPositions.TOP),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description(\n 'Tooltip content',\n ).isRequired,\n delayClose: PropTypes.string\n .description('Delay to close the tooltip')\n .defaultValue(DEFAULT_DELAY_CLOSE),\n delayOpen: PropTypes.string\n .description('Delay to open the tooltip ')\n .defaultValue(DEFAULT_DELAY_OPEN),\n interactionType: PropTypes.oneOf(interactions)\n .description('A type indicating how to open/close the tooltip')\n .defaultValue(PopperInteractions.HOVER),\n triggerComponent: PropTypes.element.description(\n `The component that will open/close the tooltip. \n Cannot be used with disabled elements. \n https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled`,\n ).isRequired,\n isOpen: PropTypes.bool\n .description('Whether the tooltip is visible or not')\n .defaultValue(undefined),\n onOpen: PropTypes.func.description('Handler when the tooltip opens'),\n springAnimationComponent: PropTypes.element.description(\n 'Spring animation component',\n ),\n showArrow: PropTypes.bool\n .description('Whether to show an arrow or not')\n .defaultValue(true),\n className: PropTypes.string.description('css class'),\n tooltipType: PropTypes.oneOf(['tooltip', 'toolbar'])\n .description('Type of tooltip')\n .defaultValue(TooltipType.TOOLTIP),\n zIndex: PropTypes.number\n .description('z-index value assigned to the tooltip')\n .defaultValue(undefined),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description(\n 'Ref to the tooltip container element',\n ),\n};\n\nDSTooltip.propTypes = tooltipProps;\n\nconst TooltipWithSchema = describe(DSTooltip);\nTooltipWithSchema.propTypes = tooltipProps;\n\nexport { DSTooltip, TooltipContainer, TooltipText, TooltipWithSchema };\nexport default DSTooltip;\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AAAA;AAAA;AAAA;AAIA;AACA;AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAEA,MAAM,YAAY;AAElB,MAAM,mBAAmB,kBAAkB,OAAO,WAAW,OAAO,OAAO;AAAA,EACzE,+BAA+B,CAAC,aAAa;AAAA;AAE/C,MAAM,cAAc,kBAAkB,QAAQ,WAAW,QAAQ,OAAO;AAAA,EACtE,+BAA+B,CAAC,aAAa;AAAA;AAG/C,MAAM,YAAY,CAAC;AAAA,EACjB,iBAAiB;AAAA,EACjB;AAAA,EACA,YAAY,gBAAgB;AAAA,EAC5B,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,kBAAkB,mBAAmB;AAAA,EACrC,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc,YAAY;AAAA,EAC1B,YAAY;AAAA,EACZ;AAAA,KACG;AAAA,MACC;AACJ,QAAM,EAAE,cAAc,qBAAqB,0BACzC;AAGF,MAAI,UAAU;AACd,MAAI,OAAO,UAAU,UAAU;AAC7B,cAAU,qCAAC,aAAD,MAAc;AAAA;AAE1B,SACE,qCAAC,UAAD;AAAA,IACE,WAAW;AAAA,IACX,kBACE,qCAAC,kBAAD;AAAA,SACM;AAAA,SACA;AAAA,MACJ,WAAW,sBAAsB,eAAe;AAAA,MAChD;AAAA,OAEC;AAAA,IAGL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,gBAAgB,YAAY,UAAU,YAAY;AAAA,IAC7D;AAAA,IACA,kBAAkB,sBAAsB;AAAA,IACxC;AAAA;AAAA;AAKN,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,OAAO,YAC/B;AAAA,EAEF,WAAW,UAAU,MAAM,WACxB,YAAY,oBACZ,aAAa,gBAAgB;AAAA,EAChC,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,UAAU,YAChE,mBACA;AAAA,EACF,YAAY,UAAU,OACnB,YAAY,8BACZ,aAAa;AAAA,EAChB,WAAW,UAAU,OAClB,YAAY,8BACZ,aAAa;AAAA,EAChB,iBAAiB,UAAU,MAAM,cAC9B,YAAY,mDACZ,aAAa,mBAAmB;AAAA,EACnC,kBAAkB,UAAU,QAAQ,YAClC;AAAA;AAAA,4EAGA;AAAA,EACF,QAAQ,UAAU,KACf,YAAY,yCACZ,aAAa;AAAA,EAChB,QAAQ,UAAU,KAAK,YAAY;AAAA,EACnC,0BAA0B,UAAU,QAAQ,YAC1C;AAAA,EAEF,WAAW,UAAU,KAClB,YAAY,mCACZ,aAAa;AAAA,EAChB,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,aAAa,UAAU,MAAM,CAAC,WAAW,YACtC,YAAY,mBACZ,aAAa,YAAY;AAAA,EAC5B,QAAQ,UAAU,OACf,YAAY,yCACZ,aAAa;AAAA,EAChB,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,SAAS,YAChE;AAAA;AAIJ,UAAU,YAAY;AAEtB,MAAM,oBAAoB,SAAS;AACnC,kBAAkB,YAAY;AAG9B,IAAO,oBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v1/TooltipType.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TooltipType = {\n TOOLTIP: 'tooltip',\n TOOLBAR: 'toolbar',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,cAAc;AAAA,EACzB,SAAS;AAAA,EACT,SAAS;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/v2/DSTooltip.js
DELETED
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useState, useCallback, useEffect, useRef } from "react";
|
|
3
|
-
import { describe } from "react-desc";
|
|
4
|
-
import { DSPortal } from "@elliemae/ds-portal";
|
|
5
|
-
import { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from "@elliemae/ds-shared/constants";
|
|
6
|
-
import { usePopper } from "react-popper";
|
|
7
|
-
import { tooltipPositions } from "./utils/tooltipPositions";
|
|
8
|
-
import { TooltipType } from "./TooltipType";
|
|
9
|
-
import {
|
|
10
|
-
StyledTooltipContainer,
|
|
11
|
-
StyledTriggerComponentContainer,
|
|
12
|
-
StyledTooltipText,
|
|
13
|
-
StyledAnimatedTooltip
|
|
14
|
-
} from "./styles";
|
|
15
|
-
import { DSTooltipArrow } from "./DSTooltipArrow";
|
|
16
|
-
import { tooltipV2Props } from "./propTypes";
|
|
17
|
-
import { setMultipleRefs } from "./utils/setMultipleRefs";
|
|
18
|
-
const DSTooltipV2 = ({
|
|
19
|
-
containerProps = {},
|
|
20
|
-
innerRef,
|
|
21
|
-
placement = tooltipPositions.BOTTOM,
|
|
22
|
-
title = "",
|
|
23
|
-
delayClose = DEFAULT_DELAY_CLOSE,
|
|
24
|
-
delayOpen = DEFAULT_DELAY_OPEN,
|
|
25
|
-
triggerComponent = null,
|
|
26
|
-
className = "",
|
|
27
|
-
getIsOpen = () => null,
|
|
28
|
-
onOpen = () => null,
|
|
29
|
-
tooltipType = TooltipType.TOOLTIP,
|
|
30
|
-
showArrow = true,
|
|
31
|
-
offset = [0, 14],
|
|
32
|
-
zIndex = 10,
|
|
33
|
-
extraModifiers = {}
|
|
34
|
-
}) => {
|
|
35
|
-
const [showTooltip, setShowTooltip] = useState(false);
|
|
36
|
-
const [isAnimating, setIsAnimating] = useState(false);
|
|
37
|
-
const [referenceElement, setReferenceElement] = useState(triggerComponent);
|
|
38
|
-
const [popperElement, setPopperElement] = useState(null);
|
|
39
|
-
const [arrowElement, setArrowElement] = useState(null);
|
|
40
|
-
const timerOpen = useRef(null);
|
|
41
|
-
const timerClosed = useRef(null);
|
|
42
|
-
const { styles, attributes } = usePopper(referenceElement, popperElement, {
|
|
43
|
-
placement,
|
|
44
|
-
modifiers: [
|
|
45
|
-
{ name: "hide", enabled: true },
|
|
46
|
-
{
|
|
47
|
-
name: "offset",
|
|
48
|
-
enabled: true,
|
|
49
|
-
options: {
|
|
50
|
-
offset: tooltipType === TooltipType.TOOLBAR ? [0, 0] : offset
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
{ name: "arrow", options: { element: arrowElement } },
|
|
54
|
-
{ ...extraModifiers }
|
|
55
|
-
]
|
|
56
|
-
});
|
|
57
|
-
const handleShowTooltipOn = useCallback(() => {
|
|
58
|
-
timerOpen.current = setTimeout(() => {
|
|
59
|
-
setShowTooltip(true);
|
|
60
|
-
setIsAnimating(true);
|
|
61
|
-
getIsOpen(true);
|
|
62
|
-
onOpen();
|
|
63
|
-
}, delayOpen);
|
|
64
|
-
}, [delayOpen, getIsOpen, onOpen]);
|
|
65
|
-
const handleShowTooltipOff = useCallback(() => {
|
|
66
|
-
timerClosed.current = setTimeout(() => {
|
|
67
|
-
setShowTooltip(false);
|
|
68
|
-
setIsAnimating(true);
|
|
69
|
-
getIsOpen(false);
|
|
70
|
-
}, delayClose);
|
|
71
|
-
}, [delayClose, getIsOpen]);
|
|
72
|
-
const handleKeyDown = useCallback((e) => {
|
|
73
|
-
if (e.key === "Escape") {
|
|
74
|
-
e.target.blur();
|
|
75
|
-
}
|
|
76
|
-
}, []);
|
|
77
|
-
const checkAnimationStatus = useCallback(() => {
|
|
78
|
-
if (!showTooltip) {
|
|
79
|
-
setIsAnimating(false);
|
|
80
|
-
}
|
|
81
|
-
}, [showTooltip]);
|
|
82
|
-
useEffect(() => () => {
|
|
83
|
-
clearTimeout(timerClosed.current);
|
|
84
|
-
clearTimeout(timerOpen.current);
|
|
85
|
-
}, []);
|
|
86
|
-
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledTriggerComponentContainer, {
|
|
87
|
-
ref: setReferenceElement,
|
|
88
|
-
onMouseEnter: handleShowTooltipOn,
|
|
89
|
-
onMouseLeave: handleShowTooltipOff,
|
|
90
|
-
onFocus: handleShowTooltipOn,
|
|
91
|
-
onBlur: handleShowTooltipOff,
|
|
92
|
-
onKeyDown: handleKeyDown
|
|
93
|
-
}, triggerComponent), isAnimating || showTooltip ? /* @__PURE__ */ React2.createElement(DSPortal, null, /* @__PURE__ */ React2.createElement(StyledTooltipContainer, {
|
|
94
|
-
className,
|
|
95
|
-
showTooltip,
|
|
96
|
-
tooltipType,
|
|
97
|
-
"data-testid": "ds-tooltip-container",
|
|
98
|
-
ref: (ref) => setMultipleRefs(setPopperElement, innerRef)(ref),
|
|
99
|
-
style: { ...styles.popper, zIndex },
|
|
100
|
-
...containerProps,
|
|
101
|
-
...attributes.popper
|
|
102
|
-
}, /* @__PURE__ */ React2.createElement(StyledAnimatedTooltip, {
|
|
103
|
-
showTooltip,
|
|
104
|
-
"data-testid": "ds-tooltip",
|
|
105
|
-
onAnimationEnd: checkAnimationStatus
|
|
106
|
-
}, /* @__PURE__ */ React2.createElement(StyledTooltipText, null, title), tooltipType === TooltipType.TOOLTIP && showArrow ? /* @__PURE__ */ React2.createElement(DSTooltipArrow, {
|
|
107
|
-
arrowElementRef: setArrowElement,
|
|
108
|
-
style: styles.arrow,
|
|
109
|
-
placement: attributes.popper ? attributes.popper["data-popper-placement"] : "bottom"
|
|
110
|
-
}) : null))) : null);
|
|
111
|
-
};
|
|
112
|
-
DSTooltipV2.propTypes = tooltipV2Props;
|
|
113
|
-
const TooltipV2WithSchema = describe(DSTooltipV2);
|
|
114
|
-
TooltipV2WithSchema.propTypes = tooltipV2Props;
|
|
115
|
-
export {
|
|
116
|
-
DSTooltipV2,
|
|
117
|
-
TooltipV2WithSchema
|
|
118
|
-
};
|
|
119
|
-
//# sourceMappingURL=DSTooltip.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect, useRef } from 'react';\nimport { describe } from 'react-desc';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared/constants';\nimport { usePopper } from 'react-popper';\nimport { tooltipPositions } from './utils/tooltipPositions';\nimport { TooltipType } from './TooltipType';\nimport {\n StyledTooltipContainer,\n StyledTriggerComponentContainer,\n StyledTooltipText,\n StyledAnimatedTooltip,\n} from './styles';\nimport { DSTooltipArrow } from './DSTooltipArrow';\nimport { DSTooltipT } from '.';\nimport { tooltipV2Props } from './propTypes';\nimport { setMultipleRefs } from './utils/setMultipleRefs';\n\nconst DSTooltipV2 = ({\n containerProps = {},\n innerRef,\n placement = tooltipPositions.BOTTOM,\n title = '',\n delayClose = DEFAULT_DELAY_CLOSE,\n delayOpen = DEFAULT_DELAY_OPEN,\n triggerComponent = null,\n className = '',\n getIsOpen = () => null,\n onOpen = () => null,\n tooltipType = TooltipType.TOOLTIP,\n showArrow = true,\n offset = [0, 14],\n zIndex = 10,\n extraModifiers = {},\n}: DSTooltipT): React.ReactElement => {\n const [showTooltip, setShowTooltip] = useState<boolean>(false);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(triggerComponent);\n const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n const timerOpen = useRef(null);\n const timerClosed = useRef(null);\n\n const { styles, attributes } = usePopper(referenceElement, popperElement, {\n placement,\n modifiers: [\n { name: 'hide', enabled: true },\n {\n name: 'offset',\n enabled: true,\n options: {\n offset: tooltipType === TooltipType.TOOLBAR ? [0, 0] : offset,\n },\n },\n { name: 'arrow', options: { element: arrowElement } },\n { ...extraModifiers },\n ],\n });\n\n const handleShowTooltipOn = useCallback(() => {\n timerOpen.current = setTimeout(() => {\n setShowTooltip(true);\n setIsAnimating(true);\n getIsOpen(true);\n onOpen();\n }, delayOpen);\n }, [delayOpen, getIsOpen, onOpen]);\n\n const handleShowTooltipOff = useCallback(() => {\n timerClosed.current = setTimeout(() => {\n setShowTooltip(false);\n setIsAnimating(true);\n getIsOpen(false);\n }, delayClose);\n }, [delayClose, getIsOpen]);\n\n const handleKeyDown = useCallback((e) => {\n if (e.key === 'Escape') {\n e.target.blur();\n }\n }, []);\n\n const checkAnimationStatus = useCallback(() => {\n if (!showTooltip) {\n setIsAnimating(false);\n }\n }, [showTooltip]);\n\n useEffect(\n () => () => {\n clearTimeout(timerClosed.current);\n clearTimeout(timerOpen.current);\n },\n [],\n );\n\n return (\n <>\n <StyledTriggerComponentContainer\n ref={setReferenceElement}\n onMouseEnter={handleShowTooltipOn}\n onMouseLeave={handleShowTooltipOff}\n onFocus={handleShowTooltipOn}\n onBlur={handleShowTooltipOff}\n onKeyDown={handleKeyDown}\n >\n {triggerComponent}\n </StyledTriggerComponentContainer>\n {isAnimating || showTooltip ? (\n <DSPortal>\n <StyledTooltipContainer\n className={className}\n showTooltip={showTooltip}\n tooltipType={tooltipType}\n data-testid=\"ds-tooltip-container\"\n ref={(ref) => setMultipleRefs(setPopperElement, innerRef)(ref)}\n style={{ ...styles.popper, zIndex }}\n {...containerProps}\n {...attributes.popper}\n >\n <StyledAnimatedTooltip\n showTooltip={showTooltip}\n data-testid=\"ds-tooltip\"\n onAnimationEnd={checkAnimationStatus}\n >\n <StyledTooltipText>{title}</StyledTooltipText>\n {tooltipType === TooltipType.TOOLTIP && showArrow ? (\n <DSTooltipArrow\n arrowElementRef={setArrowElement}\n style={styles.arrow}\n placement={attributes.popper ? attributes.popper['data-popper-placement'] : 'bottom'}\n />\n ) : null}\n </StyledAnimatedTooltip>\n </StyledTooltipContainer>\n </DSPortal>\n ) : null}\n </>\n );\n};\n\nDSTooltipV2.propTypes = tooltipV2Props;\n\nconst TooltipV2WithSchema = describe(DSTooltipV2);\nTooltipV2WithSchema.propTypes = tooltipV2Props;\n\nexport { DSTooltipV2, TooltipV2WithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAEA;AACA;AAEA,MAAM,cAAc,CAAC;AAAA,EACnB,iBAAiB;AAAA,EACjB;AAAA,EACA,YAAY,iBAAiB;AAAA,EAC7B,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ,YAAY,MAAM;AAAA,EAClB,SAAS,MAAM;AAAA,EACf,cAAc,YAAY;AAAA,EAC1B,YAAY;AAAA,EACZ,SAAS,CAAC,GAAG;AAAA,EACb,SAAS;AAAA,EACT,iBAAiB;AAAA,MACmB;AACpC,QAAM,CAAC,aAAa,kBAAkB,SAAkB;AACxD,QAAM,CAAC,aAAa,kBAAkB,SAAkB;AACxD,QAAM,CAAC,kBAAkB,uBAAuB,SAA6B;AAC7E,QAAM,CAAC,eAAe,oBAAoB,SAAgC;AAC1E,QAAM,CAAC,cAAc,mBAAmB,SAAgC;AACxE,QAAM,YAAY,OAAO;AACzB,QAAM,cAAc,OAAO;AAE3B,QAAM,EAAE,QAAQ,eAAe,UAAU,kBAAkB,eAAe;AAAA,IACxE;AAAA,IACA,WAAW;AAAA,MACT,EAAE,MAAM,QAAQ,SAAS;AAAA,MACzB;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,QAAQ,gBAAgB,YAAY,UAAU,CAAC,GAAG,KAAK;AAAA;AAAA;AAAA,MAG3D,EAAE,MAAM,SAAS,SAAS,EAAE,SAAS;AAAA,MACrC,KAAK;AAAA;AAAA;AAIT,QAAM,sBAAsB,YAAY,MAAM;AAC5C,cAAU,UAAU,WAAW,MAAM;AACnC,qBAAe;AACf,qBAAe;AACf,gBAAU;AACV;AAAA,OACC;AAAA,KACF,CAAC,WAAW,WAAW;AAE1B,QAAM,uBAAuB,YAAY,MAAM;AAC7C,gBAAY,UAAU,WAAW,MAAM;AACrC,qBAAe;AACf,qBAAe;AACf,gBAAU;AAAA,OACT;AAAA,KACF,CAAC,YAAY;AAEhB,QAAM,gBAAgB,YAAY,CAAC,MAAM;AACvC,QAAI,EAAE,QAAQ,UAAU;AACtB,QAAE,OAAO;AAAA;AAAA,KAEV;AAEH,QAAM,uBAAuB,YAAY,MAAM;AAC7C,QAAI,CAAC,aAAa;AAChB,qBAAe;AAAA;AAAA,KAEhB,CAAC;AAEJ,YACE,MAAM,MAAM;AACV,iBAAa,YAAY;AACzB,iBAAa,UAAU;AAAA,KAEzB;AAGF,SACE,4DACE,qCAAC,iCAAD;AAAA,IACE,KAAK;AAAA,IACL,cAAc;AAAA,IACd,cAAc;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,KAEV,mBAEF,eAAe,cACd,qCAAC,UAAD,MACE,qCAAC,wBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAY;AAAA,IACZ,KAAK,CAAC,QAAQ,gBAAgB,kBAAkB,UAAU;AAAA,IAC1D,OAAO,KAAK,OAAO,QAAQ;AAAA,OACvB;AAAA,OACA,WAAW;AAAA,KAEf,qCAAC,uBAAD;AAAA,IACE;AAAA,IACA,eAAY;AAAA,IACZ,gBAAgB;AAAA,KAEhB,qCAAC,mBAAD,MAAoB,QACnB,gBAAgB,YAAY,WAAW,YACtC,qCAAC,gBAAD;AAAA,IACE,iBAAiB;AAAA,IACjB,OAAO,OAAO;AAAA,IACd,WAAW,WAAW,SAAS,WAAW,OAAO,2BAA2B;AAAA,OAE5E,UAIR;AAAA;AAKV,YAAY,YAAY;AAExB,MAAM,sBAAsB,SAAS;AACrC,oBAAoB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2 from "react";
|
|
3
|
-
import { StyledTooltipArrow } from "./styles";
|
|
4
|
-
const DSTooltipArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ React2.createElement(StyledTooltipArrow, {
|
|
5
|
-
key: "popper-arrow",
|
|
6
|
-
"data-placement": placement,
|
|
7
|
-
style,
|
|
8
|
-
ref: arrowElementRef,
|
|
9
|
-
"data-testid": "ds-tooltip-arrow"
|
|
10
|
-
}, /* @__PURE__ */ React2.createElement("svg", {
|
|
11
|
-
viewBox: "0 0 30 30"
|
|
12
|
-
}, /* @__PURE__ */ React2.createElement("path", {
|
|
13
|
-
className: "stroke",
|
|
14
|
-
d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n C26.7,29,24.6,28.1,23.7,27.1z"
|
|
15
|
-
}), /* @__PURE__ */ React2.createElement("path", {
|
|
16
|
-
className: "fill",
|
|
17
|
-
d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
|
|
18
|
-
})));
|
|
19
|
-
export {
|
|
20
|
-
DSTooltipArrow
|
|
21
|
-
};
|
|
22
|
-
//# sourceMappingURL=DSTooltipArrow.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSTooltipArrow.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipArrowT } from './index.d';\nimport { StyledTooltipArrow } from './styles';\n\nconst DSTooltipArrow = ({ placement, style, arrowElementRef }: DSTooltipArrowT): React.ReactElement => (\n <StyledTooltipArrow\n key=\"popper-arrow\"\n data-placement={placement}\n style={style}\n ref={arrowElementRef}\n data-testid=\"ds-tooltip-arrow\"\n >\n <svg viewBox=\"0 0 30 30\">\n <path\n className=\"stroke\"\n d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <path\n className=\"fill\"\n d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n />\n </svg>\n </StyledTooltipArrow>\n);\n\nexport { DSTooltipArrow };\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEA;AAEA,MAAM,iBAAiB,CAAC,EAAE,WAAW,OAAO,sBAC1C,qCAAC,oBAAD;AAAA,EACE,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,qCAAC,OAAD;AAAA,EAAK,SAAQ;AAAA,GACX,qCAAC,QAAD;AAAA,EACE,WAAU;AAAA,EACV,GAAE;AAAA,IAGJ,qCAAC,QAAD;AAAA,EACE,WAAU;AAAA,EACV,GAAE;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/TooltipType.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const TooltipType = {\n TOOLTIP: 'tooltip' as const,\n TOOLBAR: 'toolbar' as const,\n};\n\nexport { TooltipType };\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA,MAAM,cAAc;AAAA,EAClB,SAAS;AAAA,EACT,SAAS;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/v2/index.d.js
DELETED
package/dist/esm/v2/propTypes.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "react-desc";
|
|
3
|
-
import { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from "@elliemae/ds-shared/constants";
|
|
4
|
-
import { TooltipType } from "./TooltipType";
|
|
5
|
-
import { tooltipPositions } from "./utils/tooltipPositions";
|
|
6
|
-
const tooltipV2Props = {
|
|
7
|
-
containerProps: PropTypes.object.description("Set of Properties attached to the main container"),
|
|
8
|
-
placement: PropTypes.oneOf(Object.values(tooltipPositions)).description("Tooltip position").defaultValue(tooltipPositions.TOP),
|
|
9
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description("Tooltip content").isRequired,
|
|
10
|
-
delayClose: PropTypes.number.description("Delay to close the tooltip").defaultValue(DEFAULT_DELAY_CLOSE),
|
|
11
|
-
delayOpen: PropTypes.number.description("Delay to open the tooltip ").defaultValue(DEFAULT_DELAY_OPEN),
|
|
12
|
-
triggerComponent: PropTypes.element.description(`The component that will open/close the tooltip.
|
|
13
|
-
Cannot be used with disabled elements.
|
|
14
|
-
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled`).isRequired,
|
|
15
|
-
getIsOpen: PropTypes.func.description("Whether the tooltip is visible or not"),
|
|
16
|
-
onOpen: PropTypes.func.description("Callback when the tooltip opens"),
|
|
17
|
-
showArrow: PropTypes.bool.description("Whether to show an arrow or not").defaultValue(true),
|
|
18
|
-
className: PropTypes.string.description("css class"),
|
|
19
|
-
tooltipType: PropTypes.oneOf(["tooltip", "toolbar"]).description("Type of tooltip").defaultValue(TooltipType.TOOLTIP),
|
|
20
|
-
zIndex: PropTypes.number.description("z-index value assigned to the tooltip").defaultValue(void 0),
|
|
21
|
-
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Ref to the tooltip container element"),
|
|
22
|
-
offset: PropTypes.arrayOf(PropTypes.number).description("Custom Offset for the tooltip [x, y]")
|
|
23
|
-
};
|
|
24
|
-
export {
|
|
25
|
-
tooltipV2Props
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=propTypes.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared/constants';\nimport { TooltipType } from './TooltipType';\nimport { tooltipPositions } from './utils/tooltipPositions';\n\nconst tooltipV2Props = {\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n placement: PropTypes.oneOf(Object.values(tooltipPositions))\n .description('Tooltip position')\n .defaultValue(tooltipPositions.TOP),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('Tooltip content').isRequired,\n delayClose: PropTypes.number.description('Delay to close the tooltip').defaultValue(DEFAULT_DELAY_CLOSE),\n delayOpen: PropTypes.number.description('Delay to open the tooltip ').defaultValue(DEFAULT_DELAY_OPEN),\n triggerComponent: PropTypes.element.description(\n `The component that will open/close the tooltip. \n Cannot be used with disabled elements. \n https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled`,\n ).isRequired,\n getIsOpen: PropTypes.func.description('Whether the tooltip is visible or not'),\n onOpen: PropTypes.func.description('Callback when the tooltip opens'),\n showArrow: PropTypes.bool.description('Whether to show an arrow or not').defaultValue(true),\n className: PropTypes.string.description('css class'),\n tooltipType: PropTypes.oneOf(['tooltip', 'toolbar']).description('Type of tooltip').defaultValue(TooltipType.TOOLTIP),\n zIndex: PropTypes.number.description('z-index value assigned to the tooltip').defaultValue(undefined),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the tooltip container element'),\n offset: PropTypes.arrayOf(PropTypes.number).description('Custom Offset for the tooltip [x, y]'),\n};\n\nexport { tooltipV2Props };\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB;AAAA,EACrB,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,WAAW,UAAU,MAAM,OAAO,OAAO,mBACtC,YAAY,oBACZ,aAAa,iBAAiB;AAAA,EACjC,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,UAAU,YAAY,mBAAmB;AAAA,EACjG,YAAY,UAAU,OAAO,YAAY,8BAA8B,aAAa;AAAA,EACpF,WAAW,UAAU,OAAO,YAAY,8BAA8B,aAAa;AAAA,EACnF,kBAAkB,UAAU,QAAQ,YAClC;AAAA;AAAA,8EAGA;AAAA,EACF,WAAW,UAAU,KAAK,YAAY;AAAA,EACtC,QAAQ,UAAU,KAAK,YAAY;AAAA,EACnC,WAAW,UAAU,KAAK,YAAY,mCAAmC,aAAa;AAAA,EACtF,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,aAAa,UAAU,MAAM,CAAC,WAAW,YAAY,YAAY,mBAAmB,aAAa,YAAY;AAAA,EAC7G,QAAQ,UAAU,OAAO,YAAY,yCAAyC,aAAa;AAAA,EAC3F,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,SAAS,YAAY;AAAA,EAC9E,QAAQ,UAAU,QAAQ,UAAU,QAAQ,YAAY;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/v2/styles.js
DELETED
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
import { kfrm, css } from "@elliemae/ds-system";
|
|
4
|
-
const showAnimation = kfrm`
|
|
5
|
-
from {
|
|
6
|
-
opacity: 0;
|
|
7
|
-
transform: scale(0.8);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
to {
|
|
11
|
-
opacity: 1;
|
|
12
|
-
transform: scale(1);
|
|
13
|
-
visibility: visible;
|
|
14
|
-
}
|
|
15
|
-
`;
|
|
16
|
-
const hideAnimation = kfrm`
|
|
17
|
-
0% {
|
|
18
|
-
opacity: 1;
|
|
19
|
-
transform: scale(1);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
100% {
|
|
23
|
-
opacity: 0;
|
|
24
|
-
transform: scale(0.8);
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
27
|
-
const StyledTooltipContainer = styled.div`
|
|
28
|
-
&[data-popper-reference-hidden='true'] {
|
|
29
|
-
display: none;
|
|
30
|
-
pointer-events: none;
|
|
31
|
-
}
|
|
32
|
-
`;
|
|
33
|
-
const StyledAnimatedTooltip = styled.div`
|
|
34
|
-
text-align: center;
|
|
35
|
-
min-width: ${({ theme }) => theme.space.l};
|
|
36
|
-
max-width: 250px;
|
|
37
|
-
min-height: 24px;
|
|
38
|
-
padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
|
|
39
|
-
position: relative;
|
|
40
|
-
background-color: white;
|
|
41
|
-
border-radius: 2px;
|
|
42
|
-
font-size: 13px;
|
|
43
|
-
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
44
|
-
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%);
|
|
45
|
-
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
|
|
46
|
-
visibility: ${({ showTooltip }) => showTooltip ? "visible" : "hidden"};
|
|
47
|
-
${({ showTooltip }) => css`
|
|
48
|
-
animation: ${showTooltip ? showAnimation : hideAnimation} 0.1s ease-in;
|
|
49
|
-
`}
|
|
50
|
-
transition: visibility 0.1s ease-in;
|
|
51
|
-
`;
|
|
52
|
-
const StyledTriggerComponentContainer = styled.div`
|
|
53
|
-
display: inline-block;
|
|
54
|
-
`;
|
|
55
|
-
const StyledTooltipText = styled.div`
|
|
56
|
-
white-space: normal;
|
|
57
|
-
word-wrap: break-word;
|
|
58
|
-
display: inline-block;
|
|
59
|
-
`;
|
|
60
|
-
const StyledTooltipArrow = styled.div`
|
|
61
|
-
position: absolute;
|
|
62
|
-
width: 18px;
|
|
63
|
-
height: 18px;
|
|
64
|
-
pointer-events: none;
|
|
65
|
-
background-color: transparent;
|
|
66
|
-
& .stroke {
|
|
67
|
-
fill: white;
|
|
68
|
-
}
|
|
69
|
-
& .fill {
|
|
70
|
-
fill: white;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
&[data-placement^='top'] {
|
|
74
|
-
svg {
|
|
75
|
-
transform: rotateZ(180deg);
|
|
76
|
-
}
|
|
77
|
-
top: 98%;
|
|
78
|
-
}
|
|
79
|
-
&[data-placement^='right'] {
|
|
80
|
-
svg {
|
|
81
|
-
transform: rotateZ(-90deg);
|
|
82
|
-
}
|
|
83
|
-
right: 99.5%;
|
|
84
|
-
}
|
|
85
|
-
&[data-placement^='bottom'] {
|
|
86
|
-
bottom: 97%;
|
|
87
|
-
}
|
|
88
|
-
&[data-placement^='left'] {
|
|
89
|
-
svg {
|
|
90
|
-
transform: rotateZ(90deg);
|
|
91
|
-
}
|
|
92
|
-
left: 99.5%;
|
|
93
|
-
}
|
|
94
|
-
`;
|
|
95
|
-
export {
|
|
96
|
-
StyledAnimatedTooltip,
|
|
97
|
-
StyledTooltipArrow,
|
|
98
|
-
StyledTooltipContainer,
|
|
99
|
-
StyledTooltipText,
|
|
100
|
-
StyledTriggerComponentContainer
|
|
101
|
-
};
|
|
102
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { kfrm, css } from '@elliemae/ds-system';\nimport { TooltipAnimationT, TooltipContainerT } from './index.d';\n\nconst showAnimation = kfrm`\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n visibility: visible;\n }\n`;\n\nconst hideAnimation = kfrm`\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n\n 100% {\n opacity: 0;\n transform: scale(0.8);\n }\n`;\n\nconst StyledTooltipContainer = styled.div<TooltipContainerT>`\n &[data-popper-reference-hidden='true'] {\n display: none;\n pointer-events: none;\n }\n`;\n\nconst StyledAnimatedTooltip = styled.div<TooltipAnimationT>`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n min-height: 24px;\n padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n box-shadow: 0 1px 5px 0 rgb(0 0 0 / 13%), 0 2px 4px 0 rgb(0 0 0 / 20%);\n filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));\n visibility: ${({ showTooltip }) => (showTooltip ? 'visible' : 'hidden')};\n ${({ showTooltip }) =>\n css`\n animation: ${showTooltip ? showAnimation : hideAnimation} 0.1s ease-in;\n `}\n transition: visibility 0.1s ease-in;\n`;\n\nconst StyledTriggerComponentContainer = styled.div`\n display: inline-block;\n`;\n\nconst StyledTooltipText = styled.div`\n white-space: normal;\n word-wrap: break-word;\n display: inline-block;\n`;\n\nconst StyledTooltipArrow = styled.div`\n position: absolute;\n width: 18px;\n height: 18px;\n pointer-events: none;\n background-color: transparent;\n & .stroke {\n fill: white;\n }\n & .fill {\n fill: white;\n }\n\n &[data-placement^='top'] {\n svg {\n transform: rotateZ(180deg);\n }\n top: 98%;\n }\n &[data-placement^='right'] {\n svg {\n transform: rotateZ(-90deg);\n }\n right: 99.5%;\n }\n &[data-placement^='bottom'] {\n bottom: 97%;\n }\n &[data-placement^='left'] {\n svg {\n transform: rotateZ(90deg);\n }\n left: 99.5%;\n }\n`;\n\nexport {\n StyledTooltipContainer,\n StyledTriggerComponentContainer,\n StyledTooltipText,\n StyledTooltipArrow,\n StyledAnimatedTooltip,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AAGA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAatB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYtB,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,wBAAwB,OAAO;AAAA;AAAA,eAEtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,aAG7B,CAAC,EAAE,YAAY,GAAG,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,WAKpD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gBAG/B,CAAC,EAAE,kBAAmB,cAAc,YAAY;AAAA,IAC5D,CAAC,EAAE,kBACH;AAAA,mBACe,cAAc,gBAAgB;AAAA;AAAA;AAAA;AAKjD,MAAM,kCAAkC,OAAO;AAAA;AAAA;AAI/C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMjC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
const setMultipleRefs = (...refs) => {
|
|
3
|
-
const filteredRefs = refs.filter(Boolean);
|
|
4
|
-
if (!filteredRefs.length)
|
|
5
|
-
return null;
|
|
6
|
-
if (filteredRefs.length === 0)
|
|
7
|
-
return filteredRefs[0];
|
|
8
|
-
return (newRef) => {
|
|
9
|
-
filteredRefs.forEach((refToBeUpdated) => {
|
|
10
|
-
if (typeof refToBeUpdated === "function") {
|
|
11
|
-
refToBeUpdated(newRef);
|
|
12
|
-
} else if (refToBeUpdated) {
|
|
13
|
-
refToBeUpdated.current = newRef;
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
export {
|
|
19
|
-
setMultipleRefs
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=setMultipleRefs.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/utils/setMultipleRefs.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const setMultipleRefs = (...refs) => {\n const filteredRefs = refs.filter(Boolean);\n if (!filteredRefs.length) return null;\n if (filteredRefs.length === 0) return filteredRefs[0];\n return (newRef) => {\n filteredRefs.forEach((refToBeUpdated) => {\n if (typeof refToBeUpdated === 'function') {\n refToBeUpdated(newRef);\n } else if (refToBeUpdated) {\n refToBeUpdated.current = newRef;\n }\n });\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,kBAAkB,IAAI,SAAS;AAC1C,QAAM,eAAe,KAAK,OAAO;AACjC,MAAI,CAAC,aAAa;AAAQ,WAAO;AACjC,MAAI,aAAa,WAAW;AAAG,WAAO,aAAa;AACnD,SAAO,CAAC,WAAW;AACjB,iBAAa,QAAQ,CAAC,mBAAmB;AACvC,UAAI,OAAO,mBAAmB,YAAY;AACxC,uBAAe;AAAA,iBACN,gBAAgB;AACzB,uBAAe,UAAU;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
const tooltipPositions = {
|
|
3
|
-
TOP: "top",
|
|
4
|
-
BOTTOM: "bottom",
|
|
5
|
-
RIGHT: "right",
|
|
6
|
-
LEFT: "left",
|
|
7
|
-
TOP_START: "top-start",
|
|
8
|
-
TOP_END: "top-end",
|
|
9
|
-
BOTTOM_START: "bottom-start",
|
|
10
|
-
BOTTOM_END: "bottom-end",
|
|
11
|
-
RIGHT_START: "right-start",
|
|
12
|
-
RIGHT_END: "right-end",
|
|
13
|
-
LEFT_START: "left-start",
|
|
14
|
-
LEFT_END: "left-end"
|
|
15
|
-
};
|
|
16
|
-
export {
|
|
17
|
-
tooltipPositions
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=tooltipPositions.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/utils/tooltipPositions.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const tooltipPositions = {\n TOP: 'top' as const,\n BOTTOM: 'bottom' as const,\n RIGHT: 'right' as const,\n LEFT: 'left' as const,\n TOP_START: 'top-start' as const,\n TOP_END: 'top-end' as const,\n BOTTOM_START: 'bottom-start' as const,\n BOTTOM_END: 'bottom-end' as const,\n RIGHT_START: 'right-start' as const,\n RIGHT_END: 'right-end' as const,\n LEFT_START: 'left-start' as const,\n LEFT_END: 'left-end' as const,\n};\n\nexport { tooltipPositions };\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA,MAAM,mBAAmB;AAAA,EACvB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
const TooltipV3DatatestId = {
|
|
3
|
-
TRIGGER_WRAPPER: "ds-tooltip-v3-trigger-wrapper",
|
|
4
|
-
TOOLTIP_TEXT_WRAPPER: "ds-tooltip-v3-tooltip-text-wrapper"
|
|
5
|
-
};
|
|
6
|
-
export {
|
|
7
|
-
TooltipV3DatatestId
|
|
8
|
-
};
|
|
9
|
-
//# sourceMappingURL=TooltipV3DatatestId.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v3/TooltipV3DatatestId.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const TooltipV3DatatestId = {\n TRIGGER_WRAPPER: 'ds-tooltip-v3-trigger-wrapper',\n TOOLTIP_TEXT_WRAPPER: 'ds-tooltip-v3-tooltip-text-wrapper',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,sBAAsB;AAAA,EACjC,iBAAiB;AAAA,EACjB,sBAAsB;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
3
|
-
const noop = () => {
|
|
4
|
-
};
|
|
5
|
-
const defaultProps = {
|
|
6
|
-
onOpen: noop,
|
|
7
|
-
onClose: noop,
|
|
8
|
-
id: "",
|
|
9
|
-
textAlign: "left"
|
|
10
|
-
};
|
|
11
|
-
const useWithDefaultProps = (props) => useMemoMergePropsWithDefault(props, defaultProps);
|
|
12
|
-
export {
|
|
13
|
-
useWithDefaultProps
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=useWithDefaultProps.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v3/config/useWithDefaultProps.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport type { TooltipV3PropsT } from '../index.d';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst defaultProps = {\n onOpen: noop,\n onClose: noop,\n id: '',\n textAlign: 'left',\n};\n\nexport const useWithDefaultProps = (props: Partial<TooltipV3PropsT>): Partial<TooltipV3PropsT> =>\n useMemoMergePropsWithDefault(props, defaultProps);\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAIA,MAAM,OAAO,MAAM;AAAA;AAEnB,MAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,WAAW;AAAA;AAGN,MAAM,sBAAsB,CAAC,UAClC,6BAA6B,OAAO;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/v3/index.d.js
DELETED