react-core-ts 2.0.13 → 2.0.15

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,12 +1,13 @@
 import React, { useState } from "react";
 
 import { ValueProps } from "../src/commontypes";
-import { AutoComplete, AutoCompleteWithSelectedList, AutoCompleteWithTabFilter, AutoCompleteWithTreeStructure, ExpandableAutoComplete, ModernAutoComplete, ModernAutoCompleteDropdown, ModernTextField, ReactAutoCompleteTableView } from "../src/index";
+import { AutoComplete, AutoCompleteWithSelectedList, AutoCompleteWithTabFilter, AutoCompleteWithTreeStructure, ExpandableAutoComplete, ModernAutoComplete, ModernAutoCompleteDropdown, ModernAutoCompleteTableView, ModernTextField } from "../src/index";
 import ModernTextArea from "../src/ReactTextArea";
 import TextField from "../src/ReactTextField";
 import { treeDropData } from "./store";
 
 import "../src/styles/global.css";
+import SettingsIcon from "../src/components/customIcons/Settings";
 
 export default function App() {
   const [dropData, setDropData] = useState();
@@ -95,7 +96,7 @@ export default function App() {
           }}
         >
           <div style={{ width: 300 }}>
-            <ReactAutoCompleteTableView
+            <ModernAutoCompleteTableView
               name="sample"
               label="TextField"
               id="id"
@@ -196,6 +197,11 @@ export default function App() {
               autoDropdown={true}
               tabInlineSearch={false}
               //autoTabSelectAll={false}
+              moreOptionTab={
+                <MoreOptionsComponent />
+              }
+              moreOptionTabLabel="Settings"
+              onMoreOptionChange={(values) => console.log(values, "onMoreOptionChange")}
             />
           </div>
 
@@ -685,3 +691,39 @@ export default function App() {
     </React.Fragment>
   );
 }
+
+
+interface MoreOptionsComponentProps {
+  onApply?: (values?: any) => void;
+  onValueChange?: (values?: any) => void;
+}
+
+const MoreOptionsComponent = ({ onApply, onValueChange }: MoreOptionsComponentProps) => {
+  const [checked, setChecked] = useState(false);
+  
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.checked;
+    setChecked(newValue);
+    // Trigger onValueChange when value changes
+    onValueChange?.({ includeAll: newValue });
+  };
+  
+  const handleApply = () => {
+    // Pass values to onApply callback
+    onApply?.({ includeAll: checked });
+  };
+  
+  return (
+    <div className="qbs-gap-2 ms-2">
+      <input 
+        type="checkbox" 
+        checked={checked}
+        onChange={handleChange}
+      />
+      Include all items
+      <div className="qbs-flex qbs-items-center qbs-justify-end">
+        <button onClick={handleApply}>Apply</button>
+      </div>
+    </div>
+  );
+};

package/package.json

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

package/src/AutoCompleteWithTabFilter.tsx

@@ -89,7 +89,11 @@ const AutoCompleteWithTabFilter = forwardRef<
             toolTabClearSwitch = false,
             onToolTabChange,
             autoRefreshMainDropdown = true,
-            autoTabSelectAll = true
+            autoTabSelectAll = true,
+            moreOptionTab,
+            moreOptionTabLabel,
+            moreOptionTabIcon,
+            onMoreOptionChange
         },
         ref
     ) => {
@@ -961,10 +965,11 @@ const AutoCompleteWithTabFilter = forwardRef<
             setAllDataLoaded(false);
         }, [showToolsTab]);
 
-        const handleApplyTabFilter = useCallback(() => {
+        const handleApplyTabFilter = useCallback((moreOptionValues?: any) => {
             // Set flag to trigger effect when data loads
             setApplyTabFilter(true);
             handlePickSuggestions(searchValue ? searchValue : '*', 1);
+            // Note: onMoreOptionChange is called when values change in the component, not here
         }, [searchValue, handlePickSuggestions]);
 
         useEffect(() => {
@@ -1421,6 +1426,10 @@ const AutoCompleteWithTabFilter = forwardRef<
                             enableSelectAll={enableSelectAll}
                             applyTabFilter={handleApplyTabFilter}
                             onToolClose={() => setShowToolsTab(false)}
+                            moreOptionTab={moreOptionTab}
+                            moreOptionTabLabel={moreOptionTabLabel}
+                            moreOptionTabIcon={moreOptionTabIcon}
+                            onMoreOptionChange={onMoreOptionChange}
                         />)
                     }
                 </div>