@hero-design/rn 7.26.0 → 7.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.26.0",
+  "version": "7.27.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.26.0",
+    "@hero-design/colors": "7.27.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.12"
@@ -58,7 +58,7 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "7.26.0",
+    "eslint-config-hd": "7.27.1",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
@@ -72,7 +72,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.26.0",
+    "prettier-config-hd": "7.27.1",
     "rn-7-23-0": "npm:@hero-design/rn@7.23.0"
   },
   "prettier": "prettier-config-hd"

package/src/components/Accordion/index.tsx

@@ -3,7 +3,7 @@ import type { Key, ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import AccordionItem from './AccordionItem';
 import { Spacer, StyledWrapper } from './StyledAccordion';
-import { usePropsOrInternalState } from './utils';
+import { usePropsOrInternalState } from '../../utils/hooks';
 
 export interface AccordionProps<K extends Key> {
   /**

package/src/components/Avatar/AvatarStack/__tests__/StyledAvatarStack.spec.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import { StyledWrapper, StyledAvatar } from '../StyledAvatarStack';
-import theme from '../../../../theme';
 
-beforeAll(() => {
-  theme.__hd__.avatar.colors.visualisation = [theme.colors.primary];
+beforeEach(() => {
+  jest.spyOn(Math, 'random').mockReturnValue(0.123);
+});
+
+afterEach(() => {
+  jest.spyOn(Math, 'random').mockRestore();
 });
 
 describe('StyledWrapper', () => {

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap

@@ -30,7 +30,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#48000a",
         "borderRadius": 999,
         "height": 32,
         "left": 0,
@@ -87,7 +87,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#737479",
         "borderRadius": 999,
         "height": 32,
         "left": 22.4,
@@ -144,7 +144,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 32,
         "left": 44.8,
@@ -201,7 +201,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#353957",
         "borderRadius": 999,
         "height": 32,
         "left": 67.19999999999999,
@@ -258,7 +258,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#25006e",
         "borderRadius": 999,
         "height": 32,
         "left": 89.6,
@@ -334,7 +334,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#48000a",
         "borderRadius": 999,
         "height": 40,
         "left": 0,
@@ -391,7 +391,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#737479",
         "borderRadius": 999,
         "height": 40,
         "left": 28,
@@ -448,7 +448,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 40,
         "left": 56,
@@ -505,7 +505,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#353957",
         "borderRadius": 999,
         "height": 40,
         "left": 84,

package/src/components/Avatar/AvatarStack/__tests__/index.spec.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import Avatar from '../..';
-import theme from '../../../../theme';
 
-beforeAll(() => {
-  theme.__hd__.avatar.colors.visualisation = [theme.colors.primary];
+beforeEach(() => {
+  jest.spyOn(Math, 'random').mockReturnValue(0.123);
+});
+
+afterEach(() => {
+  jest.spyOn(Math, 'random').mockRestore();
 });
 
 describe('AvatarStack', () => {

package/src/components/Avatar/AvatarStack/utils.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useTheme } from '../../../theme';
+import { mobileVisualisationPalette } from '@hero-design/colors';
 
 const shuffleArray = <T>(array: Array<T>): Array<T> =>
   array
@@ -11,12 +11,9 @@ const shuffleArray = <T>(array: Array<T>): Array<T> =>
  * Hook that returns a memoized and shuffled array of visualisation colors for Avatar.
  */
 export const useAvatarColors = () => {
-  const theme = useTheme();
-  const visualisationColors = theme.__hd__.avatar.colors.visualisation;
   const shuffledColors = useMemo(
-    () => shuffleArray(visualisationColors),
-    [visualisationColors]
+    () => shuffleArray(Object.values(mobileVisualisationPalette)),
+    []
   );
-
   return shuffledColors;
 };

package/src/components/Card/index.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import DataCard from './DataCard';
 import { StyledCard, LeftDataCard } from './StyledCard';
+import { useDeprecation } from '../../utils/hooks';
 
 interface CardProps extends ViewProps {
   /**
@@ -30,16 +31,26 @@ interface CardProps extends ViewProps {
 }
 
 const Card = ({
-  variant = 'basic',
+  variant: _variant,
   intent,
   children,
   ...nativeProps
-}: CardProps): JSX.Element => (
-  <StyledCard {...nativeProps} themeVariant={variant} themeIntent={intent}>
-    {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
-    {children}
-  </StyledCard>
-);
+}: CardProps): JSX.Element => {
+  const variant: CardProps['variant'] =
+    _variant === undefined ? 'basic' : _variant;
+
+  useDeprecation(
+    "Card's variant prop is deprecated and will be removed in the next major release.\nPlease remove it or use Card.Data instead.",
+    _variant !== undefined
+  );
+
+  return (
+    <StyledCard {...nativeProps} themeVariant={variant} themeIntent={intent}>
+      {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
+      {children}
+    </StyledCard>
+  );
+};
 
 export default Object.assign(Card, {
   Data: DataCard,

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();
+  });
 });