@hero-design/rn 7.26.0 → 7.27.1

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -16,6 +16,7 @@ exports[`Tag has archived style when intent is archived 1`] = `
     ]
   }
   themeIntent="archived"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -32,6 +33,7 @@ exports[`Tag has archived style when intent is archived 1`] = `
       ]
     }
     themeIntent="archived"
+    themeVariant="outlined"
   >
     ARCHIVED
   </Text>
@@ -54,6 +56,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     ]
   }
   themeIntent="primary"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -70,6 +73,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
       ]
     }
     themeIntent="primary"
+    themeVariant="outlined"
   >
     PRIMARY
   </Text>
@@ -92,6 +96,7 @@ exports[`Tag has danger style when intent is danger 1`] = `
     ]
   }
   themeIntent="danger"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -108,6 +113,7 @@ exports[`Tag has danger style when intent is danger 1`] = `
       ]
     }
     themeIntent="danger"
+    themeVariant="outlined"
   >
     DANGER
   </Text>
@@ -130,6 +136,7 @@ exports[`Tag has default style when intent is default 1`] = `
     ]
   }
   themeIntent="default"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -146,6 +153,7 @@ exports[`Tag has default style when intent is default 1`] = `
       ]
     }
     themeIntent="default"
+    themeVariant="outlined"
   >
     DEFAULT
   </Text>
@@ -168,6 +176,7 @@ exports[`Tag has info style when intent is info 1`] = `
     ]
   }
   themeIntent="info"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -184,6 +193,7 @@ exports[`Tag has info style when intent is info 1`] = `
       ]
     }
     themeIntent="info"
+    themeVariant="outlined"
   >
     INFO
   </Text>
@@ -206,6 +216,7 @@ exports[`Tag has success style when intent is success 1`] = `
     ]
   }
   themeIntent="success"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -222,6 +233,7 @@ exports[`Tag has success style when intent is success 1`] = `
       ]
     }
     themeIntent="success"
+    themeVariant="outlined"
   >
     SUCCESS
   </Text>
@@ -244,6 +256,7 @@ exports[`Tag has warning style when intent is warning 1`] = `
     ]
   }
   themeIntent="warning"
+  themeVariant="outlined"
 >
   <Text
     style={
@@ -260,8 +273,130 @@ exports[`Tag has warning style when intent is warning 1`] = `
       ]
     }
     themeIntent="warning"
