@fluentui/react-positioning 9.15.1 → 9.15.3
Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 06 Jun 2024 15:22:19 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.15.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.15.3)
|
|
8
|
+
|
|
9
|
+
Thu, 06 Jun 2024 15:22:19 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.15.2..@fluentui/react-positioning_v9.15.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-utilities to v9.18.10 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.15.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.15.2)
|
|
17
|
+
|
|
18
|
+
Thu, 23 May 2024 08:02:46 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.15.1..@fluentui/react-positioning_v9.15.2)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- chore: replace usage of .shorthands() in styles ([PR #31432](https://github.com/microsoft/fluentui/pull/31432) by olfedias@microsoft.com)
|
|
24
|
+
|
|
7
25
|
## [9.15.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.15.1)
|
|
8
26
|
|
|
9
|
-
Mon, 20 May 2024 12:
|
|
27
|
+
Mon, 20 May 2024 12:45:01 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.15.0..@fluentui/react-positioning_v9.15.1)
|
|
11
29
|
|
|
12
30
|
### Patches
|
package/lib/createArrowStyles.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { shorthands } from '@griffel/react';
|
|
2
1
|
import { tokens } from '@fluentui/react-theme';
|
|
3
2
|
/**
|
|
4
3
|
* @internal
|
|
@@ -38,8 +37,8 @@ import { tokens } from '@fluentui/react-theme';
|
|
|
38
37
|
width: 'inherit',
|
|
39
38
|
height: 'inherit',
|
|
40
39
|
backgroundColor: 'inherit',
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
borderRight: `${borderWidth} ${borderStyle} ${borderColor} /* @noflip */`,
|
|
41
|
+
borderBottom: `${borderWidth} ${borderStyle} ${borderColor}`,
|
|
43
42
|
borderBottomRightRadius: tokens.borderRadiusSmall,
|
|
44
43
|
transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg) /* @noflip */'
|
|
45
44
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createArrowStyles.ts"],"sourcesContent":["import {
|
|
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 visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n '::before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n borderRight: `${borderWidth} ${borderStyle} ${borderColor} /* @noflip */`,\n borderBottom: `${borderWidth} ${borderStyle} ${borderColor}`,\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg) /* @noflip */',\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: `-${borderWidth}`,\n '--fui-positioning-angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--fui-positioning-angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--fui-positioning-angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--fui-positioning-angle': '270deg',\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) {\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}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"],"names":["tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"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,UAAU;QACVC,iBAAiB;QACjBC,YAAY;QACZC,QAAQ,CAAC;QAET,GAAIR,eAAeS,wBAAwBT,YAAY;QAEvD,YAAY;YACVU,SAAS;YACTH,YAAY;YACZF,UAAU;YACVM,WAAW;YACXC,OAAO;YACPC,QAAQ;YACRP,iBAAiB;YACjBQ,aAAa,CAAC,EAAEb,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAEC,YAAY,cAAc,CAAC;YACzEY,cAAc,CAAC,EAAEd,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAEC,YAAY,CAAC;YAC5Da,yBAAyBnB,OAAOoB,iBAAiB;YACjDC,WAAW;QACb;QAEA,0FAA0F;QAC1F,2CAA2C;YACzCC,QAAQ,CAAC,CAAC,EAAElB,YAAY,CAAC;YACzB,2BAA2B;QAC7B;QACA,6CAA6C;YAC3CmB,MAAM,CAAC,CAAC,EAAEnB,YAAY,cAAc,CAAC;YACrC,2BAA2B;QAC7B;QACA,8CAA8C;YAC5CoB,KAAK,CAAC,CAAC,EAAEpB,YAAY,CAAC;YACtB,2BAA2B;QAC7B;QACA,4CAA4C;YAC1CqB,OAAO,CAAC,CAAC,EAAErB,YAAY,cAAc,CAAC;YACtC,2BAA2B;QAC7B;IACF;AACF;AAEA;;;;;;CAMC,GACD,OAAO,SAASQ,wBAAwBT,WAAmB;IACzD,qGAAqG;IACrG,wEAAwE;IACxE,MAAMuB,aAAa,CAAC,EAAE,QAAQvB,YAAY,EAAE,CAAC;IAC7C,OAAO;QAAEY,OAAOW;QAAYV,QAAQU;IAAW;AACjD"}
|
|
@@ -16,7 +16,6 @@ _export(exports, {
|
|
|
16
16
|
return createArrowHeightStyles;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
const _react = require("@griffel/react");
|
|
20
19
|
const _reacttheme = require("@fluentui/react-theme");
|
|
21
20
|
function createArrowStyles(options) {
|
|
22
21
|
const { arrowHeight, borderWidth = '1px', borderStyle = 'solid', borderColor = _reacttheme.tokens.colorTransparentStroke } = options;
|
|
@@ -34,8 +33,8 @@ function createArrowStyles(options) {
|
|
|
34
33
|
width: 'inherit',
|
|
35
34
|
height: 'inherit',
|
|
36
35
|
backgroundColor: 'inherit',
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
borderRight: `${borderWidth} ${borderStyle} ${borderColor} /* @noflip */`,
|
|
37
|
+
borderBottom: `${borderWidth} ${borderStyle} ${borderColor}`,
|
|
39
38
|
borderBottomRightRadius: _reacttheme.tokens.borderRadiusSmall,
|
|
40
39
|
transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg) /* @noflip */'
|
|
41
40
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["createArrowStyles.js"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["createArrowStyles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\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 */ export function createArrowStyles(options) {\n const { arrowHeight, borderWidth = '1px', borderStyle = 'solid', borderColor = tokens.colorTransparentStroke } = options;\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n ...arrowHeight && createArrowHeightStyles(arrowHeight),\n '::before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n borderRight: `${borderWidth} ${borderStyle} ${borderColor} /* @noflip */`,\n borderBottom: `${borderWidth} ${borderStyle} ${borderColor}`,\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg) /* @noflip */'\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: `-${borderWidth}`,\n '--fui-positioning-angle': '0'\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--fui-positioning-angle': '90deg'\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--fui-positioning-angle': '180deg'\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--fui-positioning-angle': '270deg'\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 */ export function createArrowHeightStyles(arrowHeight) {\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}px`;\n return {\n width: edgeLength,\n height: edgeLength\n };\n}\n"],"names":["createArrowStyles","createArrowHeightStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","tokens","colorTransparentStroke","position","backgroundColor","visibility","zIndex","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"mappings":";;;;;;;;;;;IAuBoBA,iBAAiB;eAAjBA;;IA8CAC,uBAAuB;eAAvBA;;;4BArEG;AAuBZ,SAASD,kBAAkBE,OAAO;IACzC,MAAM,EAAEC,WAAW,EAAEC,cAAc,KAAK,EAAEC,cAAc,OAAO,EAAEC,cAAcC,kBAAM,CAACC,sBAAsB,EAAE,GAAGN;IACjH,OAAO;QACHO,UAAU;QACVC,iBAAiB;QACjBC,YAAY;QACZC,QAAQ,CAAC;QACT,GAAGT,eAAeF,wBAAwBE,YAAY;QACtD,YAAY;YACRU,SAAS;YACTF,YAAY;YACZF,UAAU;YACVK,WAAW;YACXC,OAAO;YACPC,QAAQ;YACRN,iBAAiB;YACjBO,aAAa,CAAC,EAAEb,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAEC,YAAY,cAAc,CAAC;YACzEY,cAAc,CAAC,EAAEd,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAEC,YAAY,CAAC;YAC5Da,yBAAyBZ,kBAAM,CAACa,iBAAiB;YACjDC,WAAW;QACf;QACA,0FAA0F;QAC1F,2CAA2C;YACvCC,QAAQ,CAAC,CAAC,EAAElB,YAAY,CAAC;YACzB,2BAA2B;QAC/B;QACA,6CAA6C;YACzCmB,MAAM,CAAC,CAAC,EAAEnB,YAAY,cAAc,CAAC;YACrC,2BAA2B;QAC/B;QACA,8CAA8C;YAC1CoB,KAAK,CAAC,CAAC,EAAEpB,YAAY,CAAC;YACtB,2BAA2B;QAC/B;QACA,4CAA4C;YACxCqB,OAAO,CAAC,CAAC,EAAErB,YAAY,cAAc,CAAC;YACtC,2BAA2B;QAC/B;IACJ;AACJ;AAOW,SAASH,wBAAwBE,WAAW;IACnD,qGAAqG;IACrG,wEAAwE;IACxE,MAAMuB,aAAa,CAAC,EAAE,QAAQvB,YAAY,EAAE,CAAC;IAC7C,OAAO;QACHY,OAAOW;QACPV,QAAQU;IACZ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
|
3
|
-
"version": "9.15.
|
|
3
|
+
"version": "9.15.3",
|
|
4
4
|
"description": "A react wrapper around Popper.js for Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"just": "just-scripts",
|
|
20
20
|
"lint": "just-scripts lint",
|
|
21
21
|
"test": "jest --passWithNoTests",
|
|
22
|
-
"type-check": "
|
|
22
|
+
"type-check": "just-scripts type-check",
|
|
23
23
|
"generate-api": "just-scripts generate-api",
|
|
24
24
|
"test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
|
|
25
25
|
},
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@floating-ui/devtools": "0.2.1",
|
|
34
34
|
"@fluentui/react-shared-contexts": "^9.19.0",
|
|
35
35
|
"@fluentui/react-theme": "^9.1.19",
|
|
36
|
-
"@fluentui/react-utilities": "^9.18.
|
|
36
|
+
"@fluentui/react-utilities": "^9.18.10",
|
|
37
37
|
"@griffel/react": "^1.5.22",
|
|
38
38
|
"@swc/helpers": "^0.5.1"
|
|
39
39
|
},
|