@hero-design/rn 8.112.4 → 8.112.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.112.4",
+  "version": "8.112.5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/react": "^11.9.3",
     "@hero-design/colors": "8.47.0",
     "d3": "^7.8.5",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.1.0",
     "hero-editor": "^1.17.0",
     "nanoid": "^5.0.9"
   },

package/src/components/Accordion/AccordionItem.tsx

@@ -10,7 +10,7 @@ import Typography from '../Typography';
 import Icon from '../Icon';
 import type { Variant } from './StyledAccordion';
 
-export type AccordionItemProps = {
+type AccordionItemProps = {
   header: string | ReactElement;
   content: ReactElement;
   open?: boolean;

package/src/components/AnimatedScroller/AnimatedScrollable.tsx

@@ -9,7 +9,7 @@ import type { ActionGroupProps } from '../FAB/ActionGroup';
 import type { FABProps } from '../FAB/FAB';
 import AnimatedFAB from './AnimatedFAB';
 
-export interface AnimatedScrollerProps<T> {
+interface AnimatedScrollerProps<T> {
   /**
    * Scroll component, it can be ScrollView, FlatList or SectionList.
    */

package/src/components/AnimatedScroller/SectionListWithFAB.tsx

@@ -5,7 +5,7 @@ import AnimatedScroller from './AnimatedScrollable';
 import type { ActionGroupProps } from '../FAB/ActionGroup';
 import type { FABProps } from '../FAB/FAB';
 
-export interface SectionListWithFABProps<T> extends SectionListProps<T> {
+interface SectionListWithFABProps<T> extends SectionListProps<T> {
   /**
    * FAB or FAB.ActionGroup props props.
    */

package/src/components/Button/UtilityButton/index.tsx

@@ -9,7 +9,7 @@ import {
 } from './StyledUtilityButton';
 import type { IconName } from '../../Icon';
 
-export interface UtilityButtonProps extends ViewProps {
+interface UtilityButtonProps extends ViewProps {
   /**
    * Places an icon within the button, before the button's text
    */

package/src/components/Calendar/CalendarRange.tsx

@@ -2,7 +2,7 @@ import {
   MonthYearPickerDialogueAndroid,
   MonthYearPickerViewIOS,
 } from '@hero-design/react-native-month-year-picker';
-import format from 'date-fns/fp/format';
+import { format } from 'date-fns/fp';
 import React, { useState } from 'react';
 import { Platform, TouchableOpacity } from 'react-native';
 import { useTheme } from '../../theme';

package/src/components/Calendar/CalendarRowItem.tsx

@@ -18,7 +18,7 @@ const getCellVariant = (
   return 'default';
 };
 
-export interface CalendarRowItemProps {
+interface CalendarRowItemProps {
   date?: Date;
   onPress?: () => void;
   isCurrent?: boolean;

package/src/components/Calendar/index.tsx

@@ -2,7 +2,7 @@ import {
   MonthYearPickerDialogueAndroid,
   MonthYearPickerViewIOS,
 } from '@hero-design/react-native-month-year-picker';
-import format from 'date-fns/fp/format';
+import { format } from 'date-fns/fp';
 import React, { useState } from 'react';
 import { Platform, TouchableOpacity } from 'react-native';
 import { useTheme } from '../../theme';

package/src/components/Chart/Line/Line.tsx

@@ -1,5 +1,5 @@
-import * as d3 from 'd3';
 import React, { useMemo } from 'react';
+import { line, curveBasis } from 'd3';
 import { Path } from 'react-native-svg';
 import { DEFAULT_LINE_STROKE_WIDTH } from '../shared/constants';
 import useScaleBandX from '../shared/hooks/useScaleBandX';
@@ -56,11 +56,10 @@ const Line = ({
   // Create line generator with proper curve
   const lineGenerator = useMemo(
     () =>
-      d3
-        .line<DataValue>()
+      line<DataValue>()
         .x((_, i) => (xScale(labels[i]) ?? 0) + xScale.bandwidth() / 2)
         .y((d) => yScale(d ?? 0))
-        .curve(d3.curveBasis),
+        .curve(curveBasis),
     [xScale, yScale, labels]
   );
 

package/src/components/Chart/index.tsx

@@ -8,6 +8,4 @@ const Chart = {
   SelectAction,
 };
 
-export type { LineChart, ColumnChart };
-
 export default Chart;

package/src/components/Chart/shared/ChartHeader.tsx

@@ -5,7 +5,7 @@ import { StyledChartHeader } from '../StyledChart';
 import type { HeaderConfig } from '../types';
 import Box from '../../Box';
 
-export type ChartHeaderProps = HeaderConfig & {
+type ChartHeaderProps = HeaderConfig & {
   onLayout?: (event: LayoutChangeEvent) => void;
 };
 

package/src/components/Chart/shared/hooks/useColorScale.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import * as d3 from 'd3';
+import { scaleOrdinal } from 'd3';
 import { mobileVisualisationPalette } from '@hero-design/colors';
 
 // Only use colors that are not maasstrichtBlue
@@ -20,6 +20,6 @@ export default function useColorScale(
   return useMemo(() => {
     const palette =
       customColors && customColors.length > 0 ? customColors : DEFAULT_COLORS;
-    return d3.scaleOrdinal<string, string>().domain(labels).range(palette);
+    return scaleOrdinal<string, string>().domain(labels).range(palette);
   }, [labels, customColors]);
 }

package/src/components/Chart/shared/hooks/useGenerateTicks.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import * as d3 from 'd3';
+import { range } from 'd3';
 
 const useGenerateTicks = ({
   maxValue,
@@ -14,7 +14,7 @@ const useGenerateTicks = ({
   const minValueOrZero = minValue || 0;
 
   const ticks = useMemo(() => {
-    const generatedTicks = d3.range(minValueOrZero, maxValueOrZero, step);
+    const generatedTicks = range(minValueOrZero, maxValueOrZero, step);
     if (generatedTicks[generatedTicks.length - 1] !== maxValueOrZero) {
       generatedTicks.push(maxValueOrZero);
     }

package/src/components/Chart/shared/hooks/useScaleBandX.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
-import * as d3 from 'd3';
+import { scaleBand } from 'd3';
 
-export type UseScaleBandXProps = {
+type UseScaleBandXProps = {
   labels: string[];
   xStart: number;
   xEnd: number;
@@ -9,7 +9,7 @@ export type UseScaleBandXProps = {
 
 const useScaleBandX = ({ labels, xStart, xEnd }: UseScaleBandXProps) => {
   return useMemo(
-    () => d3.scaleBand().domain(labels).range([xStart, xEnd]).padding(0.2),
+    () => scaleBand().domain(labels).range([xStart, xEnd]).padding(0.2),
     [labels, xStart, xEnd]
   );
 };

package/src/components/Chart/shared/hooks/useScaleLinearY.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
-import * as d3 from 'd3';
+import { scaleLinear } from 'd3';
 
-export type UseScaleLinearYProps = {
+type UseScaleLinearYProps = {
   maxValue: number;
   minValue: number;
   yStart: number;
@@ -19,8 +19,7 @@ const useScaleLinearY = ({
 
   return useMemo(
     () =>
-      d3
-        .scaleLinear()
+      scaleLinear()
         .domain([minValueOrZero, maxValueOrZero])
         .range([yEnd, yStart]),
     [maxValueOrZero, minValueOrZero, yStart, yEnd]

package/src/components/Chart/types.ts

@@ -1,10 +1,3 @@
-export type AxisSizeConfig = {
-  xAxisTextHeight: number;
-  setXAxisTextHeight: (height: number) => void;
-  yAxisTextWidth: number;
-  setYAxisTextWidth: (width: number) => void;
-};
-
 /**
  * Represents a data series for the chart.
  * @template Data - The type of the data array for the series.
@@ -122,7 +115,6 @@ type StyleConfig = {
 
 export type {
   Series,
-  TickConfig,
   XAxisConfig,
   YAxisConfig,
   DataValue,

package/src/components/Checkbox/utils.ts

@@ -1,4 +1,4 @@
-export type getStateType = {
+type getStateType = {
   disabled: boolean;
   readonly: boolean;
   checked?: boolean;

package/src/components/Chip/index.tsx

@@ -14,7 +14,7 @@ type DeprecatedVariant = 'outlined' | 'filled';
 
 type ValidVariant = 'selection' | 'filter' | 'compact' | 'compact-outlined';
 
-export interface ChipProps extends ViewProps {
+interface ChipProps extends ViewProps {
   /**
    * The label of the chip.
    */

package/src/components/DatePicker/hooks/__tests__/useFormatDate.spec.ts

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import formatDate from 'date-fns/fp/format';
+import { format as formatDate } from 'date-fns/fp';
 import useFormatDate from '../useFormatDate';
 import { useDateTimeFormat } from '../../../LocaleProvider/hooks';
 
@@ -8,10 +8,12 @@ jest.mock('../../../LocaleProvider/hooks', () => ({
   useDateTimeFormat: jest.fn(),
 }));
 
-jest.mock('date-fns/fp/format', () => {
-  return jest.fn((format, date) => {
-    return `Formatted: ${format}, Date: ${date.toISOString()}`;
-  });
+jest.mock('date-fns/fp', () => {
+  return {
+    format: jest.fn((format, date) => {
+      return `Formatted: ${format}, Date: ${date.toISOString()}`;
+    }),
+  };
 });
 
 describe('useFormatDate', () => {

package/src/components/DatePicker/hooks/useFormatDate.ts

@@ -1,4 +1,4 @@
-import formatDate from 'date-fns/fp/format';
+import { format as formatDate } from 'date-fns/fp';
 import { useDateTimeFormat } from '../../LocaleProvider/hooks';
 import { getDateFormat } from './utils';
 

package/src/components/DatePicker/types.ts

@@ -43,7 +43,7 @@ export interface DatePickerProps {
   confirmLabel: string;
   /**
    * Date format. Default format is dd/MM/yyyy.
-   * Following date-fns's format (https://date-fns.org/v2.16.1/docs/format).
+   * Following date-fns's format (https://date-fns.org/v4.1.0/docs/format).
    */
   displayFormat?: string;
   /**

package/src/components/FloatingIsland/index.tsx

@@ -9,7 +9,7 @@ import {
 } from './StyledFloatingIsland';
 import type { IconName } from '../Icon';
 
-export interface FloatingIslandProps extends ViewProps {
+interface FloatingIslandProps extends ViewProps {
   /**
    * Callback that is called when the floating island is pressed.
    */

package/src/components/Illustration/index.tsx

@@ -8,7 +8,7 @@ import { Illustrations, type IllustrationName } from './illustrations';
 export { IllustrationList } from './illustrations';
 export type { IllustrationName } from './illustrations';
 
-export interface IllustrationProps {
+interface IllustrationProps {
   /**
    * The name of the illustration to display
    */

package/src/components/List/BasicListItem.tsx

@@ -11,7 +11,7 @@ import {
 import type { IconName } from '../Icon';
 import { useTheme } from '../../theme';
 
-export interface ListItemProps {
+interface ListItemProps {
   /**
    * Name of Icon or component to render on the left side of title.
    */

package/src/components/List/StyledListItem.tsx

@@ -1,8 +1,8 @@
 import { TouchableHighlight, View } from 'react-native';
 import styled from '@emotion/native';
 
-export type Variant = 'full-width' | 'card';
-export type LeadingStatusIntent =
+type Variant = 'full-width' | 'card';
+type LeadingStatusIntent =
   | 'success'
   | 'warning'
   | 'danger'

package/src/components/LocaleProvider/__tests__/utils.specs.ts

@@ -1,5 +1,4 @@
-import enAU from 'date-fns/locale/en-AU';
-import enCA from 'date-fns/locale/en-CA';
+import { enAU, enCA } from 'date-fns/locale';
 import { getDateFnsLocale } from '../utils';
 
 describe('getDateFnsLocale', () => {

package/src/components/LocaleProvider/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import setDefaultOptions from 'date-fns/setDefaultOptions';
+import { setDefaultOptions } from 'date-fns';
 import { LocaleContext } from './context';
 import { getDateFnsLocale } from './utils';
 import type { LocaleValues } from '../../locales/types';

package/src/components/LocaleProvider/utils.ts

@@ -1,6 +1,5 @@
-import enAU from 'date-fns/locale/en-AU';
-import enCA from 'date-fns/locale/en-CA';
-import type { Locale } from 'date-fns';
+import { enAU, enCA } from 'date-fns/locale';
+import type { Locale } from 'date-fns/locale';
 import type { LocaleCode } from '../../locales/types';
 
 const Locales = {

package/src/components/Portal/index.tsx

@@ -11,7 +11,7 @@ import { ThemeProvider, useTheme } from '../../theme';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
 
-export interface PortalProps {
+interface PortalProps {
   /*
    * Name of the portal. If name is not provided, a random name will be generated.
    */

package/src/components/Portal/types.tsx

@@ -14,12 +14,12 @@ export interface RemovePortalAction {
   portalName: string;
 }
 
-export interface RegisterHostAction {
+interface RegisterHostAction {
   type: ACTIONS;
   hostName: string;
 }
 
-export interface UnregisterHostAction {
+interface UnregisterHostAction {
   type: ACTIONS;
   hostName: string;
 }

package/src/components/Radio/Radio.tsx

@@ -4,7 +4,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import { Circle, InnerCircle, StyledRadio } from './StyledRadio';
 
-export interface RadioProps {
+interface RadioProps {
   /**
    * Whether the radio is checked.
    */

package/src/components/Rate/index.tsx

@@ -4,11 +4,11 @@ import { Animated, Platform, Pressable } from 'react-native';
 import Icon from '../Icon';
 import { StyledIconWrapper, StyledWrapper } from './StyledRate';
 
-export interface RateOption<T extends string | number> {
+interface RateOption<T extends string | number> {
   value: T;
 }
 
-export interface RateProps<T extends string | number> extends ViewProps {
+interface RateProps<T extends string | number> extends ViewProps {
   /**
    * Options for rate component.
    */

package/src/components/RefreshControl/index.tsx

@@ -3,7 +3,7 @@ import type { RefreshControlProps as NativeRefreshControlProps } from 'react-nat
 import { RefreshControl as NativeRefreshControl } from 'react-native';
 import { useTheme } from '../../theme';
 
-export type RefreshControlProps = Omit<
+type RefreshControlProps = Omit<
   NativeRefreshControlProps,
   'colors' | 'tintColor'
 >;

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -35,7 +35,7 @@ import type {
   RichTextEditorRef,
 } from './RichTextEditorInput';
 
-export type EditorValue = {
+type EditorValue = {
   type: string;
   children: any;
 }[];

package/src/components/RichTextEditor/utils/events.ts

@@ -1,6 +1,6 @@
 import type { EventEmitter } from 'events';
 
-export interface Listener<T> {
+interface Listener<T> {
   (data: T): void;
 }
 

package/src/components/Search/SearchOneLine.tsx

@@ -18,7 +18,7 @@ import { renderPrefix, renderSuffix } from './utils';
 import Button from '../Button';
 import { useTheme } from '../../theme';
 
-export type SearchOneLineHandles = Pick<
+type SearchOneLineHandles = Pick<
   RNTextInput,
   'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
 >;

package/src/components/Search/StyledSearch.tsx

@@ -5,7 +5,7 @@ import Badge from '../Badge';
 
 export type State = 'default' | 'filled' | 'disabled' | 'readonly';
 
-export type Variant = 'basic' | 'reversed';
+type Variant = 'basic' | 'reversed';
 
 export const StyledContainer = styled(View)(() => ({
   width: '100%',

package/src/components/SectionHeading/index.tsx

@@ -11,7 +11,7 @@ import {
 import type { IconName, IconProps } from '../Icon';
 import { useDeprecation } from '../../utils/hooks';
 
-export interface SectionHeadingProps extends ViewProps {
+interface SectionHeadingProps extends ViewProps {
   /**
    * Heading text.
    */

package/src/components/Select/helpers.tsx

@@ -35,7 +35,7 @@ export const toFlatOptions = <V, T extends SelectOptionType<V>>(
   return options;
 };
 
-export type ScrollParams = {
+type ScrollParams = {
   itemIndex: number;
   sectionIndex: number;
 };

package/src/components/Skeleton/index.tsx

@@ -12,7 +12,7 @@ import type { Theme } from '../../theme';
 import { useTheme } from '../../theme';
 import { StyledContainer, StyledGradientContainer } from './StyledSkeleton';
 
-export interface SkeletonProps extends ViewProps {
+interface SkeletonProps extends ViewProps {
   /**
    * Intent of the component.
    */

package/src/components/Slider/RangeSlider.tsx

@@ -15,7 +15,7 @@ export type SliderRangeValue = {
   end: number;
 };
 
-export interface RangeSliderProps {
+interface RangeSliderProps {
   /**
    * Minimum value of the slider.
    */

package/src/components/StatusScreens/Success/index.tsx

@@ -24,7 +24,7 @@ import { noop } from '../../../utils/functions';
 import type { IllustrationName } from '../../Illustration';
 import Illustration from '../../Illustration';
 
-export interface SuccessProps extends ViewProps {
+interface SuccessProps extends ViewProps {
   /**
    * Image to be displayed.
    * @deprecated The `image` prop is deprecated and will be removed in the next major version. Use the `icon` prop instead.

package/src/components/Tabs/ScrollableTabsHeader/ScrollableTabsHeader.tsx

@@ -53,7 +53,7 @@ const getTabItem = ({
   return item({ color });
 };
 
-export interface ScrollableTabHeaderProps extends ViewProps {
+interface ScrollableTabHeaderProps extends ViewProps {
   /**
    * Callback which is called on tab press, receiving key of upcoming active Tab.
    */

package/src/components/Tabs/TabWithBadge.tsx

@@ -5,11 +5,11 @@ import { View } from 'react-native';
 import Badge from '../Badge';
 import { StyledBadgeWrapper } from './StyledTabs';
 
-export type StatusBadgeType = {
+type StatusBadgeType = {
   type: 'status';
 };
 
-export type CounterBadgeType = {
+type CounterBadgeType = {
   type: 'counter';
   value: number;
   max?: number;

package/src/components/TextInput/index.tsx

@@ -45,7 +45,7 @@ export type TextInputHandles = Pick<
   'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
 >;
 
-export type TextInputVariant = 'text' | 'textarea';
+type TextInputVariant = 'text' | 'textarea';
 
 type NativeTextInputProps = Omit<RNTextInputProps, 'onFocus' | 'onBlur'> & {
   onFocus?: (
@@ -56,7 +56,7 @@ type NativeTextInputProps = Omit<RNTextInputProps, 'onFocus' | 'onBlur'> & {
   ) => void | undefined;
 };
 
-export interface TextInputRef {
+interface TextInputRef {
   focus: () => void;
   blur: () => void;
   clear: () => void;

package/src/components/TimePicker/TimePickerAndroid.tsx

@@ -1,7 +1,7 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
 import React, { useState, useCallback } from 'react';
 import { View } from 'react-native';
-import formatTime from 'date-fns/fp/format';
+import { format as formatTime } from 'date-fns/fp';
 
 import TextInput from '../TextInput';
 import { StyledTouchableOpacity } from './StyledTimePicker';

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -1,7 +1,7 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
 import React, { useEffect, useState, useCallback } from 'react';
 import { View } from 'react-native';
-import formatTime from 'date-fns/fp/format';
+import { format as formatTime } from 'date-fns/fp';
 
 import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';

package/src/components/TimePicker/types.ts

@@ -24,7 +24,7 @@ export interface TimePickerProps {
   confirmLabel: string;
   /**
    * Time display format of current value presented on the input. Default format is: HH:mm aa.
-   * Following date-fns's format (https://date-fns.org/v2.16.1/docs/format).
+   * Following date-fns's format (https://date-fns.org/v4.1.0/docs/format).
    * This also change how the time picker display between 24 hour and 12 hour mode.
    */
   displayFormat?: string;

package/src/components/Toast/ToastContext.ts

@@ -21,7 +21,7 @@ export const ToastContext = createContext<ToastControllerContextType>(
   fallbackToastControlContext
 );
 
-export type ToastConfigContextType = Pick<
+type ToastConfigContextType = Pick<
   ToastContainerProps,
   'position' | 'displayType'
 >;

package/src/components/Toolbar/index.tsx

@@ -5,7 +5,7 @@ import { ToolbarWrapper } from './StyledToolbar';
 import ToolbarGroup from './ToolbarGroup';
 import ToolbarMessage from './ToolbarMessage';
 
-export interface ToolbarProps extends Omit<ViewProps, 'style'> {
+interface ToolbarProps extends Omit<ViewProps, 'style'> {
   /**
    * Toolbar's content.
    */

package/src/components/Typography/Label/index.tsx

@@ -8,7 +8,7 @@ import type {
 import { StyledLabel } from './StyledLabel';
 import type { TypographyIntent } from '../types';
 
-export interface LabelProps extends NativeTextProps {
+interface LabelProps extends NativeTextProps {
   /**
    * Text content.
    */

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

@@ -65,7 +65,7 @@ export type BrandSystemPalette = {
 };
 
 export type ThemeMode = 'light' | 'dark';
-export type ThemeName =
+type ThemeName =
   | 'swagLight'
   | 'swagLightJobs'
   | 'ehWorkDark'

package/src/theme/global/shadows/index.ts

@@ -21,7 +21,4 @@ const getShadows = (palette: SystemPalette) => {
   }
 };
 
-type Shadows = ReturnType<typeof getShadows>;
-
 export { getShadows };
-export type { Shadows };

package/src/theme/global/shadows/types.ts

@@ -1,4 +1,4 @@
-export type ShadowStyles = {
+type ShadowStyles = {
   shadowOffset: {
     width: number;
     height: number;