@hero-design/rn 8.94.0 → 8.97.0

package/types/components/DatePicker/DatePickerAndroid.d.ts

@@ -3,5 +3,5 @@ import type { DatePickerProps } from './types';
 type DatePickerAndroidProps = Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'> & {
     variant?: 'default' | 'month-year';
 };
-declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, variant, }: DatePickerAndroidProps) => React.JSX.Element;
+declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, variant, renderSelectedValue, locale, }: DatePickerAndroidProps) => React.JSX.Element;
 export default DatePickerAndroid;

package/types/components/DatePicker/DatePickerCalendar.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { DatePickerProps } from './types';
-declare const DatePickerCalendar: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, monthPickerConfirmLabel, monthPickerCancelLabel, supportedOrientations, }: Omit<DatePickerProps, "variant">) => React.JSX.Element;
+declare const DatePickerCalendar: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, monthPickerConfirmLabel, monthPickerCancelLabel, supportedOrientations, renderSelectedValue, locale, }: Omit<DatePickerProps, "variant">) => React.JSX.Element;
 export default DatePickerCalendar;

package/types/components/DatePicker/DatePickerIOS.d.ts

@@ -3,5 +3,5 @@ import type { DatePickerProps } from './types';
 type DatePickerIOSProps = Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'> & {
     variant?: 'default' | 'month-year';
 };
-declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, supportedOrientations, variant, locale, }: DatePickerIOSProps) => React.JSX.Element;
+declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, supportedOrientations, variant, locale, renderSelectedValue, }: DatePickerIOSProps) => React.JSX.Element;
 export default DatePickerIOS;

package/types/components/DatePicker/Dialog/AndroidDialog.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DatePickerDialogProps } from './type';
+export type AndroidDatePickerDialogProps = Omit<DatePickerDialogProps, 'supportedOrientations' | 'confirmLabel' | 'label' | 'locale'>;
+declare const AndroidDatePickerDialog: ({ open, onClose, value, minDate, maxDate, onChange, testID, variant, }: AndroidDatePickerDialogProps) => React.JSX.Element | null;
+export default AndroidDatePickerDialog;

package/types/components/DatePicker/Dialog/IOSDialog.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DatePickerDialogProps } from './type';
+declare const IOSDatePickerDialog: ({ label, open, onClose, confirmLabel, locale, value, minDate, maxDate, onChange, testID, variant, supportedOrientations, }: DatePickerDialogProps) => React.JSX.Element;
+export default IOSDatePickerDialog;

package/types/components/DatePicker/Dialog/type.d.ts

@@ -0,0 +1,50 @@
+export interface DatePickerDialogProps {
+    /**
+     * The value of the date picker.
+     */
+    value?: Date;
+    /**
+     * The minimum date of the date picker.
+     */
+    minDate?: Date;
+    /**
+     * The maximum date of the date picker.
+     */
+    maxDate?: Date;
+    /**
+     * The function to call when the date is changed.
+     */
+    onChange: (date: Date) => void;
+    /**
+     * The test ID of the date picker.
+     */
+    testID?: string;
+    /**
+     * Whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * The function to call when the dialog is closed.
+     */
+    onClose: () => void;
+    /**
+     * The variant of the date picker.
+     */
+    variant?: 'default' | 'month-year';
+    /**
+     * [iOS only] The label of the DatePicker bottom sheet.
+     */
+    label: string;
+    /**
+     * [iOS only] The confirm label of the date picker bottom sheet.
+     */
+    confirmLabel: string;
+    /**
+     * [iOS only] The supported orientations of the date picker.
+     */
+    supportedOrientations?: ('portrait' | 'landscape')[];
+    /**
+     * [iOS only] The locale of the date picker.
+     */
+    locale?: string;
+}

package/types/components/DatePicker/{useCalculateDate.d.ts → hooks/useCalculateDate.d.ts}

@@ -1,4 +1,4 @@
-import { DatePickerProps } from './types';
+import { DatePickerProps } from '../types';
 export declare const getDateValue: (value: Date, minDate?: Date | undefined, maxDate?: Date | undefined) => Date;
 declare const useCalculateDate: ({ maxDate, minDate, onChange, value, }: Pick<DatePickerProps, "maxDate" | "minDate" | "onChange" | "value">) => void;
 export default useCalculateDate;

package/types/components/DatePicker/hooks/useFormatDate.d.ts

@@ -0,0 +1,10 @@
+type UseFormatDateProps = {
+    displayFormat?: string;
+    locale?: string;
+    value?: Date;
+};
+declare const useFormatDate: ({ displayFormat, locale, value, }: UseFormatDateProps) => {
+    displayValue: string;
+    format: string;
+};
+export default useFormatDate;

package/types/components/DatePicker/hooks/utils.d.ts

@@ -0,0 +1,6 @@
+import { DateTimeFormats } from '../../../types';
+export declare const getDateFormat: ({ displayFormat, locale, localizeDateTime, }: {
+    displayFormat?: string;
+    locale?: string;
+    localizeDateTime: (key: keyof DateTimeFormats) => string;
+}) => string;

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

