react-core-ts 1.0.10 → 1.0.12

package/docs/App.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import {AutoComplete, ExpandableAutoComplete} from '../src/index';
+import { AutoComplete, ExpandableAutoComplete } from '../src/index';
 
 import '../src/styles/global.css';
 
@@ -51,6 +51,35 @@ export default function App() {
             maxWidth: 700,
           }}
         >
+          <div className="autocomplete-section">
+            <h2>Expandable Auto Suggestion</h2>
+            <p>
+              As you type, suggestions will appear based on your input, aiding
+              in quicker and potentially more accurate data entry. This mode
+              supports both listed and non-listed input, providing flexibility
+              in user input while still offering assistance.
+            </p>
+          </div>
+          <div style={{ width: 300 }}>
+            <ExpandableAutoComplete
+              label="Auto Suggestion"
+              name="sample"
+              type="auto_suggestion"
+              // async
+              desc="name"
+              isMultiple
+              expandable={true}
+              descId="id"
+              paginationEnabled={false}
+              initialLoad={true}
+              itemCount={5}
+              // nextBlock={nexBlock}
+              placeholder="Auto Suggestion Suggestion Suggestion Suggestion"
+              selectedItems={[{ name: 'test', id: '1' }]}
+              getData={getData}
+              onChange={(e) => console.log(e, 'onchange')}
+            />
+          </div>
           <div className="autocomplete-section">
             <h2>Custom Select</h2>
             <p>
@@ -231,7 +260,7 @@ export default function App() {
               initialLoad={true}
               itemCount={5}
               // nextBlock={nexBlock}
-              placeholder="Auto Suggestion"
+              placeholder="Auto Suggestion Suggestion Suggestion Suggestion"
               selectedItems={[{ name: 'test', id: '1' }]}
               getData={getData}
               onChange={(e) => console.log(e, 'onchange')}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ExpandableAutoComplete.tsx

@@ -1,11 +1,5 @@
-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';
 import { useSuggestions } from './utilities/autosuggestions';
@@ -68,23 +62,41 @@ const ExpandableAutoComplete = forwardRef<
     const [dropOpen, setDropOpen] = useState<boolean>(false);
     const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
     // API call for suggestions through a custom hook
-    const [dropdownPosition, setDropdownPosition] = useState('bottom');
     const inputRef = useRef(null);
     const dropRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
+    const [dropdownStyle, setDropdownStyle] = useState({
+      top: 0,
+      left: 0,
+      width: 200,
+    });
 
     const adjustDropdownPosition = () => {
-      if (inputRef.current && dropRef.current) {
-        const inputBoxRect = inputRef.current.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-
-        const spaceAbove = inputBoxRect.top;
-        const spaceBelow = viewportHeight - inputBoxRect.bottom;
-        if (spaceAbove > spaceBelow) {
-          setDropdownPosition('top');
+      if (dropdownRef.current) {
+        const inputRect = dropdownRef.current.getBoundingClientRect();
+        const dropdownPosition = {
+          left: inputRect.left + window.scrollX,
+          width: inputRect.width,
+          top: 0,
+        };
+        // Check if there's enough space below the input for the dropdown
+        const spaceBelow = window.innerHeight - inputRect.bottom;
+        const dropdownHeight = 275; // Assume a fixed height or calculate based on content
+
+        if (spaceBelow >= dropdownHeight) {
+          dropdownPosition.top = inputRect.bottom + window.scrollY;
         } else {
-          setDropdownPosition('bottom');
+          dropdownPosition.top =
+            inputRect.top +
+            window.scrollY -
+            dropdownHeight +
+            inputRect.height +
+            20;
         }
+
+        setDropdownStyle({
+          ...dropdownPosition,
+        });
       }
     };
 
@@ -97,6 +109,15 @@ const ExpandableAutoComplete = forwardRef<
       };
     }, [dropOpen]);
 
+    useEffect(() => {
+      window.addEventListener('resize', adjustDropdownPosition);
+      adjustDropdownPosition();
+
+      return () => {
+        window.removeEventListener('resize', adjustDropdownPosition);
+      };
+    }, []);
+
     const { suggestions, isLoading, handlePickSuggestions } = useSuggestions(
       getData,
       data,
@@ -275,7 +296,6 @@ const ExpandableAutoComplete = forwardRef<
             .map((item) => item[desc])
             .join(', ')
         : '';
-
     return (
       <div className={fullWidth ? 'fullWidth' : 'autoWidth'} ref={dropdownRef}>
         {label && (
@@ -412,31 +432,34 @@ const ExpandableAutoComplete = forwardRef<
           {/* Displaying Loading Spinner */}
 
           {/* Suggestions Dropdown */}
-          {dropOpen && (
-            <ul
-              ref={dropRef}
-              className={`qbs-autocomplete-suggestions ${dropdownPosition}`}
-            >
-              {type == 'auto_suggestion' && !expandable && (
-                <div
-                  style={{ position: 'relative' }}
-                  className="react-core-ts-search-container"
-                >
-                  <span className="dropdown-search-icon">
-                    <Search />
-                  </span>
-                  <input
-                    className="dropdown-search-input"
-                    onChange={handleSuggestionChange}
-                    value={searchValue}
-                    placeholder="Search"
-                  />
-                </div>
-              )}
 
-              <div className="qbs-autocomplete-suggestions-sub">
-                {/* Displaying Suggestions or Not Found Message */}
-                {/* {isLoading && ( 
+          {dropOpen &&
+            ReactDOM.createPortal(
+              <ul
+                ref={dropRef}
+                style={{ ...dropdownStyle, minHeight: 192 }}
+                className={`qbs-autocomplete-suggestions`}
+              >
+                {type == 'auto_suggestion' && !expandable && (
+                  <div
+                    style={{ position: 'relative' }}
+                    className="react-core-ts-search-container"
+                  >
+                    <span className="dropdown-search-icon">
+                      <Search />
+                    </span>
+                    <input
+                      className="dropdown-search-input"
+                      onChange={handleSuggestionChange}
+                      value={searchValue}
+                      placeholder="Search"
+                    />
+                  </div>
+                )}
+
+                <div className="qbs-autocomplete-suggestions-sub">
+                  {/* Displaying Suggestions or Not Found Message */}
+                  {/* {isLoading && ( 
               <div style={{ display: 'flex', justifyContent: 'center' }}>
                 <span>
                   <Spinner />
@@ -445,87 +468,90 @@ const ExpandableAutoComplete = forwardRef<
 
               {/* )} */}
 
-                {filteredData?.length > 0 ? (
-                  filteredData.map((suggestion: ValueProps, idx: number) => (
-                    <div
-                      key={idx.toString()}
-                      className={`qbs-autocomplete-listitem-container ${
-                        (isMultiple || singleSelect) &&
-                        'qbs-autocomplete-checkbox-container'
-                      } ${
-                        isSelected(suggestion, selected) ? 'is-selected' : ''
-                      }`}
-                    >
-                      {(isMultiple || singleSelect) && (
-                        <div className="qbs-autocomplete-checkbox">
-                          <input
-                            onChange={(e) => handleMultiSelect(e, suggestion)}
-                            type="checkbox"
-                            checked={isSelected(suggestion, selected)}
-                            id={`qbs-checkbox-${idx.toString()}`}
-                          />
-                          <label htmlFor={`qbs-checkbox-${idx.toString()}`}>
-                            <svg
-                              width="8"
-                              height="6"
-                              viewBox="0 0 8 6"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
-                                fill="white"
-                              />
-                            </svg>
-                          </label>
-                        </div>
-                      )}
-                      <li
-                        key={idx}
-                        className={`qbs-autocomplete-suggestions-item ${
+                  {filteredData?.length > 0 ? (
+                    filteredData.map((suggestion: ValueProps, idx: number) => (
+                      <div
+                        key={idx.toString()}
+                        className={`qbs-autocomplete-listitem-container ${
+                          (isMultiple || singleSelect) &&
+                          'qbs-autocomplete-checkbox-container'
+                        } ${
                           isSelected(suggestion, selected) ? 'is-selected' : ''
                         }`}
-                        onClick={() => handleSuggestionClick(suggestion)}
-                        data-testid={suggestion[desc]}
                       >
-                        {suggestion[desc]}
-                      </li>
-                    </div>
-                  ))
-                ) : (
-                  <>
-                    {isLoading ? (
+                        {(isMultiple || singleSelect) && (
+                          <div className="qbs-autocomplete-checkbox">
+                            <input
+                              onChange={(e) => handleMultiSelect(e, suggestion)}
+                              type="checkbox"
+                              checked={isSelected(suggestion, selected)}
+                              id={`qbs-checkbox-${idx.toString()}`}
+                            />
+                            <label htmlFor={`qbs-checkbox-${idx.toString()}`}>
+                              <svg
+                                width="8"
+                                height="6"
+                                viewBox="0 0 8 6"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
+                                  fill="white"
+                                />
+                              </svg>
+                            </label>
+                          </div>
+                        )}
+                        <li
+                          key={idx}
+                          className={`qbs-autocomplete-suggestions-item ${
+                            isSelected(suggestion, selected)
+                              ? 'is-selected'
+                              : ''
+                          }`}
+                          onClick={() => handleSuggestionClick(suggestion)}
+                          data-testid={suggestion[desc]}
+                        >
+                          {suggestion[desc]}
+                        </li>
+                      </div>
+                    ))
+                  ) : (
+                    <>
+                      {isLoading ? (
+                        <div
+                          style={{ display: 'flex', justifyContent: 'center' }}
+                        >
+                          <span>
+                            <Spinner />
+                          </span>
+                        </div>
+                      ) : (
+                        <li
+                          className="qbs-autocomplete-notfound"
+                          onClick={handleBlur}
+                        >
+                          {notDataMessage ?? 'No Results Found'}
+                        </li>
+                      )}
+                    </>
+                  )}
+                  {paginationEnabled &&
+                    nextBlock !== 0 &&
+                    nextBlock !== undefined &&
+                    filteredData?.length > 0 && (
                       <div
-                        style={{ display: 'flex', justifyContent: 'center' }}
+                        className="loadMoreSection"
+                        onClick={() => handleLoadMore()}
                       >
-                        <span>
-                          <Spinner />
-                        </span>
+                        <p style={{ margin: 2 }}>Load More</p>
                       </div>
-                    ) : (
-                      <li
-                        className="qbs-autocomplete-notfound"
-                        onClick={handleBlur}
-                      >
-                        {notDataMessage ?? 'No Results Found'}
-                      </li>
                     )}
-                  </>
-                )}
-                {paginationEnabled &&
-                  nextBlock !== 0 &&
-                  nextBlock !== undefined &&
-                  filteredData?.length > 0 && (
-                    <div
-                      className="loadMoreSection"
-                      onClick={() => handleLoadMore()}
-                    >
-                      <p style={{ margin: 2 }}>Load More</p>
-                    </div>
-                  )}
-              </div>
-            </ul>
-          )}
+                </div>
+              </ul>,
+              document.body
+            )}
         </div>
 
         {/* Displaying Validation Error */}

package/src/index.tsx

@@ -3,7 +3,7 @@ import './styles/global.css';
 export { default as AutoComplete } from './AutoComplete';
 export { default as CustomAutoComplete } from './AutoComplete';
 export { default as ExpandableAutoComplete } from './ExpandableAutoComplete';
-
+export { default as ExpandableToolTip } from './utilities/expandableTootltip';
 export { default as ToolTip } from './utilities/tooltip';
 export { deepEqual } from './utilities/deepEqual';
 export type { AutoSuggestionInputProps } from './commontypes';

package/src/styles/components/autocomplete.css

@@ -205,7 +205,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;
@@ -218,7 +218,7 @@ body * {
 }
 .qbs-expandable-container .qbs-textfield-expandable input {
   opacity: 1;
-  width: 100%;
+  width: auto;
   grid-area: 1 / 2;
   min-width: 10px;
   border: 0px;
@@ -522,7 +522,8 @@ span.dropdown-search-icon {
   cursor: pointer;
 }
 
-.qbs-table-tooltip .tooltiptext, .tooltiptext {
+.qbs-table-tooltip .tooltiptext,
+.tooltiptext {
   visibility: hidden;
   background-color: #000;
   color: #fff;
@@ -556,21 +557,24 @@ span.dropdown-search-icon {
   opacity: 1;
 }
 
-.qbs-table-tooltip .tooltiptext::after, .tooltiptext::after {
-  content: "";
+.qbs-table-tooltip .tooltiptext::after,
+.tooltiptext::after {
+  content: '';
   position: absolute;
   border-width: 5px;
   border-style: solid;
 }
 
-.qbs-table-tooltip.up .tooltiptext::after, .up.tooltiptext::after {
+.qbs-table-tooltip.up .tooltiptext::after,
+.up.tooltiptext::after {
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-color: #000 transparent transparent transparent;
 }
 
-.qbs-table-tooltip.down .tooltiptext::after, .down.tooltiptext::after {
+.qbs-table-tooltip.down .tooltiptext::after,
+.down.tooltiptext::after {
   bottom: 100%;
   left: 50%;
   margin-left: -5px;

package/src/utilities/expandableTootltip.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useRef, useLayoutEffect, useEffect } from "react";
-import ReactDOM from "react-dom";
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 
 const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
-  const [dropdownPosition, setDropdownPosition] = useState("bottom-position");
+  const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
   const dropRef = useRef(null);
   const menuButtonRef = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
@@ -20,16 +20,16 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
       const spaceBelow = viewportHeight - inputBoxRect.bottom;
       if (spaceAbove > spaceBelow) {
         if (spaceAbove > 90 && spaceBelow < 120) {
-          return "top-position";
+          return 'top-position';
         } else {
-          return "bottom-position";
+          return 'bottom-position';
         }
       } else {
         const diff: number = spaceBelow - spaceAbove;
         if (spaceAbove > 90 && spaceBelow > 90 && diff < 90) {
-          return "top-position";
+          return 'top-position';
         } else {
-          return "bottom-position";
+          return 'bottom-position';
         }
       }
     }
@@ -44,7 +44,7 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
       let left = rect.left + window.scrollX;
       const height = rect.height;
       const width = dropRef?.current?.offsetWidth;
-      if (dropPosition === "bottom-position") {
+      if (dropPosition === 'bottom-position') {
         top = top + height / 2 - 5;
       } else {
         top = top - height * 2 + 15;
@@ -77,7 +77,7 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
               : prevStyle.left + boxWidth / 2 - tooltipWidth / 2,
           width: tooltipWidth,
           top:
-            dropdownPosition === "bottom-position"
+            dropdownPosition === 'bottom-position'
               ? prevStyle.top
               : prevStyle.top - tooltipHeight,
         }));
@@ -88,10 +88,10 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
       updateTooltipPosition();
     }
 
-    window.addEventListener("resize", updateTooltipPosition);
+    window.addEventListener('resize', updateTooltipPosition);
 
     return () => {
-      window.removeEventListener("resize", updateTooltipPosition);
+      window.removeEventListener('resize', updateTooltipPosition);
     };
   }, [visible, dropdownPosition]);
 
@@ -102,47 +102,45 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
 
   return (
-    <>
-      <div
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        ref={menuButtonRef}
-        style={{ display: "flex" }}
-      >
-        {children}
+    <div
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      ref={menuButtonRef}
+      style={{ display: 'flex' }}
+    >
+      {children}
 
-        {visible &&
-          enabled &&
-          tooltipStyle &&
-          ReactDOM.createPortal(
-            <span
-              ref={(node) => (dropRef.current = node)}
-              className={`tooltiptext  ${
-                dropdownPosition == "bottom-position" ? "down" : "up"
-              }`}
-              style={{
-                top: tooltipStyle.top,
-                left: tooltipStyle.left,
-                opacity: 1,
-                width: tooltipStyle.width,
-                minWidth: "60px",
-                maxWidth: "200px",
-                visibility: "visible",
-              }}
-            >
-              {title}
-            </span>,
-            document.body
-          )}
-      </div>
-    </>
+      {visible &&
+        enabled &&
+        tooltipStyle &&
+        ReactDOM.createPortal(
+          <span
+            ref={(node) => (dropRef.current = node)}
+            className={`tooltiptext  ${
+              dropdownPosition == 'bottom-position' ? 'down' : 'up'
+            }`}
+            style={{
+              top: tooltipStyle.top,
+              left: tooltipStyle.left,
+              opacity: 1,
+              width: tooltipStyle.width,
+              minWidth: '60px',
+              maxWidth: '200px',
+              visibility: 'visible',
+            }}
+          >
+            {title}
+          </span>,
+          document.body
+        )}
+    </div>
   );
 };