@hero-design/rn 8.112.2 → 8.112.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.112.2",
+  "version": "8.112.4",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -58,15 +58,9 @@
     "@hero-design/eslint-plugin": "9.2.1",
     "@hero-design/react-native-month-year-picker": "^8.43.2",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
     "@react-native-community/datetimepicker": "8.2.0",
     "@react-native-community/slider": "^4.5.1",
     "@react-native/babel-preset": "0.77.3",
-    "@react-native/eslint-config": "0.77.3",
-    "@react-native/metro-config": "0.77.3",
-    "@react-native/typescript-config": "0.77.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
@@ -83,7 +77,6 @@
     "@types/react-native-vector-icons": "^6.4.10",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "babel-plugin-inline-import": "^3.0.0",
-    "config-tsconfig": "8.42.5",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
     "eslint-config-hd": "8.42.5",

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/PinInput/StyledPinInput.tsx

@@ -73,6 +73,7 @@ export const StyledHiddenInput = styled(TextInput)<{ themePinLength: number }>(
       right: 0,
       width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
       height: '100%',
+      minHeight: 1, // workaround fix the issue https://employmenthero.atlassian.net/browse/PS-2042
       fontSize: theme.__hd__.pinInput.fontSizes.hiddenInputText,
       letterSpacing: theme.__hd__.pinInput.space.hiddenInputText,
       paddingHorizontal:

package/src/components/PinInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -276,6 +276,7 @@ exports[`rendering renders correctly 1`] = `
             "height": "100%",
             "left": 0,
             "letterSpacing": 4,
+            "minHeight": 1,
             "opacity": 0.01001,
             "paddingHorizontal": 8,
             "position": "absolute",
@@ -590,6 +591,7 @@ exports[`rendering renders correctly when disabled 1`] = `
             "height": "100%",
             "left": 0,
             "letterSpacing": 4,
+            "minHeight": 1,
             "opacity": 0.01001,
             "paddingHorizontal": 8,
             "position": "absolute",
@@ -1037,6 +1039,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
             "height": "100%",
             "left": 0,
             "letterSpacing": 4,
+            "minHeight": 1,
             "opacity": 0.01001,
             "paddingHorizontal": 8,
             "position": "absolute",
@@ -1405,6 +1408,7 @@ exports[`rendering renders correctly when there is error 1`] = `
             "height": "100%",
             "left": 0,
             "letterSpacing": 4,
+            "minHeight": 1,
             "opacity": 0.01001,
             "paddingHorizontal": 8,
             "position": "absolute",
@@ -1720,6 +1724,7 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
             "height": "100%",
             "left": 0,
             "letterSpacing": 4,
+            "minHeight": 1,
             "opacity": 0.01001,
             "paddingHorizontal": 8,
             "position": "absolute",

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;
   }