react-core-ts 1.3.74 → 1.3.75

package/src/AutoCompleteWithTreeStructure.tsx

@@ -1,11 +1,4 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import { AutoSuggestionInputProps } from './commontypes';
@@ -70,6 +63,8 @@ const AutoCompleteWithTreeStructure = forwardRef<
       showIcon,
       handleShowIcon,
       hasDisableSelection,
+      inputType = 'text',
+      onFocusTreeDropdown,
     },
     ref
   ) => {
@@ -600,6 +595,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
             className={`qbs-textfield-expandable ${
               !expandable ? 'qbs-normal' : ''
             }`}
+            style={{ width: inputType === 'text' ? '100%' : 'auto' }}
             data-value={
               selectedItems?.length > 0 || searchValue
                 ? searchValue
@@ -607,29 +603,59 @@ const AutoCompleteWithTreeStructure = forwardRef<
             }
             onClick={() => onInputFocus()}
           >
-            <input
-              id={id}
-              ref={inputRef}
-              type="text"
-              value={
-                type === 'auto_suggestion' && !expandable
-                  ? inputValue
-                  : inputValue
-              }
-              onChange={handleChange}
-              // onBlur={handleBlur}
-              onFocus={onFocus}
-              onClick={() => handleOnClick()}
-              className={generateClassName()}
-              placeholder={selectedItems?.length > 0 ? '' : placeholder ?? ''}
-              readOnly={
-                readOnly ||
-                type === 'custom_select' ||
-                (type == 'auto_suggestion' && !expandable)
-              }
-              disabled={disabled}
-              data-testid="custom-autocomplete"
-            />
+            {inputType === 'text' ? (
+              <input
+                id={id}
+                ref={inputRef}
+                type="text"
+                value={
+                  type === 'auto_suggestion' && !expandable
+                    ? inputValue
+                    : inputValue
+                }
+                onChange={handleChange}
+                // onBlur={handleBlur}
+                onFocus={onFocus}
+                onClick={() => handleOnClick()}
+                className={generateClassName()}
+                placeholder={selectedItems?.length > 0 ? '' : placeholder ?? ''}
+                readOnly={
+                  readOnly ||
+                  type === 'custom_select' ||
+                  (type == 'auto_suggestion' && !expandable)
+                }
+                disabled={disabled}
+                data-testid="custom-autocomplete"
+              />
+            ) : (
+              <textarea
+                id={id}
+                ref={inputRef}
+                value={inputValue}
+                // onChange={handleChange}
+                onFocus={onFocusTreeDropdown}
+                onClick={() => handleOnClick()}
+                className={`${generateClassName()} resize-none overflow-y-auto`}
+                placeholder={selectedItems?.length > 0 ? '' : placeholder ?? ''}
+                readOnly={
+                  readOnly ||
+                  type === 'custom_select' ||
+                  (type == 'auto_suggestion' && !expandable)
+                }
+                disabled={disabled}
+                data-testid="custom-autocomplete"
+                rows={4} // Set initial rows to 4
+                style={{
+                  height: 'auto', // Allow it to expand
+                  minHeight: '80px', // Approx. 4 lines of text
+                  maxHeight: '160px', // Restrict max height to prevent large expansion
+                  overflowY: 'auto', // Add scrollbar when exceeding 4 lines
+                  wordWrap: 'break-word', // Ensure long words wrap correctly
+                  whiteSpace: 'pre-wrap', // Preserve line breaks & spacing
+                }}
+              />
+            )}
+            )
           </div>
 
           {/* Icons for Clearing Input or Toggling Dropdown */}

package/src/commontypes.ts

@@ -69,6 +69,10 @@ export interface AutoSuggestionInputProps {
   showIcon?: boolean;
   handleShowIcon?: (node: any) => boolean;
   hasDisableSelection?: (node: any) => boolean;
+  onFocusTreeDropdown?: (
+    e: React.FocusEvent<HTMLTextAreaElement, Element>
+  ) => void;
+  inputType?: 'text' | 'textarea';
 }
 export interface IconsProps {
   name: any;
@@ -144,6 +148,7 @@ export interface TextFieldProps {
   onCreatableChange?: (e: string[]) => void;
   infoTitle?: string;
   showInfo?: boolean;
+  inputType?: 'text' | 'textarea';
 }
 
 export interface TextAreaProps {