Merge pull request #2279 from gluestack/main

Backmerge Main -> Patch

example/storybook-nativewind/package.json

@@ -30,9 +30,9 @@
     "@expo/webpack-config": "^0.17.2",
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
     "@gluestack-style/animation-resolver": "^1.0.4",
-    "@gluestack-style/react": "^1.0.56",
+    "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/config": "^1.1.19",
-    "@gluestack-ui/themed": "^1.1.33",
+    "@gluestack-ui/themed": "^1.1.34",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",
@@ -44,7 +44,7 @@
     "@react-aria/separator": "^3.3.0",
     "@react-aria/utils": "^3.15.0",
     "@react-native-aria/button": "^0.2.7",
-    "@react-native-aria/overlays": "^0.3.12",
+    "@react-native-aria/overlays": "^0.3.14",
     "@react-native-aria/separator": "^0.2.6",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

example/storybook/package.json

@@ -35,7 +35,7 @@
     "@react-aria/separator": "^3.3.0",
     "@react-aria/utils": "^3.15.0",
     "@react-native-aria/button": "^0.2.7",
-    "@react-native-aria/overlays": "0.3.12",
+    "@react-native-aria/overlays": "0.3.14",
     "@react-native-aria/separator": "^0.2.6",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

packages/config/package.json

@@ -37,7 +37,7 @@
     "@expo/html-elements": "latest",
     "@gluestack-style/animation-resolver": "1.0.4",
     "@gluestack-style/legend-motion-animation-driver": "1.0.3",
-    "@gluestack-style/react": "1.0.56",
+    "@gluestack-style/react": "1.0.57",
     "@gluestack-ui/accordion": "1.0.5",
     "@gluestack-ui/actionsheet": "0.2.43",
     "@gluestack-ui/alert": "0.1.15",
@@ -55,7 +55,7 @@
     "@gluestack-ui/menu": "0.2.34",
     "@gluestack-ui/modal": "0.1.34",
     "@gluestack-ui/overlay": "0.1.14",
-    "@gluestack-ui/popover": "0.1.35",
+    "@gluestack-ui/popover": "0.1.36",
     "@gluestack-ui/pressable": "0.1.16",
     "@gluestack-ui/progress": "0.1.15",
     "@gluestack-ui/provider": "0.1.12",
@@ -66,14 +66,14 @@
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/tabs": "0.1.16",
     "@gluestack-ui/textarea": "0.1.23",
