@hero-design/rn 8.109.2 → 8.110.1

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import type { ComponentType } from 'react';
 import Icon from '../Icon';
 import { EditorEvents, ToolbarEvents } from './constants';
@@ -96,12 +96,6 @@ export interface EditorToolbarProps {
   testID?: string;
 }
 
-type ButtonType = {
-  id: number;
-  buttonName: ToolbarButtonName;
-  selected: boolean;
-};
-
 const EditorToolbar = ({
   name,
   buttons = defaultButtons,
@@ -109,19 +103,10 @@ const EditorToolbar = ({
 }: EditorToolbarProps) => {
   const [show, setShow] = useState(false);
 
-  const initialToolbarButtonArray: ButtonType[] = buttons.map(
-    (button, index) => ({
-      id: index + 1,
-      buttonName: button,
-      selected: false,
-    })
-  );
-
-  const [toolbarButtonArray, setToolbarButtonArray] = useState<ButtonType[]>(
-    initialToolbarButtonArray
-  );
-
   const { emitEvent, subscribeToEvents } = useRichTextEditorEvents(name);
+  const [toolbarButtonState, setToolbarButtonState] = useState<
+    Record<string, boolean>
+  >({});
 
   useEffect(() => {
     const removeFocusListener = subscribeToEvents(
@@ -131,72 +116,46 @@ const EditorToolbar = ({
     const removeBlurListener = subscribeToEvents(EditorEvents.EditorBlur, () =>
       setShow(false)
     );
+    const removeEditorChangeListener = subscribeToEvents(
+      EditorEvents.EditorChange,
+      ({ toolbarState = {} }) => {
+        setToolbarButtonState(toolbarState);
+      }
+    );
 
     return () => {
       removeFocusListener();
       removeBlurListener();
+      removeEditorChangeListener();
     };
   }, []);
 
-  const toggleToolbarButton = useCallback(
-    ({ buttonName: currentButtonName, selected: prevSelected }: ButtonType) => {
-      const currentButtonConfig = buttonConfigs[currentButtonName];
-      const isStandalone =
-        currentButtonConfig && currentButtonConfig.standalone;
-
-      setToolbarButtonArray((prevState) =>
-        prevState.map((updatingButton) => {
-          if (updatingButton.buttonName === currentButtonName) {
-            return {
-              ...updatingButton,
-              selected: !prevSelected,
-            };
-          }
-
-          const updatingButtonConfig = buttonConfigs[updatingButton.buttonName];
-          const shouldToggleOff =
-            !prevSelected &&
-            isStandalone &&
-            updatingButtonConfig &&
-            updatingButtonConfig.standalone;
-
-          return {
-            ...updatingButton,
-            selected: shouldToggleOff ? false : updatingButton.selected,
-          };
-        })
-      );
-    },
-    []
-  );
-
   const toolbarButtons = useMemo(
     () =>
-      toolbarButtonArray.map((button) => {
-        if (button.buttonName === '|') {
-          return <StyledSeparator key={button.id} />;
+      buttons.map((button, index) => {
+        if (button === '|') {
+          return <StyledSeparator key={index} />;
         }
-        const config = buttonConfigs[button.buttonName];
+        const config = buttonConfigs[button];
         if (config) {
           return (
             <ToolbarButton
-              key={button.id}
+              key={button}
               testID={config.icon}
               icon={config.icon}
               onPress={() => {
-                toggleToolbarButton(button);
                 emitEvent({
                   type: config.eventName,
                   data: null,
                 });
               }}
-              selected={button.selected}
+              selected={toolbarButtonState[config.eventName]}
             />
           );
         }
         return null;
       }),
-    [toolbarButtonArray]
+    [toolbarButtonState, buttons]
   );
 
   if (show) {

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

@@ -3,7 +3,7 @@ import { act, fireEvent, waitFor } from '@testing-library/react-native';
 import type { RenderAPI } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import EditorToolbar from '../EditorToolbar';
-import { emitter as editorEventEmmitor } from '../EditorEvent';
+import { emitter as editorEventEmitter } from '../EditorEvent';
 import { theme } from '../../../index';
 import * as Events from '../utils/events';
 
@@ -24,7 +24,7 @@ describe('EditorToolbar', () => {
         <EditorToolbar name="toolbar" testID="toolbar" />
       );
       act(() => {
-        editorEventEmmitor.emit('toolbar/editor-focus');
+        editorEventEmitter.emit('toolbar/editor-focus');
       });
       await waitFor(() => wrapper.getByTestId('toolbar'));
     });
@@ -47,7 +47,7 @@ describe('EditorToolbar', () => {
 
     it('should hide toolbar when blur', async () => {
       act(() => {
-        editorEventEmmitor.emit('toolbar/editor-blur');
+        editorEventEmitter.emit('toolbar/editor-blur');
       });
       await waitFor(() => wrapper.queryAllByTestId('toolbar').length === 0);
       expect(wrapper.queryAllByTestId('toolbar')).toHaveLength(0);
@@ -55,7 +55,7 @@ describe('EditorToolbar', () => {
 
     describe("should change button's background color when pressing", () => {
       it('should send event and highlight buttons correctly', () => {
-        const emmitedEvents: string[] = [];
+        const emittedEvents: string[] = [];
 
         const eventNameAndTestIDArray = [
           {
@@ -89,8 +89,8 @@ describe('EditorToolbar', () => {
         ];
 
         eventNameAndTestIDArray.forEach(({ eventName, testID }) => {
-          Events.on(editorEventEmmitor, eventName, () => {
-            emmitedEvents.push(testID);
+          Events.on(editorEventEmitter, eventName, () => {
+            emittedEvents.push(testID);
           });
 
           expect(wrapper.getByTestId(testID)).toHaveStyle({
@@ -98,9 +98,6 @@ describe('EditorToolbar', () => {
           });
 
           fireEvent(wrapper.getByTestId(testID), 'press');
-          expect(wrapper.getByTestId(testID)).toHaveStyle({
-            backgroundColor: theme.colors.highlightedSurface,
-          });
         });
 
         const standaloneButtonTestIDs = [
@@ -114,7 +111,7 @@ describe('EditorToolbar', () => {
           });
         });
 
-        expect(emmitedEvents).toMatchObject([
+        expect(emittedEvents).toMatchObject([
           'format-bold',
           'format-italic',
           'format-underlined',
@@ -124,6 +121,30 @@ describe('EditorToolbar', () => {
           'format-heading2',
         ]);
       });
+
+      it('should highlight buttons correctly', () => {
+        act(() => {
+          editorEventEmitter.emit('toolbar/editor-change', {
+            toolbarState: {
+              bold: true,
+              italic: true,
+              underline: true,
+              'heading-one': true,
+            },
+          });
+        });
+
+        [
+          'format-bold',
+          'format-italic',
+          'format-underlined',
+          'format-heading1',
+        ].forEach((testID) => {
+          expect(wrapper.getByTestId(testID)).toHaveStyle({
+            backgroundColor: theme.colors.highlightedSurface,
+          });
+        });
+      });
     });
   });
 });

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

@@ -206,6 +206,28 @@ describe('RichTextEditor', () => {
         });
       });
     });
+
+    describe('received event request-upsert-link', () => {
+      it('should emit correct data', () => {
+        const emittedEvents: string[] = [];
+        Events.on(
+          EditorEventEmitter,
+          'rich-text-editor/request-upsert-link',
+          () => {
+            emittedEvents.push('called');
+          }
+        );
+
+        act(() => {
+          onMessageOfLatestRendering({
+            nativeEvent: {
+              data: '{"type": "@hero-editor/webview/request-upsert-link", "data" : {}}',
+            },
+          });
+        });
+        expect(emittedEvents).toMatchObject(['called']);
+      });
+    });
   });
 
   describe('RichTextEditorRef methods', () => {

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

@@ -156,6 +156,7 @@ exports[`RichTextEditor onMessage received event editor-layout should update hei
               }
             }
             accessible={true}
+            bounces={false}
             focusable={true}
             hideKeyboardAccessoryView={true}
             keyboardDisplayRequiresUserAction={false}
@@ -185,6 +186,9 @@ exports[`RichTextEditor onMessage received event editor-layout should update hei
             body {
               margin: 0;
             }
+            a {
+              color: #401960;
+            }
           </style>
         </head>
         <body>
@@ -494,6 +498,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               }
             }
             accessible={true}
+            bounces={false}
             focusable={true}
             hideKeyboardAccessoryView={true}
             keyboardDisplayRequiresUserAction={false}
@@ -523,6 +528,9 @@ exports[`RichTextEditor should render correctly 1`] = `
             body {
               margin: 0;
             }
+            a {
+              color: #401960;
+            }
           </style>
         </head>
         <body>

package/src/components/RichTextEditor/constants.ts

@@ -6,9 +6,13 @@ export enum ToolbarEvents {
   NumberedList = 'numbered-list',
   HeadingOne = 'heading-one',
   HeadingTwo = 'heading-two',
+  AddLink = 'add-link',
+  ApplyLink = 'link',
 }
 
 export enum EditorEvents {
   EditorFocus = 'editor-focus',
   EditorBlur = 'editor-blur',
+  EditorChange = 'editor-change',
+  UpsertLink = 'request-upsert-link',
 }

package/src/components/RichTextEditor/hooks/useRichTextEditorEvents.ts

@@ -6,6 +6,23 @@ import type { EditorEvents, ToolbarEvents } from '../constants';
 
 type SubscribableEvent = ToolbarEvents | EditorEvents;
 
+type EventData = {
+  [EditorEvents.UpsertLink]: {
+    text: string;
+    url: string;
+  };
+  [EditorEvents.EditorChange]: {
+    value: string;
+    toolbarState: Record<string, boolean>;
+  };
+  [ToolbarEvents.ApplyLink]: {
+    text: string;
+    url: string;
+  };
+};
+
+type EventDataByEventName<T> = T extends keyof EventData ? EventData[T] : void;
+
 /**
  * Hook to subscribe to events for a rich text editor
  * @param editorName - The name of the editor to subscribe to events for
@@ -26,12 +43,12 @@ const useRichTextEditorEvents = (editorName: string) => {
   const subscribeToEvents = useCallback(
     <TEventName extends SubscribableEvent>(
       eventName: TEventName,
-      onEvent: (data: unknown) => void
+      onEvent: (data: EventDataByEventName<TEventName>) => void
     ) =>
       Events.on(
         emitter,
         normalizeEventName(eventName),
-        (eventData: unknown) => {
+        (eventData: EventDataByEventName<TEventName>) => {
           onEvent(eventData);
         }
       ),
@@ -44,7 +61,9 @@ const useRichTextEditorEvents = (editorName: string) => {
       data,
     }: {
       type: TEventName;
-      data: unknown;
+      data: TEventName extends keyof EventData
+        ? EventData[TEventName]
+        : unknown;
     }) => {
       Events.emit(emitter, normalizeEventName(type), data);
     },

package/src/components/Search/SearchOneLine.tsx

@@ -78,6 +78,10 @@ interface SearchOneLineProps extends NativeTextInputProps {
    * Clearable input.
    */
   clearable?: boolean;
+  /**
+   * If true, indicates that the SearchOneLine is accessible to screen readers.
+   */
+  accessible?: boolean;
 }
 
 export const getState = ({
@@ -129,6 +133,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
       testID,
       variant = 'basic',
       clearable = false,
+      accessible,
       ...nativeProps
     } = props;
 
@@ -191,6 +196,7 @@ const SearchOneLine = forwardRef<SearchOneLineHandles, SearchOneLineProps>(
         }
         testID={testID}
         style={style}
+        accessible={accessible}
       >
         <StyledInputContainer themeVariant={variant}>
           {renderPrefix({ prefix })}

package/src/components/Search/SearchTwoLine.tsx

@@ -39,6 +39,10 @@ interface SearchTwoLineProps {
    * @default 'basic'
    */
   variant?: 'basic' | 'reversed';
+  /**
+   * If true, indicates that the SearchTwoLine is accessible to screen readers.
+   */
+  accessible?: boolean;
 }
 
 const SearchTwoLine = (props: SearchTwoLineProps) => {
@@ -50,9 +54,10 @@ const SearchTwoLine = (props: SearchTwoLineProps) => {
     content,
     testID,
     variant = 'basic',
+    accessible,
   } = props;
   return (
-    <StyledContainer style={style} testID={testID}>
+    <StyledContainer style={style} testID={testID} accessible={accessible}>
       <StyledInputContainer themeVariant={variant}>
         {renderPrefix({ prefix })}
         <StyledHandlerContainer>

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1890,9 +1890,12 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
         <RCTSafeAreaView
           collapsable={false}
           style={
-            {
-              "margin": 16,
-            }
+            [
+              {
+                "margin": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1802,9 +1802,12 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
         <RCTSafeAreaView
           collapsable={false}
           style={
-            {
-              "margin": 16,
-            }
+            [
+              {
+                "margin": 16,
+              },
+              undefined,
+            ]
           }
         >
           <View

package/src/components/Switch/__tests__/__snapshots__/StyledSwitch.spec.tsx.snap

@@ -11,12 +11,15 @@ exports[`StyledKnot renders correct style 1`] = `
   <View
     collapsable={false}
     style={
-      {
-        "backgroundColor": "#ffffff",
-        "borderRadius": 999,
-        "height": 16,
-        "width": 16,
-      }
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+          "height": 16,
+          "width": 16,
+        },
+        undefined,
+      ]
     }
   />
   <View