@tecsinapse/react-web-kit 1.23.10 → 1.23.11
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/atoms/Tooltip/Tooltip.d.ts +2 -0
- package/dist/cjs/components/atoms/Tooltip/Tooltip.js +2 -0
- package/dist/cjs/components/atoms/Tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/components/atoms/Tooltip/styled.js +4 -1
- package/dist/cjs/components/atoms/Tooltip/styled.js.map +1 -1
- package/dist/esm/components/atoms/Tooltip/Tooltip.d.ts +2 -0
- package/dist/esm/components/atoms/Tooltip/Tooltip.js +2 -0
- package/dist/esm/components/atoms/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/atoms/Tooltip/styled.js +4 -1
- package/dist/esm/components/atoms/Tooltip/styled.js.map +1 -1
- package/package.json +2 -2
|
@@ -4,10 +4,12 @@ export declare type ComputedType = {
|
|
|
4
4
|
height?: number;
|
|
5
5
|
};
|
|
6
6
|
export declare type Position = 'top' | 'bottom' | 'right' | 'left';
|
|
7
|
+
export declare type MaxWidth = number;
|
|
7
8
|
export interface ITooltip {
|
|
8
9
|
title: string;
|
|
9
10
|
position?: Position;
|
|
10
11
|
children?: React.ReactNode;
|
|
12
|
+
maxWidht?: MaxWidth;
|
|
11
13
|
}
|
|
12
14
|
declare const Tooltip: React.FC<ITooltip>;
|
|
13
15
|
export default Tooltip;
|
|
@@ -11,6 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
11
11
|
const Tooltip = ({
|
|
12
12
|
children,
|
|
13
13
|
title,
|
|
14
|
+
maxWidht,
|
|
14
15
|
position = "bottom"
|
|
15
16
|
}) => {
|
|
16
17
|
const spanRef = React__default["default"].useRef();
|
|
@@ -26,6 +27,7 @@ const Tooltip = ({
|
|
|
26
27
|
return /* @__PURE__ */ React__default["default"].createElement(styled.Container, {
|
|
27
28
|
position
|
|
28
29
|
}, children, /* @__PURE__ */ React__default["default"].createElement(styled.TooltipSpan, {
|
|
30
|
+
maxWidth: maxWidht,
|
|
29
31
|
computed,
|
|
30
32
|
position,
|
|
31
33
|
ref: (ref) => spanRef.current = ref
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../../../src/components/atoms/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { Container, TooltipSpan } from './styled';\n\nexport type ComputedType = { width?: number; height?: number };\nexport type Position = 'top' | 'bottom' | 'right' | 'left';\n\nexport interface ITooltip {\n title: string;\n position?: Position;\n children?: React.ReactNode;\n}\n\nconst Tooltip: React.FC<ITooltip> = ({\n children,\n title,\n position = 'bottom',\n}) => {\n const spanRef = React.useRef<HTMLSpanElement | null>();\n const [computed, setComputed] = React.useState<ComputedType | undefined>(\n undefined\n );\n\n React.useLayoutEffect(() => {\n setComputed({\n width: spanRef.current?.clientWidth,\n height: spanRef.current?.clientHeight,\n });\n }, []);\n\n return (\n <Container position={position}>\n {children}\n <TooltipSpan\n computed={computed}\n position={position}\n ref={ref => (spanRef.current = ref)}\n >\n <Text\n fontWeight=\"bold\"\n typography=\"base\"\n colorVariant=\"secondary\"\n colorTone=\"xlight\"\n >\n {title}\n </Text>\n </TooltipSpan>\n </Container>\n );\n};\n\nexport default Tooltip;\n"],"names":["React","Container","TooltipSpan","Text"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../../../src/components/atoms/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { Container, TooltipSpan } from './styled';\n\nexport type ComputedType = { width?: number; height?: number };\nexport type Position = 'top' | 'bottom' | 'right' | 'left';\nexport type MaxWidth = number;\n\nexport interface ITooltip {\n title: string;\n position?: Position;\n children?: React.ReactNode;\n maxWidht?: MaxWidth;\n}\n\nconst Tooltip: React.FC<ITooltip> = ({\n children,\n title,\n maxWidht,\n position = 'bottom',\n}) => {\n const spanRef = React.useRef<HTMLSpanElement | null>();\n const [computed, setComputed] = React.useState<ComputedType | undefined>(\n undefined\n );\n\n React.useLayoutEffect(() => {\n setComputed({\n width: spanRef.current?.clientWidth,\n height: spanRef.current?.clientHeight,\n });\n }, []);\n\n return (\n <Container position={position}>\n {children}\n <TooltipSpan\n maxWidth={maxWidht}\n computed={computed}\n position={position}\n ref={ref => (spanRef.current = ref)}\n >\n <Text\n fontWeight=\"bold\"\n typography=\"base\"\n colorVariant=\"secondary\"\n colorTone=\"xlight\"\n >\n {title}\n </Text>\n </TooltipSpan>\n </Container>\n );\n};\n\nexport default Tooltip;\n"],"names":["React","Container","TooltipSpan","Text"],"mappings":";;;;;;;;;;AAeA,MAAM,UAA8B,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,QAAA;AACb,CAAM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUA,0BAAM,MAA+B,EAAA,CAAA;AACrD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,yBAAM,CAAA,QAAA;AAAA,IACpC,KAAA,CAAA;AAAA,GACF,CAAA;AAEA,EAAAA,yBAAA,CAAM,gBAAgB,MAAM;AAC1B,IAAY,WAAA,CAAA;AAAA,MACV,KAAA,EAAO,QAAQ,OAAS,EAAA,WAAA;AAAA,MACxB,MAAA,EAAQ,QAAQ,OAAS,EAAA,YAAA;AAAA,KAC1B,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,uBACGA,yBAAA,CAAA,aAAA,CAAAC,gBAAA,EAAA;AAAA,IAAU,QAAA;AAAA,GAAA,EACR,0BACAD,yBAAA,CAAA,aAAA,CAAAE,kBAAA,EAAA;AAAA,IACC,QAAU,EAAA,QAAA;AAAA,IACV,QAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA,EAAK,CAAQ,GAAA,KAAA,OAAA,CAAQ,OAAU,GAAA,GAAA;AAAA,GAAA,kBAE9BF,yBAAA,CAAA,aAAA,CAAAG,cAAA,EAAA;AAAA,IACC,UAAW,EAAA,MAAA;AAAA,IACX,UAAW,EAAA,MAAA;AAAA,IACX,YAAa,EAAA,WAAA;AAAA,IACb,SAAU,EAAA,QAAA;AAAA,GAET,EAAA,KACH,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -66,11 +66,13 @@ const rightArrow = (theme, position) => position === "right" && react.css`
|
|
|
66
66
|
transparent;
|
|
67
67
|
`;
|
|
68
68
|
const TooltipSpan = styled__default["default"]("span")(
|
|
69
|
-
({ theme, computed, position }) => {
|
|
69
|
+
({ theme, computed, position, maxWidth }) => {
|
|
70
70
|
const { width = 0, height = 0 } = computed || {};
|
|
71
71
|
return react.css`
|
|
72
|
+
max-width: ${maxWidth ? `${maxWidth}px` : "auto"};
|
|
72
73
|
position: absolute;
|
|
73
74
|
width: max-content;
|
|
75
|
+
line-break: anywhere;
|
|
74
76
|
padding: ${theme.spacing.micro} ${theme.spacing.centi};
|
|
75
77
|
border-radius: ${theme.borderRadius.mili};
|
|
76
78
|
opacity: 0;
|
|
@@ -106,6 +108,7 @@ const TooltipSpan = styled__default["default"]("span")(
|
|
|
106
108
|
);
|
|
107
109
|
const Container = styled__default["default"]("div")`
|
|
108
110
|
position: relative;
|
|
111
|
+
width: auto;
|
|
109
112
|
&:hover {
|
|
110
113
|
& > span {
|
|
111
114
|
opacity: 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tooltip/styled.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { StyleProps, ThemeProp } from '@tecsinapse/react-core';\nimport styled from '@emotion/styled';\nimport { ComputedType, Position } from './Tooltip';\n\ntype InjectedProps = {
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tooltip/styled.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { StyleProps, ThemeProp } from '@tecsinapse/react-core';\nimport styled from '@emotion/styled';\nimport { ComputedType, MaxWidth, Position } from './Tooltip';\n\ntype InjectedProps = {\n computed?: ComputedType;\n position?: Position;\n maxWidth?: MaxWidth;\n};\n\n/** Bottom/Top commons */\nconst bottomOrTopStylesCommon = (width: number, position) =>\n ['top', 'bottom'].includes(position as Position) &&\n css`\n left: 50%;\n margin-left: -${width / 2}px;\n `;\n\nconst bottomOrTopArrowCommon = (position?: Position) =>\n ['top', 'bottom'].includes(position as Position) &&\n css`\n left: 50%;\n margin-left: -5px;\n `;\n\n/** Top */\nconst topStyles = (theme: ThemeProp, position?: Position) =>\n position === 'top' &&\n css`\n bottom: 100%;\n margin-bottom: ${theme.spacing.centi};\n transform: translateY(10%);\n `;\n\nconst topArrow = (theme: ThemeProp, position?: Position) =>\n position === 'top' &&\n css`\n top: 100%;\n border-color: ${theme.color.secondary.xdark} transparent transparent\n transparent;\n `;\n\n/** Bottom */\nconst bottomStyles = (theme: ThemeProp, position?: Position) =>\n position === 'bottom' &&\n css`\n top: 100%;\n margin-top: ${theme.spacing.centi};\n transform: translateY(-10%);\n `;\n\nconst bottomArrow = (theme: ThemeProp, position?: Position) =>\n position === 'bottom' &&\n css`\n bottom: 100%;\n border-color: transparent transparent ${theme.color.secondary.xdark}\n transparent;\n `;\n\n/** Bottom/Top commons */\nconst leftAndRightCommonStyles = (height: number, position?: Position) =>\n ['right', 'left'].includes(position as Position) &&\n css`\n top: 50%;\n margin-top: -${height / 2}px;\n `;\n\nconst leftOrRightArrowCommon = (position?: Position) =>\n ['right', 'left'].includes(position as Position) &&\n css`\n top: 50%;\n margin-top: -5px;\n `;\n\n/** Left */\nconst leftStyles = (theme: ThemeProp, position?: Position) =>\n position === 'left' &&\n css`\n right: 100%;\n margin-right: ${theme.spacing.centi};\n transform: translateX(10%);\n `;\n\nconst leftArrow = (theme: ThemeProp, position?: Position) =>\n position === 'left' &&\n css`\n left: 100%;\n border-color: transparent transparent transparent\n ${theme.color.secondary.xdark};\n `;\n\n/** Right */\nconst rightStyles = (theme: ThemeProp, position?: Position) =>\n position === 'right' &&\n css`\n left: 100%;\n margin-left: ${theme.spacing.centi};\n transform: translateX(-10%);\n `;\n\nconst rightArrow = (theme: ThemeProp, position?: Position) =>\n position === 'right' &&\n css`\n right: 100%;\n border-color: transparent ${theme.color.secondary.xdark} transparent\n transparent;\n `;\n\nexport const TooltipSpan = styled('span')<Partial<StyleProps> & InjectedProps>(\n ({ theme, computed, position, maxWidth }) => {\n const { width = 0, height = 0 } = computed || {};\n return css`\n max-width: ${maxWidth ? `${maxWidth}px` : 'auto'};\n position: absolute;\n width: max-content;\n line-break: anywhere;\n padding: ${theme.spacing.micro} ${theme.spacing.centi};\n border-radius: ${theme.borderRadius.mili};\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s, visibility 0.3s, transform 0.3s;\n background-color: ${theme.color.secondary.xdark};\n z-index: ${theme.zIndex.absolute};\n\n ${bottomOrTopStylesCommon(width, position)}\n ${bottomStyles(theme, position)}\n ${topStyles(theme, position)}\n \n ${leftAndRightCommonStyles(height, position)}\n ${leftStyles(theme, position)}\n ${rightStyles(theme, position)}\n\n &::after {\n content: '';\n position: absolute;\n border-style: solid;\n border-width: 5px;\n\n ${bottomOrTopArrowCommon(position)}\n ${bottomArrow(theme, position)}\n ${topArrow(theme, position)}\n \n ${leftOrRightArrowCommon(position)}\n ${leftArrow(theme, position)}\n ${rightArrow(theme, position)}\n }\n `;\n }\n);\n\nexport const Container = styled('div')<{\n position?: Position;\n}>`\n position: relative;\n width: auto;\n &:hover {\n & > span {\n opacity: 1;\n visibility: visible;\n display: flex;\n transform: ${({ position }) =>\n position === 'left' || position === 'right'\n ? 'translateX(0%)'\n : 'translateY(0%)'};\n }\n }\n`;\n"],"names":["css","styled"],"mappings":"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"}
|
|
@@ -4,10 +4,12 @@ export declare type ComputedType = {
|
|
|
4
4
|
height?: number;
|
|
5
5
|
};
|
|
6
6
|
export declare type Position = 'top' | 'bottom' | 'right' | 'left';
|
|
7
|
+
export declare type MaxWidth = number;
|
|
7
8
|
export interface ITooltip {
|
|
8
9
|
title: string;
|
|
9
10
|
position?: Position;
|
|
10
11
|
children?: React.ReactNode;
|
|
12
|
+
maxWidht?: MaxWidth;
|
|
11
13
|
}
|
|
12
14
|
declare const Tooltip: React.FC<ITooltip>;
|
|
13
15
|
export default Tooltip;
|
|
@@ -5,6 +5,7 @@ import { Container, TooltipSpan } from './styled.js';
|
|
|
5
5
|
const Tooltip = ({
|
|
6
6
|
children,
|
|
7
7
|
title,
|
|
8
|
+
maxWidht,
|
|
8
9
|
position = "bottom"
|
|
9
10
|
}) => {
|
|
10
11
|
const spanRef = React.useRef();
|
|
@@ -20,6 +21,7 @@ const Tooltip = ({
|
|
|
20
21
|
return /* @__PURE__ */ React.createElement(Container, {
|
|
21
22
|
position
|
|
22
23
|
}, children, /* @__PURE__ */ React.createElement(TooltipSpan, {
|
|
24
|
+
maxWidth: maxWidht,
|
|
23
25
|
computed,
|
|
24
26
|
position,
|
|
25
27
|
ref: (ref) => spanRef.current = ref
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../../../src/components/atoms/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { Container, TooltipSpan } from './styled';\n\nexport type ComputedType = { width?: number; height?: number };\nexport type Position = 'top' | 'bottom' | 'right' | 'left';\n\nexport interface ITooltip {\n title: string;\n position?: Position;\n children?: React.ReactNode;\n}\n\nconst Tooltip: React.FC<ITooltip> = ({\n children,\n title,\n position = 'bottom',\n}) => {\n const spanRef = React.useRef<HTMLSpanElement | null>();\n const [computed, setComputed] = React.useState<ComputedType | undefined>(\n undefined\n );\n\n React.useLayoutEffect(() => {\n setComputed({\n width: spanRef.current?.clientWidth,\n height: spanRef.current?.clientHeight,\n });\n }, []);\n\n return (\n <Container position={position}>\n {children}\n <TooltipSpan\n computed={computed}\n position={position}\n ref={ref => (spanRef.current = ref)}\n >\n <Text\n fontWeight=\"bold\"\n typography=\"base\"\n colorVariant=\"secondary\"\n colorTone=\"xlight\"\n >\n {title}\n </Text>\n </TooltipSpan>\n </Container>\n );\n};\n\nexport default Tooltip;\n"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../../../src/components/atoms/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { Container, TooltipSpan } from './styled';\n\nexport type ComputedType = { width?: number; height?: number };\nexport type Position = 'top' | 'bottom' | 'right' | 'left';\nexport type MaxWidth = number;\n\nexport interface ITooltip {\n title: string;\n position?: Position;\n children?: React.ReactNode;\n maxWidht?: MaxWidth;\n}\n\nconst Tooltip: React.FC<ITooltip> = ({\n children,\n title,\n maxWidht,\n position = 'bottom',\n}) => {\n const spanRef = React.useRef<HTMLSpanElement | null>();\n const [computed, setComputed] = React.useState<ComputedType | undefined>(\n undefined\n );\n\n React.useLayoutEffect(() => {\n setComputed({\n width: spanRef.current?.clientWidth,\n height: spanRef.current?.clientHeight,\n });\n }, []);\n\n return (\n <Container position={position}>\n {children}\n <TooltipSpan\n maxWidth={maxWidht}\n computed={computed}\n position={position}\n ref={ref => (spanRef.current = ref)}\n >\n <Text\n fontWeight=\"bold\"\n typography=\"base\"\n colorVariant=\"secondary\"\n colorTone=\"xlight\"\n >\n {title}\n </Text>\n </TooltipSpan>\n </Container>\n );\n};\n\nexport default Tooltip;\n"],"names":[],"mappings":";;;;AAeA,MAAM,UAA8B,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,QAAA;AACb,CAAM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,MAAM,MAA+B,EAAA,CAAA;AACrD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,KAAM,CAAA,QAAA;AAAA,IACpC,KAAA,CAAA;AAAA,GACF,CAAA;AAEA,EAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,IAAY,WAAA,CAAA;AAAA,MACV,KAAA,EAAO,QAAQ,OAAS,EAAA,WAAA;AAAA,MACxB,MAAA,EAAQ,QAAQ,OAAS,EAAA,YAAA;AAAA,KAC1B,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAU,QAAA;AAAA,GAAA,EACR,0BACA,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IACC,QAAU,EAAA,QAAA;AAAA,IACV,QAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA,EAAK,CAAQ,GAAA,KAAA,OAAA,CAAQ,OAAU,GAAA,GAAA;AAAA,GAAA,kBAE9B,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,UAAW,EAAA,MAAA;AAAA,IACX,UAAW,EAAA,MAAA;AAAA,IACX,YAAa,EAAA,WAAA;AAAA,IACb,SAAU,EAAA,QAAA;AAAA,GAET,EAAA,KACH,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -58,11 +58,13 @@ const rightArrow = (theme, position) => position === "right" && css`
|
|
|
58
58
|
transparent;
|
|
59
59
|
`;
|
|
60
60
|
const TooltipSpan = styled("span")(
|
|
61
|
-
({ theme, computed, position }) => {
|
|
61
|
+
({ theme, computed, position, maxWidth }) => {
|
|
62
62
|
const { width = 0, height = 0 } = computed || {};
|
|
63
63
|
return css`
|
|
64
|
+
max-width: ${maxWidth ? `${maxWidth}px` : "auto"};
|
|
64
65
|
position: absolute;
|
|
65
66
|
width: max-content;
|
|
67
|
+
line-break: anywhere;
|
|
66
68
|
padding: ${theme.spacing.micro} ${theme.spacing.centi};
|
|
67
69
|
border-radius: ${theme.borderRadius.mili};
|
|
68
70
|
opacity: 0;
|
|
@@ -98,6 +100,7 @@ const TooltipSpan = styled("span")(
|
|
|
98
100
|
);
|
|
99
101
|
const Container = styled("div")`
|
|
100
102
|
position: relative;
|
|
103
|
+
width: auto;
|
|
101
104
|
&:hover {
|
|
102
105
|
& > span {
|
|
103
106
|
opacity: 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tooltip/styled.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { StyleProps, ThemeProp } from '@tecsinapse/react-core';\nimport styled from '@emotion/styled';\nimport { ComputedType, Position } from './Tooltip';\n\ntype InjectedProps = {
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Tooltip/styled.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { StyleProps, ThemeProp } from '@tecsinapse/react-core';\nimport styled from '@emotion/styled';\nimport { ComputedType, MaxWidth, Position } from './Tooltip';\n\ntype InjectedProps = {\n computed?: ComputedType;\n position?: Position;\n maxWidth?: MaxWidth;\n};\n\n/** Bottom/Top commons */\nconst bottomOrTopStylesCommon = (width: number, position) =>\n ['top', 'bottom'].includes(position as Position) &&\n css`\n left: 50%;\n margin-left: -${width / 2}px;\n `;\n\nconst bottomOrTopArrowCommon = (position?: Position) =>\n ['top', 'bottom'].includes(position as Position) &&\n css`\n left: 50%;\n margin-left: -5px;\n `;\n\n/** Top */\nconst topStyles = (theme: ThemeProp, position?: Position) =>\n position === 'top' &&\n css`\n bottom: 100%;\n margin-bottom: ${theme.spacing.centi};\n transform: translateY(10%);\n `;\n\nconst topArrow = (theme: ThemeProp, position?: Position) =>\n position === 'top' &&\n css`\n top: 100%;\n border-color: ${theme.color.secondary.xdark} transparent transparent\n transparent;\n `;\n\n/** Bottom */\nconst bottomStyles = (theme: ThemeProp, position?: Position) =>\n position === 'bottom' &&\n css`\n top: 100%;\n margin-top: ${theme.spacing.centi};\n transform: translateY(-10%);\n `;\n\nconst bottomArrow = (theme: ThemeProp, position?: Position) =>\n position === 'bottom' &&\n css`\n bottom: 100%;\n border-color: transparent transparent ${theme.color.secondary.xdark}\n transparent;\n `;\n\n/** Bottom/Top commons */\nconst leftAndRightCommonStyles = (height: number, position?: Position) =>\n ['right', 'left'].includes(position as Position) &&\n css`\n top: 50%;\n margin-top: -${height / 2}px;\n `;\n\nconst leftOrRightArrowCommon = (position?: Position) =>\n ['right', 'left'].includes(position as Position) &&\n css`\n top: 50%;\n margin-top: -5px;\n `;\n\n/** Left */\nconst leftStyles = (theme: ThemeProp, position?: Position) =>\n position === 'left' &&\n css`\n right: 100%;\n margin-right: ${theme.spacing.centi};\n transform: translateX(10%);\n `;\n\nconst leftArrow = (theme: ThemeProp, position?: Position) =>\n position === 'left' &&\n css`\n left: 100%;\n border-color: transparent transparent transparent\n ${theme.color.secondary.xdark};\n `;\n\n/** Right */\nconst rightStyles = (theme: ThemeProp, position?: Position) =>\n position === 'right' &&\n css`\n left: 100%;\n margin-left: ${theme.spacing.centi};\n transform: translateX(-10%);\n `;\n\nconst rightArrow = (theme: ThemeProp, position?: Position) =>\n position === 'right' &&\n css`\n right: 100%;\n border-color: transparent ${theme.color.secondary.xdark} transparent\n transparent;\n `;\n\nexport const TooltipSpan = styled('span')<Partial<StyleProps> & InjectedProps>(\n ({ theme, computed, position, maxWidth }) => {\n const { width = 0, height = 0 } = computed || {};\n return css`\n max-width: ${maxWidth ? `${maxWidth}px` : 'auto'};\n position: absolute;\n width: max-content;\n line-break: anywhere;\n padding: ${theme.spacing.micro} ${theme.spacing.centi};\n border-radius: ${theme.borderRadius.mili};\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s, visibility 0.3s, transform 0.3s;\n background-color: ${theme.color.secondary.xdark};\n z-index: ${theme.zIndex.absolute};\n\n ${bottomOrTopStylesCommon(width, position)}\n ${bottomStyles(theme, position)}\n ${topStyles(theme, position)}\n \n ${leftAndRightCommonStyles(height, position)}\n ${leftStyles(theme, position)}\n ${rightStyles(theme, position)}\n\n &::after {\n content: '';\n position: absolute;\n border-style: solid;\n border-width: 5px;\n\n ${bottomOrTopArrowCommon(position)}\n ${bottomArrow(theme, position)}\n ${topArrow(theme, position)}\n \n ${leftOrRightArrowCommon(position)}\n ${leftArrow(theme, position)}\n ${rightArrow(theme, position)}\n }\n `;\n }\n);\n\nexport const Container = styled('div')<{\n position?: Position;\n}>`\n position: relative;\n width: auto;\n &:hover {\n & > span {\n opacity: 1;\n visibility: visible;\n display: flex;\n transform: ${({ position }) =>\n position === 'left' || position === 'right'\n ? 'translateX(0%)'\n : 'translateY(0%)'};\n }\n }\n`;\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-web-kit",
|
|
3
3
|
"description": "TecSinapse React components",
|
|
4
|
-
"version": "1.23.
|
|
4
|
+
"version": "1.23.11",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
7
7
|
"module": "dist/esm/index.js",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
44
44
|
"react-native-web": "^0.17.1 || ^0.18.0"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "d157332babc1ce4727f3cf2a68da2461aad511a9"
|
|
47
47
|
}
|