react-core-ts 1.1.0 → 1.1.21

package/src/styles/global.css

@@ -3,4 +3,5 @@
 @tailwind utilities;
 
 @import './components/autocomplete.css';
-@import './components/treedropdown.css';
+@import './components/treedropdown.css';
+@import './components/selectedautocomplete.css';

package/src/utilities/autosuggestions.ts

@@ -1,20 +1,25 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 type ValueProps = {
   [key: string]: string;
 };
 
 type UseSuggestionsType = (
-  getData: (key?: string, next?: number) => Promise<ValueProps[]>,
+  getData: (
+    key?: string,
+    next?: number,
+    tabValue?: number | string
+  ) => Promise<ValueProps[]>,
   initialData?: ValueProps[],
   dropOpen?: boolean,
   asyncFetch?: boolean,
   paginationEnabled?: boolean,
-  initialLoad?: boolean,
+  typeOnlyFetch?: boolean,
   inputValue?: string,
   isMultiple?: boolean,
   setNextPage?: (value: number) => void,
-  selectedItems?: any[]
+  selectedItems?: any[],
+  initialLoad?: boolean
 ) => {
   suggestions: ValueProps[];
   isLoading: boolean;
@@ -22,7 +27,8 @@ type UseSuggestionsType = (
   handlePickSuggestions: (
     value?: string,
     next?: number,
-    append?: boolean
+    append?: boolean,
+    tabValue?: string | number
   ) => Promise<void>;
 };
 
@@ -33,10 +39,11 @@ export const useSuggestions: UseSuggestionsType = (
   asyncFetch = false,
   paginationEnabled = false,
   initialLoad = false,
-  inputValue = '',
+  inputValue = "",
   isMultiple,
   setNextPage,
-  selectedItems = []
+  selectedItems = [],
+  typeOnlyFetch = false
 ) => {
   const [suggestions, setSuggestions] = useState<ValueProps[]>(initialData);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -44,12 +51,15 @@ export const useSuggestions: UseSuggestionsType = (
   const handlePickSuggestions = async (
     value?: string,
     nextPage?: number,
-    appendData?: boolean
+    appendData?: boolean,
+    tabValue?: string | number
   ) => {
     setIsLoading(true);
     try {
       const data = await (asyncFetch || initialLoad
-        ? getData(value, nextPage)
+        ? typeOnlyFetch && value === ""
+          ? Promise.resolve([])
+          : getData(value, nextPage, tabValue)
         : Promise.resolve(initialData));
       if (!data || data?.length === 0) {
         setNextPage(undefined);
@@ -57,7 +67,7 @@ export const useSuggestions: UseSuggestionsType = (
       const newSuggestions = appendData ? [...suggestions, ...data] : data;
       setSuggestions(newSuggestions);
     } catch (error) {
-      console.error('Error fetching data:', error);
+      console.error("Error fetching data:", error);
     } finally {
       setIsLoading(false);
     }
@@ -67,14 +77,15 @@ export const useSuggestions: UseSuggestionsType = (
     if (dropOpen) {
       if (!isMultiple && (!inputValue || suggestions.length === 0)) {
         setNextPage(1);
-        handlePickSuggestions('', paginationEnabled ? 1 : undefined);
+        handlePickSuggestions("", paginationEnabled ? 1 : undefined);
       } else if (
         isMultiple &&
         (suggestions.length === 0 ||
           !selectedItems ||
           selectedItems?.length === 0)
       ) {
-        handlePickSuggestions('', paginationEnabled ? 1 : undefined);
+        if (!typeOnlyFetch && !inputValue)
+          handlePickSuggestions("", paginationEnabled ? 1 : undefined);
       }
     }
   }, [dropOpen]);

package/src/utilities/deepDebounce.ts

@@ -0,0 +1,15 @@
+export function debounce<F extends (...args: any[]) => any>(
+  fn: F,
+  delay: number
+): (...args: Parameters<F>) => void {
+  let timerId: any = null
+  return (...args: Parameters<F>): void => {
+    if (timerId) {
+      clearTimeout(timerId)
+    }
+    timerId = setTimeout(() => {
+      fn(...args)
+      timerId = null
+    }, delay)
+  }
+}

package/src/utilities/filterSuggestions.ts

@@ -7,14 +7,15 @@ export const filterSuggestions = (
   query: string,
   type: string,
   desc: string,
-  inputValue?: string,
-  async?: boolean,
-  isTreeDropdown?: boolean
+  inputValue?: any[] | string,
+  async?: boolean, // API filter
+  isTreeDropdown?: boolean, // Tree dropdowns
+  withoutSort?: boolean // Don't show selected items on top of the suggections
 ): Item[] => {
   if (
-    (type === 'custom_search_select' ||
-      type === 'auto_complete' ||
-      type === 'auto_suggestion') &&
+    (type === "custom_search_select" ||
+      type === "auto_complete" ||
+      type === "auto_suggestion") &&
     !async &&
     query &&
     !isTreeDropdown
@@ -23,7 +24,9 @@ export const filterSuggestions = (
       item[desc].toLowerCase().includes(query.toLowerCase())
     );
   }
-  return isTreeDropdown ? data : sortedArrayData(data, inputValue, desc);
+  return isTreeDropdown || withoutSort
+    ? data
+    : sortedArrayData(data, inputValue, desc);
 };
 
 const sortedArrayData = (

package/src/utilities/generateInnerWidth.ts

@@ -0,0 +1,5 @@
+export const getInnerWidth = (parentRef: any, defaultPadding: number = 0) => {
+  const innerwidth = parentRef.current ? parentRef.current.offsetWidth : defaultPadding
+
+  return innerwidth
+}

package/src/utilities/getPosition.ts

@@ -0,0 +1,53 @@
+import React from 'react'
+
+// const getPosition = (textFieldElement: HTMLElement) => {
+//   const textFieldRect = textFieldElement.getBoundingClientRect()
+
+//   const spaceBelow = window.innerHeight - textFieldRect.bottom
+//   return spaceBelow < 180 ? 'top' : 'bottom'
+// }
+const getScrollableParent = (element: HTMLElement): HTMLElement | Window => {
+  let parent = element.parentElement
+  while (parent) {
+    const overflowY = window.getComputedStyle(parent).overflowY
+    if (overflowY === 'scroll' || overflowY === 'auto') {
+      return parent
+    }
+    parent = parent.parentElement
+  }
+  return window // Fallback to window if no scrollable parent is found
+}
+
+const getPosition = (textFieldElement: HTMLElement, formFieldView?: boolean) => {
+  const textFieldRect = textFieldElement.getBoundingClientRect()
+  const scrollableParent = getScrollableParent(textFieldElement) as HTMLElement
+  const parentRect = scrollableParent.getBoundingClientRect()
+
+  const spaceBelow = parentRect.bottom - textFieldRect.bottom
+  const spaceAbove = parentRect.top - textFieldRect.top
+  if (formFieldView) {
+    return spaceBelow < 50 ? 'top-tool' : 'bottom-tool'
+  } else {
+    return spaceAbove > 50 ? 'top' : 'bottom'
+  }
+}
+export const applyPositionClass = (textFieldRef: React.RefObject<HTMLDivElement>) => {
+  if (textFieldRef.current) {
+    const textFieldElement = textFieldRef.current
+    const positionClass = getPosition(textFieldElement) // Get either 'top' or 'bottom'
+
+    textFieldElement.classList.remove('top', 'bottom')
+    textFieldElement.classList.add(positionClass)
+  }
+}
+export const applyToolTipPositionClass = (
+  textFieldRef: React.RefObject<HTMLDivElement>
+) => {
+  if (textFieldRef.current) {
+    const textFieldElement = textFieldRef.current
+    const positionClass = getPosition(textFieldElement, true) // Get either 'top' or 'bottom'
+
+    textFieldElement.classList.remove('top-tool', 'bottom-tool')
+    textFieldElement.classList.add(positionClass)
+  }
+}

package/tsconfig.json

@@ -7,8 +7,8 @@
     "module": "commonjs",
     "target": "es5",
     "esModuleInterop": true,
+    "jsx": "react-jsx" // or "react-jsxdev" for development mode
 
-    "jsx": "react"
   },
   "include": ["./src/**/*"]
 }