+    themeVariant="outlined"
   >
     WARNING
   </Text>
 </View>
 `;
+
+exports[`Tag renders correctly when variant is filled and intent is danger 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fcebe7",
+        "borderColor": "#fcebe7",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="danger"
+  themeVariant="filled"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="danger"
+    themeVariant="filled"
+  >
+    DANGER
+  </Text>
+</View>
+`;
+
+exports[`Tag renders correctly when variant is filled and intent is warning 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fff6eb",
+        "borderColor": "#fff6eb",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="warning"
+  themeVariant="filled"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="warning"
+    themeVariant="filled"
+  >
+    WARNING
+  </Text>
+</View>
+`;
+
+exports[`Tag renders correctly with custom content 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": undefined,
+        "borderColor": "#401960",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="primary"
+  themeVariant="outlined"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Custom Content
+  </Text>
+</View>
+`;

package/src/components/Tag/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledView, StyledText } from './StyledTag';
 
@@ -6,7 +6,7 @@ interface TagProps extends ViewProps {
   /**
    * Content of the Tag.
    */
-  content: string;
+  content: string | ReactElement;
   /**
    * Visual intent color to apply to Tag.
    */
@@ -18,6 +18,10 @@ interface TagProps extends ViewProps {
     | 'warning'
     | 'danger'
     | 'archived';
+  /**
+   * Tag variant.
+   */
+  variant?: 'filled' | 'outlined';
   /**
    * Additional style.
    */
@@ -30,6 +34,7 @@ interface TagProps extends ViewProps {
 
 const Tag = ({
   content,
+  variant = 'outlined',
   intent = 'primary',
   style,
   testID,
@@ -38,10 +43,17 @@ const Tag = ({
   <StyledView
     {...nativeProps}
     themeIntent={intent}
+    themeVariant={variant}
     style={style}
     testID={testID}
   >
-    <StyledText themeIntent={intent}>{content}</StyledText>
+    {typeof content === 'string' ? (
+      <StyledText themeIntent={intent} themeVariant={variant}>
+        {content}
+      </StyledText>
+    ) : (
+      content
+    )}
   </StyledView>
 );
 

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -65,28 +65,6 @@ Object {
         "primary": "#401960",
         "success": "#5ace7d",
         "text": "#ffffff",
-        "visualisation": Array [
-          "#48000a",
-          "#737479",
-          "#001f23",
-          "#353957",
-          "#25006e",
-          "#4568fb",
-          "#5a68e2",
-          "#4853b5",
-          "#48a564",
-          "#017d6d",
-          "#cc822a",
-          "#998000",
-          "#e3602a",
-          "#f46363",
-          "#de350b",
-          "#c38cee",
-          "#9f64e3",
-          "#8505a2",
-          "#7622d7",
-          "#401960",
-        ],
         "warning": "#ffbe71",
       },
       "fontSizes": Object {
@@ -766,6 +744,7 @@ Object {
         "primaryBackground": undefined,
         "success": "#017d6d",
         "successBackground": "#f0fef4",
+        "text": "#001f23",
         "warning": "#ffa234",
         "warningBackground": "#fff6eb",
       },
@@ -903,7 +882,7 @@ Object {
       },
       "colors": Object {
         "background": "#ffffff",
-        "border": "#001f23",
+        "border": "#e8e9ea",
         "danger": "#ffbe71",
         "disabled": "#bfc1c5",
         "error": "#f46363",

package/src/theme/components/avatar.ts

@@ -1,4 +1,3 @@
-import { defaultMobilePalette as palette } from '@hero-design/colors';
 import type { GlobalTheme } from '../global';
 
 const getAvatarTheme = (theme: GlobalTheme) => {
@@ -9,28 +8,6 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     success: theme.colors.success,
     warning: theme.colors.warning,
     text: theme.colors.invertedText,
-    visualisation: [
-      palette.currant,
-      palette.sonicSilver,
-      palette.maasstrichtBlue,
-      palette.nightBlue,
-      palette.darkBlue,
-      palette.ultramarineBlue,
-      palette.royalBlue,
-      palette.royalBlueDark20,
-      palette.emeraldDark20,
-      palette.pineGreen,
-      palette.deepSaffronDark20,
-      palette.goldDark40,
-      palette.apple,
-      palette.pastelRed,
-      palette.vermilion,
-      palette.mauve,
-      palette.violetLight30,
-      palette.violet1,
-      palette.violet,
-      palette.scarletGum,
-    ],
   };
 
   const sizes = {

package/src/theme/components/tag.ts

@@ -20,6 +20,7 @@ const getTagTheme = (theme: GlobalTheme) => {
     dangerBackground: theme.colors.errorSurface,
     archived: theme.colors.onArchivedSurface,
     archivedBackground: theme.colors.archivedSurface,
+    text: theme.colors.onDefaultGlobalSurface,
   };
 
   const fonts = {

package/src/theme/components/toolbar.ts

@@ -3,7 +3,7 @@ import type { GlobalTheme } from '../global';
 const getToolbarTheme = (theme: GlobalTheme) => {
   const colors = {
     background: theme.colors.defaultGlobalSurface,
-    border: theme.colors.primaryOutline,
+    border: theme.colors.secondaryOutline,
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.info,

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

@@ -3,13 +3,13 @@ import swag from './swag';
 import type { SystemPalette, BrandSystemPalette } from './types';
 
 const workBrandSystemPallete: BrandSystemPalette = {
-  primary: palette.violet,
+  primary: palette.policeBlue,
   onPrimary: palette.white,
-  secondary: palette.violetLight30,
+  secondary: palette.policeBlueLight25,
   onSecondary: palette.white,
   defaultSurface: palette.white,
-  highlightedSurface: palette.violetLight90,
-  pressedSurface: palette.violetLight20,
+  highlightedSurface: palette.policeBlueLight90,
+  pressedSurface: palette.policeBlueLight20,
 
   decorativePrimary: palette.gold,
   decorativePrimarySurface: palette.goldLight80,

package/src/utils/hooks.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 // Get previous state value
 export const usePrevious = <T>(value: T) => {
@@ -8,3 +8,20 @@ export const usePrevious = <T>(value: T) => {
   }, [value]);
   return ref.current;
 };
+
+export function usePropsOrInternalState<T>(
+  initialState: T,
+  state: T | undefined,
+  setState: ((val: T) => void) | undefined
+): [T, (val: T) => void] {
+  const [internalState, setInternalState] = React.useState<T>(initialState);
+
+  return [state || internalState, setState || setInternalState];
+}
+
+export const useDeprecation = (message: string, cond = true) => {
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }, [message, cond]);
+};

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

@@ -24,7 +24,7 @@ interface CardProps extends ViewProps {
      */
     testID?: string;
 }
-declare const _default: (({ variant, intent, children, ...nativeProps }: CardProps) => JSX.Element) & {
+declare const _default: (({ variant: _variant, intent, children, ...nativeProps }: CardProps) => JSX.Element) & {
     Data: ({ intent, children, ...nativeProps }: import("./DataCard").DataCardProps) => JSX.Element;
 };
 export default _default;

package/types/components/Select/MultiSelect/index.d.ts

@@ -22,5 +22,5 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>> ex
      */
     renderSelectedValue?: (selectedValue: V[], inputProps: NativeTextInputProps) => React.ReactNode;
 }
-declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
+declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDimiss, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, numberOfLines, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
 export default MultiSelect;

package/types/components/Select/SingleSelect/index.d.ts

@@ -15,5 +15,5 @@ export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>> e
      */
     renderSelectedValue?: (selectedValue: V | null, inputProps: NativeTextInputProps) => React.ReactNode;
 }
-declare const SingleSelect: <V, T extends OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element;
+declare const SingleSelect: <V, T extends OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element;
 export default SingleSelect;

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

@@ -2,7 +2,7 @@ import MultiSelect from './MultiSelect';
 import type { MultiSelectProps } from './MultiSelect';
 import type { SingleSelectProps } from './SingleSelect';
 export type { MultiSelectProps, SingleSelectProps };
-declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element) & {
+declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDimiss, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element) & {
     Multi: typeof MultiSelect;
 };
 export default _default;

package/types/components/Select/types.d.ts

@@ -20,7 +20,7 @@ export declare type SectionListRenderOptionInfo<V, T extends OptionType<V>> = Se
     selected: boolean;
     onPress: () => void;
 };
-export interface SelectProps<V, T extends OptionType<V>> extends Pick<TextInputProps, 'editable' | 'disabled' | 'numberOfLines' | 'error'> {
+export interface SelectProps<V, T extends OptionType<V>> extends Pick<TextInputProps, 'editable' | 'disabled' | 'error' | 'required'> {
     /**
      * An array of options to be selected.
      */
@@ -43,9 +43,14 @@ export interface SelectProps<V, T extends OptionType<V>> extends Pick<TextInputP
      */
     onQueryChange?: (value: string) => void;
     /**
-     * Event handler when selection dismiss
+     * @deprecated due to typo.
+     * Please use onDismiss instead.
      */
     onDimiss?: () => void;
+    /**
+     * Event handler when selection dismiss
+     */
+    onDismiss?: () => void;
     /**
      * Event handler when end of the list reached
      */
@@ -56,8 +61,10 @@ export interface SelectProps<V, T extends OptionType<V>> extends Pick<TextInputP
     loading?: boolean;
     /**
      * Props that are passed to TextInput.
+     * Required is deprecated and will be removed in the next major release.
+     * Please use the outer required instead.
      */
-    inputProps?: Pick<TextInputProps, 'loading' | 'required'>;
+    inputProps?: Pick<TextInputProps, 'loading' | 'required' | 'numberOfLines'>;
     /**
      * Field label.
      */
@@ -70,4 +77,9 @@ export interface SelectProps<V, T extends OptionType<V>> extends Pick<TextInputP
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * @deprecated
+     * Please use inputProps.numberOfLines instead.
+     */
+    numberOfLines?: number;
 }

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

@@ -1,3 +1,3 @@
 import type { TabsProps } from '.';
-declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, testID: componentTestID, }: TabsProps) => JSX.Element;
+declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element;
 export default ScrollableTab;

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

@@ -45,12 +45,17 @@ export interface TabsProps extends ViewProps {
      * Defaults value is `1`.
      */
     lazyPreloadDistance?: number;
+    /**
+     * Boolean indicating whether to enable swipe gestures. Passing `false` will disable swipe gestures, but the user can still switch tabs by pressing the tab bar.
+     * Defaults value is `true`.
+     */
+    swipeEnabled?: boolean;
     /**
      * Testing id of the component.
      */
     testID?: string;
 }
-declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, testID: componentTestID, }: TabsProps) => JSX.Element) & {
-    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, testID: componentTestID, }: TabsProps) => JSX.Element;
+declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element) & {
+    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, swipeEnabled, testID: componentTestID, }: TabsProps) => JSX.Element;
 };
 export default _default;

package/types/components/Tag/StyledTag.d.ts

@@ -1,10 +1,12 @@
 import { View, Text } from 'react-native';
 declare type ThemeIntent = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+declare type ThemeVariant = 'filled' | 'outlined';
 declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeIntent: ThemeIntent;
+    themeVariant: ThemeVariant;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -13,6 +15,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeIntent: ThemeIntent;
+    themeVariant: ThemeVariant;
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

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

@@ -1,13 +1,18 @@
+import { ReactElement } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 interface TagProps extends ViewProps {
     /**
      * Content of the Tag.
      */
-    content: string;
+    content: string | ReactElement;
     /**
      * Visual intent color to apply to Tag.
      */
     intent?: 'primary' | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+    /**
+     * Tag variant.
+     */
+    variant?: 'filled' | 'outlined';
     /**
      * Additional style.
      */
@@ -17,5 +22,5 @@ interface TagProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Tag: ({ content, intent, style, testID, ...nativeProps }: TagProps) => JSX.Element;
+declare const Tag: ({ content, variant, intent, style, testID, ...nativeProps }: TagProps) => JSX.Element;
 export default Tag;

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

@@ -7,7 +7,6 @@ declare const getAvatarTheme: (theme: GlobalTheme) => {
         success: string;
         warning: string;
         text: string;
-        visualisation: string[];
     };
     sizes: {
         small: number;

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

@@ -18,6 +18,7 @@ declare const getTagTheme: (theme: GlobalTheme) => {
         dangerBackground: string;
         archived: string;
         archivedBackground: string;
+        text: string;
     };
     fonts: {
         default: string;

package/types/utils/hooks.d.ts

@@ -1 +1,3 @@
 export declare const usePrevious: <T>(value: T) => T | undefined;
+export declare function usePropsOrInternalState<T>(initialState: T, state: T | undefined, setState: ((val: T) => void) | undefined): [T, (val: T) => void];
+export declare const useDeprecation: (message: string, cond?: boolean) => void;

package/src/components/Accordion/utils.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-export function usePropsOrInternalState<T>(
-  initialState: T,
-  state: T | undefined,
-  setState: ((val: T) => void) | undefined
-): [T, (val: T) => void] {
-  const [internalState, setInternalState] = React.useState<T>(initialState);
-
-  return [state || internalState, setState || setInternalState];
-}

package/types/components/Accordion/utils.d.ts

@@ -1 +0,0 @@
-export declare function usePropsOrInternalState<T>(initialState: T, state: T | undefined, setState: ((val: T) => void) | undefined): [T, (val: T) => void];