@hero-design/rn 8.112.3 → 8.112.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.112.3",
+  "version": "8.112.4",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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/Calendar/CalendarRowItem.tsx

@@ -6,7 +6,7 @@ import {
   StyledMark,
 } from './StyledCalendar';
 
-export const getCellVariant = (
+const getCellVariant = (
   isSelected = false,
   isCurrent = false,
   isHighlighted = false

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/RichTextEditor/RichTextEditor.tsx

@@ -29,11 +29,11 @@ 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: string;
@@ -41,7 +41,7 @@ export type EditorValue = {
 }[];
 
 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

@@ -4,21 +4,9 @@ export 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/Select/helpers.tsx

@@ -4,23 +4,6 @@ import type {
   SelectOptionType,
 } from './types';
 
-export const getKey = <V, T extends SelectOptionType<V>>(
-  option: T,
-  index: number,
-  keyExtractor?: (opt: T, i?: number) => string
-) => {
-  let key: React.Key = '';
-  if (keyExtractor !== undefined) {
-    key = keyExtractor(option, index);
-  } else if (option.key !== undefined) {
-    key = option.key;
-  } else {
-    key = index;
-  }
-
-  return key;
-};
-
 export const isSections = <V, T extends SelectOptionType<V>>(
   options: CombinedOptionsType<V, T>
 ): options is SectionData<V, T>[] => {

package/src/components/Tabs/StyledTabs.tsx

@@ -25,10 +25,6 @@ const HeaderTabItem = styled(View)(({ theme }) => ({
   paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
 }));
 
-const TabScreen = styled(View)({
-  flex: 1,
-});
-
 const StyledIndicator = styled(Animated.View)<{ themeWidth: number }>(
   ({ theme, themeWidth }) => ({
     width: themeWidth,
@@ -49,7 +45,6 @@ export {
   HeaderTabWrapper,
   HeaderTab,
   HeaderTabItem,
-  TabScreen,
   StyledIndicator,
   StyledBadgeWrapper,
 };

package/src/components/TextInput/index.tsx

@@ -305,7 +305,7 @@ export const renderMaxLengthMessage = ({
   );
 };
 
-export const getDisplayText = (value?: string, defaultValue?: string) => {
+const getDisplayText = (value?: string, defaultValue?: string) => {
   return (value !== undefined ? value : defaultValue) ?? '';
 };
 

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

@@ -1,7 +1,7 @@
 import ehWorkSystemPalette from './ehWork';
 import type { SystemPalette } from './types';
 
-export const swagSystemPalette: SystemPalette = {
+const swagSystemPalette: SystemPalette = {
   ...ehWorkSystemPalette,
   name: 'swagLight',
 };

package/src/utils/scale.ts

@@ -1,8 +1,8 @@
 import { Dimensions, Platform } from 'react-native';
 
-export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
+const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
-export const horizontalScale = (size: number) => {
+const horizontalScale = (size: number) => {
   if (Platform.OS === 'web') {
     return size;
   }

package/types/components/Box/StyledBox.d.ts

@@ -1,11 +1,6 @@
 import type { Theme } from '@emotion/react';
 import { View } from 'react-native';
 import type { FlexStyleProps, StyleProps } from './types';
-export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props: StyleProps) => {
-    [x: string]: string | undefined;
-} | {
-    [x: string]: number;
-} | undefined;
 declare const StyledBox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: Theme;
     as?: React.ElementType;

package/types/components/Calendar/CalendarRowItem.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const getCellVariant: (isSelected?: boolean, isCurrent?: boolean, isHighlighted?: boolean) => "default" | "highlighted" | "current" | "selected";
 export interface CalendarRowItemProps {
     date?: Date;
     onPress?: () => void;

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

@@ -40,7 +40,6 @@ interface CarouselProps extends ViewProps {
      */
     pageControlPosition?: 'top' | 'bottom';
 }
-export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
 declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, testID, pageControlPosition, ...nativeProps }: CarouselProps) => React.JSX.Element) & {
     Card: React.ForwardRefExoticComponent<Omit<import("./CardCarousel").CardCarouselProps, "ref"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
 };

package/types/components/RichTextEditor/RichTextEditor.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Ref } from 'react';
-import type { BaseRichTextEditorProps, RichTextEditorRef } from './BaseRichTextEditor';
+import type { RichTextEditorInputProps, RichTextEditorRef } from './RichTextEditorInput';
 export type EditorValue = {
     type: string;
     children: any;
 }[];
-export interface RichTextEditorProps extends Omit<BaseRichTextEditorProps, 'editorRef'> {
+export interface RichTextEditorProps extends Omit<RichTextEditorInputProps, 'editorRef'> {
     /**
      * Field label
      */

package/types/components/RichTextEditor/{BaseRichTextEditor.d.ts → RichTextEditorInput.d.ts}

@@ -11,7 +11,7 @@ export type EditorValue = {
     type: string;
     children: any;
 }[];
-export interface BaseRichTextEditorProps {
+export interface RichTextEditorInputProps {
     /**
      * If true, the editor will be focused when the user enters the screen
      */
@@ -65,5 +65,5 @@ export interface BaseRichTextEditorProps {
      */
     onBlur?: () => void;
 }
-declare const BaseRichTextEditor: ({ autoFocus, name, placeholder, onChange, onCursorChange, style, testID, editorRef, value, onFocus, onBlur, }: BaseRichTextEditorProps) => ReactElement;
-export default BaseRichTextEditor;
+declare const RichTextEditorInput: ({ autoFocus, name, placeholder, onChange, onCursorChange, style, testID, editorRef, value, onFocus, onBlur, }: RichTextEditorInputProps) => ReactElement;
+export default RichTextEditorInput;

package/types/components/RichTextEditor/StyledRichTextEditor.d.ts

@@ -1,11 +1,4 @@
-import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
-export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
 export declare const StyledWebView: import("@emotion/native").StyledComponent<import("react-native-webview/lib/WebViewTypes").IOSWebViewProps & import("react-native-webview/lib/WebViewTypes").AndroidWebViewProps & import("react-native-webview/lib/WebViewTypes").WindowsWebViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

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

@@ -1,6 +1,6 @@
 import { EditorEvents, ToolbarEvents } from './constants';
 import type { RichTextEditorProps } from './RichTextEditor';
-import type { RichTextEditorRef } from './BaseRichTextEditor';
+import type { RichTextEditorRef } from './RichTextEditorInput';
 export type { RichTextEditorProps, RichTextEditorRef };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & import("react").RefAttributes<RichTextEditorRef>> & {
     Toolbar: ({ name, buttons, testID, }: import("./EditorToolbar").EditorToolbarProps) => import("react").JSX.Element | null;
@@ -66,6 +66,6 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<RichTextE
             };
         }[TEventName] : void) => void) => () => void;
     };
-    Base: ({ autoFocus, name, placeholder, onChange, onCursorChange, style, testID, editorRef, value, onFocus, onBlur, }: import("./BaseRichTextEditor").BaseRichTextEditorProps) => import("react").ReactElement;
+    Base: ({ autoFocus, name, placeholder, onChange, onCursorChange, style, testID, editorRef, value, onFocus, onBlur, }: import("./RichTextEditorInput").RichTextEditorInputProps) => import("react").ReactElement;
 };
 export default _default;

package/types/components/RichTextEditor/utils/events.d.ts

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

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

@@ -1,5 +1,4 @@
 import type { SectionData, CombinedOptionsType, SelectOptionType } from './types';
-export declare const getKey: <V, T extends SelectOptionType<V>>(option: T, index: number, keyExtractor?: (opt: T, i?: number) => string) => string | number;
 export declare const isSections: <V, T extends SelectOptionType<V>>(options: CombinedOptionsType<V, T>) => options is SectionData<V, T>[];
 export declare const toSections: <V, T extends SelectOptionType<V>>(options: CombinedOptionsType<V, T>) => SectionData<V, T>[];
 export declare const toFlatOptions: <V, T extends SelectOptionType<V>>(options: CombinedOptionsType<V, T>) => SelectOptionType<V>[];

package/types/components/Tabs/StyledTabs.d.ts

@@ -30,12 +30,6 @@ declare const HeaderTabItem: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const TabScreen: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
 declare const StyledIndicator: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -48,4 +42,4 @@ declare const StyledBadgeWrapper: import("@emotion/native").StyledComponent<impo
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, TabScreen, StyledIndicator, StyledBadgeWrapper, };
+export { TabContainer, HeaderTabWrapper, HeaderTab, HeaderTabItem, StyledIndicator, StyledBadgeWrapper, };

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

@@ -132,6 +132,5 @@ export declare const renderMaxLengthMessage: ({ maxLength, state, currentLength,
     maxLength?: number;
     hideCharacterCount: boolean;
 }) => false | React.JSX.Element;
-export declare const getDisplayText: (value?: string, defaultValue?: string) => string;
 declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<TextInputHandles>>;
 export default TextInput;

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

@@ -1,3 +1,3 @@
 import type { SystemPalette } from './types';
-export declare const swagSystemPalette: SystemPalette;
+declare const swagSystemPalette: SystemPalette;
 export default swagSystemPalette;

package/types/utils/scale.d.ts

@@ -1,3 +1 @@
-export declare const BASE_WIDTH = 390;
-export declare const horizontalScale: (size: number) => number;
 export declare const scale: (size: number, factor?: number) => number;