@hero-design/rn 7.28.0 → 8.0.0-rc.0

package/types/components/List/ListItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
@@ -14,7 +14,7 @@ export interface ListItemProps {
     /**
      * The title of the component.
      */
-    title?: string;
+    title?: string | ReactElement;
     /**
      * The subtile title of the component.
      */

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SectionList } from 'react-native';
+import type { ReactElement } from 'react';
+import type { SectionListRenderItemInfo } from 'react-native';
+import type { SectionData, OptionType, SelectProps, SectionType } from './types';
+export declare type BaseOptionListProps<V, T extends OptionType<V>> = Pick<SelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'> & {
+    sections: SectionData<V, T>[];
+    renderItem: (info: SectionListRenderItemInfo<T, SectionType>) => ReactElement;
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
+};
+declare const BaseOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, }: BaseOptionListProps<V, T>) => JSX.Element;
+export default BaseOptionList;

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

@@ -1,8 +1,9 @@
 import type { ReactElement } from 'react';
-declare const Option: ({ text, disabled, selected, onPress, }: {
+declare const Option: ({ text, disabled, selected, onPress, highlighted, }: {
     text: string | ReactElement;
     disabled?: boolean | undefined;
     selected: boolean;
     onPress: () => void;
+    highlighted?: boolean | undefined;
 }) => JSX.Element;
 export default Option;

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

@@ -1,8 +1,9 @@
 import type { ReactElement } from 'react';
-declare const Option: ({ text, disabled, selected, onPress, }: {
+declare const Option: ({ text, disabled, selected, onPress, highlighted, }: {
     text: string | ReactElement;
     disabled?: boolean | undefined;
     selected: boolean;
     onPress: () => void;
+    highlighted?: boolean | undefined;
 }) => JSX.Element;
 export default Option;

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

@@ -0,0 +1 @@
+export declare const StyledOptionList: <V, T extends import("../types").OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, }: import("../BaseOptionList").BaseOptionListProps<V, T>) => JSX.Element;

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

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { SectionList, View } from 'react-native';
 declare const SectionSpacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -21,4 +21,5 @@ declare const StyledSearchBar: import("@emotion/native").StyledComponent<import(
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { SectionSpacer, OptionSpacer, FooterText, StyledSearchBar };
+declare const StyledSectionList: typeof SectionList;
+export { SectionSpacer, OptionSpacer, FooterText, StyledSearchBar, StyledSectionList, };

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

@@ -6,6 +6,7 @@ export declare type OptionType<V> = {
     text: string;
     key?: string;
     disabled?: boolean;
+    highlighted?: boolean;
 };
 export declare type SectionType = {
     category: string;

package/types/components/Toast/ToastProvider.d.ts

@@ -6,5 +6,5 @@ declare type ToastProviderProps = {
      */
     children?: ReactNode;
 } & ToastContainerProps;
-declare const ToastProvider: ({ children, displayType, position, }: ToastProviderProps) => JSX.Element;
+declare const ToastProvider: ({ children, displayType, position: _position, }: ToastProviderProps) => JSX.Element;
 export default ToastProvider;

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

@@ -1,5 +1,5 @@
 declare const Toast: {
-    Provider: ({ children, displayType, position, }: {
+    Provider: ({ children, displayType, position: _position, }: {
         children?: import("react").ReactNode;
     } & import("./types").ToastContainerProps) => JSX.Element;
     Container: import("react").ForwardRefExoticComponent<import("./types").ToastContainerProps & import("react").RefAttributes<import("./ToastContext").ToastControllerContextType>>;

package/types/components/Typography/Text/StyledText.d.ts

@@ -3,7 +3,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge';
+    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '7xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
     themeTypeface: 'neutral' | 'playful';

package/types/components/Typography/Text/index.d.ts

@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge';
+    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '7xlarge';
     /**
      * Font weight of the text.
      */

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

@@ -8,6 +8,7 @@ declare const getEmptyTheme: (theme: GlobalTheme) => {
         text: string;
         invertedText: string;
         subduedText: string;
+        invertedSubduedText: string;
     };
     sizes: {
         image: number;

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

@@ -4,10 +4,12 @@ declare const getSelectTheme: (theme: GlobalTheme) => {
         minimumOptionListHeight: number;
         sectionSpacing: number;
         optionSpacing: number;
-        optionHorizontalMargin: number;
+        optionListHorizontalPadding: number;
         searchBarMarginTopSpacing: number;
         searchBarHorizontalSpacing: number;
         searchBarBottomSpacing: number;
+        singleSelectContentPaddingBottom: number;
+        suffixMarginRight: number;
     };
     colors: {
         footerText: string;

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

@@ -19,6 +19,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xlarge: number;
         xxxlarge: number;
         xxxxxlarge: number;
+        '7xlarge': number;
     };
     lineHeights: {
         small: number;
@@ -27,6 +28,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xlarge: number;
         xxxlarge: number;
         xxxxxlarge: number;
+        '7xlarge': number;
     };
 };
 export default getTypographyTheme;

package/types/theme/global/colors/types.d.ts

@@ -7,6 +7,7 @@ export declare type GlobalSystemPalette = {
     disabledOnDefaultGlobalSurface: string;
     darkGlobalSurface: string;
     onDarkGlobalSurface: string;
+    overlayGlobalSurface: string;
     primaryOutline: string;
     secondaryOutline: string;
     inactiveOutline: string;

package/types/theme/global/index.d.ts

@@ -63,6 +63,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         disabledOnDefaultGlobalSurface: string;
         darkGlobalSurface: string;
         onDarkGlobalSurface: string;
+        overlayGlobalSurface: string;
         primaryOutline: string;
         secondaryOutline: string;
         inactiveOutline: string;

package/types/theme/global/typography.d.ts

@@ -8,6 +8,7 @@ interface Fonts {
     playful: FontWeights;
 }
 interface FontSizes {
+    '7xlarge': number;
     xxxxxlarge: number;
     xxxxlarge: number;
     xxxlarge: number;

package/types/theme/utils.d.ts

@@ -0,0 +1,2 @@
+declare const withOpacity: (opacity: number) => (hexString: string) => string;
+export { withOpacity };