react-core-ts 1.0.22 → 1.0.24

package/src/ExpandableAutoComplete.tsx

@@ -5,16 +5,18 @@ import React, {
   useImperativeHandle,
   useRef,
   useState,
-} from 'react';
-import ReactDOM from 'react-dom';
-
-import { AutoSuggestionInputProps } from './commontypes';
-import { useSuggestions } from './utilities/autosuggestions';
-import { debounce } from './utilities/debounce';
-import { deepEqual } from './utilities/deepEqual';
-import { default as Tooltip } from './utilities/expandableTootltip';
-import { filterSuggestions } from './utilities/filterSuggestions';
-import { Close, DropArrow, Search, Spinner } from './utilities/icons';
+} from "react";
+import ReactDOM from "react-dom";
+
+import { AutoSuggestionInputProps } from "./commontypes";
+import DropdownList from "./components/DropdownList";
+import InputActions from "./components/InputActions";
+import { useSuggestions } from "./utilities/autosuggestions";
+import { debounce } from "./utilities/debounce";
+import { deepEqual } from "./utilities/deepEqual";
+import { default as Tooltip } from "./utilities/expandableTootltip";
+import { filterSuggestions } from "./utilities/filterSuggestions";
+import { Search, Spinner } from "./utilities/icons";
 
 type ValueProps = {
   [key: string]: string;
@@ -35,14 +37,14 @@ const ExpandableAutoComplete = forwardRef<
       fullWidth = false,
       placeholder,
       id,
-      type = 'custom_select',
+      type = "custom_select",
       selectedItems: propsSeelctedItems = [],
       readOnly = false,
       disabled = false,
       value,
       isMultiple = false,
-      desc = 'name',
-      descId = 'id',
+      desc = "name",
+      descId = "id",
       singleSelect,
       className,
       async = false,
@@ -57,6 +59,7 @@ const ExpandableAutoComplete = forwardRef<
       textCount = 10,
       itemCount = 1,
       scrollRef,
+      isTreeDropdown = false,
     },
     ref
   ) => {
@@ -65,7 +68,7 @@ const ExpandableAutoComplete = forwardRef<
     const [isInitialRender, setIsInitialRender] = useState(true);
 
     const [inputValue, setInputValue] = useState<string>(value);
-    const [searchValue, setSearchValue] = useState<string>('');
+    const [searchValue, setSearchValue] = useState<string>("");
     const [nextPage, setNextPage] = useState<number | undefined>(1);
     const [dropOpen, setDropOpen] = useState<boolean>(false);
     const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
@@ -107,11 +110,11 @@ const ExpandableAutoComplete = forwardRef<
     };
 
     useEffect(() => {
-      window.addEventListener('resize', adjustDropdownPosition);
+      window.addEventListener("resize", adjustDropdownPosition);
       adjustDropdownPosition();
 
       return () => {
-        window.removeEventListener('resize', adjustDropdownPosition);
+        window.removeEventListener("resize", adjustDropdownPosition);
       };
     }, [dropOpen, selectedItems]);
 
@@ -136,7 +139,7 @@ const ExpandableAutoComplete = forwardRef<
       } else {
         setInputValue(suggestion[desc]);
       }
-      setSearchValue('');
+      setSearchValue("");
       setInputValue(suggestion[desc]);
       onChange(suggestion);
       setDropOpen(false);
@@ -144,7 +147,7 @@ const ExpandableAutoComplete = forwardRef<
 
     // Adding debounce to avoid making API calls on every keystroke
     const handleChangeWithDebounce = debounce((value) => {
-      if ((type === 'auto_complete' || type === 'auto_suggestion') && async) {
+      if ((type === "auto_complete" || type === "auto_suggestion") && async) {
         handlePickSuggestions(value, 1);
       }
     }, 1000);
@@ -166,7 +169,7 @@ const ExpandableAutoComplete = forwardRef<
           setInputValue(suggestion[desc]);
           onChange(suggestion);
         } else {
-          setInputValue('');
+          setInputValue("");
         }
       }
     };
