@fluentui/react-positioning 9.15.6 → 9.15.7
Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 30 Jul 2024 18:45:08 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.15.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.15.7)
|
|
8
|
+
|
|
9
|
+
Tue, 30 Jul 2024 18:45:08 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.15.6..@fluentui/react-positioning_v9.15.7)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: improve arrow styles implementation ([PR #32092](https://github.com/microsoft/fluentui/pull/32092) by olfedias@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [9.15.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.15.6)
|
|
8
17
|
|
|
9
|
-
Tue, 23 Jul 2024 20:
|
|
18
|
+
Tue, 23 Jul 2024 20:13:14 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.15.5..@fluentui/react-positioning_v9.15.6)
|
|
11
20
|
|
|
12
21
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -14,10 +14,7 @@ export declare type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParen
|
|
|
14
14
|
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
|
15
15
|
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
|
16
16
|
*/
|
|
17
|
-
export declare function createArrowHeightStyles(arrowHeight: number):
|
|
18
|
-
width: string;
|
|
19
|
-
height: string;
|
|
20
|
-
};
|
|
17
|
+
export declare function createArrowHeightStyles(arrowHeight: number): GriffelStyle;
|
|
21
18
|
|
|
22
19
|
/**
|
|
23
20
|
* @internal
|
package/lib/createArrowStyles.js
CHANGED
|
@@ -24,40 +24,43 @@ import { tokens } from '@fluentui/react-theme';
|
|
|
24
24
|
*/ export function createArrowStyles(options) {
|
|
25
25
|
const { arrowHeight, borderWidth = '1px', borderStyle = 'solid', borderColor = tokens.colorTransparentStroke } = options;
|
|
26
26
|
return {
|
|
27
|
+
boxSizing: 'border-box',
|
|
27
28
|
position: 'absolute',
|
|
28
|
-
backgroundColor: 'inherit',
|
|
29
|
-
visibility: 'hidden',
|
|
30
29
|
zIndex: -1,
|
|
31
30
|
...arrowHeight && createArrowHeightStyles(arrowHeight),
|
|
31
|
+
backgroundColor: 'inherit',
|
|
32
|
+
backgroundClip: 'content-box',
|
|
33
|
+
borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,
|
|
34
|
+
transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',
|
|
35
|
+
height: 'var(--fui-positioning-arrow-height)',
|
|
36
|
+
width: 'var(--fui-positioning-arrow-height)',
|
|
32
37
|
'::before': {
|
|
33
38
|
content: '""',
|
|
34
|
-
|
|
35
|
-
position: 'absolute',
|
|
36
|
-
boxSizing: 'border-box',
|
|
37
|
-
width: 'inherit',
|
|
38
|
-
height: 'inherit',
|
|
39
|
+
display: 'block',
|
|
39
40
|
backgroundColor: 'inherit',
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
margin: `-${borderWidth}`,
|
|
42
|
+
width: '100%',
|
|
43
|
+
height: '100%',
|
|
44
|
+
border: `${borderWidth} ${borderStyle} ${borderColor}`,
|
|
45
|
+
borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,
|
|
46
|
+
clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)'
|
|
44
47
|
},
|
|
45
48
|
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
|
46
49
|
':global([data-popper-placement^="top"])': {
|
|
47
|
-
bottom:
|
|
48
|
-
'--fui-positioning-angle': '
|
|
50
|
+
bottom: 'var(--fui-positioning-arrow-offset)',
|
|
51
|
+
'--fui-positioning-arrow-angle': '-45deg'
|
|
49
52
|
},
|
|
50
53
|
':global([data-popper-placement^="right"])': {
|
|
51
|
-
left:
|
|
52
|
-
'--fui-positioning-angle': '
|
|
54
|
+
left: `var(--fui-positioning-arrow-offset) /* @noflip */`,
|
|
55
|
+
'--fui-positioning-arrow-angle': '45deg'
|
|
53
56
|
},
|
|
54
57
|
':global([data-popper-placement^="bottom"])': {
|
|
55
|
-
top:
|
|
56
|
-
'--fui-positioning-angle': '
|
|
58
|
+
top: 'var(--fui-positioning-arrow-offset)',
|
|
59
|
+
'--fui-positioning-arrow-angle': '135deg'
|
|
57
60
|
},
|
|
58
61
|
':global([data-popper-placement^="left"])': {
|
|
59
|
-
right:
|
|
60
|
-
'--fui-positioning-angle': '
|
|
62
|
+
right: `var(--fui-positioning-arrow-offset) /* @noflip */`,
|
|
63
|
+
'--fui-positioning-arrow-angle': '225deg'
|
|
61
64
|
}
|
|
62
65
|
};
|
|
63
66
|
}
|
|
@@ -70,9 +73,9 @@ import { tokens } from '@fluentui/react-theme';
|
|
|
70
73
|
*/ export function createArrowHeightStyles(arrowHeight) {
|
|
71
74
|
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
|
|
72
75
|
// Multiply the triangle's height by sqrt(2) to get length of its edges.
|
|
73
|
-
const edgeLength =
|
|
76
|
+
const edgeLength = 1.414 * arrowHeight;
|
|
74
77
|
return {
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
'--fui-positioning-arrow-height': `${edgeLength}px`,
|
|
79
|
+
'--fui-positioning-arrow-offset': `${edgeLength / 2 * -1}px`
|
|
77
80
|
};
|
|
78
81
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createArrowStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n
|
|
1
|
+
{"version":3,"sources":["createArrowStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n boxSizing: 'border-box',\n position: 'absolute',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n backgroundColor: 'inherit',\n backgroundClip: 'content-box',\n\n borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,\n transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',\n\n height: 'var(--fui-positioning-arrow-height)',\n width: 'var(--fui-positioning-arrow-height)',\n\n '::before': {\n content: '\"\"',\n\n display: 'block',\n backgroundColor: 'inherit',\n margin: `-${borderWidth}`,\n width: '100%',\n height: '100%',\n\n border: `${borderWidth} ${borderStyle} ${borderColor}`,\n borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,\n\n clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: 'var(--fui-positioning-arrow-offset)',\n '--fui-positioning-arrow-angle': '-45deg',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `var(--fui-positioning-arrow-offset) /* @noflip */`,\n '--fui-positioning-arrow-angle': '45deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: 'var(--fui-positioning-arrow-offset)',\n '--fui-positioning-arrow-angle': '135deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `var(--fui-positioning-arrow-offset) /* @noflip */`,\n '--fui-positioning-arrow-angle': '225deg',\n },\n };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number): GriffelStyle {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = 1.414 * arrowHeight;\n\n return {\n '--fui-positioning-arrow-height': `${edgeLength}px`,\n '--fui-positioning-arrow-offset': `${(edgeLength / 2) * -1}px`,\n };\n}\n"],"names":["tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","boxSizing","position","zIndex","createArrowHeightStyles","backgroundColor","backgroundClip","borderBottomLeftRadius","borderRadiusSmall","transform","height","width","content","display","margin","border","clipPath","bottom","left","top","right","edgeLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAsC/C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,kBAAkBC,OAAiC;IACjE,MAAM,EACJC,WAAW,EACXC,cAAc,KAAK,EACnBC,cAAc,OAAO,EACrBC,cAAcN,OAAOO,sBAAsB,EAC5C,GAAGL;IAEJ,OAAO;QACLM,WAAW;QACXC,UAAU;QACVC,QAAQ,CAAC;QAET,GAAIP,eAAeQ,wBAAwBR,YAAY;QAEvDS,iBAAiB;QACjBC,gBAAgB;QAEhBC,wBAAwB,CAAC,EAAEd,OAAOe,iBAAiB,CAAC,cAAc,CAAC;QACnEC,WAAW;QAEXC,QAAQ;QACRC,OAAO;QAEP,YAAY;YACVC,SAAS;YAETC,SAAS;YACTR,iBAAiB;YACjBS,QAAQ,CAAC,CAAC,EAAEjB,YAAY,CAAC;YACzBc,OAAO;YACPD,QAAQ;YAERK,QAAQ,CAAC,EAAElB,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAEC,YAAY,CAAC;YACtDQ,wBAAwB,CAAC,EAAEd,OAAOe,iBAAiB,CAAC,cAAc,CAAC;YAEnEQ,UAAU;QACZ;QAEA,0FAA0F;QAC1F,2CAA2C;YACzCC,QAAQ;YACR,iCAAiC;QACnC;QACA,6CAA6C;YAC3CC,MAAM,CAAC,iDAAiD,CAAC;YACzD,iCAAiC;QACnC;QACA,8CAA8C;YAC5CC,KAAK;YACL,iCAAiC;QACnC;QACA,4CAA4C;YAC1CC,OAAO,CAAC,iDAAiD,CAAC;YAC1D,iCAAiC;QACnC;IACF;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAAShB,wBAAwBR,WAAmB;IACzD,qGAAqG;IACrG,wEAAwE;IACxE,MAAMyB,aAAa,QAAQzB;IAE3B,OAAO;QACL,kCAAkC,CAAC,EAAEyB,WAAW,EAAE,CAAC;QACnD,kCAAkC,CAAC,EAAE,AAACA,aAAa,IAAK,CAAC,EAAE,EAAE,CAAC;IAChE;AACF"}
|
|
@@ -20,49 +20,52 @@ const _reacttheme = require("@fluentui/react-theme");
|
|
|
20
20
|
function createArrowStyles(options) {
|
|
21
21
|
const { arrowHeight, borderWidth = '1px', borderStyle = 'solid', borderColor = _reacttheme.tokens.colorTransparentStroke } = options;
|
|
22
22
|
return {
|
|
23
|
+
boxSizing: 'border-box',
|
|
23
24
|
position: 'absolute',
|
|
24
|
-
backgroundColor: 'inherit',
|
|
25
|
-
visibility: 'hidden',
|
|
26
25
|
zIndex: -1,
|
|
27
26
|
...arrowHeight && createArrowHeightStyles(arrowHeight),
|
|
27
|
+
backgroundColor: 'inherit',
|
|
28
|
+
backgroundClip: 'content-box',
|
|
29
|
+
borderBottomLeftRadius: `${_reacttheme.tokens.borderRadiusSmall} /* @noflip */`,
|
|
30
|
+
transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',
|
|
31
|
+
height: 'var(--fui-positioning-arrow-height)',
|
|
32
|
+
width: 'var(--fui-positioning-arrow-height)',
|
|
28
33
|
'::before': {
|
|
29
34
|
content: '""',
|
|
30
|
-
|
|
31
|
-
position: 'absolute',
|
|
32
|
-
boxSizing: 'border-box',
|
|
33
|
-
width: 'inherit',
|
|
34
|
-
height: 'inherit',
|
|
35
|
+
display: 'block',
|
|
35
36
|
backgroundColor: 'inherit',
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
margin: `-${borderWidth}`,
|
|
38
|
+
width: '100%',
|
|
39
|
+
height: '100%',
|
|
40
|
+
border: `${borderWidth} ${borderStyle} ${borderColor}`,
|
|
41
|
+
borderBottomLeftRadius: `${_reacttheme.tokens.borderRadiusSmall} /* @noflip */`,
|
|
42
|
+
clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)'
|
|
40
43
|
},
|
|
41
44
|
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
|
42
45
|
':global([data-popper-placement^="top"])': {
|
|
43
|
-
bottom:
|
|
44
|
-
'--fui-positioning-angle': '
|
|
46
|
+
bottom: 'var(--fui-positioning-arrow-offset)',
|
|
47
|
+
'--fui-positioning-arrow-angle': '-45deg'
|
|
45
48
|
},
|
|
46
49
|
':global([data-popper-placement^="right"])': {
|
|
47
|
-
left:
|
|
48
|
-
'--fui-positioning-angle': '
|
|
50
|
+
left: `var(--fui-positioning-arrow-offset) /* @noflip */`,
|
|
51
|
+
'--fui-positioning-arrow-angle': '45deg'
|
|
49
52
|
},
|
|
50
53
|
':global([data-popper-placement^="bottom"])': {
|
|
51
|
-
top:
|
|
52
|
-
'--fui-positioning-angle': '
|
|
54
|
+
top: 'var(--fui-positioning-arrow-offset)',
|
|
55
|
+
'--fui-positioning-arrow-angle': '135deg'
|
|
53
56
|
},
|
|
54
57
|
':global([data-popper-placement^="left"])': {
|
|
55
|
-
right:
|
|
56
|
-
'--fui-positioning-angle': '
|
|
58
|
+
right: `var(--fui-positioning-arrow-offset) /* @noflip */`,
|
|
59
|
+
'--fui-positioning-arrow-angle': '225deg'
|
|
57
60
|
}
|
|
58
61
|
};
|
|
59
62
|
}
|
|
60
63
|
function createArrowHeightStyles(arrowHeight) {
|
|
61
64
|
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
|
|
62
65
|
// Multiply the triangle's height by sqrt(2) to get length of its edges.
|
|
63
|
-
const edgeLength =
|
|
66
|
+
const edgeLength = 1.414 * arrowHeight;
|
|
64
67
|
return {
|
|
65
|
-
|
|
66
|
-
|
|
68
|
+
'--fui-positioning-arrow-height': `${edgeLength}px`,
|
|
69
|
+
'--fui-positioning-arrow-offset': `${edgeLength / 2 * -1}px`
|
|
67
70
|
};
|
|
68
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createArrowStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n
|
|
1
|
+
{"version":3,"sources":["createArrowStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n boxSizing: 'border-box',\n position: 'absolute',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n backgroundColor: 'inherit',\n backgroundClip: 'content-box',\n\n borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,\n transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',\n\n height: 'var(--fui-positioning-arrow-height)',\n width: 'var(--fui-positioning-arrow-height)',\n\n '::before': {\n content: '\"\"',\n\n display: 'block',\n backgroundColor: 'inherit',\n margin: `-${borderWidth}`,\n width: '100%',\n height: '100%',\n\n border: `${borderWidth} ${borderStyle} ${borderColor}`,\n borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,\n\n clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: 'var(--fui-positioning-arrow-offset)',\n '--fui-positioning-arrow-angle': '-45deg',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `var(--fui-positioning-arrow-offset) /* @noflip */`,\n '--fui-positioning-arrow-angle': '45deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: 'var(--fui-positioning-arrow-offset)',\n '--fui-positioning-arrow-angle': '135deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `var(--fui-positioning-arrow-offset) /* @noflip */`,\n '--fui-positioning-arrow-angle': '225deg',\n },\n };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number): GriffelStyle {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = 1.414 * arrowHeight;\n\n return {\n '--fui-positioning-arrow-height': `${edgeLength}px`,\n '--fui-positioning-arrow-offset': `${(edgeLength / 2) * -1}px`,\n };\n}\n"],"names":["createArrowHeightStyles","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","tokens","colorTransparentStroke","boxSizing","position","zIndex","backgroundColor","backgroundClip","borderBottomLeftRadius","borderRadiusSmall","transform","height","width","content","display","margin","border","clipPath","bottom","left","top","right","edgeLength"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA+HgBA,uBAAAA;eAAAA;;IAlEAC,iBAAAA;eAAAA;;;4BA7DO;AA6DhB,SAASA,kBAAkBC,OAAiC;IACjE,MAAM,EACJC,WAAW,EACXC,cAAc,KAAK,EACnBC,cAAc,OAAO,EACrBC,cAAcC,kBAAAA,CAAOC,sBAAsB,EAC5C,GAAGN;IAEJ,OAAO;QACLO,WAAW;QACXC,UAAU;QACVC,QAAQ,CAAC;QAET,GAAIR,eAAeH,wBAAwBG,YAAY;QAEvDS,iBAAiB;QACjBC,gBAAgB;QAEhBC,wBAAwB,CAAC,EAAEP,kBAAAA,CAAOQ,iBAAiB,CAAC,cAAc,CAAC;QACnEC,WAAW;QAEXC,QAAQ;QACRC,OAAO;QAEP,YAAY;YACVC,SAAS;YAETC,SAAS;YACTR,iBAAiB;YACjBS,QAAQ,CAAC,CAAC,EAAEjB,YAAY,CAAC;YACzBc,OAAO;YACPD,QAAQ;YAERK,QAAQ,CAAC,EAAElB,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAEC,YAAY,CAAC;YACtDQ,wBAAwB,CAAC,EAAEP,kBAAAA,CAAOQ,iBAAiB,CAAC,cAAc,CAAC;YAEnEQ,UAAU;QACZ;QAEA,0FAA0F;QAC1F,2CAA2C;YACzCC,QAAQ;YACR,iCAAiC;QACnC;QACA,6CAA6C;YAC3CC,MAAM,CAAC,iDAAiD,CAAC;YACzD,iCAAiC;QACnC;QACA,8CAA8C;YAC5CC,KAAK;YACL,iCAAiC;QACnC;QACA,4CAA4C;YAC1CC,OAAO,CAAC,iDAAiD,CAAC;YAC1D,iCAAiC;QACnC;IACF;AACF;AASO,SAAS3B,wBAAwBG,WAAmB;IACzD,qGAAqG;IACrG,wEAAwE;IACxE,MAAMyB,aAAa,QAAQzB;IAE3B,OAAO;QACL,kCAAkC,CAAC,EAAEyB,WAAW,EAAE,CAAC;QACnD,kCAAkC,CAAC,EAAEA,aAAc,IAAK,CAAC,EAAE,EAAE,CAAC;IAChE;AACF"}
|