Skip to content

Commit dd90283

Browse files
authored
Merge pull request #2278 from gluestack/patch-v1
release: @gluestack-ui/popover, @gluestack-style/react, @react-native-aria/overlay
2 parents faeaf19 + af0adce commit dd90283

File tree

18 files changed

+126
-67
lines changed

18 files changed

+126
-67
lines changed

example/storybook-nativewind/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@
3030
"@expo/webpack-config": "^0.17.2",
3131
"@geometricpanda/storybook-addon-iframe": "^0.2.2",
3232
"@gluestack-style/animation-resolver": "^1.0.4",
33-
"@gluestack-style/react": "^1.0.56",
33+
"@gluestack-style/react": "^1.0.57",
3434
"@gluestack-ui/config": "^1.1.19",
35-
"@gluestack-ui/themed": "^1.1.33",
35+
"@gluestack-ui/themed": "^1.1.34",
3636
"@gluestack/design-system": "^0.5.36",
3737
"@legendapp/motion": "^2.2.0",
3838
"@react-aria/button": "^3.7.0",
@@ -43,7 +43,7 @@
4343
"@react-aria/separator": "^3.3.0",
4444
"@react-aria/utils": "^3.15.0",
4545
"@react-native-aria/button": "^0.2.7",
46-
"@react-native-aria/overlays": "^0.3.12",
46+
"@react-native-aria/overlays": "^0.3.14",
4747
"@react-native-aria/separator": "^0.2.6",
4848
"@react-native-async-storage/async-storage": "~1.17.3",
4949
"@react-native-community/datetimepicker": "6.5.2",

example/storybook/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"@react-aria/separator": "^3.3.0",
3636
"@react-aria/utils": "^3.15.0",
3737
"@react-native-aria/button": "^0.2.7",
38-
"@react-native-aria/overlays": "0.3.12",
38+
"@react-native-aria/overlays": "0.3.14",
3939
"@react-native-aria/separator": "^0.2.6",
4040
"@react-native-async-storage/async-storage": "~1.17.3",
4141
"@react-native-community/datetimepicker": "6.5.2",

