@hero-design/rn 7.20.1 → 7.21.0

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

@@ -1,8 +1,11 @@
+import React from 'react';
+import type { SectionList } from 'react-native';
 import type { SingleSelectProps } from '.';
-import type { OptionType, SectionData } from '../types';
+import type { OptionType, SectionData, SectionType } from '../types';
 declare type OptionListProps<V, T extends OptionType<V>> = Pick<SingleSelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange' | 'value' | 'renderOption'> & {
     onPress: (value: V | null) => void;
     sections: SectionData<V, T>[];
+    sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
-declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, }: OptionListProps<V, T>) => JSX.Element;
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, }: OptionListProps<V, T>) => JSX.Element;
 export default OptionList;

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps } from 'react-native';
 import type { OptionType, SelectProps } from '../types';
 export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>> extends SelectProps<V, T> {
     /**
@@ -5,9 +7,13 @@ export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>> e
      */
     value: V | null;
     /**
-     * on select event handler
+     * On select event handler
      */
     onConfirm: (value: V | null) => void;
+    /**
+     * Customise the selected value rendering.
+     */
+    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, 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, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element;
 export default SingleSelect;

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

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

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, 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, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element) & {
     Multi: typeof MultiSelect;
 };
 export default _default;

package/types/components/Slider/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,52 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SliderProps {
+    /**
+     * Minimum value of the slider.
+     * Defaults to 0.
+     */
+    minimumValue?: number;
+    /**
+     * Maximum value of the slider.
+     * Defaults to 1.
+     */
+    maximumValue?: number;
+    /**
+     * Step value of the slider.
+     * The value should be between 0 and (maximumValue - minimumValue).
+     * Defaults to 0.
+     */
+    step?: number;
+    /**
+     * Value of the slider.
+     * Defaults to 0.
+     */
+    value?: number;
+    /**
+     * Callback continuously called while the user is dragging the slider.
+     */
+    onValueChange?: (value: number) => void;
+    /**
+     * Callback that is called when the user picks up the slider.
+     * The initial value is passed as an argument to the callback handler.
+     */
+    onSlidingStart?: (value: number) => void;
+    /**
+     * Callback that is called when the user releases the slider, regardless if the value has changed.
+     * The current value is passed as an argument to the callback handler.
+     */
+    onSlidingComplete?: (value: number) => void;
+    /**
+     * Whether the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+export declare const Slider: ({ minimumValue, maximumValue, step, value, onValueChange, onSlidingStart, onSlidingComplete, disabled, style, testID, }: SliderProps) => JSX.Element;
+export default Slider;

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

@@ -51,6 +51,7 @@ export interface TextInputProps extends NativeTextInputProps {
     loading?: boolean;
     maxLength?: number;
     helpText?: string;
+    renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
 }
 export declare const getVariant: ({ disabled, error, editable, loading, isFocused, isEmptyValue, }: {
     disabled?: boolean;
@@ -60,5 +61,5 @@ export declare const getVariant: ({ disabled, error, editable, loading, isFocuse
     isFocused?: boolean;
     isEmptyValue?: boolean;
 }) => Variant;
-declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, ...nativeProps }: TextInputProps) => JSX.Element;
+declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, renderInputValue, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;

package/types/index.d.ts

@@ -19,9 +19,11 @@ import Drawer from './components/Drawer';
 import Empty from './components/Empty';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
+import Image from './components/Image';
 import List from './components/List';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
+import Slider from './components/Slider';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
@@ -35,5 +37,5 @@ import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
 import RichTextEditor from './components/RichTextEditor';
-export { theme, getTheme, useTheme, scale, ThemeProvider, swagSystemPalette, workSystemPalette, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, List, PinInput, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, swagSystemPalette, workSystemPalette, Accordion, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, Slider, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RichTextEditor, };
 export * from './types';

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

@@ -1,4 +1,5 @@
-declare const getDatePickerTheme: () => {
+import { GlobalTheme } from '../global';
+declare const getDatePickerTheme: (theme: GlobalTheme) => {
     sizes: {
         height: number;
     };

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

@@ -11,19 +11,16 @@ declare const getEmptyTheme: (theme: GlobalTheme) => {
         illustrationBackground: string;
     };
     sizes: {
-        illustration: number;
+        image: number;
     };
     space: {
         titleMargin: number;
-        illustrationMargin: number;
+        imageMargin: number;
         wrapperPadding: number;
     };
     fonts: {
         title: string;
         description: string;
     };
-    radii: {
-        illustration: number;
-    };
 };
 export default getEmptyTheme;

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

@@ -0,0 +1,8 @@
+import type { GlobalTheme } from '../global';
+declare const getImageTheme: (theme: GlobalTheme) => {
+    sizes: {
+        '6xlarge': number;
+        '15xlarge': number;
+    };
+};
+export default getImageTheme;

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

@@ -0,0 +1,9 @@
+import type { GlobalTheme } from '../global';
+declare const getSliderTheme: (theme: GlobalTheme) => {
+    colors: {
+        minimumTrackTint: string;
+        thumbTint: string;
+        maximumTrackTint: string;
+    };
+};
+export default getSliderTheme;

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

@@ -9,6 +9,20 @@ declare const getSwitchTheme: (theme: GlobalTheme) => {
         };
         thumb: string;
     };
+    sizes: {
+        thumbs: {
+            small: number;
+            medium: number;
+        };
+        widths: {
+            small: number;
+            medium: number;
+        };
+        heights: {
+            small: number;
+            medium: number;
+        };
+    };
     thumbSizes: {
         small: number;
         medium: number;
@@ -24,7 +38,6 @@ declare const getSwitchTheme: (theme: GlobalTheme) => {
     spaces: {
         small: number;
         medium: number;
-        inactive: number;
     };
     radii: {
         rounded: number;

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

@@ -1,4 +1,5 @@
-declare const getTimePickerTheme: () => {
+import { GlobalTheme } from '../global';
+declare const getTimePickerTheme: (theme: GlobalTheme) => {
     sizes: {
         height: number;
     };

package/types/theme/getTheme.d.ts

@@ -15,6 +15,7 @@ import getDrawerTheme from './components/drawer';
 import getEmptyTheme from './components/empty';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
+import getImageTheme from './components/image';
 import getListTheme from './components/list';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
@@ -22,6 +23,7 @@ import getRadioTheme from './components/radio';
 import getRichTextEditorTheme from './components/richTextEditor';
 import getSectionHeadingTheme from './components/sectionHeading';
 import getSelectTheme from './components/select';
+import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
@@ -51,6 +53,7 @@ declare type Theme = GlobalTheme & {
         empty: ReturnType<typeof getEmptyTheme>;
         fab: ReturnType<typeof getFABTheme>;
         icon: ReturnType<typeof getIconTheme>;
+        image: ReturnType<typeof getImageTheme>;
         list: ReturnType<typeof getListTheme>;
         pinInput: ReturnType<typeof getPinInputTheme>;
         progress: ReturnType<typeof getProgressTheme>;
@@ -58,6 +61,7 @@ declare type Theme = GlobalTheme & {
         richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
         sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
         select: ReturnType<typeof getSelectTheme>;
+        slider: ReturnType<typeof getSliderTheme>;
         spinner: ReturnType<typeof getSpinnerTheme>;
         switch: ReturnType<typeof getSwitchTheme>;
         tabs: ReturnType<typeof getTabsTheme>;

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

@@ -44,6 +44,7 @@ export declare type SystemPalette = {
     shadow: string;
     __alpha__globalPrimary: string;
     __alpha__globalSecondary1: string;
+    __alpha__globalSecondary4: string;
     __alpha__globalNeutral3: string;
     __alpha__globalLabel1: string;
     __alpha__globalLabel2: string;
@@ -54,6 +55,7 @@ export declare type SystemPalette = {
     __alpha__globalLabel7: string;
     __alpha__globalLabel8: string;
     __alpha__globalLabel9: string;
+    __alpha__primary1: string;
     __alpha__primary2: string;
     __alpha__secondary1: string;
     __alpha__secondary2: string;

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

@@ -50,6 +50,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         shadow: string;
         __alpha__globalPrimary: string;
         __alpha__globalSecondary1: string;
+        __alpha__globalSecondary4: string;
         __alpha__globalNeutral3: string;
         __alpha__globalLabel1: string;
         __alpha__globalLabel2: string;
@@ -60,6 +61,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         __alpha__globalLabel7: string;
         __alpha__globalLabel8: string;
         __alpha__globalLabel9: string;
+        __alpha__primary1: string;
         __alpha__primary2: string;
         __alpha__secondary1: string;
         __alpha__secondary2: string;
@@ -71,6 +73,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
     lineHeights: import("./typography").FontSizes;
     borderWidths: import("./borders").BorderWidths;
     space: import("./space").Space;
+    sizes: import("./sizes").Sizes;
     radii: import("./borders").Radii;
 };
 declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;

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

@@ -1,6 +1,7 @@
 declare const scale: {
     borderWidth: number;
     space: number;
+    size: number;
     font: string;
     fontSize: number;
     radius: number;

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

@@ -0,0 +1,14 @@
+import type { Space } from './space';
+interface Sizes extends Space {
+    xxxxxlarge: number;
+    '6xlarge': number;
+    '7xlarge': number;
+    '9xlarge': number;
+    '14xlarge': number;
+    '15xlarge': number;
+    '18xlarge': number;
+    '19xlarge': number;
+}
+declare const getSizes: (baseSize: number) => Sizes;
+export { getSizes };
+export type { Sizes };