@hero-design/rn 8.42.4 → 8.43.1

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

@@ -210,6 +210,23 @@ exports[`Toast renders correctly when intent is error 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -357,6 +374,23 @@ exports[`Toast renders correctly when intent is info 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -477,6 +511,23 @@ exports[`Toast renders correctly when intent is notification 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -597,6 +648,23 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -744,6 +812,23 @@ exports[`Toast renders correctly when intent is success 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -891,6 +976,23 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap

@@ -18,7 +18,19 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
   <View
     accessibilityState={
       {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
     }
     accessible={true}
@@ -103,7 +115,19 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
   <View
     accessibilityState={
       {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
     }
     accessible={true}
@@ -206,7 +230,19 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
   <View
     accessibilityState={
       {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
     }
     accessible={true}
@@ -291,7 +327,19 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
   <View
     accessibilityState={
       {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
     }
     accessible={true}
@@ -394,7 +442,19 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
   <View
     accessibilityState={
       {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
     }
     accessible={true}
@@ -479,7 +539,19 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
   <View
     accessibilityState={
       {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
     }
     accessible={true}

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -4,7 +4,19 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -92,7 +104,19 @@ exports[`ToolbarItems renders correctly when intent is danger, icon is undefined
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -144,7 +168,19 @@ exports[`ToolbarItems renders correctly when intent is info, icon is undefined,
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -196,7 +232,19 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -284,7 +332,19 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -372,7 +432,19 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -434,7 +506,19 @@ exports[`ToolbarItems renders correctly when intent is success, icon is undefine
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
@@ -486,7 +570,19 @@ exports[`ToolbarItems renders correctly when intent is warning, icon is undefine
 <View
   accessibilityState={
     {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}

package/src/index.ts

@@ -25,6 +25,7 @@ import Button from './components/Button';
 import Calendar from './components/Calendar';
 import Carousel from './components/Carousel';
 import Card from './components/Card';
+import Chip from './components/Chip';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
 import ContentNavigator from './components/ContentNavigator';
@@ -89,6 +90,7 @@ export {
   Calendar,
   Card,
   Carousel,
+  Chip,
   Collapse,
   Checkbox,
   ContentNavigator,

package/src/testHelpers/renderWithTheme.tsx

@@ -3,14 +3,8 @@ import { render } from '@testing-library/react-native'; // eslint-disable-line i
 import { ThemeProvider } from '@emotion/react';
 import type { RenderOptions } from '@testing-library/react-native';
 import { theme } from '../index';
-import Portal from '../components/Portal';
 
 const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) =>
-  render(
-    <ThemeProvider theme={theme}>
-      <Portal.Provider>{ui}</Portal.Provider>
-    </ThemeProvider>,
-    options
-  );
+  render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>, options);
 
 export default renderWithTheme;

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

@@ -237,7 +237,6 @@ exports[`theme returns correct theme object 1`] = `
       "space": {
         "buttonPadding": 16,
         "iconPadding": 12,
-        "loadingIndicatorWrapperVerticalPadding": 1,
         "textButtonPadding": 12,
         "utilityPadding": 8,
       },
@@ -353,6 +352,44 @@ exports[`theme returns correct theme object 1`] = `
         "wrapperPadding": 16,
       },
     },
+    "chip": {
+      "borderWidths": {
+        "icon": 2,
+        "wrapper": 1,
+      },
+      "colors": {
+        "filledBackground": "#ffffff",
+        "outlinedBackground": "transparent",
+        "primaryBackground": "#001f23",
+        "secondaryBackground": "#ece8ef",
+        "selectedPrimaryText": "#ffffff",
+        "wrapperBorder": "#001f23",
+        "wrapperSelectedBorder": "transparent",
+      },
+      "radii": {
+        "wrapper": 999,
+      },
+      "shadows": {
+        "filledWrapper": {
+          "elevation": 3,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 4,
+        },
+      },
+      "sizes": {
+        "wrapperBorder": 1,
+      },
+      "space": {
+        "iconWrapperMarginRight": 8,
+        "wrapperHorizontalPadding": 12,
+        "wrapperVerticalPadding": 8,
+      },
+    },
     "contentNavigator": {
       "space": {
         "valueHorizontalPadding": 8,

package/src/theme/components/button.ts

@@ -21,7 +21,6 @@ const getButtonTheme = (theme: GlobalTheme) => {
     textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small,
-    loadingIndicatorWrapperVerticalPadding: theme.space.xxsmall / 2,
   };
 
   const sizes = {

package/src/theme/components/chip.ts

@@ -0,0 +1,47 @@
+import type { GlobalTheme } from '../global';
+
+const getChipTheme = (theme: GlobalTheme) => {
+  const colors = {
+    primaryBackground: theme.colors.darkGlobalSurface,
+    secondaryBackground: theme.colors.highlightedSurface,
+    filledBackground: theme.colors.defaultGlobalSurface,
+    outlinedBackground: 'transparent',
+    wrapperBorder: theme.colors.primaryOutline,
+    wrapperSelectedBorder: 'transparent',
+    selectedPrimaryText: theme.colors.defaultGlobalSurface,
+  };
+
+  const space = {
+    wrapperHorizontalPadding: theme.space.smallMedium,
+    wrapperVerticalPadding: theme.space.small,
+    iconWrapperMarginRight: theme.space.small,
+  };
+
+  const sizes = {
+    wrapperBorder: theme.borderWidths.base,
+  };
+
+  const radii = {
+    wrapper: theme.radii.rounded,
+  };
+
+  const borderWidths = {
+    wrapper: theme.borderWidths.base,
+    icon: theme.borderWidths.medium,
+  };
+
+  const shadows = {
+    filledWrapper: theme.shadows.default,
+  };
+
+  return {
+    colors,
+    space,
+    sizes,
+    radii,
+    borderWidths,
+    shadows,
+  };
+};
+
+export default getChipTheme;

package/src/theme/getTheme.ts

@@ -13,6 +13,7 @@ import getCardTheme from './components/card';
 import getCarouselTheme, { CarouselThemeType } from './components/carousel';
 import getCardCarouselTheme from './components/cardCarousel';
 import getCheckboxTheme from './components/checkbox';
+import getChipTheme from './components/chip';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
@@ -63,6 +64,7 @@ type Theme = GlobalTheme & {
     carousel: CarouselThemeType;
     cardCarousel: ReturnType<typeof getCardCarouselTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
+    chip: ReturnType<typeof getChipTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     datePicker: ReturnType<typeof getDatePickerTheme>;
     divider: ReturnType<typeof getDividerTheme>;
@@ -119,6 +121,7 @@ const getTheme = (
       carousel: getCarouselTheme(globalTheme),
       cardCarousel: getCardCarouselTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
+      chip: getChipTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
       datePicker: getDatePickerTheme(globalTheme),
       divider: getDividerTheme(globalTheme),

package/tsconfig.json

@@ -11,7 +11,10 @@
     "strict": true,
     "strictNullChecks": true,
     "target": "esnext",
-    "types": ["jest"]
+    "types": ["jest"],
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
   },
   "include": ["src"]
 }

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Variant } from './StyledAccordion';
@@ -10,5 +11,5 @@ export type AccordionItemProps = {
     style?: StyleProp<ViewStyle>;
     testID?: string;
 };
-declare const AccordionItem: ({ header, content, open, onPress, variant, style, testID, }: AccordionItemProps) => JSX.Element;
+declare const AccordionItem: ({ header, content, open, onPress, variant, style, testID, }: AccordionItemProps) => React.JSX.Element;
 export default AccordionItem;

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

@@ -35,5 +35,5 @@ export interface AccordionProps<K extends Key> {
      */
     testID?: string;
 }
-declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => JSX.Element;
+declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => React.JSX.Element;
 export default Accordion;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { IconProps } from '../Icon';
@@ -33,5 +34,5 @@ interface AttachmentProps {
      */
     testID?: string;
 }
-declare const Attachment: ({ filename, previewElement, onRemove, onDownload, backgroundHighlighted, style, testID, }: AttachmentProps) => JSX.Element;
+declare const Attachment: ({ filename, previewElement, onRemove, onDownload, backgroundHighlighted, style, testID, }: AttachmentProps) => React.JSX.Element;
 export default Attachment;

package/types/components/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
 export interface AvatarProps extends ViewProps {
     /**
@@ -29,5 +30,5 @@ export interface AvatarProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element | null;
+declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => React.JSX.Element | null;
 export default Avatar;

package/types/components/Avatar/AvatarStack/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { AvatarProps } from '../Avatar';
 export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
@@ -19,5 +19,5 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
      */
     testID?: string;
 }
-declare const AvatarStack: ({ children, max, size, style, testID, }: AvatarStackProps) => JSX.Element;
+declare const AvatarStack: ({ children, max, size, style, testID, }: AvatarStackProps) => React.JSX.Element;
 export default AvatarStack;

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { useAvatarColors } from './AvatarStack/utils';
-declare const _default: (({ onPress, source, testID, style, title, size, intent, }: import("./Avatar").AvatarProps) => JSX.Element | null) & {
-    Stack: ({ children, max, size, style, testID, }: import("./AvatarStack").AvatarStackProps) => JSX.Element;
+declare const _default: (({ onPress, source, testID, style, title, size, intent, }: import("./Avatar").AvatarProps) => import("react").JSX.Element | null) & {
+    Stack: ({ children, max, size, style, testID, }: import("./AvatarStack").AvatarStackProps) => import("react").JSX.Element;
 };
 export default _default;
 export { useAvatarColors };

package/types/components/Badge/StyledBadge.d.ts

@@ -3,8 +3,6 @@ import { Animated } from 'react-native';
 type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
 type ThemePadding = 'narrowContent' | 'wideContent';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -16,8 +14,6 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("../T
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {