react-core-ts 2.0.24 → 2.1.0

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/docs/App.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import { ValueProps } from "../src/commontypes";
-import { AutoComplete, AutoCompleteWithSelectedList, AutoCompleteWithTabFilter, AutoCompleteWithTreeStructure, ExpandableAutoComplete, ModernAutoComplete, ModernAutoCompleteDropdown, ModernAutoCompleteTableView, ModernTextField } from "../src/index";
+import { AutoComplete, AutoCompleteWithSelectedList, AutoCompleteWithTabFilter, AutoCompleteWithTreeStructure, ExpandableAutoComplete, ModernAutoComplete, ModernAutoCompleteDropdown, ModernAutoCompleteTableView, ModernAutoCompleteSuggections, ModernTextField } from "../src/index";
 import ModernTextArea from "../src/ReactTextArea";
 import TextField from "../src/ReactTextField";
 import { treeDropData } from "./store";
@@ -15,6 +15,7 @@ export default function App() {
   const [prev, setPrev] = useState(1);
   const [selectedTabItems, setSelectedTabItems] = useState<ValueProps[]>([]);
   const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
+  const [nameCountValue, setNameCountValue] = useState<string>('a');
 
   const getData = (keyName?: string, next?: number) => {
     console.log(keyName, "keyName");
@@ -241,6 +242,20 @@ export default function App() {
             />
           </div>
 
+          <div style={{ width: 300 }}>
+            <ModernAutoCompleteSuggections
+              name="sample-name-count"
+              label="TextField (Name, Count)"
+              id="name-count-id"
+              placeholder="TextField"
+              getData={getDatas}
+              value={nameCountValue}
+              onChange={setNameCountValue}
+              // use userId as the "count" field for demo purposes
+              countField="userId"
+            />
+          </div>
+
           <div style={{ width: 300 }}>
             <ModernAutoCompleteDropdown
               name="sample"

package/package.json

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

package/src/AutoComplete.tsx

@@ -156,6 +156,31 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
       setInputValue(value ?? '');
     }, [value]);
 
+    const selectExactMatchFromSuggestions = () => {
+      if (!inputValue) {
+        return;
+      }
+
+      if (!filteredData || filteredData.length === 0) {
+        // No suggestions to match against – notify parent with raw value
+        onChange({ [descId]: '', [desc]: inputValue });
+        return;
+      }
+
+      const normalizedInput = inputValue.toString().trim().toLowerCase();
+      const match = filteredData.find((item: ValueProps) => {
+        const descValue = item?.[desc]?.toString().trim().toLowerCase();
+        return descValue === normalizedInput;
+      });
+
+      if (match) {
+        handleSuggestionClick(match);
+      } else {
+        // No exact match – notify parent with typed value
+        onChange({ [descId]: '', [desc]: inputValue });
+      }
+    };
+
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const { value } = e.target;
       setDropOpen(true);
@@ -327,7 +352,10 @@ const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
                 : searchValue || inputValue
             }
             onChange={handleChange}
-            // onBlur={handleBlur}
+            onBlur={() => {
+              handleBlur();
+              selectExactMatchFromSuggestions();
+            }}
             onFocus={onFocus}
             onClick={() => handleOnClick()}
             className={generateClassName()}

package/src/ReactAutoComplete.tsx

@@ -489,6 +489,32 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
   // const getPosition = () => {
   //   return 'bottom'
   // }
+  const selectExactMatchFromSuggestions = () => {
+    if (!inputValue) {
+      return;
+    }
+
+    if (!filteredData || filteredData.length === 0) {
+      // No suggestions to match against – notify parent with raw value
+      onChange({ id: undefined, name: inputValue, from: 4 });
+      return;
+    }
+
+    const normalizedInput = inputValue.toString().trim().toLowerCase();
+    const matchIndex = filteredData.findIndex((item: valueProps) => {
+      const name = item?.name?.toString().trim().toLowerCase();
+      const label = item?.label?.toString().trim().toLowerCase();
+      return name === normalizedInput || label === normalizedInput;
+    });
+
+    if (matchIndex >= 0) {
+      const match = filteredData[matchIndex];
+      handleSuggestionClick(match, matchIndex);
+    } else {
+      // No exact match – notify parent with typed value
+      onChange({ id: undefined, name: inputValue, from: 4 });
+    }
+  };
   const filteredData =
     inputValue !== '*' &&
     inputValue !== '' &&
@@ -794,7 +820,10 @@ const ModernAutoComplete: React.FC<AutoSuggestionInputProps> = ({
               type="text"
               readOnly={readOnly ?? type === 'custom_select'}
               value={inputValue ? inputValue : ''}
-              onBlur={handleClearInputValue}
+              onBlur={() => {
+                handleClearInputValue();
+                selectExactMatchFromSuggestions();
+              }}
               autoComplete="off"
               disabled={disabled}
               ref={inputRef}

package/src/ReactAutoCompleteDropdown.tsx

@@ -511,6 +511,32 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
   // const getPosition = () => {
   //   return 'bottom'
   // }
+  const selectExactMatchFromSuggestions = () => {
+    if (!inputValue) {
+      return;
+    }
+
+    if (!filteredData || filteredData.length === 0) {
+      // No suggestions to match against – notify parent with raw value
+      onChange({ id: undefined, name: inputValue, from: 4 });
+      return;
+    }
+
+    const normalizedInput = inputValue.toString().trim().toLowerCase();
+    const matchIndex = filteredData.findIndex((item: valueProps) => {
+      const name = item?.name?.toString().trim().toLowerCase();
+      const label = item?.label?.toString().trim().toLowerCase();
+      return name === normalizedInput || label === normalizedInput;
+    });
+
+    if (matchIndex >= 0) {
+      const match = filteredData[matchIndex];
+      handleSuggestionClick(match, matchIndex);
+    } else {
+      // No exact match – notify parent with typed value
+      onChange({ id: undefined, name: inputValue, from: 4 });
+    }
+  };
   const filteredData =
     inputValue !== '*' &&
     inputValue !== '' &&
@@ -817,7 +843,10 @@ const ModernAutoCompleteDropdown: React.FC<AutoSuggestionInputProps> = ({
               type="text"
               readOnly={readOnly ?? type === 'custom_select'}
               value={inputValue ? inputValue : ''}
-              onBlur={handleClearInputValue}
+              onBlur={() => {
+                handleClearInputValue();
+                selectExactMatchFromSuggestions();
+              }}
               autoComplete="off"
               disabled={disabled}
               ref={inputRef}