@hero-design/rn 8.41.0 → 8.41.1-rc.0

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 28.5s
+created lib/index.js, es/index.js in 29s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -14204,22 +14204,29 @@ var nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
 var PortalComponent = function PortalComponent(_ref) {
   var name = _ref.name,
     hostName = _ref.hostName,
-    children = _ref.children;
+    children = _ref.children,
+    theme = _ref.theme;
+  var defaultTheme = useTheme();
   var _usePortal = usePortal(hostName),
     addUpdatePortal = _usePortal.addPortal,
     removePortal = _usePortal.removePortal;
   var nameOrRandom = useMemo(function () {
     return name || nanoid();
   }, [name]);
+  var ChildrenComponent = useMemo(function () {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme || defaultTheme
+    }, children);
+  }, [theme, children, defaultTheme]);
   useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, children);
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
     return function () {
       removePortal(nameOrRandom);
     };
   }, [addUpdatePortal]);
   useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, children);
-  }, [children]);
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+  }, [ChildrenComponent]);
   return null;
 };
 var Portal = /*#__PURE__*/memo(PortalComponent);

package/lib/index.js

@@ -14235,22 +14235,29 @@ var nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
 var PortalComponent = function PortalComponent(_ref) {
   var name = _ref.name,
     hostName = _ref.hostName,
-    children = _ref.children;
+    children = _ref.children,
+    theme = _ref.theme;
+  var defaultTheme = useTheme();
   var _usePortal = usePortal(hostName),
     addUpdatePortal = _usePortal.addPortal,
     removePortal = _usePortal.removePortal;
   var nameOrRandom = React.useMemo(function () {
     return name || nanoid();
   }, [name]);
+  var ChildrenComponent = React.useMemo(function () {
+    return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
+      theme: theme || defaultTheme
+    }, children);
+  }, [theme, children, defaultTheme]);
   React.useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, children);
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
     return function () {
       removePortal(nameOrRandom);
     };
   }, [addUpdatePortal]);
   React.useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, children);
-  }, [children]);
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+  }, [ChildrenComponent]);
   return null;
 };
 var Portal = /*#__PURE__*/React.memo(PortalComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.41.0",
+  "version": "8.41.1-rc.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.41.0",
+    "@hero-design/colors": "8.41.1-rc.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.41.0",
+    "@hero-design/react-native-month-year-picker": "^8.41.1-rc.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "8.41.0",
-    "@hero-design/react-native-month-year-picker": "^8.41.0",
+    "@hero-design/eslint-plugin": "8.41.1-rc.0",
+    "@hero-design/react-native-month-year-picker": "^8.41.1-rc.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,12 +65,12 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.41.0",
+    "eslint-config-hd": "8.41.1-rc.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.41.0",
+    "prettier-config-hd": "8.41.1-rc.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/src/components/Portal/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Portal allows rendering children with custom theme 1`] = `
+<View
+  testID="portal-wrapper"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="regular"
+  >
+    portal
+  </Text>
+  ;
+</View>
+`;

package/src/components/Portal/__tests__/index.spec.tsx

@@ -6,6 +6,8 @@ import { PortalHost } from '../PortalHost';
 import { PortalProvider } from '../PortalProvider';
 import Typography from '../../Typography';
 import Portal from '..';
+import { getTheme } from '../../../theme';
+import { defaultScale, walletSystemPalette } from '../../../theme/global';
 
 describe('Portal', () => {
   it('should render Typography inside Portal.Host', async () => {
@@ -26,4 +28,21 @@ describe('Portal', () => {
       ).toBeDefined()
     );
   });
+
+  it('allows rendering children with custom theme', () => {
+    const customTheme = getTheme(defaultScale, walletSystemPalette);
+
+    const wrapper = renderWithTheme(
+      <PortalProvider>
+        <View testID="portal-wrapper">
+          <PortalHost name="host" />
+        </View>
+        <Portal theme={customTheme} hostName="host">
+          <Typography.Body>portal</Typography.Body>;
+        </Portal>
+      </PortalProvider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/Portal/index.tsx

@@ -1,10 +1,11 @@
-import { ReactNode, memo, useLayoutEffect, useMemo } from 'react';
+import React, { ReactNode, memo, useLayoutEffect, useMemo } from 'react';
 // Fix issue no crypto in react-native
 // https://stackoverflow.com/a/66852908
 import { customAlphabet } from 'nanoid/non-secure';
 import { usePortal } from './usePortal';
 import { PortalProvider } from './PortalProvider';
 import { PortalHost } from './PortalHost';
+import { Theme, ThemeProvider, useTheme } from '../../theme';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
 
@@ -23,23 +24,35 @@ export interface PortalProps {
    * Content of the portal.
    */
   children?: ReactNode | ReactNode[];
+  /**
+   * Theme for portal children.
+   */
+  theme?: Theme;
 }
 
-const PortalComponent = ({ name, hostName, children }: PortalProps) => {
+const PortalComponent = ({ name, hostName, children, theme }: PortalProps) => {
+  const defaultTheme = useTheme();
   const { addPortal: addUpdatePortal, removePortal } = usePortal(hostName);
 
   const nameOrRandom = useMemo(() => name || nanoid(), [name]);
 
+  const ChildrenComponent = useMemo(
+    () => (
+      <ThemeProvider theme={theme || defaultTheme}>{children}</ThemeProvider>
+    ),
+    [theme, children, defaultTheme]
+  );
+
   useLayoutEffect(() => {
-    addUpdatePortal(nameOrRandom, children);
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
     return () => {
       removePortal(nameOrRandom);
     };
   }, [addUpdatePortal]);
 
   useLayoutEffect(() => {
-    addUpdatePortal(nameOrRandom, children);
-  }, [children]);
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+  }, [ChildrenComponent]);
 
   return null;
 };

package/types/components/Portal/index.d.ts

@@ -1,13 +1,18 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
+import { Theme } from '../../theme';
 export interface PortalProps {
     name?: string;
     hostName?: string;
     children?: ReactNode | ReactNode[];
+    /**
+     * Theme for portal children.
+     */
+    theme?: Theme;
 }
-declare const _default: import("react").NamedExoticComponent<PortalProps> & {
-    readonly type: ({ name, hostName, children }: PortalProps) => null;
+declare const _default: React.NamedExoticComponent<PortalProps> & {
+    readonly type: ({ name, hostName, children, theme }: PortalProps) => null;
 } & {
-    Provider: import("react").MemoExoticComponent<({ rootHostName, children, }: import("./PortalProvider").PortalProviderProps) => JSX.Element>;
-    Host: import("react").MemoExoticComponent<({ name }: import("./PortalHost").PortalHostProps) => JSX.Element>;
+    Provider: React.MemoExoticComponent<({ rootHostName, children, }: import("./PortalProvider").PortalProviderProps) => JSX.Element>;
+    Host: React.MemoExoticComponent<({ name }: import("./PortalHost").PortalHostProps) => JSX.Element>;
 };
 export default _default;