-    "@gluestack-ui/themed": "1.1.33",
+    "@gluestack-ui/themed": "1.1.34",
     "@gluestack-ui/toast": "1.0.5",
     "@gluestack-ui/tooltip": "0.1.31",
     "@legendapp/motion": "latest"
   },
   "peerDependencies": {
-    "@gluestack-style/react": ">=1.0.56",
-    "@gluestack-ui/themed": ">=1.1.33"
+    "@gluestack-style/react": ">=1.0.57",
+    "@gluestack-ui/themed": ">=1.1.34"
   },
   "release-it": {
     "git": {

packages/react-native-aria/overlays/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-native-aria/overlays
 
+## 0.3.14
+
+### Patch Changes
+
+- feat: overlay release
+
+## 0.3.13
+
+### Patch Changes
+
+- feat: added flip state to popover
+
 ## 0.3.12
 
 ### Patch Changes

packages/react-native-aria/overlays/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-aria/overlays",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "description": "Overlay utilities. Part of react-native-aria",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

packages/react-native-aria/overlays/src/useOverlayPosition.ts

@@ -194,6 +194,7 @@ export function useOverlayPosition(props: AriaPositionProps) {
     placement: position.placement,
     arrowProps: arrowPropsWithStatusBarHeight,
     updatePosition,
+    isFlipped: position.isFlipped,
   };
 
   if (position.maxHeight !== undefined) {
@@ -239,6 +240,7 @@ export interface PositionResult {
   arrowOffsetTop?: number;
   maxHeight?: number;
   placement: PlacementAxis | undefined;
+  isFlipped?: boolean;
 }
 
 const calculatePosition = (opts: any): PositionResult => {
@@ -309,6 +311,7 @@ function calculatePositionInternal(
     isContainerPositioned
   );
   let normalizedOffset = offset;
+  let isFlipped = false;
   let space = getAvailableSpace(
     boundaryDimensions,
     containerOffsetWithBoundary,
@@ -343,10 +346,15 @@ function calculatePositionInternal(
 
     // If the available space for the flipped position is greater than the original available space, flip.
     if (flippedSpace > space) {
+      isFlipped = true;
       placementInfo = flippedPlacementInfo;
       position = flippedPosition;
       normalizedOffset = offset;
+    } else {
+      isFlipped = false;
     }
+  } else {
+    isFlipped = false;
   }
 
   let delta = getDelta(
@@ -404,6 +412,7 @@ function calculatePositionInternal(
     arrowOffsetLeft: arrowPosition.left,
     arrowOffsetTop: arrowPosition.top,
     placement: placementInfo.placement,
+    isFlipped,
   };
 }
 

packages/react-native-aria/overlays/src/web/overlays/src/calculatePosition.ts

@@ -1,4 +1,6 @@
 // @ts-nocheck
+/* eslint @typescript-eslint/no-unused-vars: 2 */
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -209,14 +211,8 @@ function computePosition(
   containerOffsetWithBoundary: Offset,
   isContainerPositioned: boolean
 ) {
-  let {
-    placement,
-    crossPlacement,
-    axis,
-    crossAxis,
-    size,
-    crossSize,
-  } = placementInfo;
+  let { placement, crossPlacement, axis, crossAxis, size, crossSize } =
+    placementInfo;
   let position: Position = {};
 
   // button position
@@ -280,22 +276,22 @@ function getMaxHeight(
 ) {
   return position.top != null
     ? // We want the distance between the top of the overlay to the bottom of the boundary
-    Math.max(
-      0,
-      boundaryDimensions.height +
-      boundaryDimensions.top +
-      boundaryDimensions.scroll.top - // this is the bottom of the boundary
-      (containerOffsetWithBoundary.top + position.top) - // this is the top of the overlay
-      (margins.top + margins.bottom + padding) // save additional space for margin and padding
-    )
+      Math.max(
+        0,
+        boundaryDimensions.height +
+          boundaryDimensions.top +
+          boundaryDimensions.scroll.top - // this is the bottom of the boundary
+          (containerOffsetWithBoundary.top + position.top) - // this is the top of the overlay
+          (margins.top + margins.bottom + padding) // save additional space for margin and padding
+      )
     : // We want the distance between the top of the trigger to the top of the boundary
-    Math.max(
-      0,
-      childOffset.top +
-      containerOffsetWithBoundary.top - // this is the top of the trigger
-      (boundaryDimensions.top + boundaryDimensions.scroll.top) - // this is the top of the boundary
-      (margins.top + margins.bottom + padding) // save additional space for margin and padding
-    );
+      Math.max(
+        0,
+        childOffset.top +
+          containerOffsetWithBoundary.top - // this is the top of the trigger
+          (boundaryDimensions.top + boundaryDimensions.scroll.top) - // this is the top of the boundary
+          (margins.top + margins.bottom + padding) // save additional space for margin and padding
+      );
 }
 
 function getAvailableSpace(
@@ -311,26 +307,26 @@ function getAvailableSpace(
     return Math.max(
       0,
       childOffset[axis] -
-      boundaryDimensions[axis] -
-      boundaryDimensions.scroll[axis] +
-      containerOffsetWithBoundary[axis] -
-      margins[axis] -
-      margins[FLIPPED_DIRECTION[axis]] -
-      padding
+        boundaryDimensions[axis] -
+        boundaryDimensions.scroll[axis] +
+        containerOffsetWithBoundary[axis] -
+        margins[axis] -
+        margins[FLIPPED_DIRECTION[axis]] -
+        padding
     );
   }
 
   return Math.max(
     0,
     boundaryDimensions[size] +
-    boundaryDimensions[axis] +
-    boundaryDimensions.scroll[axis] -
-    containerOffsetWithBoundary[axis] -
-    childOffset[axis] -
-    childOffset[size] -
-    margins[axis] -
-    margins[FLIPPED_DIRECTION[axis]] -
-    padding
+      boundaryDimensions[axis] +
+      boundaryDimensions.scroll[axis] -
+      containerOffsetWithBoundary[axis] -
+      childOffset[axis] -
+      childOffset[size] -
+      margins[axis] -
+      margins[FLIPPED_DIRECTION[axis]] -
+      padding
   );
 }
 
@@ -350,14 +346,9 @@ export function calculatePositionInternal(
   shouldOverlapWithTrigger: boolean
 ): PositionResult {
   let placementInfo = parsePlacement(placementInput);
-  let {
-    size,
-    crossAxis,
-    crossSize,
-    placement,
-    crossPlacement,
-    axis,
-  } = placementInfo;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let { size, crossAxis, crossSize, placement, crossPlacement, axis } =
+    placementInfo;
   let position = computePosition(
     childOffset,
     boundaryDimensions,
@@ -368,7 +359,7 @@ export function calculatePositionInternal(
     containerOffsetWithBoundary,
     isContainerPositioned
   );
-
+  let isFlipped = false;
   let normalizedOffset = offset;
   let space = getAvailableSpace(
     boundaryDimensions,
@@ -405,10 +396,15 @@ export function calculatePositionInternal(
 
     // If the available space for the flipped position is greater than the original available space, flip.
     if (flippedSpace > space) {
+      isFlipped = true;
       placementInfo = flippedPlacementInfo;
       position = flippedPosition;
       normalizedOffset = offset;
+    } else {
+      isFlipped = false;
     }
+  } else {
+    isFlipped = false;
   }
 
   let delta = getDelta(
@@ -465,6 +461,7 @@ export function calculatePositionInternal(
     arrowOffsetLeft: arrowPosition.left,
     arrowOffsetTop: arrowPosition.top,
     placement: placementInfo.placement,
+    isFlipped,
   };
 }
 
@@ -502,7 +499,8 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
   let overlaySize: Offset = getOffset(overlayNode);
   const matrix = getComputedStyle(overlayNode).getPropertyValue('transform');
   const transform = matrix;
-  const regex = /matrix\((-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+)\)/;
+  const regex =
+    /matrix\((-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+)\)/;
   const matches = transform.match(regex);
   let scaleX = 1;
   let scaleY = 1;

packages/react-native-aria/overlays/src/web/overlays/src/useOverlayPosition.ts

@@ -62,6 +62,8 @@ interface PositionAria {
   placement: PlacementAxis;
   /** Updates the position of the overlay. */
   updatePosition(): void;
+  /** Whether the overlay is flipped. */
+  isFlipped: boolean;
 }
 
 // @ts-ignore
@@ -139,9 +141,11 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
         shouldOverlapWithTrigger,
       })
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 
   // Update position when anything changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(updatePosition, deps);
 
   // Update position on window resize
@@ -224,6 +228,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
         top: position.arrowOffsetTop,
       },
     },
+    isFlipped: position.isFlipped,
     updatePosition,
   };
 }

packages/styled/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gluestack-style/react
 
+## 1.0.57
+
+### Patch Changes
+
+- feat: added flip state to popover
+
 ## 1.0.56
 
 ### Patch Changes

packages/styled/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "keywords": [
     "React Native",
     "Next.js",

packages/styled/react/src/core/styled-system.ts

@@ -126,6 +126,7 @@ export const reservedKeys: Record<string, reservedKeyType> = {
   indeterminate: { key: ':indeterminate', isState: true },
   checked: { key: ':checked', isState: true },
   readOnly: { key: ':readOnly', isState: true },
+  flip: { key: ':flip', isState: true },
 
   required: { key: ':required', isState: true },
   invalid: { key: ':invalid', isState: true },

packages/styled/react/src/resolver/getWeightBaseOnPath.ts

@@ -29,10 +29,10 @@ export function getWeightBaseOnPath(path: Path) {
     indeterminate: 1,
     checked: 1,
     readOnly: 1,
+    flip: 1,
 
     required: 2,
     invalid: 2,
-
     focus: 3,
     focusVisible: 4,
     hover: 5,

packages/themed/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @gluestack-ui/themed
 
+## 1.1.34
+
+### Patch Changes
+
+- Updated dependencies
+  - @gluestack-ui/popover@0.1.36
+  - @gluestack-style/react@1.0.57
+
 ## 1.1.33
 
 ### Patch Changes