@hero-design/rn 8.91.7 → 8.92.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.91.7",
+  "version": "8.92.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.45.3",
+    "@hero-design/colors": "8.46.0",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.15.5",
     "nanoid": "^5.0.9"

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/__tests__/__snapshots__/index.spec.tsx.snap

@@ -408,15 +408,17 @@ exports[`ActionGroup has active true 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            {
-              "backgroundColor": "#000000",
-              "bottom": 0,
-              "left": 0,
-              "opacity": 0.4,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
+            [
+              {
+                "backgroundColor": "transparent",
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
           }
           testID="back-drop"
         />
@@ -437,12 +439,9 @@ exports[`ActionGroup has active true 1`] = `
             style={
               [
                 {},
-                [
-                  undefined,
-                  {
-                    "paddingBottom": 0,
-                  },
-                ],
+                {
+                  "paddingBottom": 0,
+                },
               ]
             }
           >
@@ -1171,6 +1170,25 @@ exports[`ActionGroup has active true 1`] = `
       </View>
     </Modal>
   </View>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "backgroundColor": "#000000",
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0.4,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ],
+      ]
+    }
+  />
   <View
     pointerEvents="box-none"
     position="bottom"

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 '../../Portal';
 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"
@@ -159,7 +170,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
                 opacity: actionGroupOpacity,
               }}
             >
-              <Box style={[style, { paddingBottom: 0 }]}>
+              <Box style={{ paddingBottom: 0 }}>
                 {items?.map((itemProp, index) => (
                   <ActionItem
                     key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}

package/src/index.ts

@@ -13,6 +13,8 @@ import theme, {
   ehWorkDarkSystemPalette,
   ThemeSwitcher,
   withTheme,
+  ehWorkSystemPalette,
+  ehJobsSystemPalette,
 } from './theme';
 import { scale } from './utils/scale';
 
@@ -92,6 +94,8 @@ export {
   walletSystemPalette,
   eBensSystemPalette,
   ehWorkDarkSystemPalette,
+  ehWorkSystemPalette,
+  ehJobsSystemPalette,
   Accordion,
   Alert,
   AppCue,

package/src/theme/ThemeSwitcher.tsx

@@ -11,6 +11,7 @@ import {
   swagDarkSystemPalette,
   ehWorkDarkSystemPalette,
   swagLightSystemPalette,
+  swagLightJobsSystemPalette,
 } from './global';
 import ThemeProvider from './ThemeProvider';
 
@@ -22,7 +23,9 @@ type ThemeName =
   | 'jobs'
   | 'wallet'
   | 'eBens'
-  | 'ehWorkDark';
+  | 'ehWorkDark'
+  | 'ehWork'
+  | 'ehJobs';
 
 const ThemeSwitcher = ({
   name = 'swag',
@@ -46,9 +49,12 @@ const ThemeSwitcher = ({
       case 'swagDark':
         return getTheme(defaultScale, swagDarkSystemPalette);
       case 'swagLight':
+      case 'ehWork':
         return getTheme(defaultScale, swagLightSystemPalette);
       case 'ehWorkDark':
         return getTheme(defaultScale, ehWorkDarkSystemPalette);
+      case 'ehJobs':
+        return getTheme(defaultScale, swagLightJobsSystemPalette);
     }
   }, [name]);
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
@@ -66,5 +72,4 @@ export const withTheme =
       </ThemeSwitcher>
     );
   };
-
 export default ThemeSwitcher;

package/src/theme/global/colors/__tests__/__snapshots__/ehJobs.spec.ts.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ehJobs returns correct theme object 1`] = `
+{
+  "archived": "#abacaf",
+  "archivedSurface": "#dadbde",
+  "black": "#000000",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#fdfbff",
+  "decorativePrimarySurface": "#dacce4",
+  "decorativeSecondary": "#fdfbff",
+  "decorativeSecondarySurface": "#d9f6ff",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#fdfbff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#f1e9fb",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "name": "ehJobs",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#606065",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#121214",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
+  "onPrimary": "#fdfbff",
+  "onSecondary": "#460078",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ac5d00",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#380060",
+  "primary": "#460078",
+  "primaryOutline": "#121214",
+  "secondary": "#40d1ff",
+  "secondaryHighlightedSurface": "#ecfaff",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+  "white": "#ffffff",
+}
+`;

