react-core-ts 1.3.31 → 1.3.33

package/src/AutoCompleteWithSelectedList.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, TabPops, ValueProps } from './commontypes';
@@ -73,9 +66,9 @@ const AutoCompleteWithSelectedList = forwardRef<
     const dropdownRef = useRef<HTMLDivElement>(null);
     const dropdownSelectedRef = useRef<HTMLDivElement>(null);
     const tabRef = useRef<HTMLUListElement>(null);
+    const dropLevelRef = useRef<string>('bottom');
     // State Hooks Section
     const [isInitialRender, setIsInitialRender] = useState(true);
-
     const [inputValue, setInputValue] = useState<string>(value);
     const [searchValue, setSearchValue] = useState<string>('');
     const [searchOldValue, setSearchOldValue] = useState<string>('');
@@ -121,9 +114,11 @@ const AutoCompleteWithSelectedList = forwardRef<
           if (tabRef?.current) dropdownHeight += tabRef?.current?.clientHeight;
         }
         if (spaceBelow >= dropdownHeight) {
+          dropLevelRef.current = 'bottom';
           dropdownPosition.top =
             inputRect.top + window.scrollY + inputRect.height;
         } else {
+          dropLevelRef.current = 'top';
           dropdownPosition.top =
             inputRect.top + window.scrollY - dropdownHeight + 73 + topMargin;
         }
@@ -514,8 +509,8 @@ const AutoCompleteWithSelectedList = forwardRef<
       );
     };
     useEffect(() => {
-      handleUpdateParent?.(dropOpen);
-    }, [dropOpen]);
+      handleUpdateParent?.(dropOpen, dropLevelRef.current)
+    }, [dropOpen, dropLevelRef.current]);
     return (
       <div className={fullWidth ? 'fullWidth' : 'autoWidth'} ref={dropdownRef}>
         {label && (

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';
@@ -80,7 +73,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
     const [dropDownData, setDropDownData] = useState<ValueProps[]>(data);
     const inputRef = useRef(null);
     const dropRef = useRef(null);
-
+    const dropLevelRef = useRef<string>('bottom');
     useEffect(() => {
       if (data) {
         if (flatArray) {
@@ -91,6 +84,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
       }
     }, [data, dropOpen]);
     useImperativeHandle(ref, () => inputRef.current);
+
     const [dropdownStyle, setDropdownStyle] = useState({
       top: 0,
       left: 0,
@@ -113,9 +107,11 @@ const AutoCompleteWithTreeStructure = forwardRef<
         if (spaceBelow >= dropdownHeight) {
           dropdownPosition.top =
             inputRect.top + window.scrollY + inputRect.height;
+          dropLevelRef.current = 'bottom';
         } else {
           dropdownPosition.top =
             inputRect.top + window.scrollY - dropdownHeight + 73;
+          dropLevelRef.current = 'top';
         }
 
         setDropdownStyle({
@@ -210,8 +206,8 @@ const AutoCompleteWithTreeStructure = forwardRef<
       }
     };
     useEffect(() => {
-      handleUpdateParent?.(dropOpen);
-    }, [dropOpen]);
+      handleUpdateParent?.(dropOpen, dropLevelRef.current)
+    }, [dropOpen, dropLevelRef.current]);
     const generateClassName = useCallback(() => {
       return `qbs-textfield-default ${className} ${
         errors && errors?.message ? 'textfield-error' : 'tree-textfield'
@@ -576,7 +572,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
               <ul
                 ref={dropRef}
                 style={{ ...dropdownStyle, minHeight: 192 }}
-                className={`qbs-autocomplete-suggestions p-5`}
+                className={`qbs-autocomplete-suggestions `}
               >
                 {type == 'auto_suggestion' && !expandable && (
                   <div
@@ -600,7 +596,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
                     gap: isTreeDropdown ? '8px' : '0',
                     minHeight: isTreeDropdown ? '184px' : '0',
                   }}
-                  className={`qbs-autocomplete-suggestions-sub `}
+                  className={`qbs-autocomplete-suggestions-sub padding-class `}
                 >
                   {dropDownData?.length > 0 ? (
                     dropDownData.map((suggestion: any, idx: number) => (

package/src/commontypes.ts

@@ -63,7 +63,7 @@ export interface AutoSuggestionInputProps {
   currentTab?: number; // current active tab
   selectedLabel?: string; // Able to change the "Item selected" label
   viewMode?: boolean; // show only selected items
-  handleUpdateParent?: (val:boolean) => void;
+  handleUpdateParent?: (val: boolean, level?: string) => void;
 }
 export interface IconsProps {
   name: any;

package/src/styles/components/autocomplete.css

@@ -236,7 +236,7 @@ body * {
   overflow: hidden;
 }
 .qbs-expandable-container .qbs-textfield-expandable::after {
-  content: attr(data-value) " ";
+  content: attr(data-value) ' ';
   visibility: hidden;
   white-space: pre;
   grid-area: 1 / 2;
@@ -315,6 +315,9 @@ body * {
   flex-direction: column;
   gap: 4px;
 }
+.padding-class {
+  padding: 12px !important;
+}
 .qbs-autocomplete-listitem-container {
   display: flex;
   align-items: center;
@@ -598,7 +601,7 @@ span.dropdown-search-icon {
 
 .qbs-table-tooltip .tooltiptext::after,
 .tooltiptext::after {
-  content: "";
+  content: '';
   position: absolute;
   border-width: 5px;
   border-style: solid;