@hero-design/rn 8.112.3 → 8.112.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.112.3",
+  "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/Box/StyledBox.tsx

@@ -6,7 +6,7 @@ import { pick } from '../../utils/helpers';
 import type { ConfigType } from './config';
 import config, { flexPropsKey } from './config';
 
-export const getThemeValue = (
+const getThemeValue = (
   theme: Theme,
   key: keyof StyleProps,
   props: StyleProps

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

@@ -6,7 +6,7 @@ import {
   StyledMark,
 } from './StyledCalendar';
 
-export const getCellVariant = (
+const getCellVariant = (
   isSelected = false,
   isCurrent = false,
   isHighlighted = false
@@ -18,7 +18,7 @@ export 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/Carousel/index.tsx

@@ -61,7 +61,7 @@ interface CarouselProps extends ViewProps {
   pageControlPosition?: 'top' | 'bottom';
 }
 
-export function useStateFromProp<T>(
+function useStateFromProp<T>(
   initialValue: T
 ): [T, Dispatch<SetStateAction<T>>] {
   const [value, setValue] = useState(initialValue);

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

@@ -29,19 +29,19 @@ import {
 } from '../TextInput/StyledTextInput';
 import { LABEL_ANIMATION_DURATION } from '../TextInput';
 import Typography from '../Typography';
-import BaseRichTextEditor from './BaseRichTextEditor';
+import RichTextEditorInput from './RichTextEditorInput';
 import type {
-  BaseRichTextEditorProps,
+  RichTextEditorInputProps,
   RichTextEditorRef,
-} from './BaseRichTextEditor';
+} from './RichTextEditorInput';
 
-export type EditorValue = {
+type EditorValue = {
   type: string;
   children: any;
 }[];
 
 export interface RichTextEditorProps
-  extends Omit<BaseRichTextEditorProps, 'editorRef'> {
+  extends Omit<RichTextEditorInputProps, 'editorRef'> {
   /**
    * Field label
    */
@@ -189,7 +189,7 @@ const RichTextEditor = ({
         <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
 
         <StyledTextInputAndLabelContainer>
-          <BaseRichTextEditor
+          <RichTextEditorInput
             name={name}
             value={value}
             style={[

package/src/components/RichTextEditor/{BaseRichTextEditor.tsx → RichTextEditorInput.tsx}

@@ -34,7 +34,7 @@ export type EditorValue = {
   children: any;
 }[];
 
-export interface BaseRichTextEditorProps {
+export interface RichTextEditorInputProps {
   /**
    * If true, the editor will be focused when the user enters the screen
    */
@@ -92,7 +92,7 @@ const defaultValue: EditorValue = [
   },
 ];
 
-const BaseRichTextEditor = ({
+const RichTextEditorInput = ({
   autoFocus = true,
   name,
   placeholder = '',
@@ -104,7 +104,7 @@ const BaseRichTextEditor = ({
   value = defaultValue,
   onFocus,
   onBlur,
-}: BaseRichTextEditorProps): ReactElement => {
+}: RichTextEditorInputProps): ReactElement => {
   const theme = useTheme();
 
   const webview = useRef<WebView | null>(null);
@@ -321,4 +321,4 @@ const BaseRichTextEditor = ({
   );
 };
 
-export default BaseRichTextEditor;
+export default RichTextEditorInput;

package/src/components/RichTextEditor/StyledRichTextEditor.ts

@@ -1,11 +1,6 @@
 import styled from '@emotion/native';
-import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
-export const StyledWrapper = styled(View)(({ theme }) => ({
-  marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom,
-}));
-
 export const StyledWebView = styled(WebView)(({ theme }) => ({
   minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,
   backgroundColor: 'transparent',

package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx

@@ -10,7 +10,7 @@ import RichTextEditor from '../RichTextEditor';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { theme } from '../../../index';
 import HeroDesignProvider from '../../HeroDesignProvider';
-import type { RichTextEditorRef } from '../BaseRichTextEditor';
+import type { RichTextEditorRef } from '../RichTextEditorInput';
 
 type OnMessageCallback = (event: {
   nativeEvent: { data: string };
@@ -53,12 +53,13 @@ jest.mock('../utils/rnWebView', () => {
     },
     postMessageMock,
     onMessageOfLatestRendering: WebView.onMessageOfLatestRendering,
+    requestBlurEditor: jest.fn(),
   };
 });
 
 /* eslint-disable */
 /// @ts-ignore
-import { postMessageMock } from '../utils/rnWebView';
+import { postMessageMock, requestBlurEditor } from '../utils/rnWebView';
 /* eslint-enable */
 
 describe('RichTextEditor', () => {
@@ -241,8 +242,6 @@ describe('RichTextEditor', () => {
           label="Rich Text Editor"
           onChange={jest.fn()}
           onCursorChange={jest.fn()}
-          error="this is error"
-          style={{ backgroundColor: 'yellow' }}
           ref={ref}
         />
       );
@@ -286,6 +285,22 @@ describe('RichTextEditor', () => {
         type: '@hero-editor/webview/editor-read-only',
       });
     });
+
+    it('should post correct message when request blur', () => {
+      act(() => {
+        onMessageOfLatestRendering({
+          nativeEvent: {
+            data: '{"type": "@hero-editor/webview/editor-focus", "data" : {}}',
+          },
+        });
+      });
+
+      act(() => {
+        ref.current?.requestBlur();
+      });
+
+      expect(requestBlurEditor).toHaveBeenCalled();
+    });
   });
 
   describe('postMessageToWebview', () => {

package/src/components/RichTextEditor/index.tsx

@@ -4,8 +4,8 @@ import RichTextEditor from './RichTextEditor';
 import { EditorEvents, ToolbarEvents } from './constants';
 import useRichTextEditorEvents from './hooks/useRichTextEditorEvents';
 import type { RichTextEditorProps } from './RichTextEditor';
-import BaseRichTextEditor from './BaseRichTextEditor';
-import type { RichTextEditorRef } from './BaseRichTextEditor';
+import RichTextEditorInput from './RichTextEditorInput';
+import type { RichTextEditorRef } from './RichTextEditorInput';
 
 export type { RichTextEditorProps, RichTextEditorRef };
 
@@ -15,5 +15,5 @@ export default Object.assign(RichTextEditor, {
   EditorEvents,
   ToolbarEvents,
   useRichTextEditorEvents,
-  Base: BaseRichTextEditor,
+  Base: RichTextEditorInput,
 });

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

@@ -1,24 +1,12 @@
 import type { EventEmitter } from 'events';
 
-export interface Listener<T> {
+interface Listener<T> {
   (data: T): void;
 }
 
-export const off = <T>(
-  emitter: EventEmitter,
-  eventName: string,
-  listener: Listener<T>
-) => {
-  emitter.off(eventName, listener);
-};
-
 export const emit = <T>(emitter: EventEmitter, eventName: string, data: T) =>
   emitter.emit(eventName, data);
 
-export const setMaxListeners = (emitter: EventEmitter, n: number) => {
-  emitter.setMaxListeners(n);
-};
-
 export const on = <T>(
   emitter: EventEmitter,
   eventName: string,

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.
    */