@chayns-components/core 5.0.0-beta.785 → 5.0.0-beta.786
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/lib/cjs/components/tooltip/Tooltip.js +7 -4
- package/lib/cjs/components/tooltip/Tooltip.js.map +1 -1
- package/lib/cjs/components/tooltip/Tooltip.styles.js +5 -2
- package/lib/cjs/components/tooltip/Tooltip.styles.js.map +1 -1
- package/lib/esm/components/tooltip/Tooltip.js +7 -4
- package/lib/esm/components/tooltip/Tooltip.js.map +1 -1
- package/lib/esm/components/tooltip/Tooltip.styles.js +5 -2
- package/lib/esm/components/tooltip/Tooltip.styles.js.map +1 -1
- package/lib/types/components/tooltip/Tooltip.d.ts +4 -0
- package/lib/types/components/tooltip/Tooltip.styles.d.ts +1 -0
- package/package.json +2 -2
|
@@ -17,7 +17,8 @@ const Tooltip = ({
|
|
|
17
17
|
children,
|
|
18
18
|
container,
|
|
19
19
|
isDisabled,
|
|
20
|
-
itemWidth
|
|
20
|
+
itemWidth,
|
|
21
|
+
shouldUseChildrenWidth = true
|
|
21
22
|
}) => {
|
|
22
23
|
const tooltipRef = (0, _react.useRef)(null);
|
|
23
24
|
const content = (0, _react.useMemo)(() => {
|
|
@@ -33,15 +34,17 @@ const Tooltip = ({
|
|
|
33
34
|
});
|
|
34
35
|
}, [item, itemWidth]);
|
|
35
36
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltip, null, isDisabled ? /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
|
|
36
|
-
$isOnlyText: (0, _tooltip.isTextOnlyElement)(children)
|
|
37
|
+
$isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
|
|
38
|
+
$shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
37
39
|
}, children) : /*#__PURE__*/_react.default.createElement(_Popup.default, {
|
|
38
40
|
shouldShowOnHover: true,
|
|
39
41
|
content: content,
|
|
40
42
|
ref: tooltipRef,
|
|
41
43
|
container: container
|
|
42
44
|
}, /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
|
|
43
|
-
$isOnlyText: (0, _tooltip.isTextOnlyElement)(children)
|
|
44
|
-
|
|
45
|
+
$isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
|
|
46
|
+
$shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
47
|
+
}, children))), [isDisabled, children, shouldUseChildrenWidth, content, container]);
|
|
45
48
|
};
|
|
46
49
|
Tooltip.displayName = 'Tooltip';
|
|
47
50
|
var _default = exports.default = Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n content={content}\n ref={tooltipRef}\n container={container}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [isDisabled, children, shouldUseChildrenWidth, content, container],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,9 +11,12 @@ const StyledTooltip = exports.StyledTooltip = _styledComponents.default.div``;
|
|
|
11
11
|
const StyledTooltipChildren = exports.StyledTooltipChildren = _styledComponents.default.div`
|
|
12
12
|
${({
|
|
13
13
|
$isOnlyText,
|
|
14
|
-
theme
|
|
14
|
+
theme,
|
|
15
|
+
$shouldUseChildrenWidth
|
|
15
16
|
}) => $isOnlyText && (0, _styledComponents.css)`
|
|
16
|
-
|
|
17
|
+
${$shouldUseChildrenWidth && (0, _styledComponents.css)`
|
|
18
|
+
width: fit-content;
|
|
19
|
+
`}
|
|
17
20
|
|
|
18
21
|
border-bottom-width: 1px;
|
|
19
22
|
border-bottom-style: dotted;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTooltip","exports","styled","div","StyledTooltipChildren","$isOnlyText","theme","css","text"],"sources":["../../../../src/components/tooltip/Tooltip.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTooltip = styled.div``;\n\ntype StyledTooltipChildrenProps = WithTheme<{
|
|
1
|
+
{"version":3,"file":"Tooltip.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTooltip","exports","styled","div","StyledTooltipChildren","$isOnlyText","theme","$shouldUseChildrenWidth","css","text"],"sources":["../../../../src/components/tooltip/Tooltip.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTooltip = styled.div``;\n\ntype StyledTooltipChildrenProps = WithTheme<{\n $isOnlyText: boolean;\n $shouldUseChildrenWidth: boolean;\n}>;\nexport const StyledTooltipChildren = styled.div<StyledTooltipChildrenProps>`\n ${({ $isOnlyText, theme, $shouldUseChildrenWidth }: StyledTooltipChildrenProps) =>\n $isOnlyText &&\n css`\n ${$shouldUseChildrenWidth &&\n css`\n width: fit-content;\n `}\n\n border-bottom-width: 1px;\n border-bottom-style: dotted;\n border-bottom-color: ${theme.text};\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAGzC,MAAMW,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAMlC,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAGF,yBAAM,CAACC,GAA+B;AAC3E,MAAM,CAAC;EAAEE,WAAW;EAAEC,KAAK;EAAEC;AAAoD,CAAC,KAC1EF,WAAW,IACX,IAAAG,qBAAG;AACX,cAAcD,uBAAuB,IACzB,IAAAC,qBAAG;AACf;AACA,aAAa;AACb;AACA;AACA;AACA,mCAAmCF,KAAK,CAACG,IAAI;AAC7C,SAAS;AACT,CAAC","ignoreList":[]}
|
|
@@ -9,7 +9,8 @@ const Tooltip = _ref => {
|
|
|
9
9
|
children,
|
|
10
10
|
container,
|
|
11
11
|
isDisabled,
|
|
12
|
-
itemWidth
|
|
12
|
+
itemWidth,
|
|
13
|
+
shouldUseChildrenWidth = true
|
|
13
14
|
} = _ref;
|
|
14
15
|
const tooltipRef = useRef(null);
|
|
15
16
|
const content = useMemo(() => {
|
|
@@ -25,15 +26,17 @@ const Tooltip = _ref => {
|
|
|
25
26
|
});
|
|
26
27
|
}, [item, itemWidth]);
|
|
27
28
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledTooltip, null, isDisabled ? /*#__PURE__*/React.createElement(StyledTooltipChildren, {
|
|
28
|
-
$isOnlyText: isTextOnlyElement(children)
|
|
29
|
+
$isOnlyText: isTextOnlyElement(children),
|
|
30
|
+
$shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
29
31
|
}, children) : /*#__PURE__*/React.createElement(Popup, {
|
|
30
32
|
shouldShowOnHover: true,
|
|
31
33
|
content: content,
|
|
32
34
|
ref: tooltipRef,
|
|
33
35
|
container: container
|
|
34
36
|
}, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
|
|
35
|
-
$isOnlyText: isTextOnlyElement(children)
|
|
36
|
-
|
|
37
|
+
$isOnlyText: isTextOnlyElement(children),
|
|
38
|
+
$shouldUseChildrenWidth: shouldUseChildrenWidth
|
|
39
|
+
}, children))), [isDisabled, children, shouldUseChildrenWidth, content, container]);
|
|
37
40
|
};
|
|
38
41
|
Tooltip.displayName = 'Tooltip';
|
|
39
42
|
export default Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","itemWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /**\n * The elements that the tooltip should surround.\n */\n children: ReactNode;\n /**\n * The element where the content of the `Tooltip` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed.\n */\n item: ITooltipItem | ReactNode;\n /**\n * The width of an item.\n */\n itemWidth?: CSSProperties['width'];\n /**\n * whether the tooltip should be shown.\n */\n isDisabled?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n itemWidth,\n shouldUseChildrenWidth = true,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n content={content}\n ref={tooltipRef}\n container={container}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [isDisabled, children, shouldUseChildrenWidth, content, container],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AA6BvE,MAAMC,OAAyB,GAAGC,IAAA,IAO5B;EAAA,IAP6B;IAC/BC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,sBAAsB,GAAG;EAC7B,CAAC,GAAAN,IAAA;EACG,MAAMO,UAAU,GAAGd,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMe,OAAO,GAAGhB,OAAO,CAAC,MAAM;IAC1B,kBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAmB,aAAA,CAACb,WAAW;MACRc,KAAK,EAAEL,SAAU;MACjBM,IAAI,EAAGV,IAAI,CAAkBU,IAAK;MAClCC,QAAQ,EAAGX,IAAI,CAAkBW,QAAS;MAC1CC,QAAQ,EAAGZ,IAAI,CAAkBY,QAAS;MAC1CC,MAAM,EAAGb,IAAI,CAAkBa;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAACb,IAAI,EAAEI,SAAS,CAAC,CAAC;EAErB,OAAOb,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACZ,aAAa,QACTO,UAAU,gBACPd,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CAAC,gBAExBZ,KAAA,CAAAmB,aAAA,CAACd,KAAK;IACFsB,iBAAiB;IACjBT,OAAO,EAAEA,OAAQ;IACjBU,GAAG,EAAEX,UAAW;IAChBJ,SAAS,EAAEA;EAAU,gBAErBb,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CACpB,CAEA,CAClB,EACD,CAACE,UAAU,EAAEF,QAAQ,EAAEI,sBAAsB,EAAEE,OAAO,EAAEL,SAAS,CACrE,CAAC;AACL,CAAC;AAEDJ,OAAO,CAACoB,WAAW,GAAG,SAAS;AAE/B,eAAepB,OAAO","ignoreList":[]}
|
|
@@ -4,10 +4,13 @@ export const StyledTooltipChildren = styled.div`
|
|
|
4
4
|
${_ref => {
|
|
5
5
|
let {
|
|
6
6
|
$isOnlyText,
|
|
7
|
-
theme
|
|
7
|
+
theme,
|
|
8
|
+
$shouldUseChildrenWidth
|
|
8
9
|
} = _ref;
|
|
9
10
|
return $isOnlyText && css`
|
|
10
|
-
|
|
11
|
+
${$shouldUseChildrenWidth && css`
|
|
12
|
+
width: fit-content;
|
|
13
|
+
`}
|
|
11
14
|
|
|
12
15
|
border-bottom-width: 1px;
|
|
13
16
|
border-bottom-style: dotted;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.styles.js","names":["styled","css","StyledTooltip","div","StyledTooltipChildren","_ref","$isOnlyText","theme","text"],"sources":["../../../../src/components/tooltip/Tooltip.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTooltip = styled.div``;\n\ntype StyledTooltipChildrenProps = WithTheme<{
|
|
1
|
+
{"version":3,"file":"Tooltip.styles.js","names":["styled","css","StyledTooltip","div","StyledTooltipChildren","_ref","$isOnlyText","theme","$shouldUseChildrenWidth","text"],"sources":["../../../../src/components/tooltip/Tooltip.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTooltip = styled.div``;\n\ntype StyledTooltipChildrenProps = WithTheme<{\n $isOnlyText: boolean;\n $shouldUseChildrenWidth: boolean;\n}>;\nexport const StyledTooltipChildren = styled.div<StyledTooltipChildrenProps>`\n ${({ $isOnlyText, theme, $shouldUseChildrenWidth }: StyledTooltipChildrenProps) =>\n $isOnlyText &&\n css`\n ${$shouldUseChildrenWidth &&\n css`\n width: fit-content;\n `}\n\n border-bottom-width: 1px;\n border-bottom-style: dotted;\n border-bottom-color: ${theme.text};\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,aAAa,GAAGF,MAAM,CAACG,GAAG,EAAE;AAMzC,OAAO,MAAMC,qBAAqB,GAAGJ,MAAM,CAACG,GAA+B;AAC3E,MAAME,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,KAAK;IAAEC;EAAoD,CAAC,GAAAH,IAAA;EAAA,OAC1EC,WAAW,IACXL,GAAG;AACX,cAAcO,uBAAuB,IACzBP,GAAG;AACf;AACA,aAAa;AACb;AACA;AACA;AACA,mCAAmCM,KAAK,CAACE,IAAI;AAC7C,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
|
|
@@ -21,6 +21,10 @@ export type TooltipProps = {
|
|
|
21
21
|
* whether the tooltip should be shown.
|
|
22
22
|
*/
|
|
23
23
|
isDisabled?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Whether the width of the children should be used.
|
|
26
|
+
*/
|
|
27
|
+
shouldUseChildrenWidth?: boolean;
|
|
24
28
|
};
|
|
25
29
|
declare const Tooltip: FC<TooltipProps>;
|
|
26
30
|
export default Tooltip;
|
|
@@ -2,6 +2,7 @@ import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
|
|
|
2
2
|
export declare const StyledTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
3
|
type StyledTooltipChildrenProps = WithTheme<{
|
|
4
4
|
$isOnlyText: boolean;
|
|
5
|
+
$shouldUseChildrenWidth: boolean;
|
|
5
6
|
}>;
|
|
6
7
|
export declare const StyledTooltipChildren: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTooltipChildrenProps>> & string;
|
|
7
8
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.786",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "45cbfcbd07b972d1e9a8af99ab486e137a83f5b0"
|
|
89
89
|
}
|