@elliemae/ds-tooltip 3.16.0-next.4 → 3.16.0-next.6
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/v1/DSTooltip.js +1 -0
- package/dist/cjs/v1/DSTooltip.js.map +2 -2
- package/dist/cjs/v2/DSTooltip.js +2 -0
- package/dist/cjs/v2/DSTooltip.js.map +2 -2
- package/dist/esm/v1/DSTooltip.js +2 -1
- package/dist/esm/v1/DSTooltip.js.map +2 -2
- package/dist/esm/v2/DSTooltip.js +2 -0
- package/dist/esm/v2/DSTooltip.js.map +2 -2
- package/package.json +10 -10
- package/dist/cjs/package.json +0 -7
- package/dist/esm/package.json +0 -7
package/dist/cjs/v1/DSTooltip.js
CHANGED
|
@@ -64,6 +64,7 @@ const DSTooltip = ({
|
|
|
64
64
|
zIndex,
|
|
65
65
|
...otherTooltipProps
|
|
66
66
|
}) => {
|
|
67
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-tooltip", version: "TBD Date: 2023 Q3" });
|
|
67
68
|
const { cssClassName: tooltipBlockName } = (0, import_ds_classnames.convertPropToCssClassName)(blockName);
|
|
68
69
|
let Content = title;
|
|
69
70
|
if (typeof title === "string") {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v1/DSTooltip.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { DSPopper, PopperPositions, PopperInteractions, interactions, positions } 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(blockName);\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('Set of Properties attached to the main container'),\n placement: PropTypes.oneOf(positions).description('Tooltip position').defaultValue(PopperPositions.TOP),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('Tooltip content').isRequired,\n delayClose: PropTypes.string.description('Delay to close the tooltip').defaultValue(DEFAULT_DELAY_CLOSE),\n delayOpen: PropTypes.string.description('Delay to open the tooltip ').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.description('Whether the tooltip is visible or not').defaultValue(undefined),\n onOpen: PropTypes.func.description('Handler when the tooltip opens'),\n springAnimationComponent: PropTypes.element.description('Spring animation component'),\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};\n\nDSTooltip.propTypes = tooltipProps;\nDSTooltip.displayName = 'DSTooltip';\nconst TooltipWithSchema = describe(DSTooltip);\nTooltipWithSchema.propTypes = tooltipProps;\n\nexport { DSTooltip, TooltipContainer, TooltipText, TooltipWithSchema };\nexport default DSTooltip;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { getComponentFromProps, useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { DSPopper, PopperPositions, PopperInteractions, interactions, positions } 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 useDeprecateComponent({ componentName: 'ds-tooltip', version: 'TBD Date: 2023 Q3' });\n\n const { cssClassName: tooltipBlockName } = convertPropToCssClassName(blockName);\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('Set of Properties attached to the main container'),\n placement: PropTypes.oneOf(positions).description('Tooltip position').defaultValue(PopperPositions.TOP),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('Tooltip content').isRequired,\n delayClose: PropTypes.string.description('Delay to close the tooltip').defaultValue(DEFAULT_DELAY_CLOSE),\n delayOpen: PropTypes.string.description('Delay to open the tooltip ').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.description('Whether the tooltip is visible or not').defaultValue(undefined),\n onOpen: PropTypes.func.description('Handler when the tooltip opens'),\n springAnimationComponent: PropTypes.element.description('Spring animation component'),\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};\n\nDSTooltip.propTypes = tooltipProps;\nDSTooltip.displayName = 'DSTooltip';\nconst TooltipWithSchema = describe(DSTooltip);\nTooltipWithSchema.propTypes = tooltipProps;\n\nexport { DSTooltip, TooltipContainer, TooltipText, TooltipWithSchema };\nexport default DSTooltip;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/v2/DSTooltip.js
CHANGED
|
@@ -31,6 +31,7 @@ module.exports = __toCommonJS(DSTooltip_exports);
|
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_react = require("react");
|
|
34
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
34
35
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
36
|
var import_ds_portal = require("@elliemae/ds-portal");
|
|
36
37
|
var import_ds_shared = require("@elliemae/ds-shared");
|
|
@@ -59,6 +60,7 @@ const DSTooltipV2 = ({
|
|
|
59
60
|
zIndex,
|
|
60
61
|
extraModifiers = {}
|
|
61
62
|
}) => {
|
|
63
|
+
(0, import_ds_utilities.useDeprecateComponent)({ componentName: "ds-tooltip-v2", version: "TBD Date: 2023 Q3" });
|
|
62
64
|
const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
|
|
63
65
|
const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
|
|
64
66
|
const [referenceElement, setReferenceElement] = (0, import_react.useState)(triggerComponent);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/v2/DSTooltip.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect, useRef, useContext } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { usePopper } from 'react-popper';\nimport { ThemeContext } from '@elliemae/ds-system';\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 type { 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,\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 const theme = useContext(ThemeContext);\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: zIndex ?? theme.zIndex.tooltip }}\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;\nDSTooltipV2.displayName = 'DSTooltipV2';\nconst TooltipV2WithSchema = describe(DSTooltipV2);\nTooltipV2WithSchema.propTypes = tooltipV2Props;\n\nexport { DSTooltipV2, TooltipV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect, useRef, useContext } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { usePopper } from 'react-popper';\nimport { ThemeContext } from '@elliemae/ds-system';\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 type { 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,\n extraModifiers = {},\n}: DSTooltipT): React.ReactElement => {\n useDeprecateComponent({ componentName: 'ds-tooltip-v2', version: 'TBD Date: 2023 Q3' });\n\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 const theme = useContext(ThemeContext);\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: zIndex ?? theme.zIndex.tooltip }}\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;\nDSTooltipV2.displayName = 'DSTooltipV2';\nconst TooltipV2WithSchema = describe(DSTooltipV2);\nTooltipV2WithSchema.propTypes = tooltipV2Props;\n\nexport { DSTooltipV2, TooltipV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v1/DSTooltip.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { aggregatedClasses, convertPropToCssClassName } from "@elliemae/ds-classnames";
|
|
4
|
-
import { getComponentFromProps } from "@elliemae/ds-utilities";
|
|
4
|
+
import { getComponentFromProps, useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
5
5
|
import { describe, PropTypes } from "@elliemae/ds-props-helpers";
|
|
6
6
|
import { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from "@elliemae/ds-shared";
|
|
7
7
|
import { DSPopper, PopperPositions, PopperInteractions, interactions, positions } from "@elliemae/ds-popper";
|
|
@@ -31,6 +31,7 @@ const DSTooltip = ({
|
|
|
31
31
|
zIndex,
|
|
32
32
|
...otherTooltipProps
|
|
33
33
|
}) => {
|
|
34
|
+
useDeprecateComponent({ componentName: "ds-tooltip", version: "TBD Date: 2023 Q3" });
|
|
34
35
|
const { cssClassName: tooltipBlockName } = convertPropToCssClassName(blockName);
|
|
35
36
|
let Content = title;
|
|
36
37
|
if (typeof title === "string") {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { DSPopper, PopperPositions, PopperInteractions, interactions, positions } 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(blockName);\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('Set of Properties attached to the main container'),\n placement: PropTypes.oneOf(positions).description('Tooltip position').defaultValue(PopperPositions.TOP),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('Tooltip content').isRequired,\n delayClose: PropTypes.string.description('Delay to close the tooltip').defaultValue(DEFAULT_DELAY_CLOSE),\n delayOpen: PropTypes.string.description('Delay to open the tooltip ').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.description('Whether the tooltip is visible or not').defaultValue(undefined),\n onOpen: PropTypes.func.description('Handler when the tooltip opens'),\n springAnimationComponent: PropTypes.element.description('Spring animation component'),\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};\n\nDSTooltip.propTypes = tooltipProps;\nDSTooltip.displayName = 'DSTooltip';\nconst TooltipWithSchema = describe(DSTooltip);\nTooltipWithSchema.propTypes = tooltipProps;\n\nexport { DSTooltip, TooltipContainer, TooltipText, TooltipWithSchema };\nexport default DSTooltip;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { getComponentFromProps, useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { DSPopper, PopperPositions, PopperInteractions, interactions, positions } 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 useDeprecateComponent({ componentName: 'ds-tooltip', version: 'TBD Date: 2023 Q3' });\n\n const { cssClassName: tooltipBlockName } = convertPropToCssClassName(blockName);\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('Set of Properties attached to the main container'),\n placement: PropTypes.oneOf(positions).description('Tooltip position').defaultValue(PopperPositions.TOP),\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('Tooltip content').isRequired,\n delayClose: PropTypes.string.description('Delay to close the tooltip').defaultValue(DEFAULT_DELAY_CLOSE),\n delayOpen: PropTypes.string.description('Delay to open the tooltip ').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.description('Whether the tooltip is visible or not').defaultValue(undefined),\n onOpen: PropTypes.func.description('Handler when the tooltip opens'),\n springAnimationComponent: PropTypes.element.description('Spring animation component'),\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};\n\nDSTooltip.propTypes = tooltipProps;\nDSTooltip.displayName = 'DSTooltip';\nconst TooltipWithSchema = describe(DSTooltip);\nTooltipWithSchema.propTypes = tooltipProps;\n\nexport { DSTooltip, TooltipContainer, TooltipText, TooltipWithSchema };\nexport default DSTooltip;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/v2/DSTooltip.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useCallback, useEffect, useRef, useContext } from "react";
|
|
4
|
+
import { useDeprecateComponent } from "@elliemae/ds-utilities";
|
|
4
5
|
import { describe } from "@elliemae/ds-props-helpers";
|
|
5
6
|
import { DSPortal } from "@elliemae/ds-portal";
|
|
6
7
|
import { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from "@elliemae/ds-shared";
|
|
@@ -34,6 +35,7 @@ const DSTooltipV2 = ({
|
|
|
34
35
|
zIndex,
|
|
35
36
|
extraModifiers = {}
|
|
36
37
|
}) => {
|
|
38
|
+
useDeprecateComponent({ componentName: "ds-tooltip-v2", version: "TBD Date: 2023 Q3" });
|
|
37
39
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
38
40
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
39
41
|
const [referenceElement, setReferenceElement] = useState(triggerComponent);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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, useContext } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { usePopper } from 'react-popper';\nimport { ThemeContext } from '@elliemae/ds-system';\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 type { 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,\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 const theme = useContext(ThemeContext);\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: zIndex ?? theme.zIndex.tooltip }}\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;\nDSTooltipV2.displayName = 'DSTooltipV2';\nconst TooltipV2WithSchema = describe(DSTooltipV2);\nTooltipV2WithSchema.propTypes = tooltipV2Props;\n\nexport { DSTooltipV2, TooltipV2WithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useCallback, useEffect, useRef, useContext } from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSPortal } from '@elliemae/ds-portal';\nimport { DEFAULT_DELAY_OPEN, DEFAULT_DELAY_CLOSE } from '@elliemae/ds-shared';\nimport { usePopper } from 'react-popper';\nimport { ThemeContext } from '@elliemae/ds-system';\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 type { 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,\n extraModifiers = {},\n}: DSTooltipT): React.ReactElement => {\n useDeprecateComponent({ componentName: 'ds-tooltip-v2', version: 'TBD Date: 2023 Q3' });\n\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 const theme = useContext(ThemeContext);\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: zIndex ?? theme.zIndex.tooltip }}\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;\nDSTooltipV2.displayName = 'DSTooltipV2';\nconst TooltipV2WithSchema = describe(DSTooltipV2);\nTooltipV2WithSchema.propTypes = tooltipV2Props;\n\nexport { DSTooltipV2, TooltipV2WithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-tooltip",
|
|
3
|
-
"version": "3.16.0-next.
|
|
3
|
+
"version": "3.16.0-next.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Tooltip",
|
|
6
6
|
"files": [
|
|
@@ -97,15 +97,15 @@
|
|
|
97
97
|
"dependencies": {
|
|
98
98
|
"@popperjs/core": "~2.11.5",
|
|
99
99
|
"react-popper": "~2.3.0",
|
|
100
|
-
"@elliemae/ds-button": "3.16.0-next.
|
|
101
|
-
"@elliemae/ds-
|
|
102
|
-
"@elliemae/ds-
|
|
103
|
-
"@elliemae/ds-
|
|
104
|
-
"@elliemae/ds-
|
|
105
|
-
"@elliemae/ds-
|
|
106
|
-
"@elliemae/ds-
|
|
107
|
-
"@elliemae/ds-
|
|
108
|
-
"@elliemae/ds-
|
|
100
|
+
"@elliemae/ds-button": "3.16.0-next.6",
|
|
101
|
+
"@elliemae/ds-classnames": "3.16.0-next.6",
|
|
102
|
+
"@elliemae/ds-popper": "3.16.0-next.6",
|
|
103
|
+
"@elliemae/ds-popperjs": "3.16.0-next.6",
|
|
104
|
+
"@elliemae/ds-portal": "3.16.0-next.6",
|
|
105
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.6",
|
|
106
|
+
"@elliemae/ds-shared": "3.16.0-next.6",
|
|
107
|
+
"@elliemae/ds-system": "3.16.0-next.6",
|
|
108
|
+
"@elliemae/ds-utilities": "3.16.0-next.6"
|
|
109
109
|
},
|
|
110
110
|
"devDependencies": {
|
|
111
111
|
"@testing-library/jest-dom": "~5.16.4",
|
package/dist/cjs/package.json
DELETED