@hero-design/rn 8.130.2 → 8.131.0

package/src/components/Tabs/StyledScrollableTabs.tsx

@@ -1,4 +1,4 @@
-import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { Animated, Platform, View } from 'react-native';
 import styled from '@emotion/native';
 
 // Checks if the platform is Android 7x and 8.x, i.e., API levels 24 to 27 (Android 7.0 to 8.1),
@@ -22,30 +22,75 @@ const HeaderTabWrapper = styled(View)<{
   backgroundColor: theme.__hd__.tabs.colors.headerBackground,
 }));
 
-const HeaderTabItem = styled(Animated.View)<{ isFirstItem?: boolean }>(
-  ({ theme, isFirstItem }) => ({
-    marginLeft: isFirstItem ? 0 : theme.__hd__.tabs.space.itemMargin,
-    paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
-  })
-);
+const getItemMarginLeft = (
+  isFirstItem: boolean | undefined,
+  themeVariant: 'underlined' | 'highlighted' | undefined,
+  highlightedMargin: number,
+  defaultMargin: number
+) => {
+  if (isFirstItem) return 0;
+  if (themeVariant === 'highlighted') return highlightedMargin;
+  return defaultMargin;
+};
 
-const HeaderTabItemOutlineWrapper = styled(View)(({ theme }) => ({
+const HeaderTabItem = styled(Animated.View)<{
+  isFirstItem?: boolean;
+  themeVariant?: 'underlined' | 'highlighted';
+}>(({ theme, isFirstItem, themeVariant }) => ({
+  marginLeft: getItemMarginLeft(
+    isFirstItem,
+    themeVariant,
+    theme.__hd__.tabs.space.highlightedItemMargin,
+    theme.__hd__.tabs.space.itemMargin
+  ),
   paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
-  ...StyleSheet.absoluteFillObject,
+  alignItems: 'center',
+  justifyContent: 'center',
 }));
 
-const HeaderTabItemOutline = styled(Animated.View)<{ themeActive: boolean }>(
-  ({ theme, themeActive }) => ({
-    borderRadius: theme.__hd__.tabs.radii.outline,
-    backgroundColor: themeActive
-      ? theme.__hd__.tabs.colors.activeBackground
-      : undefined,
-  })
-);
+// Three-piece pill: left cap + body + right cap, all native-driver animated.
+// Splitting into pieces keeps border-radius on fixed-width views so scaleX
+// never distorts the rounded corners. Cap width equals the border-radius so
+// the rounded edge is fully contained within the cap piece.
+const HeaderTabPillLeft = styled(Animated.View)(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  width: theme.__hd__.tabs.radii.highlightedOutline,
+  borderTopLeftRadius: theme.__hd__.tabs.radii.highlightedOutline,
+  backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground,
+}));
+
+const HeaderTabPillBody = styled(Animated.View)(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  width: 1,
+  backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground,
+}));
+
+const HeaderTabPillRight = styled(Animated.View)(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  width: theme.__hd__.tabs.radii.highlightedOutline,
+  borderTopRightRadius: theme.__hd__.tabs.radii.highlightedOutline,
+  backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground,
+}));
+
+const HeaderTabItemActiveBorder = styled(Animated.View)(({ theme }) => ({
+  position: 'absolute',
+  bottom: 0,
+  width: 1,
+  height: theme.__hd__.tabs.borderWidths.highlightedActiveBorder,
+  backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBorder,
+}));
 
 const HeaderTabItemWrapper = styled(View)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