package/src/theme/global/colors/__tests__/__snapshots__/ehWork.spec.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ehWork returns correct theme object 1`] = `
+{
+  "archived": "#abacaf",
+  "archivedSurface": "#dadbde",
+  "black": "#000000",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#fdfbff",
+  "decorativePrimarySurface": "#dacce4",
+  "decorativeSecondary": "#fdfbff",
+  "decorativeSecondarySurface": "#f0e6ff",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#fdfbff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#f1e9fb",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "name": "ehWork",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#606065",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#121214",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
+  "onPrimary": "#fdfbff",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ac5d00",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#380060",
+  "primary": "#460078",
+  "primaryOutline": "#121214",
+  "secondary": "#b382fd",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+  "white": "#ffffff",
+}
+`;

package/src/theme/global/colors/__tests__/ehJobs.spec.ts

@@ -0,0 +1,7 @@
+import ehJobs from '../ehJobs';
+
+describe('ehJobs', () => {
+  it('returns correct theme object', () => {
+    expect(ehJobs).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/__tests__/ehWork.spec.js

@@ -0,0 +1,7 @@
+import ehWork from '../ehWork';
+
+describe('ehWork', () => {
+  it('returns correct theme object', () => {
+    expect(ehWork).toMatchSnapshot();
+  });
+});

package/src/theme/global/colors/ehJobs.ts

@@ -0,0 +1,14 @@
+import swagLightSystemPalette from './swagSystemPalette';
+import { SystemPalette } from './types';
+
+const ehJobsSystemPalette: SystemPalette = {
+  ...swagLightSystemPalette,
+  name: 'ehJobs',
+  secondary: '#40d1ff',
+  onSecondary: '#460078',
+  secondaryHighlightedSurface: '#ecfaff',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#d9f6ff',
+};
+
+export default ehJobsSystemPalette;

package/src/theme/global/colors/ehWork.ts

@@ -0,0 +1,27 @@
+import { swagLightPalette as palette } from '@hero-design/colors';
+import type { SystemPalette, BrandSystemPalette } from './types';
+import swagLightGlobalPalette from './swagLightGlobal';
+
+const ehWorkBrandSystemPalette: BrandSystemPalette = {
+  primary: '#460078',
+  onPrimary: '#fdfbff',
+  secondary: '#b382fd',
+  onSecondary: palette.white,
+  defaultSurface: '#fdfbff',
+  highlightedSurface: palette.violetLight90,
+  pressedSurface: '#380060',
+  decorativePrimary: '#fdfbff',
+  decorativePrimarySurface: '#dacce4',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#f0e6ff',
+};
+
+const ehWorkSystemPalette: SystemPalette = {
+  // Global
+  ...swagLightGlobalPalette,
+  // Brand
+  ...ehWorkBrandSystemPalette,
+  name: 'ehWork',
+};
+
+export default ehWorkSystemPalette;

package/src/theme/global/colors/swagLight.ts

@@ -1,26 +1,11 @@
-import { swagLightPalette as palette } from '@hero-design/colors';
-import type { SystemPalette, BrandSystemPalette } from './types';
-import swagLightGlobalPalette from './swagLightGlobal';
-
-const swagBrandSystemPallete: BrandSystemPalette = {
-  primary: '#460078',
-  onPrimary: '#fdfbff',
-  secondary: '#b382fd',
-  onSecondary: palette.white,
-  defaultSurface: '#fdfbff',
-  highlightedSurface: palette.violetLight90,
-  pressedSurface: '#380060',
-  decorativePrimary: '#fdfbff',
-  decorativePrimarySurface: '#dacce4',
-  decorativeSecondary: '#fdfbff',
-  decorativeSecondarySurface: '#f0e6ff',
-};
+import ehWorkSystemPalette from './ehWork';
+import { SystemPalette } from './types';
 
+/**
+ * @deprecated This palette is deprecated and will be removed in the next major release.
+ */
 const swagSystemPalette: SystemPalette = {
-  // Global
-  ...swagLightGlobalPalette,
-  // Brand
-  ...swagBrandSystemPallete,
+  ...ehWorkSystemPalette,
   name: 'swagLight',
 };
 

package/src/theme/global/colors/swagLightJobs.ts

@@ -1,14 +1,12 @@
-import swagLightSystemPalette from './swagLight';
+import ehJobsSystemPalette from './ehJobs';
 import { SystemPalette } from './types';
 
+/**
+ * @deprecated This palette is deprecated and will be removed in the next major release.
+ */
 const swagLightJobsSystemPalette: SystemPalette = {
-  ...swagLightSystemPalette,
+  ...ehJobsSystemPalette,
   name: 'swagLightJobs',
-  secondary: '#40d1ff',
-  onSecondary: '#460078',
-  secondaryHighlightedSurface: '#ecfaff',
-  decorativeSecondary: '#fdfbff',
-  decorativeSecondarySurface: '#d9f6ff',
 };
 
 export default swagLightJobsSystemPalette;

package/src/theme/global/colors/swagSystemPalette.ts

@@ -0,0 +1,9 @@
+import ehWorkSystemPalette from './ehWork';
+import { SystemPalette } from './types';
+
+export const swagSystemPalette: SystemPalette = {
+  ...ehWorkSystemPalette,
+  name: 'swagLight',
+};
+
+export default swagSystemPalette;

package/src/theme/global/colors/types.ts

@@ -65,7 +65,12 @@ export type BrandSystemPalette = {
 };
 
 export type ThemeMode = 'light' | 'dark';
-export type ThemeName = 'swagLight' | 'swagLightJobs' | 'ehWorkDark';
+export type ThemeName =
+  | 'swagLight'
+  | 'swagLightJobs'
+  | 'ehWorkDark'
+  | 'ehWork'
+  | 'ehJobs';
 export type SystemPalette = GlobalSystemPalette &
   BrandSystemPalette & {
     themeMode?: ThemeMode;

package/src/theme/global/index.ts

@@ -8,6 +8,8 @@ import jobsSystemPalette from './colors/jobs';
 import walletSystemPalette from './colors/wallet';
 import eBensSystemPalette from './colors/eBens';
 import ehWorkDarkSystemPalette from './colors/ehWorkDark';
+import ehWorkSystemPalette from './colors/ehWork';
+import ehJobsSystemPalette from './colors/ehJobs';
 
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
@@ -58,4 +60,6 @@ export {
   walletSystemPalette,
   eBensSystemPalette,
   ehWorkDarkSystemPalette,
+  ehWorkSystemPalette,
+  ehJobsSystemPalette,
 };

package/src/theme/global/shadows/__tests__/__snapshots__/{swagLightJobs.spec.ts.snap → ehJobs.spec.ts.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`swagLightJobsShadowPalette returns correct theme object 1`] = `
+exports[`ehJobsShadowPalette returns correct theme object 1`] = `
 {
   "deep": {
     "elevation": 10,

package/src/theme/global/shadows/__tests__/ehJobs.spec.ts

@@ -0,0 +1,7 @@
+import ehJobsShadowPalette from '../ehJobs';
+
+describe('ehJobsShadowPalette', () => {
+  it('returns correct theme object', () => {
+    expect(ehJobsShadowPalette).toMatchSnapshot();
+  });
+});

package/src/theme/global/shadows/__tests__/ehWork.spec.ts

@@ -0,0 +1,7 @@
+import ehWorkShadowPalette from '../ehWork';
+
+describe('swagLightShadowPalette', () => {
+  it('returns correct theme object', () => {
+    expect(ehWorkShadowPalette).toMatchSnapshot();
+  });
+});

package/src/theme/global/shadows/__tests__/index.spec.ts

@@ -1,21 +1,25 @@
-import swagLightSystemPalette from '../../colors/swagLight';
+import swagLightSystemPalette from '../../colors/swagSystemPalette';
 import swagLightJobsSystemPalette from '../../colors/swagLightJobs';
 import ehWorkDarkSystemPalette from '../../colors/ehWorkDark';
+import ehWorkSystemPalette from '../../colors/ehWork';
+import ehJobsSystemPalette from '../../colors/ehJobs';
 import swagSystemPalette from '../../colors/swag';
 import { getShadows } from '../index';
-import swagLightShadowPalette from '../swagLight';
-import swagLightJobsShadowPalette from '../swagLightJobs';
+import ehWorkShadowPalette from '../ehWork';
+import ehJobsShadowPalette from '../ehJobs';
 import ehWorkDarkShadowPalette from '../ehWorkDark';
 
 describe('getShadows', () => {
   it.each`
     colorPalette                  | shadowPalette
