@fluentui/react-positioning - npm Package Compare versions

Comparing version 0.0.0-nightly-20240729-0406.1 to 0.0.0-nightly-20240730-0407.1

dist/index.d.ts

@@ -17,6 +17,3 @@ import type { GriffelStyle } from '@griffel/react';
  */
-export declare function createArrowHeightStyles(arrowHeight: number): {
-    width: string;
-    height: string;
-};
+export declare function createArrowHeightStyles(arrowHeight: number): GriffelStyle;
 
@@ -23,0 +20,0 @@ /**

lib-commonjs/createArrowStyles.js

@@ -23,36 +23,39 @@ "use strict";
     return {
+        boxSizing: 'border-box',
         position: 'absolute',
-        backgroundColor: 'inherit',
-        visibility: 'hidden',
         zIndex: -1,
         ...arrowHeight && createArrowHeightStyles(arrowHeight),
+        backgroundColor: 'inherit',
+        backgroundClip: 'content-box',
+        borderBottomLeftRadius: `${_reacttheme.tokens.borderRadiusSmall} /* @noflip */`,
+        transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',
+        height: 'var(--fui-positioning-arrow-height)',
+        width: 'var(--fui-positioning-arrow-height)',
         '::before': {
             content: '""',
-            visibility: 'visible',
-            position: 'absolute',
-            boxSizing: 'border-box',
-            width: 'inherit',
-            height: 'inherit',
+            display: 'block',
             backgroundColor: 'inherit',
-            borderRight: `${borderWidth} ${borderStyle} ${borderColor} /* @noflip */`,
-            borderBottom: `${borderWidth} ${borderStyle} ${borderColor}`,
-            borderBottomRightRadius: _reacttheme.tokens.borderRadiusSmall,
-            transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg) /* @noflip */'
+            margin: `-${borderWidth}`,
+            width: '100%',
+            height: '100%',
+            border: `${borderWidth} ${borderStyle} ${borderColor}`,
+            borderBottomLeftRadius: `${_reacttheme.tokens.borderRadiusSmall} /* @noflip */`,
+            clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)'
         },
         // Popper sets data-popper-placement on the root element, which is used to align the arrow
         ':global([data-popper-placement^="top"])': {
-            bottom: `-${borderWidth}`,
-            '--fui-positioning-angle': '0'
+            bottom: 'var(--fui-positioning-arrow-offset)',
+            '--fui-positioning-arrow-angle': '-45deg'
         },
         ':global([data-popper-placement^="right"])': {
-            left: `-${borderWidth} /* @noflip */`,
-            '--fui-positioning-angle': '90deg'
+            left: `var(--fui-positioning-arrow-offset) /* @noflip */`,
+            '--fui-positioning-arrow-angle': '45deg'
         },
         ':global([data-popper-placement^="bottom"])': {
-            top: `-${borderWidth}`,
-            '--fui-positioning-angle': '180deg'
+            top: 'var(--fui-positioning-arrow-offset)',
+            '--fui-positioning-arrow-angle': '135deg'
         },
         ':global([data-popper-placement^="left"])': {
-            right: `-${borderWidth} /* @noflip */`,
-            '--fui-positioning-angle': '270deg'
+            right: `var(--fui-positioning-arrow-offset) /* @noflip */`,
+            '--fui-positioning-arrow-angle': '225deg'
         }
@@ -64,7 +67,7 @@ };
     // Multiply the triangle's height by sqrt(2) to get length of its edges.
-    const edgeLength = `${1.414 * arrowHeight}px`;
+    const edgeLength = 1.414 * arrowHeight;
     return {
-        width: edgeLength,
-        height: edgeLength
+        '--fui-positioning-arrow-height': `${edgeLength}px`,
+        '--fui-positioning-arrow-offset': `${edgeLength / 2 * -1}px`
     };
 }

lib/createArrowStyles.js

@@ -27,36 +27,39 @@ import { tokens } from '@fluentui/react-theme';
     return {
+        boxSizing: 'border-box',
         position: 'absolute',
-        backgroundColor: 'inherit',
-        visibility: 'hidden',
         zIndex: -1,
         ...arrowHeight && createArrowHeightStyles(arrowHeight),
+        backgroundColor: 'inherit',
+        backgroundClip: 'content-box',
+        borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,
+        transform: 'rotate(var(--fui-positioning-arrow-angle)) /* @noflip */',
+        height: 'var(--fui-positioning-arrow-height)',
+        width: 'var(--fui-positioning-arrow-height)',
         '::before': {
             content: '""',
-            visibility: 'visible',
-            position: 'absolute',
-            boxSizing: 'border-box',
-            width: 'inherit',
-            height: 'inherit',
+            display: 'block',
             backgroundColor: 'inherit',
-            borderRight: `${borderWidth} ${borderStyle} ${borderColor} /* @noflip */`,
-            borderBottom: `${borderWidth} ${borderStyle} ${borderColor}`,
-            borderBottomRightRadius: tokens.borderRadiusSmall,
-            transform: 'rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg) /* @noflip */'
+            margin: `-${borderWidth}`,
+            width: '100%',
+            height: '100%',
+            border: `${borderWidth} ${borderStyle} ${borderColor}`,
+            borderBottomLeftRadius: `${tokens.borderRadiusSmall} /* @noflip */`,
+            clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)'
         },
         // Popper sets data-popper-placement on the root element, which is used to align the arrow
         ':global([data-popper-placement^="top"])': {
-            bottom: `-${borderWidth}`,
-            '--fui-positioning-angle': '0'
+            bottom: 'var(--fui-positioning-arrow-offset)',
+            '--fui-positioning-arrow-angle': '-45deg'
         },
         ':global([data-popper-placement^="right"])': {
-            left: `-${borderWidth} /* @noflip */`,
-            '--fui-positioning-angle': '90deg'
+            left: `var(--fui-positioning-arrow-offset) /* @noflip */`,
+            '--fui-positioning-arrow-angle': '45deg'
         },
         ':global([data-popper-placement^="bottom"])': {
-            top: `-${borderWidth}`,
-            '--fui-positioning-angle': '180deg'
+            top: 'var(--fui-positioning-arrow-offset)',
+            '--fui-positioning-arrow-angle': '135deg'
         },
         ':global([data-popper-placement^="left"])': {
-            right: `-${borderWidth} /* @noflip */`,
-            '--fui-positioning-angle': '270deg'
+            right: `var(--fui-positioning-arrow-offset) /* @noflip */`,
+            '--fui-positioning-arrow-angle': '225deg'
         }
@@ -74,7 +77,7 @@ };
     // Multiply the triangle's height by sqrt(2) to get length of its edges.
-    const edgeLength = `${1.414 * arrowHeight}px`;
+    const edgeLength = 1.414 * arrowHeight;
     return {
-        width: edgeLength,
-        height: edgeLength
+        '--fui-positioning-arrow-height': `${edgeLength}px`,
+        '--fui-positioning-arrow-offset': `${edgeLength / 2 * -1}px`
     };
 }

package.json

 {
   "name": "@fluentui/react-positioning",
-  "version": "0.0.0-nightly-20240729-0406.1",
+  "version": "0.0.0-nightly-20240730-0407.1",
   "description": "A react wrapper around Popper.js for Fluent UI",
@@ -34,5 +34,5 @@ "main": "lib-commonjs/index.js",
     "@floating-ui/devtools": "0.2.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240729-0406.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20240729-0406.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240729-0406.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240730-0407.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20240730-0407.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240730-0407.1",
     "@griffel/react": "^1.5.22",
@@ -39,0 +39,0 @@ "@swc/helpers": "^0.5.1"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

467319

increased by0.31%

Lines of code

3381

increased by0.09%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20240730-0407.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20240730-0407.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20240730-0407.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20240730-0407.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20240730-0407.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20240729-0406.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20240729-0406.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20240729-0406.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20240729-0406.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20240729-0406.1(transitive)

• Updated@fluentui/react-shared-contexts@0.0.0-nightly-20240730-0407.1

• Updated@fluentui/react-theme@0.0.0-nightly-20240730-0407.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20240730-0407.1