BA-2197: default social input send behavior (#199)

* Default social input send behavior

* Versioning

Author: Ronan-Fernandes

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.0.7
+
+### Patch Changes
+
+- Enhanced the SocialInput component by introducing an optional keydown handler prop. This update enables custom keyboard event handling, with default behavior triggering submission on CTRL + Enter.
+
 ## 1.0.6
 
 ### Patch Changes

packages/components/modules/__shared__/web/SocialInput/__storybook__/SocialInput.mdx

@@ -30,6 +30,7 @@ import { Meta } from '@storybook/addon-docs'
 - **submit** (function): Form submission handler.
 - **onCancelReply** (function, optional): Handler for canceling a reply.
 - **form** (UseFormReturn): react-hook-form form instance.
+- **onKeyDown** (function, optional): Custom keydown handler for the input field. Defaults to send with CTRL + Enter
 
 ## Notes
 
@@ -63,6 +64,12 @@ const MyComponent = () => {
       submit={() => {}}
       onCancelReply={() => {}}
       form={useForm()}
+      onKeyDown={(event, onSubmit) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+          event.preventDefault()
+          onSubmit()
+        }
+      }}
     />
   )
 }

packages/components/modules/__shared__/web/SocialInput/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { KeyboardEventHandler, forwardRef } from 'react'
+import { KeyboardEvent, KeyboardEventHandler, forwardRef } from 'react'
 
 import { SocialTextField as DefaultSocialTextField } from '@baseapp-frontend/design-system/components/web/inputs'
 
@@ -68,6 +68,7 @@ const SocialInput = forwardRef<HTMLInputElement, SocialInputProps>(
       SocialUpsertActions = DefaultSocialUpsertActions,
       SubmitActions = DefaultSubmitActions,
       SubmitActionsProps = {},
+      onKeyDown,
       formId = 'text-field-form',
       submit,
       isLoading,
@@ -78,10 +79,18 @@ const SocialInput = forwardRef<HTMLInputElement, SocialInputProps>(
     },
     ref,
   ) => {
-    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
+    const defaultKeyDown = (event: KeyboardEvent<HTMLDivElement>, onSubmit: VoidFunction) => {
+      if (event.key === 'Enter' && event.ctrlKey) {
         event.preventDefault()
-        form.handleSubmit(submit)(event)
+        onSubmit()
+      }
+    }
+
+    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+      if (onKeyDown) {
+        onKeyDown(event, () => form.handleSubmit(submit)(event))
+      } else {
+        defaultKeyDown(event, () => form.handleSubmit(submit)(event))
       }
     }
 

packages/components/modules/__shared__/web/SocialInput/types.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, KeyboardEvent } from 'react'
 
 import { SocialTextFieldProps } from '@baseapp-frontend/design-system/components/web/inputs'
 
@@ -15,6 +15,7 @@ export interface SocialInputProps {
   SocialUpsertActions?: FC
   SubmitActions?: FC<SubmitActionsProps>
   SubmitActionsProps?: Partial<SubmitActionsProps>
+  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>, onSubmit: VoidFunction) => void
   formId?: string
   submit: (data: SocialUpsertForm) => void
   isLoading: boolean

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "sideEffects": false,
   "scripts": {
     "babel:bundle": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",