@@ -1,4 +1,7 @@
 import React from 'react';
 import type { DatePickerProps } from './types';
-declare const DatePicker: ({ variant, ...props }: DatePickerProps) => React.JSX.Element;
-export default DatePicker;
+import { DatePickerDialogProps } from './Dialog/type';
+declare const _default: (({ variant, ...props }: DatePickerProps) => React.JSX.Element) & {
+    Dialog: ({ ...props }: DatePickerDialogProps) => React.JSX.Element;
+};
+export default _default;

package/types/components/DatePicker/types.d.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle } from 'react-native';
 export interface DatePickerProps {
     /**
      * Date picker input label.
@@ -84,4 +84,11 @@ export interface DatePickerProps {
      * [Android only] autoTheme will automatically set the theme based on the device's light mode or dark mode.
      * */
     autoTheme?: boolean;
+    /**
+     * Custom renderer for the selected value. The function provides the current date object and the formatted date string for the current display format.
+     */
+    renderSelectedValue?: (value: {
+        date: Date;
+        formattedDateString: string;
+    }, props?: NativeTextInputProps) => React.ReactNode;
 }

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

@@ -1,4 +1,8 @@
 import React from 'react';
 import { ThemeProviderProps } from '../../theme/ThemeProvider';
-declare const HeroDesignProvider: ({ theme, children }: ThemeProviderProps) => React.JSX.Element;
+import { LocaleValues } from '../../locales/types';
+interface HeroDesignProviderProps extends ThemeProviderProps {
+    locale?: LocaleValues;
+}
+declare const HeroDesignProvider: ({ theme, locale, children, }: HeroDesignProviderProps) => React.JSX.Element;
 export default HeroDesignProvider;

package/types/components/LocaleProvider/__tests__/utils.specs.d.ts

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

package/types/components/LocaleProvider/context.d.ts

@@ -0,0 +1,3 @@
+import { LocaleValues } from '../../locales/types';
+declare const LocaleContext: import("react").Context<LocaleValues>;
+export { LocaleContext };

package/types/components/LocaleProvider/hooks.d.ts

@@ -0,0 +1,5 @@
+import type { DateTimeFormats } from '../../locales/types';
+export declare const useLocale: () => import("../../locales/types").LocaleValues;
+export declare const useDateTimeFormat: () => {
+    localizeDateTime: (key: keyof DateTimeFormats) => string;
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LocaleValues } from '../../locales/types';
+interface LocaleProviderProps {
+    locale: LocaleValues;
+}
+declare const LocaleProvider: (props: React.PropsWithChildren<LocaleProviderProps>) => React.JSX.Element;
+export default LocaleProvider;

package/types/components/LocaleProvider/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Locale } from 'date-fns';
+import { LocaleCode } from '../../locales/types';
+export declare function getDateFnsLocale(locale: LocaleCode): Locale;

package/types/index.d.ts

@@ -54,5 +54,6 @@ import Portal from './components/Portal';
 import { ScrollViewWithFAB, SectionListWithFAB, FlatListWithFAB } from './components/AnimatedScroller';
 import Search from './components/Search';
 import FloatingIsland from './components/FloatingIsland';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, };
+import LocaleProvider from './components/LocaleProvider';
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, LocaleProvider, };
 export * from './types';

package/types/locales/en_AU.d.ts

@@ -0,0 +1,3 @@
+import { LocaleValues } from './types';
+declare const locale: LocaleValues;
+export default locale;

package/types/locales/en_CA.d.ts

@@ -0,0 +1,3 @@
+import { LocaleValues } from './types';
+declare const locale: LocaleValues;
+export default locale;

package/types/locales/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    'en-AU': import("./types").LocaleValues;
+    'en-CA': import("./types").LocaleValues;
+};
+export default _default;

package/types/locales/types.d.ts

@@ -0,0 +1,10 @@
+declare const LOCALES: readonly ["en-AU", "en-CA"];
+export type LocaleCode = typeof LOCALES[number];
+export type DateTimeFormats = {
+    fullDate: string;
+};
+export type LocaleValues = {
+    lang: LocaleCode;
+    dateTimeFormats: DateTimeFormats;
+};
+export {};

package/types/types.d.ts

@@ -13,4 +13,5 @@ import { FABHandles } from './components/FAB/FAB';
 import { ActionGroupHandles } from './components/FAB/ActionGroup';
 import type { SliderRangeValue } from './components/Slider/RangeSlider';
 import type { CalendarDateRange } from './components/Calendar/CalendarRange';
-export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, SliderRangeValue, CalendarDateRange, };
+import { LocaleCode, LocaleValues, DateTimeFormats } from './locales/types';
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, CardCarouselHandles, FABHandles, ActionGroupHandles, SliderRangeValue, CalendarDateRange, LocaleCode, LocaleValues, DateTimeFormats, };