packages/config/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"@expo/html-elements": "latest",
3838
"@gluestack-style/animation-resolver": "1.0.4",
3939
"@gluestack-style/legend-motion-animation-driver": "1.0.3",
40-
"@gluestack-style/react": "1.0.56",
40+
"@gluestack-style/react": "1.0.57",
4141
"@gluestack-ui/accordion": "1.0.5",
4242
"@gluestack-ui/actionsheet": "0.2.43",
4343
"@gluestack-ui/alert": "0.1.15",
@@ -55,7 +55,7 @@
5555
"@gluestack-ui/menu": "0.2.34",
5656
"@gluestack-ui/modal": "0.1.34",
5757
"@gluestack-ui/overlay": "0.1.14",
58-
"@gluestack-ui/popover": "0.1.35",
58+
"@gluestack-ui/popover": "0.1.36",
5959
"@gluestack-ui/pressable": "0.1.16",
6060
"@gluestack-ui/progress": "0.1.15",
6161
"@gluestack-ui/provider": "0.1.12",
@@ -66,14 +66,14 @@
6666
"@gluestack-ui/switch": "0.1.22",
6767
"@gluestack-ui/tabs": "0.1.16",
6868
"@gluestack-ui/textarea": "0.1.23",
69-
"@gluestack-ui/themed": "1.1.33",
69+
"@gluestack-ui/themed": "1.1.34",
7070
"@gluestack-ui/toast": "1.0.5",
7171
"@gluestack-ui/tooltip": "0.1.31",
7272
"@legendapp/motion": "latest"
7373
},
7474
"peerDependencies": {
75-
"@gluestack-style/react": ">=1.0.56",
76-
"@gluestack-ui/themed": ">=1.1.33"
75+
"@gluestack-style/react": ">=1.0.57",
76+
"@gluestack-ui/themed": ">=1.1.34"
7777
},
7878
"release-it": {
7979
"git": {

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
# @react-native-aria/overlays
22

3+
## 0.3.14
4+
5+
### Patch Changes
6+
7+
- feat: overlay release
8+
9+
## 0.3.13
10+
11+
### Patch Changes
12+
13+
- feat: added flip state to popover
14+
315
## 0.3.12
416

517
### Patch Changes

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-native-aria/overlays",
3-
"version": "0.3.12",
3+
"version": "0.3.14",
44
"description": "Overlay utilities. Part of react-native-aria",
55
"main": "lib/commonjs/index",
66
"module": "lib/module/index",

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,7 @@ export function useOverlayPosition(props: AriaPositionProps) {
194194
placement: position.placement,
195195
arrowProps: arrowPropsWithStatusBarHeight,
196196
updatePosition,
197+
isFlipped: position.isFlipped,
197198
};
198199

199200
if (position.maxHeight !== undefined) {
@@ -239,6 +240,7 @@ export interface PositionResult {
239240
arrowOffsetTop?: number;
240241
maxHeight?: number;
241242
placement: PlacementAxis | undefined;
243+
isFlipped?: boolean;
242244
}
243245

244246
const calculatePosition = (opts: any): PositionResult => {
@@ -309,6 +311,7 @@ function calculatePositionInternal(
309311
isContainerPositioned
310312
);
311313
let normalizedOffset = offset;
314+
let isFlipped = false;
312315
let space = getAvailableSpace(
313316
boundaryDimensions,
314317
containerOffsetWithBoundary,
@@ -343,10 +346,15 @@ function calculatePositionInternal(
343346

344347
// If the available space for the flipped position is greater than the original available space, flip.
345348
if (flippedSpace > space) {
349+
isFlipped = true;
346350
placementInfo = flippedPlacementInfo;
347351
position = flippedPosition;
348352
normalizedOffset = offset;
353+
} else {
354+
isFlipped = false;
349355
}
356+
} else {
357+
isFlipped = false;
350358
}
351359

352360
let delta = getDelta(
@@ -404,6 +412,7 @@ function calculatePositionInternal(
404412
arrowOffsetLeft: arrowPosition.left,
405413
arrowOffsetTop: arrowPosition.top,
406414
placement: placementInfo.placement,
415+
isFlipped,
407416
};
408417
}
409418

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

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
// @ts-nocheck
2+
/* eslint @typescript-eslint/no-unused-vars: 2 */
3+
24
/*
35
* Copyright 2020 Adobe. All rights reserved.
46
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -209,14 +211,8 @@ function computePosition(
209211
containerOffsetWithBoundary: Offset,
210212
isContainerPositioned: boolean
211213
) {
212-
let {
213-
placement,
214-
crossPlacement,
215-
axis,
216-
crossAxis,
217-
size,
218-
crossSize,
219-
} = placementInfo;
214+
let { placement, crossPlacement, axis, crossAxis, size, crossSize } =
215+
placementInfo;
220216
let position: Position = {};
221217

222218
// button position
@@ -280,22 +276,22 @@ function getMaxHeight(
280276
) {
281277
return position.top != null
282278
? // We want the distance between the top of the overlay to the bottom of the boundary
283-
Math.max(
284-
0,
285-
boundaryDimensions.height +
286-
boundaryDimensions.top +
287-
boundaryDimensions.scroll.top - // this is the bottom of the boundary
288-
(containerOffsetWithBoundary.top + position.top) - // this is the top of the overlay
289-
(margins.top + margins.bottom + padding) // save additional space for margin and padding
290-
)
279+
Math.max(
280+
0,
281+
boundaryDimensions.height +
282+
boundaryDimensions.top +
283+
boundaryDimensions.scroll.top - // this is the bottom of the boundary
284+
(containerOffsetWithBoundary.top + position.top) - // this is the top of the overlay
285+
(margins.top + margins.bottom + padding) // save additional space for margin and padding
286+
)
291287
: // We want the distance between the top of the trigger to the top of the boundary
292-
Math.max(
293-
0,
294-
childOffset.top +
295-
containerOffsetWithBoundary.top - // this is the top of the trigger
296-
(boundaryDimensions.top + boundaryDimensions.scroll.top) - // this is the top of the boundary
297-
(margins.top + margins.bottom + padding) // save additional space for margin and padding
298-
);
288+
Math.max(
289+
0,
290+
childOffset.top +
291+
containerOffsetWithBoundary.top - // this is the top of the trigger
292+
(boundaryDimensions.top + boundaryDimensions.scroll.top) - // this is the top of the boundary
293+
(margins.top + margins.bottom + padding) // save additional space for margin and padding
294+
);
299295
}
300296

301297
function getAvailableSpace(
@@ -311,26 +307,26 @@ function getAvailableSpace(
311307
return Math.max(
312308
0,
313309
childOffset[axis] -
314-
boundaryDimensions[axis] -
315-
boundaryDimensions.scroll[axis] +
316-
containerOffsetWithBoundary[axis] -
317-
margins[axis] -
318-
margins[FLIPPED_DIRECTION[axis]] -
319-
padding
310+
boundaryDimensions[axis] -
311+
boundaryDimensions.scroll[axis] +
312+
containerOffsetWithBoundary[axis] -
313+
margins[axis] -
314+
margins[FLIPPED_DIRECTION[axis]] -
315+
padding
320316
);
321317
}
322318

323319
return Math.max(
324320
0,
325321
boundaryDimensions[size] +
326-
boundaryDimensions[axis] +
327-
boundaryDimensions.scroll[axis] -
328-
containerOffsetWithBoundary[axis] -
329-
childOffset[axis] -
330-
childOffset[size] -
331-
margins[axis] -
332-
margins[FLIPPED_DIRECTION[axis]] -
333-
padding
322+
boundaryDimensions[axis] +
323+
boundaryDimensions.scroll[axis] -
324+
containerOffsetWithBoundary[axis] -
325+
childOffset[axis] -
326+
childOffset[size] -
327+
margins[axis] -
328+
margins[FLIPPED_DIRECTION[axis]] -
329+
padding
334330
);
335331
}
336332

@@ -350,14 +346,9 @@ export function calculatePositionInternal(
350346
shouldOverlapWithTrigger: boolean
351347
): PositionResult {
352348
let placementInfo = parsePlacement(placementInput);
353-
let {
354-
size,
355-
crossAxis,
356-
crossSize,
357-
placement,
358-
crossPlacement,
359-
axis,
360-
} = placementInfo;
349+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
350+
let { size, crossAxis, crossSize, placement, crossPlacement, axis } =
351+
placementInfo;
361352
let position = computePosition(
362353
childOffset,
363354
boundaryDimensions,
@@ -368,7 +359,7 @@ export function calculatePositionInternal(
368359
containerOffsetWithBoundary,
369360
isContainerPositioned
370361
);
371-
362+
let isFlipped = false;
372363
let normalizedOffset = offset;
373364
let space = getAvailableSpace(
374365
boundaryDimensions,
@@ -405,10 +396,15 @@ export function calculatePositionInternal(
405396

406397
// If the available space for the flipped position is greater than the original available space, flip.
407398
if (flippedSpace > space) {
399+
isFlipped = true;
408400
placementInfo = flippedPlacementInfo;
409401
position = flippedPosition;
410402
normalizedOffset = offset;
403+
} else {
404+
isFlipped = false;
411405
}
406+
} else {
407+
isFlipped = false;
412408
}
413409

414410
let delta = getDelta(
@@ -465,6 +461,7 @@ export function calculatePositionInternal(
465461
arrowOffsetLeft: arrowPosition.left,
466462
arrowOffsetTop: arrowPosition.top,
467463
placement: placementInfo.placement,
464+
isFlipped,
468465
};
469466
}
470467

@@ -502,7 +499,8 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
502499
let overlaySize: Offset = getOffset(overlayNode);
503500
const matrix = getComputedStyle(overlayNode).getPropertyValue('transform');
504501
const transform = matrix;
505-
const regex = /matrix\((-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+)\)/;
502+
const regex =
503+
/matrix\((-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+),\s*(-?\d*\.?\d+)\)/;
506504
const matches = transform.match(regex);
507505
let scaleX = 1;
508506
let scaleY = 1;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ interface PositionAria {
6262
placement: PlacementAxis;
6363
/** Updates the position of the overlay. */
6464
updatePosition(): void;
65+
/** Whether the overlay is flipped. */
66+
isFlipped: boolean;
6567
}
6668

6769
// @ts-ignore
@@ -139,9 +141,11 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
139141
shouldOverlapWithTrigger,
140142
})
141143
);
144+
// eslint-disable-next-line react-hooks/exhaustive-deps
142145
}, deps);
143146

144147
// Update position when anything changes
148+
// eslint-disable-next-line react-hooks/exhaustive-deps
145149
useLayoutEffect(updatePosition, deps);
146150

147151
// Update position on window resize
@@ -224,6 +228,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
224228
top: position.arrowOffsetTop,
225229
},
226230
},
231+
isFlipped: position.isFlipped,
227232
updatePosition,
228233
};
229234
}

packages/styled/react/CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @gluestack-style/react
22

3+
## 1.0.57
4+
5+
### Patch Changes
6+
7+
- feat: added flip state to popover
8+
39
## 1.0.56
410

511
### Patch Changes

packages/styled/react/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@gluestack-style/react",
33
"description": "A universal & performant styling library for React Native, Next.js & React",
4-
"version": "1.0.56",
4+
"version": "1.0.57",
55
"keywords": [
66
"React Native",
77
"Next.js",

0 commit comments

Comments
 (0)