@hero-design/rn 7.26.0 → 7.27.0

package/src/components/Select/MultiSelect/index.tsx

@@ -56,6 +56,7 @@ function MultiSelect<V, T extends OptionType<V>>({
   inputProps,
   onConfirm,
   onDimiss,
+  onDismiss,
   onEndReached,
   onQueryChange,
   options,
@@ -65,6 +66,7 @@ function MultiSelect<V, T extends OptionType<V>>({
   error,
   editable = true,
   disabled = false,
+  required,
   numberOfLines,
   style,
   testID,
@@ -98,6 +100,7 @@ function MultiSelect<V, T extends OptionType<V>>({
           }
           <View pointerEvents="none">
             <TextInput
+              numberOfLines={numberOfLines}
               {...inputProps}
               label={label}
               value={displayedValue}
@@ -106,7 +109,7 @@ function MultiSelect<V, T extends OptionType<V>>({
               error={error}
               editable={editable}
               disabled={disabled}
-              numberOfLines={numberOfLines}
+              required={required}
               pointerEvents="none"
               style={style}
               testID={testID}
@@ -122,7 +125,7 @@ function MultiSelect<V, T extends OptionType<V>>({
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}
-        onDismiss={onDimiss}
+        onDismiss={onDismiss || onDimiss}
         header={label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,

package/src/components/Select/SingleSelect/index.tsx

@@ -41,6 +41,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
   inputProps,
   onConfirm,
   onDimiss,
+  onDismiss,
   onEndReached,
   onQueryChange,
   options,
@@ -50,6 +51,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
   error,
   editable = true,
   disabled = false,
+  required,
   numberOfLines,
   style,
   testID,
@@ -75,6 +77,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
           }
           <View pointerEvents="none">
             <TextInput
+              numberOfLines={numberOfLines}
               {...inputProps}
               label={label}
               value={displayedValue}
@@ -83,7 +86,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
               error={error}
               editable={editable}
               disabled={disabled}
-              numberOfLines={numberOfLines}
+              required={required}
               pointerEvents="none"
               style={style}
               testID={testID}
@@ -99,7 +102,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}
-        onDismiss={onDimiss}
+        onDismiss={onDismiss || onDimiss}
         header={label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,

package/src/components/Select/types.ts

@@ -39,10 +39,7 @@ export type SectionListRenderOptionInfo<
 };
 
 export interface SelectProps<V, T extends OptionType<V>>
-  extends Pick<
-    TextInputProps,
-    'editable' | 'disabled' | 'numberOfLines' | 'error'
-  > {
+  extends Pick<TextInputProps, 'editable' | 'disabled' | 'error' | 'required'> {
   /**
    * An array of options to be selected.
    */
@@ -67,9 +64,14 @@ export interface SelectProps<V, T extends OptionType<V>>
    */
   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
    */
@@ -80,8 +82,10 @@ export interface SelectProps<V, T extends OptionType<V>>
   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.
    */
@@ -94,4 +98,9 @@ export interface SelectProps<V, T extends OptionType<V>>
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * @deprecated
+   * Please use inputProps.numberOfLines instead.
+   */
+  numberOfLines?: number;
 }

package/src/components/Tabs/ScrollableTabs.tsx

@@ -63,6 +63,7 @@ const ScrollableTab = ({
   barStyle,
   lazy = false,
   lazyPreloadDistance = 1,
+  swipeEnabled = true,
   testID: componentTestID,
 }: TabsProps) => {
   const flatListRef = React.useRef<FlatList>(null);
@@ -195,6 +196,7 @@ const ScrollableTab = ({
             onTabPress(selectedItem.key);
           }
         }}
+        scrollEnabled={swipeEnabled}
       >
         {tabs.map((tab, index) => {
           const { key, component, testID } = tab;

package/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx

@@ -92,7 +92,7 @@ describe('Tabs.Scroll', () => {
 
   it('renders correctly with lazy preloaded', () => {
     const { getByText, queryByText, getByTestId } = renderWithTheme(
-      <TestTabsComponent lazy lazyPreloadDistance={1} />
+      <TestTabsComponent lazy lazyPreloadDistance={1} swipeEnabled={false} />
     );
 
     expect(getByText('Work Screen')).toBeDefined();

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

@@ -87,7 +87,7 @@ describe('Tabs', () => {
 
   it('renders correctly with lazy preloaded', () => {
     const { getByText, queryByText } = renderWithTheme(
-      <TestTabsComponent lazy lazyPreloadDistance={1} />
+      <TestTabsComponent lazy lazyPreloadDistance={1} swipeEnabled={false} />
     );
 
     expect(getByText('Work Screen')).toBeDefined();

package/src/components/Tabs/index.tsx

@@ -67,6 +67,11 @@ 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.
    */
@@ -105,6 +110,7 @@ const Tabs = ({
   barStyle,
   lazy = false,
   lazyPreloadDistance = 1,
+  swipeEnabled = true,
   testID: componentTestID,
 }: TabsProps): JSX.Element => {
   const theme = useTheme();
@@ -207,6 +213,7 @@ const Tabs = ({
             useNativeDriver: true,
           }
         )}
+        scrollEnabled={swipeEnabled}
       >
         {tabs.map((tab, index) => {
           const { key, component, testID } = tab;

package/src/components/Tag/StyledTag.tsx

@@ -1,5 +1,6 @@
 import { View, Text } from 'react-native';
 import styled from '@emotion/native';
+import { Theme } from '../../theme';
 
 type ThemeIntent =
   | 'default'
@@ -10,26 +11,56 @@ type ThemeIntent =
   | 'danger'
   | 'archived';
 
-const StyledView = styled(View)<{ themeIntent: ThemeIntent }>(
-  ({ themeIntent, theme }) => ({
+type ThemeVariant = 'filled' | 'outlined';
+
+const getFilledStyles = (themeIntent: ThemeIntent, theme: Theme) => ({
+  textColor: theme.__hd__.tag.colors.text,
+  borderColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
+  backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
+});
+
+const getOutlinedStyles = (themeIntent: ThemeIntent, theme: Theme) => ({
+  textColor: theme.__hd__.tag.colors[themeIntent],
+  borderColor: theme.__hd__.tag.colors[themeIntent],
+  backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
+});
+
+const StyledView = styled(View)<{
+  themeIntent: ThemeIntent;
+  themeVariant: ThemeVariant;
+}>(({ themeIntent, themeVariant, theme }) => {
+  const { borderColor, backgroundColor } =
+    themeVariant === 'filled'
+      ? getFilledStyles(themeIntent, theme)
+      : getOutlinedStyles(themeIntent, theme);
+
+  return {
     borderWidth: theme.__hd__.tag.borderWidths.default,
     borderRadius: theme.__hd__.tag.radii.default,
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
-    borderColor: theme.__hd__.tag.colors[themeIntent],
-    backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
-  })
-);
+    borderColor,
+    backgroundColor,
+  };
+});
+
+const StyledText = styled(Text)<{
+  themeIntent: ThemeIntent;
+  themeVariant: ThemeVariant;
+}>(({ themeIntent, themeVariant, theme }) => {
+  const { textColor } =
+    themeVariant === 'filled'
+      ? getFilledStyles(themeIntent, theme)
+      : getOutlinedStyles(themeIntent, theme);
 
-const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>(
-  ({ themeIntent, theme }) => ({
+  return {
     fontFamily: theme.__hd__.tag.fonts.default,
     fontSize: theme.__hd__.tag.fontSizes.default,
-    color: theme.__hd__.tag.colors[themeIntent],
+    color: textColor,
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center',
-  })
-);
+  };
+});
 
 export { StyledView, StyledText };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tag from '..';
+import Typography from '../../Typography';
 
 describe('Tag', () => {
   it('has success style when intent is success', () => {
@@ -65,4 +66,31 @@ describe('Tag', () => {
     expect(toJSON()).toMatchSnapshot();
     expect(getByText('PRIMARY')).toBeDefined();
   });
+
+  it('renders correctly when variant is filled and intent is warning', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="WARNING" intent="warning" variant="filled" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('WARNING')).toBeDefined();
+  });
+
+  it('renders correctly when variant is filled and intent is danger', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content="DANGER" intent="danger" variant="filled" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('DANGER')).toBeDefined();
+  });
+
+  it('renders correctly with custom content', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Tag content={<Typography.Text>Custom Content</Typography.Text>} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Custom Content')).toBeDefined();
+  });
 });

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

@@ -766,6 +766,7 @@ Object {
         "primaryBackground": undefined,
         "success": "#017d6d",
         "successBackground": "#f0fef4",
+        "text": "#001f23",
         "warning": "#ffa234",
         "warningBackground": "#fff6eb",
       },
@@ -903,7 +904,7 @@ Object {
       },
       "colors": Object {
         "background": "#ffffff",
-        "border": "#001f23",
+        "border": "#e8e9ea",
         "danger": "#ffbe71",
         "disabled": "#bfc1c5",
         "error": "#f46363",

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/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;