-  paddingVertical: theme.__hd__.tabs.space.outlineVerticalPadding,
   position: 'relative',
   justifyContent: 'center',
   ...(!isAndroid8 && {
@@ -54,7 +99,7 @@ const HeaderTabItemWrapper = styled(View)(({ theme }) => ({
 }));
 
 const HeaderTabItemIndicator = styled(Animated.View)(({ theme }) => ({
-  width: '100%',
+  width: 1,
   height: theme.__hd__.tabs.sizes.indicator,
   position: 'absolute',
   bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
@@ -67,8 +112,10 @@ export {
   TabScreen,
   TabContainer,
   HeaderTabWrapper,
-  HeaderTabItemOutlineWrapper,
-  HeaderTabItemOutline,
+  HeaderTabPillLeft,
+  HeaderTabPillBody,
+  HeaderTabPillRight,
+  HeaderTabItemActiveBorder,
   HeaderTabItemWrapper,
   HeaderTabItemIndicator,
 };

package/src/components/Tabs/index.tsx

@@ -35,6 +35,8 @@ export type TabType = {
   component: ReactNode;
   testID?: string;
   badge?: BadgeConfigType;
+  /** Whether the tab is disabled. Disabled tabs cannot be pressed. */
+  disabled?: boolean;
 };
 
 export interface TabsHeaderProps {

package/src/theme/components/tabs.ts

@@ -9,6 +9,10 @@ const getTabsTheme = (theme: GlobalTheme) => {
     indicator: theme.colors.primary,
     text: theme.colors.onDefaultGlobalSurface,
     headerBackground: theme.colors.defaultGlobalSurface,
+    highlightedActiveText: theme.colors.primary,
+    highlightedActiveBorder: theme.colors.primary,
+    highlightedActiveBackground: theme.colors.neutralGlobalSurface,
+    highlightedDisabledText: theme.colors.disabledOnDefaultGlobalSurface,
   };
 
   const space = {
@@ -17,16 +21,19 @@ const getTabsTheme = (theme: GlobalTheme) => {
     itemVerticalPadding: theme.space.small,
     itemMargin: theme.space.smallMedium,
     outlineHorizontalPadding: theme.space.small,
-    outlineVerticalPadding: theme.space.xsmall,
     tabIndicatorBottom: -theme.space.xxsmall,
+    highlightedItemMargin: theme.space.xsmall,
+    highlightedBarTopPadding: theme.space.xxsmall,
   };
 
   const radii = {
-    outline: theme.radii.xlarge,
+    highlightedOutline: theme.radii.medium,
   };
 
   const borderWidths = {
     headerBottom: theme.borderWidths.medium,
+    highlightedHeaderBottom: theme.borderWidths.base,
+    highlightedActiveBorder: theme.borderWidths.base,
   };
 
   const sizes = {

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

@@ -4,6 +4,7 @@ import type { SystemPalette } from './types';
 const ehJobsSystemPalette: SystemPalette = {
   ...swagLightSystemPalette,
   name: 'ehJobs',
+  primary: '#7622d7',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',

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

@@ -3,7 +3,7 @@ import type { SystemPalette, BrandSystemPalette } from './types';
 import swagLightGlobalPalette from './swagLightGlobal';
 
 const ehWorkBrandSystemPalette: BrandSystemPalette = {
-  primary: '#460078',
+  primary: '#7622d7',
   onPrimary: '#fdfbff',
   secondary: '#b382fd',
   onSecondary: palette.white,

package/types/components/Checkbox/StyledInlineCheckBox.d.ts

@@ -32,7 +32,7 @@ export declare const StyledCheckMark: import("@emotion/native").StyledComponent<
     as?: React.ElementType;
 } & {
     themeSize: "small" | "xsmall" | "medium" | "large" | "xlarge" | "xxxsmall";
-    themeIntent: "secondary" | "primary" | "text" | "success" | "info" | "warning" | "danger" | "muted" | "inactive" | "disabled-text" | "text-inverted";
+    themeIntent: "primary" | "secondary" | "text" | "success" | "info" | "warning" | "danger" | "muted" | "inactive" | "disabled-text" | "text-inverted";
 } & {
     ref?: import("react").Ref<import("react-native-vector-icons/Icon").Icon> | undefined;
 } & {

package/types/components/Tabs/ScrollableTabsHeader/ScrollableTabsHeader.d.ts

@@ -36,5 +36,5 @@ export interface ScrollableTabHeaderProps extends ViewProps {
      */
     variant?: 'underlined' | 'highlighted';
 }
-declare const ScrollableTabHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, variant, }: ScrollableTabHeaderProps) => React.JSX.Element;
+declare const ScrollableTabHeader: ({ onTabPress, selectedIndex: rawSelectedIndex, tabs, barStyle, testID, insets, variant, }: ScrollableTabHeaderProps) => React.JSX.Element;
 export default ScrollableTabHeader;

package/types/components/Tabs/ScrollableTabsHeader/hooks/useIndicatorAnimation.d.ts

@@ -0,0 +1,75 @@
+import { Animated } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+/**
+ * Drives two visual layers that slide to the selected tab on every press:
+ *
+ *  Layer 1 — bottom border / underline  (indicatorStyle)
+ *  ─────────────────────────────────────────────────────
+ *  Uses the "width:1 + scaleX" trick: the element has a fixed stylesheet
+ *  width of 1px and scaleX is set to the target pixel width, giving a visual
+ *  width of 1 × scaleX pixels without touching any layout property.
+ *  Both translateX and scaleX are transform properties → native driver.
+ *  Caveat: scaleX also scales border-radius, so this layer has no border-radius.
+ *
+ *  Layer 2 — pill background  (pillLeftStyle / pillBodyStyle / pillRightStyle)
+ *  ─────────────────────────────────────────────────────────────────────────────
+ *  The pill is split into three absolutely-positioned children so that
+ *  border-radius is never distorted by scale:
+ *
+ *    ┌──────────────────────────────────────────────────────┐
+ *    │  [cap-left 8px]  [body width-1 + scaleX]  [cap-right 8px]  │
+ *    └──────────────────────────────────────────────────────┘
+ *
+ *    cap-left  — fixed 8px wide, borderTopLeftRadius:8,  translateX = pillX
+ *    body      — width:1 + scaleX trick (scaleX = tabWidth - 16),
+ *                transformOrigin 'left center',
+ *                translateX = pillX + 8  (via Animated.add)
+ *    cap-right — fixed 8px wide, borderTopRightRadius:8,
+ *                translateX = pillX + tabWidth - 8  (via Animated.add)
+ *
+ *  All four animated values use the native driver (translateX and scaleX are
+ *  transform properties). `width` is never animated, so no JS driver needed.
+ *
+ *  Driver summary:
+ *    indicatorX        native  translateX — slides the bottom border
+ *    indicatorScaleX   native  scaleX     — stretches the bottom border
+ *    pillX             native  translateX — slides all three pill pieces
+ *    pillBodyScaleX    native  scaleX     — stretches the pill body
+ *    pillRightOffsetX  native  translateX — positions the right cap
+ *                                          (Animated.add: pillX + tabWidth - 8)
+ */
+declare const useIndicatorAnimation: ({ selectedIndex, tabsLength, pillCapWidth, }: {
+    selectedIndex: number | undefined;
+    tabsLength: number;
+    /** Width of each rounded cap, should equal theme radii.highlightedOutline. */
+    pillCapWidth: number;
+}) => {
+    indicatorStyle: {
+        readonly transformOrigin: "left center";
+        readonly transform: readonly [{
+            readonly translateX: Animated.Value;
+        }, {
+            readonly scaleX: Animated.Value;
+        }];
+    };
+    pillLeftStyle: {
+        readonly transform: readonly [{
+            readonly translateX: Animated.Value;
+        }];
+    };
+    pillBodyStyle: {
+        readonly transformOrigin: "left center";
+        readonly transform: readonly [{
+            readonly translateX: Animated.AnimatedAddition<string | number>;
+        }, {
+            readonly scaleX: Animated.Value;
+        }];
+    };
+    pillRightStyle: {
+        readonly transform: readonly [{
+            readonly translateX: Animated.AnimatedAddition<string | number>;
+        }];
+    };
+    onTabLayout: (index: number, event: LayoutChangeEvent) => void;
+};
+export default useIndicatorAnimation;

package/types/components/Tabs/StyledScrollableTabs.d.ts

@@ -29,18 +29,23 @@ declare const HeaderTabItem: import("@emotion/native").StyledComponent<Animated.
     as?: React.ElementType;
 } & {
     isFirstItem?: boolean;
+    themeVariant?: "underlined" | "highlighted";
 }, {}, {}>;
-declare const HeaderTabItemOutlineWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+declare const HeaderTabPillLeft: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-declare const HeaderTabItemOutline: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+}, {}, {}>;
+declare const HeaderTabPillBody: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const HeaderTabPillRight: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {}>;
+declare const HeaderTabItemActiveBorder: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & {
-    themeActive: boolean;
 }, {}, {}>;
 declare const HeaderTabItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
@@ -52,4 +57,4 @@ declare const HeaderTabItemIndicator: import("@emotion/native").StyledComponent<
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
-export { HeaderTabItem, TabScreen, TabContainer, HeaderTabWrapper, HeaderTabItemOutlineWrapper, HeaderTabItemOutline, HeaderTabItemWrapper, HeaderTabItemIndicator, };
+export { HeaderTabItem, TabScreen, TabContainer, HeaderTabWrapper, HeaderTabPillLeft, HeaderTabPillBody, HeaderTabPillRight, HeaderTabItemActiveBorder, HeaderTabItemWrapper, HeaderTabItemIndicator, };

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

@@ -14,6 +14,8 @@ export type TabType = {
     component: ReactNode;
     testID?: string;
     badge?: BadgeConfigType;
+    /** Whether the tab is disabled. Disabled tabs cannot be pressed. */
+    disabled?: boolean;
 };
 export interface TabsHeaderProps {
     tabs: TabType[];
@@ -80,7 +82,7 @@ export interface TabsProps extends ViewProps {
 declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, header, }: TabsProps) => ReactElement) & {
     Header: ({ tabs, selectedTabKey, onTabPress, barStyle, insets, componentTestID, tabsWidth, setTabsWidth, positionAnimatedValue, scrollOffsetAnimatedValue, }: TabsHeaderProps) => React.JSX.Element;
     Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, variant, header, }: import("./ScrollableTabs").ScrollableTabProps) => React.JSX.Element;
-    ScrollHeader: ({ onTabPress, selectedIndex, tabs, barStyle, testID, insets, variant, }: import("./ScrollableTabsHeader/ScrollableTabsHeader").ScrollableTabHeaderProps) => React.JSX.Element;
+    ScrollHeader: ({ onTabPress, selectedIndex: rawSelectedIndex, tabs, barStyle, testID, insets, variant, }: import("./ScrollableTabsHeader/ScrollableTabsHeader").ScrollableTabHeaderProps) => React.JSX.Element;
     useIsFocused: () => boolean | undefined;
 };
 export default _default;

package/types/theme/components/tabs.d.ts

@@ -2,6 +2,8 @@ import type { GlobalTheme } from '../global';
 declare const getTabsTheme: (theme: GlobalTheme) => {
     borderWidths: {
         headerBottom: number;
+        highlightedHeaderBottom: number;
+        highlightedActiveBorder: number;
     };
     colors: {
         active: string;
@@ -11,6 +13,10 @@ declare const getTabsTheme: (theme: GlobalTheme) => {
         indicator: string;
         text: string;
         headerBackground: string;
+        highlightedActiveText: string;
+        highlightedActiveBorder: string;
+        highlightedActiveBackground: string;
+        highlightedDisabledText: string;
     };
     space: {
         flatListHorizontalPadding: number;
@@ -18,11 +24,12 @@ declare const getTabsTheme: (theme: GlobalTheme) => {
         itemVerticalPadding: number;
         itemMargin: number;
         outlineHorizontalPadding: number;
-        outlineVerticalPadding: number;
         tabIndicatorBottom: number;
+        highlightedItemMargin: number;
+        highlightedBarTopPadding: number;
     };
     radii: {
-        outline: number;
+        highlightedOutline: number;
     };
     sizes: {
         indicator: number;

package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.ts

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Animated, Platform } from 'react-native';
-import { useAnimatedValueArray } from '../../utils';
-
-const useInitHighlightedAnimation = ({
-  selectedIndex = 0,
-  tabsLength,
-  variant,
-}: {
-  selectedIndex?: number;
-  tabsLength: number;
-  variant: 'underlined' | 'highlighted';
-}) => {
-  const tabsAnims = useAnimatedValueArray(
-    Array.from({ length: tabsLength }).map((_, i) =>
-      i === selectedIndex ? 1 : 0
-    )
-  );
-
-  React.useEffect(() => {
-    if (variant !== 'highlighted') {
-      return;
-    }
-
-    const animation = Animated.parallel([
-      ...Array.from({ length: tabsLength }).map((_, i) =>
-        Animated.timing(tabsAnims[i], {
-          toValue: i === selectedIndex ? 1 : 0,
-          duration: 150,
-          useNativeDriver: Platform.OS !== 'web',
-        })
-      ),
-    ]);
-
-    animation.start();
-
-    return () => {
-      animation.stop();
-    };
-  }, [selectedIndex]);
-
-  return { tabsAnims };
-};
-
-export default useInitHighlightedAnimation;

package/types/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.d.ts

@@ -1,9 +0,0 @@
-import { Animated } from 'react-native';
-declare const useInitHighlightedAnimation: ({ selectedIndex, tabsLength, variant, }: {
-    selectedIndex?: number;
-    tabsLength: number;
-    variant: "underlined" | "highlighted";
-}) => {
-    tabsAnims: Animated.Value[];
-};
-export default useInitHighlightedAnimation;