@@ -176,7 +179,7 @@ const ExpandableAutoComplete = forwardRef<
     }, [propsSeelctedItems]);
     // Effect to set the input value whenever `value` prop changes
     useEffect(() => {
-      setInputValue(value ?? '');
+      setInputValue(value ?? "");
     }, [value]);
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -185,7 +188,7 @@ const ExpandableAutoComplete = forwardRef<
       setSearchValue(value);
       handleChangeWithDebounce(value);
       if (!value) {
-        setInputValue('');
+        setInputValue("");
         // onChange({ [descId]: '', [desc]: '' });
       }
     };
@@ -204,19 +207,19 @@ const ExpandableAutoComplete = forwardRef<
 
     const handleClear = () => {
       if (searchValue) {
-        setSearchValue('');
+        setSearchValue("");
         setDropOpen(false);
       } else {
-        setInputValue('');
-        onChange({ [descId]: '', [desc]: '' });
+        setInputValue("");
+        onChange({ [descId]: "", [desc]: "" });
         setDropOpen(false);
       }
     };
 
     const generateClassName = useCallback(() => {
       return `qbs-textfield-default ${className} ${
-        errors && errors?.message ? 'textfield-error' : 'textfield'
-      } ${expandable ? 'expandable' : ''}`;
+        errors && errors?.message ? "textfield-error" : "textfield"
+      } ${expandable ? "expandable" : ""}`;
     }, [errors, name]);
     const handleRemoveSelectedItem = (index: number) => {
       setSelectedItems((prev) => {
@@ -238,33 +241,33 @@ const ExpandableAutoComplete = forwardRef<
           dropRef.current &&
           event.target instanceof Node &&
           !dropRef.current.contains(event.target) &&
-          event.target.nodeName !== 'svg'
+          event.target.nodeName !== "svg"
         ) {
           setDropOpen(false);
-          setSearchValue('');
+          setSearchValue("");
         }
       };
-      document.addEventListener('mousedown', handleClickOutside as any);
-      window.addEventListener('scroll', handleClickOutside as any);
+      document.addEventListener("mousedown", handleClickOutside as any);
+      window.addEventListener("scroll", handleClickOutside as any);
 
       const scrollableDivs = document.querySelectorAll(
         'div[style*="overflow"]'
       );
       scrollableDivs.forEach((div) =>
-        div.addEventListener('scroll', handleClickOutside as any)
+        div.addEventListener("scroll", handleClickOutside as any)
       );
       if (scrollRef && scrollRef.current && scrollRef.current !== null) {
-        scrollRef.current.addEventListener('scroll', handleClickOutside as any);
+        scrollRef.current.addEventListener("scroll", handleClickOutside as any);
       }
       return () => {
-        document.removeEventListener('mousedown', handleClickOutside as any);
-        window.removeEventListener('scroll', handleClickOutside as any);
+        document.removeEventListener("mousedown", handleClickOutside as any);
+        window.removeEventListener("scroll", handleClickOutside as any);
         scrollableDivs.forEach((div) =>
-          div.removeEventListener('scroll', handleClickOutside as any)
+          div.removeEventListener("scroll", handleClickOutside as any)
         );
         if (scrollRef && scrollRef.current && scrollRef.current !== null) {
           scrollRef.current.removeEventListener(
-            'scroll',
+            "scroll",
             handleClickOutside as any
           );
         }
@@ -279,7 +282,8 @@ const ExpandableAutoComplete = forwardRef<
       type,
       desc,
       selected,
-      async
+      async,
+      isTreeDropdown
     );
     const isSelected = (
       item: ValueProps,
@@ -302,7 +306,7 @@ const ExpandableAutoComplete = forwardRef<
     };
 
     const handleOnClick = () => {
-      !disabled && !readOnly ? setDropOpen(true) : '';
+      !disabled && !readOnly ? setDropOpen(true) : "";
     };
     const onInputFocus = () => {
       if (inputRef.current) inputRef.current.focus();
@@ -314,27 +318,25 @@ const ExpandableAutoComplete = forwardRef<
         ? selectedItems
             ?.slice(itemCount)
             .map((item) => item[desc])
-            .join(', ')
-        : '';
+            .join(", ")
+        : "";
 
     const handleDropOpen = (e: any) => {
-      console.log('Attempting to open dropdown');
       if (!dropOpen) setDropOpen(true);
     };
 
     const handleDropClose = (e: any) => {
-      console.log('Attempting to close dropdown');
       if (dropOpen) setDropOpen(false);
     };
 
     return (
-      <div className={fullWidth ? 'fullWidth' : 'autoWidth'} ref={dropdownRef}>
+      <div className={fullWidth ? "fullWidth" : "autoWidth"} ref={dropdownRef}>
         {label && (
           <div
             style={{
               marginBottom: 5,
-              display: 'flex',
-              justifyContent: 'space-between',
+              display: "flex",
+              justifyContent: "space-between",
             }}
           >
             <label className={`labels label-text`}>
@@ -350,9 +352,9 @@ const ExpandableAutoComplete = forwardRef<
 
         <div
           className={`${
-            expandable ? 'qbs-expandable-container' : 'qbs-container'
+            expandable ? "qbs-expandable-container" : "qbs-container"
           }`}
-          style={{ position: 'relative' }}
+          style={{ position: "relative" }}
         >
           {selectedItems?.length > 0 && (
             <>
@@ -364,7 +366,7 @@ const ExpandableAutoComplete = forwardRef<
                     : selectedItems?.length
                 )
                 .map((item, index) => (
-                  <div className="selected-items-container">
+                  <div key={index} className="selected-items-container">
                     <Tooltip
                       title={item?.[desc]}
                       enabled={item?.[desc]?.length > textCount}
@@ -399,12 +401,12 @@ const ExpandableAutoComplete = forwardRef<
 
           <div
             className={`qbs-textfield-expandable ${
-              !expandable ? 'qbs-normal' : ''
+              !expandable ? "qbs-normal" : ""
             }`}
             data-value={
               selectedItems?.length > 0 || searchValue
                 ? searchValue
-                : placeholder ?? ''
+                : placeholder ?? ""
             }
             onClick={() => onInputFocus()}
           >
@@ -413,7 +415,7 @@ const ExpandableAutoComplete = forwardRef<
               ref={inputRef}
               type="text"
               value={
-                type === 'auto_suggestion' && !expandable
+                type === "auto_suggestion" && !expandable
                   ? inputValue
                   : searchValue || inputValue
               }
@@ -422,11 +424,11 @@ const ExpandableAutoComplete = forwardRef<
               onFocus={onFocus}
               onClick={() => handleOnClick()}
               className={generateClassName()}
-              placeholder={selectedItems?.length > 0 ? '' : placeholder ?? ''}
+              placeholder={selectedItems?.length > 0 ? "" : placeholder ?? ""}
               readOnly={
                 readOnly ||
-                type === 'custom_select' ||
-                (type == 'auto_suggestion' && !expandable)
+                type === "custom_select" ||
+                (type == "auto_suggestion" && !expandable)
               }
               disabled={disabled}
               data-testid="custom-autocomplete"
@@ -434,46 +436,18 @@ const ExpandableAutoComplete = forwardRef<
           </div>
 
           {/* Icons for Clearing Input or Toggling Dropdown */}
-          <div
-            className="qbs-autocomplete-close-icon"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {(inputValue || searchValue) &&
-              !disabled &&
-              !readOnly &&
-              !expandable && (
-                <button
-                  onClick={handleClear}
-                  className="icon-button"
-                  aria-label="clear"
-                >
-                  <Close />
-                </button>
-              )}
-            {dropOpen ? (
-              <button
-                type="button"
-                onClick={(e) => handleDropClose(e)}
-                className="icon-button"
-                aria-label="toggle"
-                name="toggle"
-              >
-                <DropArrow className={`icon-button-rotate`} />
-              </button>
-            ) : (
-              <button
-                disabled={disabled || readOnly}
-                type="button"
-                className="icon-button"
-                onClick={(e) => handleDropOpen(e)}
-                aria-label="toggle"
-                name="toggle"
-              >
-                <DropArrow />
-              </button>
-            )}
-          </div>
 
+          <InputActions
+            inputValue={inputValue}
+            searchValue={searchValue}
+            dropOpen={dropOpen}
+            handleDropOpen={handleDropOpen}
+            handleDropClose={handleDropClose}
+            disabled={disabled}
+            readOnly={readOnly}
+            expandable={expandable}
+            handleClear={handleClear}
+          />
           {/* Displaying Loading Spinner */}
 
           {/* Suggestions Dropdown */}
@@ -485,9 +459,9 @@ const ExpandableAutoComplete = forwardRef<
                 style={{ ...dropdownStyle, minHeight: 192 }}
                 className={`qbs-autocomplete-suggestions`}
               >
-                {type == 'auto_suggestion' && !expandable && (
+                {type == "auto_suggestion" && !expandable && (
                   <div
-                    style={{ position: 'relative' }}
+                    style={{ position: "relative" }}
                     className="react-core-ts-search-container"
                   >
                     <span className="dropdown-search-icon">
@@ -502,61 +476,26 @@ const ExpandableAutoComplete = forwardRef<
                   </div>
                 )}
 
-                <div className="qbs-autocomplete-suggestions-sub">
+                <div className={`qbs-autocomplete-suggestions-sub `}>
                   {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 ${
-                            isSelected(suggestion, selected)
-                              ? 'is-selected'
-                              : ''
-                          }`}
-                          onClick={() => handleSuggestionClick(suggestion)}
-                          data-testid={suggestion[desc]}
-                        >
-                          {suggestion[desc]}
-                        </li>
-                      </div>
+                      <DropdownList
+                        idx={idx}
+                        suggestion={suggestion}
+                        isSelected={isSelected}
+                        handleSuggestionClick={handleSuggestionClick}
+                        handleMultiSelect={handleMultiSelect}
+                        selected={selected}
+                        isMultiple={isMultiple}
+                        singleSelect={singleSelect}
+                        desc={desc}
+                      />
                     ))
                   ) : (
                     <>
                       {isLoading ? (
                         <div
-                          style={{ display: 'flex', justifyContent: 'center' }}
+                          style={{ display: "flex", justifyContent: "center" }}
                         >
                           <span>
                             <Spinner />
@@ -567,7 +506,7 @@ const ExpandableAutoComplete = forwardRef<
                           className="qbs-autocomplete-notfound"
                           onClick={handleBlur}
                         >
-                          {notDataMessage ?? 'No Results Found'}
+                          {notDataMessage ?? "No Results Found"}
                         </li>
                       )}
                     </>

package/src/commontypes.ts

@@ -8,12 +8,12 @@ export interface AutoSuggestionInputProps {
   required?: boolean;
   value?: string;
   onChange: (value?: ValueProps | ValueProps[]) => void;
-  data?: ValueProps[];
+  data?: any[];
   type?:
-    | 'custom_select'
-    | 'auto_complete'
-    | 'custom_search_select'
-    | 'auto_suggestion';
+    | "custom_select"
+    | "auto_complete"
+    | "custom_search_select"
+    | "auto_suggestion";
   placeholder?: string;
   getData?: (key?: string, nextBlock?: number) => any;
   errors?: any;
@@ -39,4 +39,5 @@ export interface AutoSuggestionInputProps {
   expandable?: boolean;
   textCount?: number;
   itemCount?: number;
+  isTreeDropdown?: boolean;
 }

package/src/components/DropdownList.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+type ValueProps = {
+  idx: number;
+  suggestion: any;
+  isSelected: (item: any, selectedItems: any[] | string) => boolean;
+  handleSuggestionClick: (suggestion: any) => void;
+  handleMultiSelect: (e: any, suggestion: any) => void;
+  selected: any;
+  isMultiple?: boolean;
+  singleSelect?: boolean;
+  desc: string;
+};
+const DropdownList: React.FC<ValueProps> = ({
+  idx,
+  suggestion,
+  isSelected,
+  handleSuggestionClick,
+  handleMultiSelect,
+  selected,
+  isMultiple,
+  singleSelect,
+  desc,
+}) => {
+  return (
+    <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 ${
+          isSelected(suggestion, selected) ? 'is-selected' : ''
+        }`}
+        onClick={() => handleSuggestionClick(suggestion)}
+        data-testid={suggestion[desc]}
+      >
+        {suggestion[desc]}
+      </li>
+    </div>
+  );
+};
+
+export default DropdownList;

package/src/components/Icons.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+export const DropdownIcon: React.FC<any> = (className) => {
+  return (
+    <svg
+      width="14"
+      height="12"
+      className={className}
+      viewBox="0 0 14 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.2996 0.759638L0.699221 0.759638C0.571648 0.760037 0.446601 0.795222 0.337538 0.861405C0.228475 0.927588 0.139526 1.02226 0.080267 1.13523C0.0210075 1.24821 -0.00631905 1.37521 0.00122929 1.50256C0.00877762 1.62991 0.0509148 1.75279 0.123105 1.85797L6.42328 10.9582C6.68439 11.3355 7.31301 11.3355 7.57482 10.9582L13.875 1.85797C13.9479 1.75301 13.9907 1.63006 13.9986 1.5025C14.0066 1.37494 13.9794 1.24764 13.9201 1.13442C13.8608 1.02121 13.7716 0.926414 13.6622 0.860339C13.5528 0.794264 13.4274 0.759437 13.2996 0.759638Z"
+        fill="#003C71"
+      />
+    </svg>
+  );
+};
+
+export const DropSideIcon: React.FC<any> = (className) => {
+    return (
+      
+    <svg
+      width="12"
+      height="14"
+      className={className}
+      viewBox="0 0 12 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.884639 0.700422V13.3008C0.885038 13.4284 0.920223 13.5534 0.986406 13.6625C1.05259 13.7715 1.14726 13.8605 1.26024 13.9197C1.37321 13.979 1.50021 14.0063 1.62756 13.9988C1.75491 13.9912 1.87779 13.9491 1.98297 13.8769L11.0832 7.57672C11.4605 7.31561 11.4605 6.68699 11.0832 6.42518L1.98297 0.125005C1.87801 0.0520805 1.75506 0.00931579 1.6275 0.00135729C1.49994 -0.00660121 1.37264 0.0205509 1.25942 0.0798637C1.14621 0.139176 1.05142 0.228381 0.98534 0.337786C0.919266 0.447191 0.884438 0.572612 0.884639 0.700422Z"
+        fill="#003C71"
+      />
+    </svg>
+  );
+};

package/src/components/InputActions.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Close, DropArrow } from '../utilities/icons';
+
+type ValueProps = {
+  inputValue: string;
+  searchValue: string;
+  dropOpen: boolean;
+  handleDropOpen: (e: any) => void;
+  handleDropClose: (e: any) => void;
+  disabled: boolean;
+  readOnly: boolean;
+  expandable: boolean;
+  handleClear: () => void;
+};
+const InputActions: React.FC<ValueProps> = ({
+  inputValue,
+  searchValue,
+  dropOpen,
+  handleDropOpen,
+  handleDropClose,
+  disabled,
+  readOnly,
+  expandable,
+  handleClear,
+}) => {
+  return (
+    <div className="qbs-autocomplete-close-icon">
+      {(inputValue || searchValue) && !disabled && !readOnly && !expandable && (
+        <button
+          onClick={handleClear}
+          className="icon-button"
+          aria-label="clear"
+        >
+          <Close />
+        </button>
+      )}
+      {dropOpen ? (
+        <button
+          type="button"
+          onClick={(e) => handleDropClose(e)}
+          className="icon-button"
+          aria-label="toggle"
+          name="toggle"
+        >
+          <DropArrow className={`icon-button-rotate`} />
+        </button>
+      ) : (
+        <button
+          disabled={disabled || readOnly}
+          type="button"
+          className="icon-button"
+          onClick={(e) => handleDropOpen(e)}
+          aria-label="toggle"
+          name="toggle"
+        >
+          <DropArrow />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default InputActions;