@storybook/react-native-ui-lite 10.4.2 → 10.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +4 -3
- package/package.json +8 -8
- package/src/MobileMenuDrawer.tsx +5 -3
package/dist/index.js
CHANGED
|
@@ -1558,8 +1558,9 @@ const MobileMenuDrawer = (0, react.memo)((0, react.forwardRef)(({ children, onVi
|
|
|
1558
1558
|
const [isVisible, setIsVisible] = (0, react.useState)(false);
|
|
1559
1559
|
const { scrollCallback } = useSelectedNode();
|
|
1560
1560
|
const theme = (0, _storybook_react_native_theming.useTheme)();
|
|
1561
|
+
const insets = (0, react_native_safe_area_context.useSafeAreaInsets)();
|
|
1561
1562
|
const { height } = (0, react_native.useWindowDimensions)();
|
|
1562
|
-
const { height: sheetHeight,
|
|
1563
|
+
const { height: sheetHeight, isKeyboardVisible, keyboardInset } = useAnimatedModalHeight();
|
|
1563
1564
|
const slideAnim = useAnimatedValue(height);
|
|
1564
1565
|
const dragY = useAnimatedValue(0);
|
|
1565
1566
|
const openDrawer = (0, react.useCallback)(() => {
|
|
@@ -1672,13 +1673,13 @@ const MobileMenuDrawer = (0, react.memo)((0, react.forwardRef)(({ children, onVi
|
|
|
1672
1673
|
const scrollToSelectedButtonWrapperStyle = (0, react.useMemo)(() => ({
|
|
1673
1674
|
position: "absolute",
|
|
1674
1675
|
right: 16,
|
|
1675
|
-
bottom:
|
|
1676
|
+
bottom: insets.bottom + 16,
|
|
1676
1677
|
zIndex: 1,
|
|
1677
1678
|
borderRadius: theme.input.borderRadius,
|
|
1678
1679
|
boxShadow: `0 2px 5px 0 ${theme.color.border}`,
|
|
1679
1680
|
elevation: 1
|
|
1680
1681
|
}), [
|
|
1681
|
-
|
|
1682
|
+
insets.bottom,
|
|
1682
1683
|
theme.color.border,
|
|
1683
1684
|
theme.input.borderRadius
|
|
1684
1685
|
]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/react-native-ui-lite",
|
|
3
|
-
"version": "10.4.
|
|
3
|
+
"version": "10.4.4",
|
|
4
4
|
"description": "lightweight ui components for react native storybook",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -29,16 +29,16 @@
|
|
|
29
29
|
],
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@gorhom/portal": "^1.0.14",
|
|
32
|
-
"@legendapp/list": "3.0.0-beta.
|
|
32
|
+
"@legendapp/list": "3.0.0-beta.56",
|
|
33
33
|
"@nozbe/microfuzz": "^1.0.0",
|
|
34
|
-
"@storybook/react": "^10.
|
|
35
|
-
"@storybook/react-native-theming": "^10.4.
|
|
36
|
-
"@storybook/react-native-ui-common": "^10.4.
|
|
34
|
+
"@storybook/react": "^10.4.0",
|
|
35
|
+
"@storybook/react-native-theming": "^10.4.4",
|
|
36
|
+
"@storybook/react-native-ui-common": "^10.4.4",
|
|
37
37
|
"polished": "^4.3.1"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/react": "~19.2.14",
|
|
41
|
-
"storybook": "^10.
|
|
41
|
+
"storybook": "^10.4.0",
|
|
42
42
|
"ts-dedent": "^2.2.0",
|
|
43
43
|
"tsdown": "^0.22.0",
|
|
44
44
|
"typescript": "~6.0.3"
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": "*",
|
|
48
48
|
"react-native": ">=0.57.0",
|
|
49
|
-
"
|
|
50
|
-
"
|
|
49
|
+
"react-native-safe-area-context": "*",
|
|
50
|
+
"storybook": ">=10 || ^10"
|
|
51
51
|
},
|
|
52
52
|
"engines": {
|
|
53
53
|
"node": ">=20.0.0"
|
package/src/MobileMenuDrawer.tsx
CHANGED
|
@@ -27,6 +27,7 @@ import {
|
|
|
27
27
|
import { useSelectedNode } from './SelectedNodeProvider';
|
|
28
28
|
import { DrawerKeyboardInsetContext } from './DrawerKeyboardInsetContext';
|
|
29
29
|
import useAnimatedValue from './useAnimatedValue';
|
|
30
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
30
31
|
|
|
31
32
|
const flexStyle: ViewStyle = { flex: 1 };
|
|
32
33
|
|
|
@@ -108,8 +109,9 @@ export const MobileMenuDrawer = memo(
|
|
|
108
109
|
const [isVisible, setIsVisible] = useState(false);
|
|
109
110
|
const { scrollCallback } = useSelectedNode();
|
|
110
111
|
const theme = useTheme();
|
|
112
|
+
const insets = useSafeAreaInsets();
|
|
111
113
|
const { height } = useWindowDimensions();
|
|
112
|
-
const { height: sheetHeight,
|
|
114
|
+
const { height: sheetHeight, isKeyboardVisible, keyboardInset } = useAnimatedModalHeight();
|
|
113
115
|
|
|
114
116
|
// Slide animation for drawer entrance/exit
|
|
115
117
|
const slideAnim = useAnimatedValue(height);
|
|
@@ -260,13 +262,13 @@ export const MobileMenuDrawer = memo(
|
|
|
260
262
|
({
|
|
261
263
|
position: 'absolute',
|
|
262
264
|
right: 16,
|
|
263
|
-
bottom:
|
|
265
|
+
bottom: insets.bottom + 16,
|
|
264
266
|
zIndex: 1,
|
|
265
267
|
borderRadius: theme.input.borderRadius,
|
|
266
268
|
boxShadow: `0 2px 5px 0 ${theme.color.border}`,
|
|
267
269
|
elevation: 1,
|
|
268
270
|
}) satisfies ViewStyle,
|
|
269
|
-
[
|
|
271
|
+
[insets.bottom, theme.color.border, theme.input.borderRadius]
|
|
270
272
|
);
|
|
271
273
|
|
|
272
274
|
return (
|