react-core-ts 1.9.0 → 1.9.2

package/dist/styles/styles/components/treedropdown.css

@@ -0,0 +1,97 @@
+.qbs-tree-list-container {
+  display: flex;
+  flex-direction: column;
+}
+.qbs-tree-list-container-sub {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 7px;
+}
+
+.qbs-tree-list-container-sub .no-children {
+  margin-left: 1.75rem; /* Corresponds to ml-7 in Tailwind */
+}
+.qbs-tree-list-container-sub-icon {
+  margin-top: 0.25rem; /* Corresponds to mt-1 in Tailwind */
+  cursor: pointer;
+  padding-top: 0.5rem; /* Corresponds to py-2 in Tailwind */
+  padding-bottom: 0.5rem;
+  transition: transform 0.3s ease; /* Smooth rotation transition */
+  color: #003c71;
+}
+
+.qbs-tree-list-container-sub-icon.expanded {
+  transform: rotate(90deg); /* Corresponds to rotate-90 in Tailwind */
+}
+.qbs-tree-list-container-sub-container {
+  display: flex;
+  gap: 15px; /* Corresponds to gap-2 in Tailwind */
+  padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
+  flex-direction: row; /* Corresponds to flex-row in Tailwind */
+  width: 100%; /* Corresponds to w-full in Tailwind */
+  color: #3d414a;
+}
+.qbs-tree-list-container-sub-container-hideicon {
+  display: flex;
+  gap: 6px; /* Corresponds to gap-2 in Tailwind */
+  padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
+  flex-direction: row; /* Corresponds to flex-row in Tailwind */
+  width: 100%; /* Corresponds to w-full in Tailwind */
+  color: #3d414a;
+}
+.qbs-tree-list-container-sub-container-hideicon:hover {
+  color: #003c71;
+  background-color: rgba(141, 194, 240, 0.15) !important;
+}
+.qbs-tree-list-container-sub-container:hover {
+  color: #003c71;
+  background-color: rgba(141, 194, 240, 0.15) !important;
+}
+.qbs-tree-list-container-sub-container.qbs-expanded-child {
+  color: #003c71;
+}
+.qbs-tree-list-container-sub-text.qbs-expanded-child {
+  color: #003c71;
+}
+.qbs-tree-list-container-sub-text:hover {
+  color: #003c71;
+  /* background-color: rgba(141, 194, 240, 0.15) !important; */
+}
+
+.qbs-tree-list-container-sub-container.checked,
+.qbs-tree-list-container-sub-container-hideicon.checked {
+  color: #003c71;
+  background-color: rgba(
+    141,
+    194,
+    240,
+    0.15
+  ) !important; /* Corresponds to bg-green-200 in Tailwind */
+}
+
+.marginLeft {
+  margin-left: 28px; /* Corresponds to ml-2 in Tailwind */
+}
+.lightmarginLeft {
+  margin-left: 19px; /* Corresponds to ml-2 in Tailwind */
+}
+.qbs-tree-list-container-sub- {
+  line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
+  font-size: 0.875rem; /* Corresponds to text-sm in Tailwind (14px) */
+}
+.qbs-tree-list-container-child {
+  margin-left: 1rem; /* Corresponds to ml-4 in Tailwind */
+  margin-top: 0.5rem; /* Corresponds to mt-2 in Tailwind */
+  display: flex; /* Corresponds to flex in Tailwind */
+  flex-direction: column; /* Corresponds to flex-col in Tailwind */
+  gap: 0.5rem; /* Corresponds to gap-2 in Tailwind */
+}
+.qbs-tree-list-container-sub-text {
+  line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
+  font-size: 14px; /* Corresponds to text-sm in Tailwind (14px) */
+  font-weight: 500;
+  letter-spacing: 0.28px;
+  font-family: 'Noto Sans';
+  /* color: #3d414a; */
+}

package/dist/styles/styles/global.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './components/autocomplete.css';
+@import './components/treedropdown.css';
+@import './components/selectedautocomplete.css';
+@import './components/tooltip.css';

package/package.json

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

package/src/ExpandableAutoComplete.tsx

@@ -64,6 +64,7 @@ const ExpandableAutoComplete = forwardRef<
       labelCode = '',
       typeOnlyFetch = false,
       autoDropdown = false,
