@hero-design/rn 8.91.5 → 8.91.6-alpha.0

package/es/index.js

@@ -9775,7 +9775,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$2 = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$a = index$a(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -9812,7 +9812,7 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$a(AnimatedPressable$2)(function (_ref4) {
+var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref4) {
   var theme = _ref4.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -15335,7 +15335,7 @@ var DatePicker = function DatePicker(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 var StyledContainer$5 = index$a(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -15363,7 +15363,7 @@ var StyledDragableContainer = index$a(View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
+var StyledBackdrop$1 = index$a(AnimatedPressable)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -16552,8 +16552,17 @@ var StyledFAB$1 = index$a(FAB$1)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
+var StyledBackdropPressable = index$a(Pressable)(function () {
+  return {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'transparent'
+  };
+});
+var StyledBackdrop = index$a(Box)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16639,10 +16648,10 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
-  }, /*#__PURE__*/React__default.createElement(StyledBackdrop, {
+  }, /*#__PURE__*/React__default.createElement(StyledBackdropPressable, {
     testID: "back-drop",
     onPress: onBackdropPress
-  }), /*#__PURE__*/React__default.createElement(StyledActionGroupContainer, {
+  }, active && /*#__PURE__*/React__default.createElement(Portal$1, null, /*#__PURE__*/React__default.createElement(StyledBackdrop, null))), /*#__PURE__*/React__default.createElement(StyledActionGroupContainer, {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {

package/lib/index.js

@@ -9803,7 +9803,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$2 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
 var StyledWrapper$a = index$a(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -9840,7 +9840,7 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$a(AnimatedPressable$2)(function (_ref4) {
+var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref4) {
   var theme = _ref4.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -15363,7 +15363,7 @@ var DatePicker = function DatePicker(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var StyledContainer$5 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -15391,7 +15391,7 @@ var StyledDragableContainer = index$a(reactNative.View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
+var StyledBackdrop$1 = index$a(AnimatedPressable)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -16580,8 +16580,17 @@ var StyledFAB$1 = index$a(FAB$1)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
-var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
+var StyledBackdropPressable = index$a(reactNative.Pressable)(function () {
+  return {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'transparent'
+  };
+});
+var StyledBackdrop = index$a(Box)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16667,10 +16676,10 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledBackdrop, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledBackdropPressable, {
     testID: "back-drop",
     onPress: onBackdropPress
-  }), /*#__PURE__*/React__namespace.default.createElement(StyledActionGroupContainer, {
+  }, active && /*#__PURE__*/React__namespace.default.createElement(Portal$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledBackdrop, null))), /*#__PURE__*/React__namespace.default.createElement(StyledActionGroupContainer, {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.91.5",
+  "version": "8.91.6-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import FAB from '../FAB';
+import Box from '../../Box';
 
 const StyledContainer = styled(View)<ViewProps>({
   position: 'absolute',
@@ -38,8 +39,16 @@ const StyledFAB = styled(FAB)(({ theme }) => ({
   alignSelf: 'flex-end',
 }));
 
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
+const StyledBackdropPressable = styled(Pressable)(() => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundColor: 'transparent',
+}));
+
+const StyledBackdrop = styled(Box)(({ theme }) => ({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -52,6 +61,7 @@ const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
 export {
   StyledActionGroupContainer,
   StyledBackdrop,
+  StyledBackdropPressable,
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,

package/src/components/FAB/ActionGroup/index.tsx

@@ -7,11 +7,12 @@ import ActionItem from './ActionItem';
 import {
   StyledActionGroupContainer,
   StyledBackdrop,
+  StyledBackdropPressable,
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,
 } from './StyledActionGroup';
-
+import { Portal } from '../../../';
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
 import { useDeprecation } from '../../../utils/hooks';
@@ -151,7 +152,17 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
           supportedOrientations={supportedOrientations}
         >
           <StyledContainerInModal testID={testID} style={[style]}>
-            <StyledBackdrop testID="back-drop" onPress={onBackdropPress} />
+            <StyledBackdropPressable
+              testID="back-drop"
+              onPress={onBackdropPress}
+            >
+              {active && (
+                <Portal>
+                  <StyledBackdrop />
+                </Portal>
+              )}
+            </StyledBackdropPressable>
+
             <StyledActionGroupContainer
               testID="action-group"
               pointerEvents="box-none"

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -20,8 +20,12 @@ declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FA
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
-declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
+declare const StyledBackdropPressable: import("@emotion/native").StyledComponent<import("react-native").PressableProps & import("react").RefAttributes<View> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
-export { StyledActionGroupContainer, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledFAB, };
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<import("../../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+export { StyledActionGroupContainer, StyledBackdrop, StyledBackdropPressable, StyledContainer, StyledContainerInModal, StyledFAB, };

package/types/theme/global/shadows/shadows.d.ts

@@ -0,0 +1,9 @@
+import type { ShadowPalette } from './types';
+declare const getShadows: (shadowPalette: ShadowPalette) => {
+  default: import('./types').ShadowStyles;
+  default: import('./types').ShadowStyles;
+  medium: import('./types').ShadowStyles;
+};
+type Shadows = ReturnType<typeof getShadows>;
+export { getShadows };
+export type { Shadows };

package/types/theme/global/shadows.d.ts

@@ -0,0 +1,16 @@
+import type { SystemPalette } from '.';
+declare const getShadows: (systemPalette: SystemPalette) => {
+    default: {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+};
+type Shadows = ReturnType<typeof getShadows>;
+export { getShadows };
+export type { Shadows };

package/.turbo/turbo-build.log

@@ -1,13 +0,0 @@
-(node:2995) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
-(Use `node --trace-warnings ...` to show where the warning was created)
-
-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 typescript] src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx (61:35): @rollup/plugin-typescript TS2307: Cannot find module '../../../../types' or its corresponding type declarations.
-/home/runner/work/hero-design/hero-design/packages/rn/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx:61:35
-
-61 import { RichTextEditorRef } from "../../../../types";
-                                     ~~~~~~~~~~~~~~~~~~~
-
-(!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 52.7s