-    ${swagLightSystemPalette}     | ${swagLightShadowPalette}
-    ${swagLightJobsSystemPalette} | ${swagLightJobsShadowPalette}
+    ${swagLightSystemPalette}     | ${ehWorkShadowPalette}
+    ${swagLightJobsSystemPalette} | ${ehJobsShadowPalette}
     ${ehWorkDarkSystemPalette}    | ${ehWorkDarkShadowPalette}
-    ${swagSystemPalette}          | ${swagLightShadowPalette}
+    ${swagSystemPalette}          | ${ehWorkShadowPalette}
+    ${ehWorkSystemPalette}        | ${ehWorkShadowPalette}
+    ${ehJobsSystemPalette}        | ${ehJobsShadowPalette}
   `(
-    'should return the correct shadow palette for $colorPalette',
+    'should return the correct shadow palette for $colorPalette.name',
     ({ colorPalette, shadowPalette }) => {
       const actual = getShadows(colorPalette);
       expect(actual).toEqual(shadowPalette);

package/src/theme/global/shadows/{swagLightJobs.ts → ehJobs.ts}

@@ -1,13 +1,13 @@
 import type { ShadowPalette } from './types';
-import swagLightJobsSystemPalette from '../colors/swagLightJobs';
+import ehWorkSystemPalette from '../colors/ehWork';
 
-const swagLightJobsShadowPalette: ShadowPalette = {
+const ehJobsShadowPalette: ShadowPalette = {
   default: {
     shadowOffset: {
       width: 0,
       height: 2,
     },
-    shadowColor: swagLightJobsSystemPalette.primaryOutline,
+    shadowColor: ehWorkSystemPalette.primaryOutline,
     shadowOpacity: 0.12,
     shadowRadius: 4,
     elevation: 3,
@@ -34,4 +34,4 @@ const swagLightJobsShadowPalette: ShadowPalette = {
   },
 };
 
-export default swagLightJobsShadowPalette;
+export default ehJobsShadowPalette;

package/src/theme/global/shadows/{swagLight.ts → ehWork.ts}

@@ -1,6 +1,6 @@
 import type { ShadowPalette } from './types';
 
-const swagLightShadowPalette: ShadowPalette = {
+const ehWorkShadowPalette: ShadowPalette = {
   default: {
     shadowOffset: {
       width: 0,
@@ -33,4 +33,4 @@ const swagLightShadowPalette: ShadowPalette = {
   },
 };
 
-export default swagLightShadowPalette;
+export default ehWorkShadowPalette;

package/src/theme/global/shadows/index.ts

@@ -1,5 +1,5 @@
-import swagLightShadowPalette from './swagLight';
-import swagLightJobsShadowPalette from './swagLightJobs';
+import ehWorkShadowPalette from './ehWork';
+import ehJobsShadowPalette from './ehJobs';
 import ehWorkDarkShadowPalette from './ehWorkDark';
 
 import { SystemPalette } from '../colors/types';
@@ -7,13 +7,17 @@ import { SystemPalette } from '../colors/types';
 const getShadows = (palette: SystemPalette) => {
   switch (palette.name) {
     case 'swagLight':
-      return swagLightShadowPalette;
+      return ehWorkShadowPalette;
+    case 'ehWork':
+      return ehWorkShadowPalette;
     case 'swagLightJobs':
-      return swagLightJobsShadowPalette;
+      return ehJobsShadowPalette;
+    case 'ehJobs':
+      return ehJobsShadowPalette;
     case 'ehWorkDark':
       return ehWorkDarkShadowPalette;
     default:
-      return swagLightShadowPalette;
+      return ehWorkShadowPalette;
   }
 };
 

package/src/theme/index.ts

@@ -11,6 +11,8 @@ import {
   walletSystemPalette,
   eBensSystemPalette,
   ehWorkDarkSystemPalette,
+  ehWorkSystemPalette,
+  ehJobsSystemPalette,
 } from './global';
 
 import type { Theme } from './getTheme';
@@ -34,6 +36,8 @@ export {
   walletSystemPalette,
   eBensSystemPalette,
   ehWorkDarkSystemPalette,
+  ehWorkSystemPalette,
+  ehJobsSystemPalette,
 };
 
 export default defaultTheme;