+      enableSelectAll = false,
     },
     ref
   ) => {
@@ -81,6 +82,7 @@ const ExpandableAutoComplete = forwardRef<
     const itemsRef = useRef<HTMLDivElement>(null);
     const dropBtnRef = useRef<HTMLButtonElement>(null);
     const [refetchData, setRefetchData] = useState(false);
+    const [selectAll, setSelectAll] = useState(false);
 
     // API call for suggestions through a custom hook
     const inputRef = useRef(null);
@@ -433,25 +435,33 @@ const ExpandableAutoComplete = forwardRef<
 
     const handleSelectAll = () => {
       if (isMultiple) {
-        filteredData.map((suggestion: ValueProps) =>
-          setSelectedItems((prev) => {
-            const isAdded = prev.some(
-              (item) => item[descId] === suggestion[descId]
-            );
-            if (isAdded) {
-              return prev;
-            } else {
-              return [...prev, suggestion];
-            }
-          })
-        );
+        if (selectAll) {
+          setSelectedItems((prev) =>
+            prev.filter(
+              (item) => !filteredData.some((f) => f[descId] === item[descId])
+            )
+          );
+        } else {
+          filteredData.map((suggestion: ValueProps) =>
+            setSelectedItems((prev) => {
+              const isAdded = prev.some(
+                (item) => item[descId] === suggestion[descId]
+              );
+              if (isAdded) {
+                return prev;
+              } else {
+                return [...prev, suggestion];
+              }
+            })
+          );
+        }
       }
     };
 
     const handleOpenDropdown = (e: any) => {
       if (!suggestions || suggestions?.length === 0 || refetchData) {
         if (autoDropdown && (inputValue === '' || inputValue.trim() === '')) {
-          handlePickSuggestions('a', 1);
+          handlePickSuggestions('*', 1);
           setRefetchData(false);
         } else if (!refetchData && inputValue !== '') {
           handlePickSuggestions(inputValue, 1);
@@ -463,6 +473,16 @@ const ExpandableAutoComplete = forwardRef<
       }
     };
 
+    useEffect(() => {
+      const allSelected =
+        filteredData.length > 0 &&
+        filteredData.every((item) =>
+          selectedItems.some((s) => s[descId] === item[descId])
+        );
+
+      setSelectAll(allSelected);
+    }, [filteredData, selectedItems, descId]);
+
     return (
       <div
         id={id ? `expandable-container-${id}` : `expandable-container-${name}`}
@@ -579,7 +599,7 @@ const ExpandableAutoComplete = forwardRef<
               <button
                 disabled={disabled ?? readOnly}
                 onClick={(e) => handleOpenDropdown(e)}
-                className=" text-[#667085] focus-visible:outline-slate-100 absolute right-2"
+                className="text-[#667085] focus-visible:outline-slate-100 absolute right-2 qbs-all-dropdown-btn"
                 data-testid="drop-arrow"
                 type="button"
                 id="autocomplete-drop-icon"
@@ -628,7 +648,7 @@ const ExpandableAutoComplete = forwardRef<
               <ul
                 ref={dropRef}
                 style={{ ...dropdownStyle, minHeight: 192 }}
-                className={`qbs-autocomplete-suggestions`}
+                className={`qbs-autocomplete-suggestions qbs-autocomplete-suggestions-expandable`}
                 id={
                   id
                     ? `autocomplete-dropdown-${id}`
@@ -653,77 +673,112 @@ const ExpandableAutoComplete = forwardRef<
                   </div>
                 )}
 
-                <div
-                  className={`qbs-autocomplete-suggestions-sub `}
-                  ref={itemsRef}
-                >
-                  {filteredData?.length > 0 ? (
-                    filteredData.map((suggestion: ValueProps, idx: number) => (
-                      <DropdownList
-                        idx={idx}
-                        suggestion={suggestion}
-                        isSelected={isSelected}
-                        handleSuggestionClick={() =>
-                          handleSuggestionClick(suggestion, idx)
-                        }
-                        handleMultiSelect={handleMultiSelect}
-                        selected={selected}
-                        isMultiple={isMultiple}
-                        singleSelect={singleSelect}
-                        desc={desc}
-                        shortCode={shortCode}
-                        labelCode={labelCode}
-                        focusedIndex={focusedIndex}
-                        setItemRef={(index, ref) => {
-                          itemRefs.current[index] = ref; // Store each ref properly
-                        }}
-                      />
-                    ))
-                  ) : (
-                    <>
-                      {isLoading ? (
-                        <div
-                          style={{ display: 'flex', justifyContent: 'center' }}
-                          className="qbs-autocomplete-loader"
-                        >
-                          <span>
-                            <Spinner />
-                          </span>
-                        </div>
-                      ) : (
-                        <li
-                          className="qbs-autocomplete-notfound"
-                          onClick={handleBlur}
-                        >
-                          {notDataMessage ??
-                          (searchValue === '' || typeRef.current === 1)
-                            ? 'Start typing to see suggestions'
-                            : '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>
-                {filteredData?.length > 0 && (
+                {filteredData?.length > 0 && enableSelectAll && isMultiple && (
                   <div
                     id="select-all"
-                    className={`qbs-select-all-link qbs-text-right qbs-cursor-pointer qbs-text-xs absolute right-2 bottom-1`}
+                    className={`qbs-select-all-link qbs-cursor-pointer qbs-text-xs`}
                     onClick={handleSelectAll}
                   >
-                    Select all
+                    <div
+                      className={`qbs-autocomplete-listitem-container qbs-autocomplete-checkbox-container`}
+                    >
+                      <div className="qbs-autocomplete-checkbox">
+                        <input
+                          type="checkbox"
+                          checked={selectAll}
+                          id={`qbs-checkbox-all`}
+                        />
+                        <label htmlFor={`qbs-checkbox-all`}>
+                          <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>
+                      <div className={`qbs-autocomplete-suggestions-item`}>
+                        Select All
+                      </div>
+                    </div>
                   </div>
                 )}
+
+                <div className="qbs-autocomplete-suggestions-expandable-container">
+                  <div
+                    className={`qbs-autocomplete-suggestions-sub qbs-autocomplete-suggestions-outer`}
+                    ref={itemsRef}
+                  >
+                    {filteredData?.length > 0 ? (
+                      filteredData.map(
+                        (suggestion: ValueProps, idx: number) => (
+                          <DropdownList
+                            idx={idx}
+                            suggestion={suggestion}
+                            isSelected={isSelected}
+                            handleSuggestionClick={() =>
+                              handleSuggestionClick(suggestion, idx)
+                            }
+                            handleMultiSelect={handleMultiSelect}
+                            selected={selected}
+                            isMultiple={isMultiple}
+                            singleSelect={singleSelect}
+                            desc={desc}
+                            shortCode={shortCode}
+                            labelCode={labelCode}
+                            focusedIndex={focusedIndex}
+                            setItemRef={(index, ref) => {
+                              itemRefs.current[index] = ref; // Store each ref properly
+                            }}
+                          />
+                        )
+                      )
+                    ) : (
+                      <>
+                        {isLoading ? (
+                          <div
+                            style={{
+                              display: 'flex',
+                              justifyContent: 'center',
+                            }}
+                            className="qbs-autocomplete-loader"
+                          >
+                            <span>
+                              <Spinner />
+                            </span>
+                          </div>
+                        ) : (
+                          <li
+                            className="qbs-autocomplete-notfound"
+                            onClick={handleBlur}
+                          >
+                            {notDataMessage ??
+                            (searchValue === '' || typeRef.current === 1)
+                              ? 'Start typing to see suggestions'
+                              : '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>
+                </div>
               </ul>,
               document.body
             )}

package/src/commontypes.ts

@@ -81,7 +81,8 @@ export interface AutoSuggestionInputProps {
   labelCode?: string,
   tabInlineSearch?: boolean // tab dropdown search
   matchFromStart?: boolean // match data's from the starting position
-  autoDropdown?: boolean;
+  autoDropdown?: boolean; // enable all items list items
+  enableSelectAll?: boolean // enable select all option
 }
 export interface IconsProps {
   name: any;

package/src/styles/components/autocomplete.css

@@ -111,6 +111,12 @@ body * {
 
   /* Ensure content doesn't overflow during transition */
 }
+.qbs-autocomplete-suggestions-expandable{
+  padding: 8px 0px;
+}
+.qbs-autocomplete-suggestions-expandable .qbs-autocomplete-suggestions-expandable-container {
+  padding: 0px 8px;
+}
 .qbs-autocomplete-suggestions.bottom {
   top: 100%; /* Position below the input */
   /* Other styling */

package/src/styles/components/selectedautocomplete.css

@@ -130,4 +130,22 @@
 }
 .qbs-bottom-0{
   bottom: 0;
+}
+.qbs-select-all-link{
+  border-bottom: 1px solid var(--border-card-color-default, #d6d8dc);
+  padding: 0px 8px;
+}
+.qbs-select-all-link .qbs-autocomplete-suggestions-item {
+  margin-top: 5px;
+}
+
+.qbs-select-all-link .qbs-autocomplete-checkbox-container:hover,
+.qbs-select-all-link .qbs-autocomplete-checkbox-container.is-selected,
+.qbs-select-all-link .qbs-autocomplete-suggestions-item:hover
+ {
+  background: #fff;
+  border-radius: 0px;
+}
+.qbs-select-all-link  .qbs-autocomplete-listitem-container:hover {
+  background-color:#fff !important;
 }