@activecollab/components 1.0.142 → 1.0.143
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/components/Tooltip/Styles.js +1 -3
- package/dist/cjs/components/Tooltip/Styles.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js +2 -5
- package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tooltip/Styles.d.ts +0 -1
- package/dist/esm/components/Tooltip/Styles.d.ts.map +1 -1
- package/dist/esm/components/Tooltip/Styles.js +1 -3
- package/dist/esm/components/Tooltip/Styles.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.d.ts +0 -1
- package/dist/esm/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +2 -5
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/index.js +3 -8
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -20,10 +20,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
20
20
|
var StyledTooltip = _styledComponents.default.div.withConfig({
|
|
21
21
|
displayName: "Styles__StyledTooltip",
|
|
22
22
|
componentId: "sc-rur9b5-0"
|
|
23
|
-
})(["", " ", " border-radius:8px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", "
|
|
23
|
+
})(["", " ", " max-width:200px;border-radius:8px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", ""], _BoxSizingStyle.BoxSizingStyle, _FontStyle.FontStyle, function (props) {
|
|
24
24
|
return props.$isLight && (0, _styledComponents.css)(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
|
|
25
|
-
}, function (props) {
|
|
26
|
-
return props.$width && (0, _styledComponents.css)(["width:", "px;"], props.$width);
|
|
27
25
|
});
|
|
28
26
|
|
|
29
27
|
exports.StyledTooltip = StyledTooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tooltip/Styles.ts"],"names":["StyledTooltip","styled","div","BoxSizingStyle","FontStyle","props","$isLight","css"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tooltip/Styles.ts"],"names":["StyledTooltip","styled","div","BoxSizingStyle","FontStyle","props","$isLight","css"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAEO,IAAMA,aAAa,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,qMACtBC,8BADsB,EAEtBC,oBAFsB,EAetB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,+GADA;AAAA,CAfsB,CAAnB","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledTooltip = styled.div<{ $isLight: boolean }>`\n ${BoxSizingStyle}\n ${FontStyle}\n\n max-width: 200px;\n border-radius: 8px;\n padding: 4px 10px;\n text-align: center;\n background-color: rgba(0, 0, 0, 0.9);\n font-size: 12px;\n font-weight: 500;\n line-height: normal;\n color: #fff;\n margin: 4px;\n\n ${(props) =>\n props.$isLight &&\n css`\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-secondary);\n color: var(--color-theme-700);\n `}\n`;\n"],"file":"Styles.js"}
|
|
@@ -77,9 +77,7 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
|
77
77
|
TransitionComponent = _ref2$TransitionCompo === void 0 ? TooltipAnimation : _ref2$TransitionCompo,
|
|
78
78
|
popperTooltipStyle = _ref2.popperTooltipStyle,
|
|
79
79
|
popperTooltipClassName = _ref2.popperTooltipClassName,
|
|
80
|
-
disable = _ref2.disable
|
|
81
|
-
_ref2$width = _ref2.width,
|
|
82
|
-
width = _ref2$width === void 0 ? 200 : _ref2$width;
|
|
80
|
+
disable = _ref2.disable;
|
|
83
81
|
|
|
84
82
|
var _useLayerContext = (0, _helpers.useLayerContext)(),
|
|
85
83
|
_useLayerContext$zInd = _useLayerContext.zIndex,
|
|
@@ -140,8 +138,7 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
|
140
138
|
style: style
|
|
141
139
|
}), /*#__PURE__*/_react.default.createElement(_Styles.StyledTooltip, {
|
|
142
140
|
className: (0, _classnames.default)("c-tooltip-ds", className),
|
|
143
|
-
$isLight: isLight
|
|
144
|
-
$width: width
|
|
141
|
+
$isLight: isLight
|
|
145
142
|
}, title));
|
|
146
143
|
})));
|
|
147
144
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["TooltipAnimation","children","props","Tooltip","ref","title","className","style","isLight","placement","TransitionComponent","popperTooltipStyle","popperTooltipClassName","disable","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["TooltipAnimation","children","props","Tooltip","ref","title","className","style","isLight","placement","TransitionComponent","popperTooltipStyle","popperTooltipClassName","disable","zIndex","layers","skyscraper","open","setOpen","childNode","setChildNode","handleEnter","event","childrenProps","type","onMouseOver","removeAttribute","handleLeave","onMouseLeave","currentTarget","handleOwnRef","handleRef","React","cloneElement","transitionProps","displayName"],"mappings":"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","sourcesContent":["import React, {\n ReactElement,\n useState,\n CSSProperties,\n MouseEvent,\n forwardRef,\n Ref,\n FC,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper, Placement } from \"../Popper\";\nimport { FromElement } from \"../Transitions/FromElement\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { TransitionProps } from \"../Transitions\";\nimport { Portal, useLayerContext } from \"../../helpers\";\nimport { StyledTooltip } from \"./Styles\";\nimport { layers } from \"../../utils\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport interface ITooltipProps {\n /** Children element. */\n children: ElementWithRef<HTMLElement>;\n /** Title element. */\n title: ReactElement | string;\n /** Applies passed styles */\n style?: CSSProperties;\n /** Applies passed classes */\n className?: string;\n /** Open */\n open?: boolean;\n /** Placement */\n placement?: Placement;\n /** Transition component */\n TransitionComponent?: React.FC<TransitionProps>;\n /** Light tooltip */\n isLight?: boolean;\n /** Popper Tooltip style */\n popperTooltipStyle?: CSSProperties;\n /** Popper Tooltip class name*/\n popperTooltipClassName?: string;\n /** Remove tooltip */\n disable?: boolean;\n}\n\ninterface ITooltipAnimation extends TransitionProps {\n children: ReactElement;\n}\n\nconst TooltipAnimation: FC<ITooltipAnimation> = ({ children, ...props }) => {\n return (\n <FromElement timeout={0} {...props}>\n {children}\n </FromElement>\n );\n};\n\nexport const Tooltip = forwardRef<HTMLElement, ITooltipProps>(\n (\n {\n children,\n title,\n className,\n style,\n isLight = false,\n placement = \"top\",\n TransitionComponent = TooltipAnimation,\n popperTooltipStyle,\n popperTooltipClassName,\n disable,\n },\n ref\n ) => {\n const { zIndex = layers.skyscraper } = useLayerContext();\n const [open, setOpen] = useState(false);\n const [childNode, setChildNode] = useState<HTMLElement | null>();\n\n const handleEnter = (event: MouseEvent<HTMLElement>): void => {\n const childrenProps = children.props;\n\n if (event.type === \"mouseover\" && childrenProps.onMouseOver) {\n childrenProps.onMouseOver(event);\n }\n\n childNode && childNode.removeAttribute(\"title\");\n\n setOpen(true);\n };\n\n const handleLeave = (event: MouseEvent<HTMLElement>): void => {\n const childrenProps = children.props;\n\n if (\n event.type === \"mouseleave\" &&\n childrenProps.onMouseLeave &&\n event.currentTarget === childNode\n ) {\n childrenProps.onMouseLeave(event);\n }\n\n setOpen(false);\n };\n\n const handleOwnRef = useForkRef(children.ref, ref);\n const handleRef = useForkRef(setChildNode, handleOwnRef);\n\n const childrenProps = {\n onMouseOver: handleEnter,\n onMouseLeave: handleLeave,\n ref: handleRef,\n };\n\n return (\n <>\n {React.cloneElement(children, childrenProps)}\n {!disable && (\n <Portal>\n <Popper\n anchorEl={childNode}\n open={childNode ? open : false}\n placement={placement}\n transition\n className={popperTooltipClassName}\n style={{ zIndex, ...popperTooltipStyle }}\n role=\"tooltip\"\n >\n {({ transitionProps = {} }): ReactElement => (\n <TransitionComponent {...transitionProps} style={style}>\n <StyledTooltip\n className={classnames(\"c-tooltip-ds\", className)}\n $isLight={isLight}\n >\n {title}\n </StyledTooltip>\n </TransitionComponent>\n )}\n </Popper>\n </Portal>\n )}\n </>\n );\n }\n);\n\nTooltip.displayName = \"Tooltip\";\n"],"file":"Tooltip.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;cAA0B,OAAO;
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;cAA0B,OAAO;SAsB1D,CAAC"}
|
|
@@ -4,9 +4,7 @@ import { FontStyle } from "../FontStyle";
|
|
|
4
4
|
export var StyledTooltip = styled.div.withConfig({
|
|
5
5
|
displayName: "Styles__StyledTooltip",
|
|
6
6
|
componentId: "sc-rur9b5-0"
|
|
7
|
-
})(["", " ", " border-radius:8px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", "
|
|
7
|
+
})(["", " ", " max-width:200px;border-radius:8px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", ""], BoxSizingStyle, FontStyle, function (props) {
|
|
8
8
|
return props.$isLight && css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
|
|
9
|
-
}, function (props) {
|
|
10
|
-
return props.$width && css(["width:", "px;"], props.$width);
|
|
11
9
|
});
|
|
12
10
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tooltip/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledTooltip","div","props","$isLight"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tooltip/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","StyledTooltip","div","props","$isLight"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,aAAa,GAAGJ,MAAM,CAACK,GAAV;AAAA;AAAA;AAAA,qMACtBH,cADsB,EAEtBC,SAFsB,EAetB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAN,GADA,8GADA;AAAA,CAfsB,CAAnB","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledTooltip = styled.div<{ $isLight: boolean }>`\n ${BoxSizingStyle}\n ${FontStyle}\n\n max-width: 200px;\n border-radius: 8px;\n padding: 4px 10px;\n text-align: center;\n background-color: rgba(0, 0, 0, 0.9);\n font-size: 12px;\n font-weight: 500;\n line-height: normal;\n color: #fff;\n margin: 4px;\n\n ${(props) =>\n props.$isLight &&\n css`\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-secondary);\n color: var(--color-theme-700);\n `}\n`;\n"],"file":"Styles.js"}
|
|
@@ -16,7 +16,6 @@ export interface ITooltipProps {
|
|
|
16
16
|
popperTooltipStyle?: CSSProperties;
|
|
17
17
|
popperTooltipClassName?: string;
|
|
18
18
|
disable?: boolean;
|
|
19
|
-
width?: number;
|
|
20
19
|
}
|
|
21
20
|
export declare const Tooltip: React.ForwardRefExoticComponent<ITooltipProps & React.RefAttributes<HTMLElement>>;
|
|
22
21
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAEZ,aAAa,EAGb,GAAG,EAEJ,MAAM,OAAO,CAAC;AAEf,OAAO,EAAU,SAAS,EAAE,MAAM,WAAW,CAAC;AAG9C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKjD,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,YAAY;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAE5B,QAAQ,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAEtC,KAAK,EAAE,YAAY,GAAG,MAAM,CAAC;IAE7B,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;IAEhD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kBAAkB,CAAC,EAAE,aAAa,CAAC;IAEnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAEZ,aAAa,EAGb,GAAG,EAEJ,MAAM,OAAO,CAAC;AAEf,OAAO,EAAU,SAAS,EAAE,MAAM,WAAW,CAAC;AAG9C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKjD,UAAU,cAAc,CAAC,CAAC,CAAE,SAAQ,YAAY;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAE5B,QAAQ,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAEtC,KAAK,EAAE,YAAY,GAAG,MAAM,CAAC;IAE7B,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;IAEhD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,kBAAkB,CAAC,EAAE,aAAa,CAAC;IAEnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAcD,eAAO,MAAM,OAAO,mFAqFnB,CAAC"}
|
|
@@ -32,9 +32,7 @@ export var Tooltip = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
|
|
32
32
|
TransitionComponent = _ref2$TransitionCompo === void 0 ? TooltipAnimation : _ref2$TransitionCompo,
|
|
33
33
|
popperTooltipStyle = _ref2.popperTooltipStyle,
|
|
34
34
|
popperTooltipClassName = _ref2.popperTooltipClassName,
|
|
35
|
-
disable = _ref2.disable
|
|
36
|
-
_ref2$width = _ref2.width,
|
|
37
|
-
width = _ref2$width === void 0 ? 200 : _ref2$width;
|
|
35
|
+
disable = _ref2.disable;
|
|
38
36
|
|
|
39
37
|
var _useLayerContext = useLayerContext(),
|
|
40
38
|
_useLayerContext$zInd = _useLayerContext.zIndex,
|
|
@@ -93,8 +91,7 @@ export var Tooltip = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
|
|
93
91
|
style: style
|
|
94
92
|
}), /*#__PURE__*/React.createElement(StyledTooltip, {
|
|
95
93
|
className: classnames("c-tooltip-ds", className),
|
|
96
|
-
$isLight: isLight
|
|
97
|
-
$width: width
|
|
94
|
+
$isLight: isLight
|
|
98
95
|
}, title));
|
|
99
96
|
})));
|
|
100
97
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["React","useState","forwardRef","classnames","Popper","FromElement","useForkRef","Portal","useLayerContext","StyledTooltip","layers","TooltipAnimation","children","props","Tooltip","ref","title","className","style","isLight","placement","TransitionComponent","popperTooltipStyle","popperTooltipClassName","disable","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["React","useState","forwardRef","classnames","Popper","FromElement","useForkRef","Portal","useLayerContext","StyledTooltip","layers","TooltipAnimation","children","props","Tooltip","ref","title","className","style","isLight","placement","TransitionComponent","popperTooltipStyle","popperTooltipClassName","disable","zIndex","skyscraper","open","setOpen","childNode","setChildNode","handleEnter","event","childrenProps","type","onMouseOver","removeAttribute","handleLeave","onMouseLeave","currentTarget","handleOwnRef","handleRef","cloneElement","transitionProps","displayName"],"mappings":"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","sourcesContent":["import React, {\n ReactElement,\n useState,\n CSSProperties,\n MouseEvent,\n forwardRef,\n Ref,\n FC,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Popper, Placement } from \"../Popper\";\nimport { FromElement } from \"../Transitions/FromElement\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { TransitionProps } from \"../Transitions\";\nimport { Portal, useLayerContext } from \"../../helpers\";\nimport { StyledTooltip } from \"./Styles\";\nimport { layers } from \"../../utils\";\n\ninterface ElementWithRef<T> extends ReactElement {\n ref?: Ref<T>;\n}\n\nexport interface ITooltipProps {\n /** Children element. */\n children: ElementWithRef<HTMLElement>;\n /** Title element. */\n title: ReactElement | string;\n /** Applies passed styles */\n style?: CSSProperties;\n /** Applies passed classes */\n className?: string;\n /** Open */\n open?: boolean;\n /** Placement */\n placement?: Placement;\n /** Transition component */\n TransitionComponent?: React.FC<TransitionProps>;\n /** Light tooltip */\n isLight?: boolean;\n /** Popper Tooltip style */\n popperTooltipStyle?: CSSProperties;\n /** Popper Tooltip class name*/\n popperTooltipClassName?: string;\n /** Remove tooltip */\n disable?: boolean;\n}\n\ninterface ITooltipAnimation extends TransitionProps {\n children: ReactElement;\n}\n\nconst TooltipAnimation: FC<ITooltipAnimation> = ({ children, ...props }) => {\n return (\n <FromElement timeout={0} {...props}>\n {children}\n </FromElement>\n );\n};\n\nexport const Tooltip = forwardRef<HTMLElement, ITooltipProps>(\n (\n {\n children,\n title,\n className,\n style,\n isLight = false,\n placement = \"top\",\n TransitionComponent = TooltipAnimation,\n popperTooltipStyle,\n popperTooltipClassName,\n disable,\n },\n ref\n ) => {\n const { zIndex = layers.skyscraper } = useLayerContext();\n const [open, setOpen] = useState(false);\n const [childNode, setChildNode] = useState<HTMLElement | null>();\n\n const handleEnter = (event: MouseEvent<HTMLElement>): void => {\n const childrenProps = children.props;\n\n if (event.type === \"mouseover\" && childrenProps.onMouseOver) {\n childrenProps.onMouseOver(event);\n }\n\n childNode && childNode.removeAttribute(\"title\");\n\n setOpen(true);\n };\n\n const handleLeave = (event: MouseEvent<HTMLElement>): void => {\n const childrenProps = children.props;\n\n if (\n event.type === \"mouseleave\" &&\n childrenProps.onMouseLeave &&\n event.currentTarget === childNode\n ) {\n childrenProps.onMouseLeave(event);\n }\n\n setOpen(false);\n };\n\n const handleOwnRef = useForkRef(children.ref, ref);\n const handleRef = useForkRef(setChildNode, handleOwnRef);\n\n const childrenProps = {\n onMouseOver: handleEnter,\n onMouseLeave: handleLeave,\n ref: handleRef,\n };\n\n return (\n <>\n {React.cloneElement(children, childrenProps)}\n {!disable && (\n <Portal>\n <Popper\n anchorEl={childNode}\n open={childNode ? open : false}\n placement={placement}\n transition\n className={popperTooltipClassName}\n style={{ zIndex, ...popperTooltipStyle }}\n role=\"tooltip\"\n >\n {({ transitionProps = {} }): ReactElement => (\n <TransitionComponent {...transitionProps} style={style}>\n <StyledTooltip\n className={classnames(\"c-tooltip-ds\", className)}\n $isLight={isLight}\n >\n {title}\n </StyledTooltip>\n </TransitionComponent>\n )}\n </Popper>\n </Portal>\n )}\n </>\n );\n }\n);\n\nTooltip.displayName = \"Tooltip\";\n"],"file":"Tooltip.js"}
|
package/dist/index.js
CHANGED
|
@@ -3880,10 +3880,8 @@
|
|
|
3880
3880
|
var StyledTooltip = styled__default["default"].div.withConfig({
|
|
3881
3881
|
displayName: "Styles__StyledTooltip",
|
|
3882
3882
|
componentId: "sc-rur9b5-0"
|
|
3883
|
-
})(["", " ", " border-radius:8px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", "
|
|
3883
|
+
})(["", " ", " max-width:200px;border-radius:8px;padding:4px 10px;text-align:center;background-color:rgba(0,0,0,0.9);font-size:12px;font-weight:500;line-height:normal;color:#fff;margin:4px;", ""], BoxSizingStyle, FontStyle, function (props) {
|
|
3884
3884
|
return props.$isLight && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);color:var(--color-theme-700);"]);
|
|
3885
|
-
}, function (props) {
|
|
3886
|
-
return props.$width && styled.css(["width:", "px;"], props.$width);
|
|
3887
3885
|
});
|
|
3888
3886
|
|
|
3889
3887
|
var _excluded$S = ["children"];
|
|
@@ -3910,9 +3908,7 @@
|
|
|
3910
3908
|
TransitionComponent = _ref2$TransitionCompo === void 0 ? TooltipAnimation : _ref2$TransitionCompo,
|
|
3911
3909
|
popperTooltipStyle = _ref2.popperTooltipStyle,
|
|
3912
3910
|
popperTooltipClassName = _ref2.popperTooltipClassName,
|
|
3913
|
-
disable = _ref2.disable
|
|
3914
|
-
_ref2$width = _ref2.width,
|
|
3915
|
-
width = _ref2$width === void 0 ? 200 : _ref2$width;
|
|
3911
|
+
disable = _ref2.disable;
|
|
3916
3912
|
|
|
3917
3913
|
var _useLayerContext = useLayerContext(),
|
|
3918
3914
|
_useLayerContext$zInd = _useLayerContext.zIndex,
|
|
@@ -3973,8 +3969,7 @@
|
|
|
3973
3969
|
style: style
|
|
3974
3970
|
}), /*#__PURE__*/React__default["default"].createElement(StyledTooltip, {
|
|
3975
3971
|
className: classnames__default["default"]("c-tooltip-ds", className),
|
|
3976
|
-
$isLight: isLight
|
|
3977
|
-
$width: width
|
|
3972
|
+
$isLight: isLight
|
|
3978
3973
|
}, title));
|
|
3979
3974
|
})));
|
|
3980
3975
|
});
|