@hero-design/rn 7.16.1 → 7.17.0

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

@@ -1,13 +1,11 @@
-import { View, TouchableOpacity } from 'react-native';
-declare const OptionWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+import { 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;
-} & {
-    themeSelected: boolean;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<View> | undefined;
 }>;
-declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+declare const OptionSpacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
@@ -23,4 +21,4 @@ declare const StyledSearchBar: import("@emotion/native").StyledComponent<import(
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { OptionWrapper, Spacer, FooterText, StyledSearchBar };
+export { SectionSpacer, OptionSpacer, FooterText, StyledSearchBar };

package/types/components/Select/__tests__/helpers.spec.d.ts

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

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

@@ -1,2 +1,14 @@
-import { OptionType } from './types';
-export declare const getKey: <T>(option: OptionType<T>, index: number, keyExtractor?: ((opt: OptionType<T>, i?: number | undefined) => string) | undefined) => import("react").Key;
+import { SectionData, CombinedOptionsType, OptionType } from './types';
+export declare const getKey: <V, T extends OptionType<V>>(option: T, index: number, keyExtractor?: ((opt: T, i?: number | undefined) => string) | undefined) => import("react").Key;
+export declare const isSections: <V, T extends OptionType<V>>(options: CombinedOptionsType<V, T>) => options is SectionData<V, T>[];
+export declare const toSections: <V, T extends OptionType<V>>(options: CombinedOptionsType<V, T>) => SectionData<V, T>[];
+export declare const toFlatOptions: <V, T extends OptionType<V>>(options: CombinedOptionsType<V, T>) => OptionType<V>[];
+export declare type ScrollParams = {
+    itemIndex: number;
+    sectionIndex: number;
+};
+export declare const getScrollParams: <V, T extends OptionType<V>>(value: V, sections: SectionData<V, T>[]) => ScrollParams;
+export declare const useKeyboard: () => {
+    isKeyboardVisible: boolean;
+    keyboardHeight: number;
+};

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

@@ -1,6 +1,6 @@
 import MultiSelect, { MultiSelectProps } from './MultiSelect';
 import { SingleSelectProps } from './SingleSelect';
-declare const _default: (<T>({ label, loading, onConfirm, onDimiss, onEndReached, onQueryChange, options, query, error, editable, disabled, numberOfLines, style, testID, value, }: SingleSelectProps<T>) => JSX.Element) & {
+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) & {
     Multi: typeof MultiSelect;
 };
 export default _default;

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

@@ -1,20 +1,39 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { ReactElement } from 'react';
+import { ListRenderItemInfo, SectionListData, SectionListRenderItemInfo, StyleProp, ViewStyle } from 'react-native';
 import { TextInputProps } from '../TextInput';
-export declare type OptionType<T> = {
-    value: T;
+export declare type OptionType<V> = {
+    value: V;
     text: string;
     key?: string;
+    disabled?: boolean;
 };
-export interface SelectProps<T> extends Pick<TextInputProps, 'editable' | 'disabled' | 'numberOfLines' | 'error'> {
+export declare type SectionType = {
+    category: string;
+};
+export declare type SectionData<V, T extends OptionType<V>> = SectionListData<T, SectionType>;
+export declare type CombinedOptionsType<V, T extends OptionType<V>> = T[] | SectionData<V, T>[];
+export declare type ListRenderOptionInfo<V, T extends OptionType<V>> = ListRenderItemInfo<T> & {
+    selected: boolean;
+    onPress: () => void;
+};
+export declare type SectionListRenderOptionInfo<V, T extends OptionType<V>> = SectionListRenderItemInfo<T, SectionType> & {
+    selected: boolean;
+    onPress: () => void;
+};
+export interface SelectProps<V, T extends OptionType<V>> extends Pick<TextInputProps, 'editable' | 'disabled' | 'numberOfLines' | 'error'> {
     /**
      * An array of options to be selected.
      */
-    options: OptionType<T>[];
+    options: CombinedOptionsType<V, T>;
+    /**
+     * Customize option renderer.
+     */
+    renderOption?: ((info: ListRenderOptionInfo<V, T>) => ReactElement) | ((info: SectionListRenderOptionInfo<V, T>) => ReactElement);
     /**
      * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
      * The default extractor checks option.key, and then falls back to using the index, like React does.
      */
-    keyExtractor?: (option: OptionType<T>, index?: number) => string;
+    keyExtractor?: (option: T, index?: number) => string;
     /**
      * Current search value.
      */
@@ -32,9 +51,15 @@ export interface SelectProps<T> extends Pick<TextInputProps, 'editable' | 'disab
      */
     onEndReached?: () => void;
     /**
-     * Show indicator at bottom of option list
+     * Show loading indicator at bottom of option list
      */
     loading?: boolean;
+    /**
+     * Props that are passed to TextInput.
+     */
+    inputProps?: {
+        loading?: boolean;
+    };
     /**
      * Field label.
      */

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

@@ -48,15 +48,17 @@ export interface TextInputProps extends NativeTextInputProps {
      * */
     editable?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     maxLength?: number;
     helpText?: string;
 }
-export declare const getVariant: ({ disabled, error, editable, isFocused, isEmptyValue, }: {
+export declare const getVariant: ({ disabled, error, editable, loading, isFocused, isEmptyValue, }: {
     disabled?: boolean | undefined;
     error?: string | undefined;
     editable?: boolean | undefined;
+    loading: boolean;
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
 }) => Variant;
-declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, 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, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;

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

@@ -2,16 +2,14 @@ import { GlobalTheme } from '../global';
 declare const getSelectTheme: (theme: GlobalTheme) => {
     space: {
         minimumOptionListHeight: number;
-        optionPadding: number;
-        optionListPadding: number;
-        optionListSpacing: number;
+        sectionSpacing: number;
+        optionSpacing: number;
+        optionHorizontalMargin: number;
         searchBarMarginTopSpacing: number;
         searchBarHorizontalSpacing: number;
         searchBarBottomSpacing: number;
     };
     colors: {
-        option: string;
-        checkedOption: string;
         footerText: string;
     };
     radii: {

package/types/types.d.ts

@@ -5,4 +5,5 @@ import { TabType } from './components/Tabs';
 import { TextInputProps } from './components/TextInput';
 import { RichTextEditorRef, RichTextEditorProps, ToolbarButtonName } from './components/RichTextEditor';
 import { Theme } from './theme';
-export type { BottomNavigationTabType, IconName, MultiSelectProps, RichTextEditorProps, RichTextEditorRef, SingleSelectProps, TabType, TextInputProps, Theme, ToolbarButtonName, };
+import { ListRenderOptionInfo, SectionListRenderOptionInfo } from './components/Select/types';
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, Theme, ToolbarButtonName, };

package/src/components/Select/types.tsx

@@ -1,52 +0,0 @@
-import { StyleProp, ViewStyle } from 'react-native';
-import { TextInputProps } from '../TextInput';
-
-export type OptionType<T> = { value: T; text: string; key?: string };
-
-export interface SelectProps<T>
-  extends Pick<
-    TextInputProps,
-    'editable' | 'disabled' | 'numberOfLines' | 'error'
-  > {
-  /**
-   * An array of options to be selected.
-   */
-  options: OptionType<T>[];
-  /**
-   * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
-   * The default extractor checks option.key, and then falls back to using the index, like React does.
-   */
-  keyExtractor?: (option: OptionType<T>, index?: number) => string;
-  /**
-   * Current search value.
-   */
-  query?: string;
-  /**
-   * Search bar onChangeText event handler
-   */
-  onQueryChange?: (value: string) => void;
-  /**
-   * Event handler when selection dismiss
-   */
-  onDimiss?: () => void;
-  /**
-   * Event handler when end of the list reached
-   */
-  onEndReached?: () => void;
-  /**
-   * Show indicator at bottom of option list
-   */
-  loading?: boolean;
-  /**
-   * Field label.
-   */
-  label: string;
-  /**
-   * Additional style.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Testing id of the component.
-   */
-  testID?: string;
-}