@elliemae/ds-floating-context 3.53.0-next.2 → 3.53.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -37,15 +37,23 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
var import_constants = require("../constants/index.js");
|
|
39
39
|
const arrowWidth = 18;
|
|
40
|
-
const arrowHeight = 18;
|
|
41
40
|
const OFFSET_FIX_SHADOW_DEFECT = 0.25;
|
|
41
|
+
const arrowDimensionBase13 = arrowWidth / 13;
|
|
42
|
+
const OFFSET_FIX_SHADOW_DEFECT_BASE13 = OFFSET_FIX_SHADOW_DEFECT / 13;
|
|
43
|
+
const arrowDimensionBase16 = arrowWidth / 16;
|
|
44
|
+
const OFFSET_FIX_SHADOW_DEFECT_BASE16 = OFFSET_FIX_SHADOW_DEFECT / 16;
|
|
45
|
+
const arrowPlacementBase13 = arrowDimensionBase13 - OFFSET_FIX_SHADOW_DEFECT_BASE13;
|
|
46
|
+
const arrowPlacementBase16 = arrowDimensionBase16 - OFFSET_FIX_SHADOW_DEFECT_BASE16;
|
|
47
|
+
const isTopOrBottom = (placement) => placement.startsWith("top") || placement.startsWith("bottom");
|
|
48
|
+
const isLeftOrRight = (placement) => placement.startsWith("left") || placement.startsWith("right");
|
|
42
49
|
const StyledArrow = (0, import_ds_system.styled)("div", {
|
|
43
50
|
name: import_constants.DSFloatingWrapperName,
|
|
44
51
|
slot: import_constants.DSFloatingWrapperSlots.ARROW
|
|
45
52
|
})`
|
|
53
|
+
line-height: 0;
|
|
46
54
|
position: absolute;
|
|
47
|
-
width: ${
|
|
48
|
-
height: ${
|
|
55
|
+
width: ${arrowDimensionBase16}rem;
|
|
56
|
+
height: ${arrowDimensionBase16}rem;
|
|
49
57
|
pointer-events: none;
|
|
50
58
|
background-color: transparent;
|
|
51
59
|
& .stroke {
|
|
@@ -60,7 +68,7 @@ const StyledArrow = (0, import_ds_system.styled)("div", {
|
|
|
60
68
|
svg {
|
|
61
69
|
transform: rotateZ(180deg);
|
|
62
70
|
}
|
|
63
|
-
bottom: -${
|
|
71
|
+
bottom: -${arrowPlacementBase16}rem;
|
|
64
72
|
left: ${(props) => {
|
|
65
73
|
if (props["data-placement"].endsWith("start")) return `25%`;
|
|
66
74
|
if (props["data-placement"].endsWith("end")) return `75%`;
|
|
@@ -71,10 +79,10 @@ const StyledArrow = (0, import_ds_system.styled)("div", {
|
|
|
71
79
|
svg {
|
|
72
80
|
transform: rotateZ(-90deg);
|
|
73
81
|
}
|
|
74
|
-
left: -${
|
|
82
|
+
left: -${arrowPlacementBase16}rem;
|
|
75
83
|
}
|
|
76
84
|
&[data-placement^='bottom'] {
|
|
77
|
-
top: -${
|
|
85
|
+
top: -${arrowPlacementBase16}rem;
|
|
78
86
|
left: ${(props) => {
|
|
79
87
|
if (props["data-placement"].endsWith("start")) return `25%`;
|
|
80
88
|
if (props["data-placement"].endsWith("end")) return `75%`;
|
|
@@ -85,10 +93,35 @@ const StyledArrow = (0, import_ds_system.styled)("div", {
|
|
|
85
93
|
svg {
|
|
86
94
|
transform: rotateZ(90deg);
|
|
87
95
|
}
|
|
88
|
-
right: -${
|
|
96
|
+
right: -${arrowPlacementBase16}rem;
|
|
97
|
+
}
|
|
98
|
+
margin-left: ${(props) => isTopOrBottom(props["data-placement"]) ? `-${arrowDimensionBase16 / 2}rem` : "0"};
|
|
99
|
+
margin-top: ${(props) => isLeftOrRight(props["data-placement"]) ? `-${arrowDimensionBase16 / 2}rem` : "0"};
|
|
100
|
+
|
|
101
|
+
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
102
|
+
width: ${arrowDimensionBase13}rem;
|
|
103
|
+
height: ${arrowDimensionBase13}rem;
|
|
104
|
+
|
|
105
|
+
&[data-placement^='top'] {
|
|
106
|
+
bottom: -${arrowPlacementBase13}rem;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&[data-placement^='bottom'] {
|
|
110
|
+
top: -${arrowPlacementBase13}rem;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&[data-placement^='left'] {
|
|
114
|
+
right: -${arrowPlacementBase13}rem;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&[data-placement^='right'] {
|
|
118
|
+
left: -${arrowPlacementBase13}rem;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
margin-left: ${(props) => isTopOrBottom(props["data-placement"]) ? `-${arrowDimensionBase13 / 2}rem` : "0"};
|
|
122
|
+
|
|
123
|
+
margin-top: ${(props) => isLeftOrRight(props["data-placement"]) ? `-${arrowDimensionBase13 / 2}rem` : "0"};
|
|
89
124
|
}
|
|
90
|
-
margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
|
|
91
|
-
margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
|
|
92
125
|
`;
|
|
93
126
|
const StylePathShadow = (0, import_ds_system.styled)("path", {
|
|
94
127
|
name: import_constants.DSFloatingWrapperName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/PopoverArrow.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n placement: string;\n style: React.CSSProperties;\n arrowElementRef?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n placement: string;\n style: React.CSSProperties;\n arrowElementRef?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst OFFSET_FIX_SHADOW_DEFECT = 0.25;\n\nconst arrowDimensionBase13 = arrowWidth / 13;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE13 = OFFSET_FIX_SHADOW_DEFECT / 13;\nconst arrowDimensionBase16 = arrowWidth / 16;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE16 = OFFSET_FIX_SHADOW_DEFECT / 16;\n\nconst arrowPlacementBase13 = arrowDimensionBase13 - OFFSET_FIX_SHADOW_DEFECT_BASE13;\nconst arrowPlacementBase16 = arrowDimensionBase16 - OFFSET_FIX_SHADOW_DEFECT_BASE16;\n\nconst isTopOrBottom = (placement: string) => placement.startsWith('top') || placement.startsWith('bottom');\n\nconst isLeftOrRight = (placement: string) => placement.startsWith('left') || placement.startsWith('right');\n\nconst StyledArrow = styled('div', {\n name: DSFloatingWrapperName,\n slot: DSFloatingWrapperSlots.ARROW,\n})<{ 'data-placement': string }>`\n line-height: 0;\n position: absolute;\n width: ${arrowDimensionBase16}rem;\n height: ${arrowDimensionBase16}rem;\n pointer-events: none;\n background-color: transparent;\n & .stroke {\n fill: rgb(105, 116, 137);\n fill-opacity: 0.4;\n }\n & .fill {\n fill: rgb(255, 255, 255);\n }\n\n &[data-placement^='top'] {\n svg {\n transform: rotateZ(180deg);\n }\n bottom: -${arrowPlacementBase16}rem;\n left: ${(props) => {\n if (props['data-placement'].endsWith('start')) return `25%`;\n if (props['data-placement'].endsWith('end')) return `75%`;\n return '';\n }};\n }\n &[data-placement^='right'] {\n svg {\n transform: rotateZ(-90deg);\n }\n left: -${arrowPlacementBase16}rem;\n }\n &[data-placement^='bottom'] {\n top: -${arrowPlacementBase16}rem;\n left: ${(props) => {\n if (props['data-placement'].endsWith('start')) return `25%`;\n if (props['data-placement'].endsWith('end')) return `75%`;\n return '';\n }};\n }\n &[data-placement^='left'] {\n svg {\n transform: rotateZ(90deg);\n }\n right: -${arrowPlacementBase16}rem;\n }\n margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${arrowDimensionBase13}rem;\n height: ${arrowDimensionBase13}rem;\n\n &[data-placement^='top'] {\n bottom: -${arrowPlacementBase13}rem;\n }\n\n &[data-placement^='bottom'] {\n top: -${arrowPlacementBase13}rem;\n }\n\n &[data-placement^='left'] {\n right: -${arrowPlacementBase13}rem;\n }\n\n &[data-placement^='right'] {\n left: -${arrowPlacementBase13}rem;\n }\n\n margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n\n margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n }\n`;\n\nconst StylePathShadow = styled('path', {\n name: DSFloatingWrapperName,\n slot: DSFloatingWrapperSlots.ARROW_SHADOW,\n})``;\n\nconst StylePathFill = styled('path', {\n name: DSFloatingWrapperName,\n slot: DSFloatingWrapperSlots.ARROW_FILL,\n})``;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }: PopoverArrowT): React.ReactElement => {\n const ownerProps = useOwnerProps(rest);\n const globalAttributes = useGetGlobalAttributes(rest);\n const xstyledProps = useGetXstyledProps(rest);\n return (\n <StyledArrow\n key=\"popper-arrow\"\n data-placement={placement}\n style={style}\n innerRef={arrowElementRef}\n data-testid=\"ds-tooltip-arrow\"\n aria-hidden=\"true\"\n {...ownerProps}\n {...globalAttributes}\n {...xstyledProps}\n >\n <svg viewBox=\"0 0 30 30\">\n <StylePathShadow\n {...ownerProps}\n className=\"stroke\"\n d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <StylePathFill\n {...ownerProps}\n className=\"fill\"\n d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n />\n </svg>\n </StyledArrow>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,15 +4,23 @@ import { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from "@elli
|
|
|
4
4
|
import { styled } from "@elliemae/ds-system";
|
|
5
5
|
import { DSFloatingWrapperSlots, DSFloatingWrapperName } from "../constants/index.js";
|
|
6
6
|
const arrowWidth = 18;
|
|
7
|
-
const arrowHeight = 18;
|
|
8
7
|
const OFFSET_FIX_SHADOW_DEFECT = 0.25;
|
|
8
|
+
const arrowDimensionBase13 = arrowWidth / 13;
|
|
9
|
+
const OFFSET_FIX_SHADOW_DEFECT_BASE13 = OFFSET_FIX_SHADOW_DEFECT / 13;
|
|
10
|
+
const arrowDimensionBase16 = arrowWidth / 16;
|
|
11
|
+
const OFFSET_FIX_SHADOW_DEFECT_BASE16 = OFFSET_FIX_SHADOW_DEFECT / 16;
|
|
12
|
+
const arrowPlacementBase13 = arrowDimensionBase13 - OFFSET_FIX_SHADOW_DEFECT_BASE13;
|
|
13
|
+
const arrowPlacementBase16 = arrowDimensionBase16 - OFFSET_FIX_SHADOW_DEFECT_BASE16;
|
|
14
|
+
const isTopOrBottom = (placement) => placement.startsWith("top") || placement.startsWith("bottom");
|
|
15
|
+
const isLeftOrRight = (placement) => placement.startsWith("left") || placement.startsWith("right");
|
|
9
16
|
const StyledArrow = styled("div", {
|
|
10
17
|
name: DSFloatingWrapperName,
|
|
11
18
|
slot: DSFloatingWrapperSlots.ARROW
|
|
12
19
|
})`
|
|
20
|
+
line-height: 0;
|
|
13
21
|
position: absolute;
|
|
14
|
-
width: ${
|
|
15
|
-
height: ${
|
|
22
|
+
width: ${arrowDimensionBase16}rem;
|
|
23
|
+
height: ${arrowDimensionBase16}rem;
|
|
16
24
|
pointer-events: none;
|
|
17
25
|
background-color: transparent;
|
|
18
26
|
& .stroke {
|
|
@@ -27,7 +35,7 @@ const StyledArrow = styled("div", {
|
|
|
27
35
|
svg {
|
|
28
36
|
transform: rotateZ(180deg);
|
|
29
37
|
}
|
|
30
|
-
bottom: -${
|
|
38
|
+
bottom: -${arrowPlacementBase16}rem;
|
|
31
39
|
left: ${(props) => {
|
|
32
40
|
if (props["data-placement"].endsWith("start")) return `25%`;
|
|
33
41
|
if (props["data-placement"].endsWith("end")) return `75%`;
|
|
@@ -38,10 +46,10 @@ const StyledArrow = styled("div", {
|
|
|
38
46
|
svg {
|
|
39
47
|
transform: rotateZ(-90deg);
|
|
40
48
|
}
|
|
41
|
-
left: -${
|
|
49
|
+
left: -${arrowPlacementBase16}rem;
|
|
42
50
|
}
|
|
43
51
|
&[data-placement^='bottom'] {
|
|
44
|
-
top: -${
|
|
52
|
+
top: -${arrowPlacementBase16}rem;
|
|
45
53
|
left: ${(props) => {
|
|
46
54
|
if (props["data-placement"].endsWith("start")) return `25%`;
|
|
47
55
|
if (props["data-placement"].endsWith("end")) return `75%`;
|
|
@@ -52,10 +60,35 @@ const StyledArrow = styled("div", {
|
|
|
52
60
|
svg {
|
|
53
61
|
transform: rotateZ(90deg);
|
|
54
62
|
}
|
|
55
|
-
right: -${
|
|
63
|
+
right: -${arrowPlacementBase16}rem;
|
|
64
|
+
}
|
|
65
|
+
margin-left: ${(props) => isTopOrBottom(props["data-placement"]) ? `-${arrowDimensionBase16 / 2}rem` : "0"};
|
|
66
|
+
margin-top: ${(props) => isLeftOrRight(props["data-placement"]) ? `-${arrowDimensionBase16 / 2}rem` : "0"};
|
|
67
|
+
|
|
68
|
+
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
69
|
+
width: ${arrowDimensionBase13}rem;
|
|
70
|
+
height: ${arrowDimensionBase13}rem;
|
|
71
|
+
|
|
72
|
+
&[data-placement^='top'] {
|
|
73
|
+
bottom: -${arrowPlacementBase13}rem;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&[data-placement^='bottom'] {
|
|
77
|
+
top: -${arrowPlacementBase13}rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&[data-placement^='left'] {
|
|
81
|
+
right: -${arrowPlacementBase13}rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&[data-placement^='right'] {
|
|
85
|
+
left: -${arrowPlacementBase13}rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
margin-left: ${(props) => isTopOrBottom(props["data-placement"]) ? `-${arrowDimensionBase13 / 2}rem` : "0"};
|
|
89
|
+
|
|
90
|
+
margin-top: ${(props) => isLeftOrRight(props["data-placement"]) ? `-${arrowDimensionBase13 / 2}rem` : "0"};
|
|
56
91
|
}
|
|
57
|
-
margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
|
|
58
|
-
margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
|
|
59
92
|
`;
|
|
60
93
|
const StylePathShadow = styled("path", {
|
|
61
94
|
name: DSFloatingWrapperName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PopoverArrow.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n placement: string;\n style: React.CSSProperties;\n arrowElementRef?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n placement: string;\n style: React.CSSProperties;\n arrowElementRef?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst OFFSET_FIX_SHADOW_DEFECT = 0.25;\n\nconst arrowDimensionBase13 = arrowWidth / 13;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE13 = OFFSET_FIX_SHADOW_DEFECT / 13;\nconst arrowDimensionBase16 = arrowWidth / 16;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE16 = OFFSET_FIX_SHADOW_DEFECT / 16;\n\nconst arrowPlacementBase13 = arrowDimensionBase13 - OFFSET_FIX_SHADOW_DEFECT_BASE13;\nconst arrowPlacementBase16 = arrowDimensionBase16 - OFFSET_FIX_SHADOW_DEFECT_BASE16;\n\nconst isTopOrBottom = (placement: string) => placement.startsWith('top') || placement.startsWith('bottom');\n\nconst isLeftOrRight = (placement: string) => placement.startsWith('left') || placement.startsWith('right');\n\nconst StyledArrow = styled('div', {\n name: DSFloatingWrapperName,\n slot: DSFloatingWrapperSlots.ARROW,\n})<{ 'data-placement': string }>`\n line-height: 0;\n position: absolute;\n width: ${arrowDimensionBase16}rem;\n height: ${arrowDimensionBase16}rem;\n pointer-events: none;\n background-color: transparent;\n & .stroke {\n fill: rgb(105, 116, 137);\n fill-opacity: 0.4;\n }\n & .fill {\n fill: rgb(255, 255, 255);\n }\n\n &[data-placement^='top'] {\n svg {\n transform: rotateZ(180deg);\n }\n bottom: -${arrowPlacementBase16}rem;\n left: ${(props) => {\n if (props['data-placement'].endsWith('start')) return `25%`;\n if (props['data-placement'].endsWith('end')) return `75%`;\n return '';\n }};\n }\n &[data-placement^='right'] {\n svg {\n transform: rotateZ(-90deg);\n }\n left: -${arrowPlacementBase16}rem;\n }\n &[data-placement^='bottom'] {\n top: -${arrowPlacementBase16}rem;\n left: ${(props) => {\n if (props['data-placement'].endsWith('start')) return `25%`;\n if (props['data-placement'].endsWith('end')) return `75%`;\n return '';\n }};\n }\n &[data-placement^='left'] {\n svg {\n transform: rotateZ(90deg);\n }\n right: -${arrowPlacementBase16}rem;\n }\n margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n width: ${arrowDimensionBase13}rem;\n height: ${arrowDimensionBase13}rem;\n\n &[data-placement^='top'] {\n bottom: -${arrowPlacementBase13}rem;\n }\n\n &[data-placement^='bottom'] {\n top: -${arrowPlacementBase13}rem;\n }\n\n &[data-placement^='left'] {\n right: -${arrowPlacementBase13}rem;\n }\n\n &[data-placement^='right'] {\n left: -${arrowPlacementBase13}rem;\n }\n\n margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n\n margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n }\n`;\n\nconst StylePathShadow = styled('path', {\n name: DSFloatingWrapperName,\n slot: DSFloatingWrapperSlots.ARROW_SHADOW,\n})``;\n\nconst StylePathFill = styled('path', {\n name: DSFloatingWrapperName,\n slot: DSFloatingWrapperSlots.ARROW_FILL,\n})``;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }: PopoverArrowT): React.ReactElement => {\n const ownerProps = useOwnerProps(rest);\n const globalAttributes = useGetGlobalAttributes(rest);\n const xstyledProps = useGetXstyledProps(rest);\n return (\n <StyledArrow\n key=\"popper-arrow\"\n data-placement={placement}\n style={style}\n innerRef={arrowElementRef}\n data-testid=\"ds-tooltip-arrow\"\n aria-hidden=\"true\"\n {...ownerProps}\n {...globalAttributes}\n {...xstyledProps}\n >\n <svg viewBox=\"0 0 30 30\">\n <StylePathShadow\n {...ownerProps}\n className=\"stroke\"\n d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <StylePathFill\n {...ownerProps}\n className=\"fill\"\n d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n />\n </svg>\n </StyledArrow>\n );\n};\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-floating-context",
|
|
3
|
-
"version": "3.53.0-next.
|
|
3
|
+
"version": "3.53.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Popper Hook",
|
|
6
6
|
"files": [
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-hooks-headless-tooltip": "3.53.0-next.
|
|
40
|
-
"@elliemae/ds-props-helpers": "3.53.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
39
|
+
"@elliemae/ds-hooks-headless-tooltip": "3.53.0-next.3",
|
|
40
|
+
"@elliemae/ds-props-helpers": "3.53.0-next.3",
|
|
41
|
+
"@elliemae/ds-system": "3.53.0-next.3",
|
|
42
|
+
"@elliemae/ds-typescript-helpers": "3.53.0-next.3"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@elliemae/pui-cli": "9.0.0-next.63",
|
|
46
46
|
"jest": "~29.7.0",
|
|
47
|
-
"@elliemae/ds-monorepo-devops": "3.53.0-next.
|
|
47
|
+
"@elliemae/ds-monorepo-devops": "3.53.0-next.3"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"lodash-es": "^4.17.21",
|