@alveole/components 0.29.0 → 0.29.1

package/dist/core/Page/Page.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
+import type { StatusBarStyle } from 'react-native';
 import { BoxProps } from '../../core';
 import { SidebarController } from '../../ui/Sidebar';
+export type PageStatusBarProps = {
+    barStyle?: StatusBarStyle;
+    backgroundColor?: string;
+};
 export type PageProps = BoxProps & {
     title: string;
     description?: string;
@@ -13,6 +18,7 @@ export type PageProps = BoxProps & {
     sidebar?: React.ReactNode;
     beforeContent?: React.ReactNode;
     sideBarController?: SidebarController;
+    statusBar?: PageStatusBarProps;
     renderToolbar?: (options?: {
         isScrolled: boolean;
     }) => React.ReactNode;

package/dist/core/Page/Page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAEtC,aAAa,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CAOpC,CAAC"}
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,aAAa,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CAOpC,CAAC"}

package/dist/core/Page/PageContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContent.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAMnC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAEzC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA4DlD,CAAC"}
+{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContent.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAsB,MAAM,QAAQ,CAAC;AAMvD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAazC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAwFlD,CAAC"}

package/dist/core/Page/PageContent.js

@@ -1,26 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
+import { useFocusEffect } from 'expo-router';
+import * as SystemUI from 'expo-system-ui';
 import React from 'react';
-import { Platform } from 'react-native';
+import { AppState, Platform, StatusBar } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Box } from '../../core/Box';
 import { useStyles } from './Page.styles';
 import { PageBackground } from './PageBackground';
 import { PageContentDefault } from './PageContentDefault';
 import { PageContentScrollable } from './PageContentScrollable';
+const DEFAULT_STATUS_BAR = {
+    barStyle: 'dark-content',
+    backgroundColor: 'white',
+};
+const applyStatusBar = (statusBar) => {
+    StatusBar.setBarStyle(statusBar.barStyle);
+    if (Platform.OS === 'android')
+        StatusBar.setBackgroundColor(statusBar.backgroundColor);
+    void SystemUI.setBackgroundColorAsync(statusBar.backgroundColor);
+};
 export const PageContent = (props) => {
-    const { scrollable = false, renderToolbar, sidebar, sideBarController, onScrollChange } = props;
+    const { scrollable = false, renderToolbar, sidebar, sideBarController, onScrollChange, statusBar } = props;
     const { isVariant } = useTheme();
     const styles = useStyles();
     const { top } = useSafeAreaInsets();
     const mobileOrTablet = isVariant('mobile') || isVariant('tablet');
+    const resolvedStatusBar = React.useMemo(() => ({
+        barStyle: statusBar?.barStyle ?? DEFAULT_STATUS_BAR.barStyle,
+        backgroundColor: statusBar?.backgroundColor ?? DEFAULT_STATUS_BAR.backgroundColor,
+    }), [statusBar?.backgroundColor, statusBar?.barStyle]);
     const [isScrolled, setIsScrolled] = React.useState(false);
+    useFocusEffect(React.useCallback(() => {
+        applyStatusBar(resolvedStatusBar);
+        return () => applyStatusBar(DEFAULT_STATUS_BAR);
+    }, [resolvedStatusBar]));
+    React.useEffect(() => {
+        const subscription = AppState.addEventListener('change', nextAppState => {
+            if (nextAppState !== 'active')
+                return;
+            applyStatusBar(resolvedStatusBar);
+        });
+        return () => {
+            subscription.remove();
+        };
+    }, [resolvedStatusBar]);
     const handleInternalScrollChange = React.useCallback((scrollY) => {
         const scrolled = scrollY > 0;
         setIsScrolled(scrolled);
         onScrollChange?.(scrollY);
     }, [onScrollChange]);
-    const renderPageWithSidebar = (children) => (_jsxs(Box, { style: styles.sidebarContainer, overflow: mobileOrTablet && sideBarController?.open ? 'hidden' : undefined, children: [sidebar, _jsxs(Box, { flex: 1, children: [mobileOrTablet && (_jsx(Box, { tag: "mobile-menu", children: _jsx(Box, { pt: Platform.OS === 'android' ? top : 0, children: renderToolbar?.({ isScrolled }) }) })), _jsx(Box, { flex: 1, children: children })] })] }));
+    const renderPageWithSidebar = (children) => (_jsxs(Box, { style: styles.sidebarContainer, overflow: mobileOrTablet && sideBarController?.open ? 'hidden' : undefined, children: [sidebar, _jsxs(Box, { flex: 1, children: [mobileOrTablet && (_jsx(Box, { tag: "mobile-menu", style: statusBar?.backgroundColor ? { backgroundColor: statusBar.backgroundColor } : undefined, children: _jsx(Box, { pt: Platform.OS === 'android' ? top : 0, children: renderToolbar?.({ isScrolled }) }) })), _jsx(Box, { flex: 1, children: children })] })] }));
     const isScrollable = React.useMemo(() => scrollable === true ||
         (scrollable === 'desktop-only' && isVariant('desktop')) ||
         (scrollable === 'mobile-only' && mobileOrTablet), [isVariant, mobileOrTablet, scrollable]);

package/dist/core/Page/PageContentScrollable.d.ts

@@ -24,6 +24,7 @@ export declare const PageContentScrollable: React.ForwardRefExoticComponent<Pick
     sidebar?: React.ReactNode;
     beforeContent?: React.ReactNode;
     sideBarController?: import("../..").SidebarController;
+    statusBar?: import("./Page").PageStatusBarProps;
     renderToolbar?: (options?: {
         isScrolled: boolean;
     }) => React.ReactNode;

package/dist/core/Page/PageContentScrollable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageContentScrollable.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentScrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG;IACnD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;aAND,CAAC;mBAChC,CAAD;;;;;;4BAKoF,CAAC;;;;;;;uBALjE,MAAM,IAAI;4BACL,MAAM;qBACb,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;qDAsD3C,CAAC"}
+{"version":3,"file":"PageContentScrollable.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentScrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG;IACnD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;aAAzB,CAAC;mBAAqB,CAAC;;;;;;;4BAQf,CAAC;;;;;;;uBAbG,MAAM,IAAI;4BACL,MAAM;qBACb,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;qDAsD3C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "0.29.0",
+  "version": "0.29.1",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",