react-core-ts 1.1.0 → 1.1.22

package/src/styles/components/tooltip.css

@@ -0,0 +1,441 @@
+.tooltip-container {
+  position: relative;
+  transition:
+    background-color 0.3s,
+    width 0.3s,
+    height 0.3s,
+    color 0.3s;
+}
+
+.bottom {
+  .tooltip {
+    position: absolute;
+    bottom: -40;
+    right: 3px;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: max-content;
+    max-width: 100%;
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition: all 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+
+    &.info {
+      color: #ffffff !important;
+      border: 1px solid #ffffff;
+      background-color: #000000;
+      right: 1px;
+      top: 5px;
+    }
+
+    &.card {
+      color: #ffffff !important;
+      border: 1px solid #ffffff;
+      background-color: #000000;
+      right: -8px;
+      top: 5px;
+    }
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    right: 20px;
+    z-index: 999;
+    top: -4px;
+    border: 1px solid #e55353;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .info.tooltip::before {
+    border: 1px solid #000000;
+    background-color: #000000;
+    right: 14px;
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    top: -4px;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+  }
+
+  .card.tooltip::before {
+    border: 1px solid #000000;
+    background-color: #000000;
+    right: 14px;
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    top: -3px;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: 46px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+
+    &.info {
+      top: 30px;
+      max-width: 500px;
+      position: absolute;
+    }
+
+    &.card {
+      top: 20px;
+      max-width: 300px;
+      position: absolute;
+    }
+  }
+}
+.top-tool {
+  .tooltip {
+    position: absolute;
+    bottom: 45px !important;
+    left: 0;
+    top: auto !important;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: max-content;
+    white-space: normal;
+    z-index: 999;
+    font-size: 12px;
+    max-width: 100%;
+    color: #ff681d !important;
+    pointer-events: none;
+    transition: all 0.3s;
+    border: 1px solid #ff681d;
+    background-color: #fff;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    bottom: -4px;
+    border: 1px solid #ff681d;
+    border-left: none;
+    border-top: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #fff;
+  }
+
+  .tooltip-container:hover .tooltip {
+    bottom: 45px !important;
+    opacity: 1;
+    top: auto !important;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+.bottom-tool {
+  .tooltip {
+    position: absolute;
+    bottom: -40;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: max-content;
+    max-width: 100%;
+    z-index: 999;
+    font-size: 12px;
+    color: #ff681d !important;
+    white-space: wrap;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #ff681d;
+    background-color: #fff;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    z-index: 999;
+    top: -4px;
+    border: 1px solid #ff681d;
+    border-right: none;
+    border-bottom: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #fff;
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: 46px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+
+.right {
+  .tooltip {
+    position: absolute;
+    top: 2.5px;
+    left: calc(100% + 9px);
+    transform: translateX(0%);
+    padding: 8px;
+    opacity: 0;
+    min-width: 200px;
+    max-width: 200px;
+    min-height: calc(100% - 16px);
+    height: auto;
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip-card {
+    padding: 3px 10px 4px;
+    top: -4px;
+    min-width: 175px;
+    background-color: #3d414a;
+    border: 1px solid #3d414a;
+
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    left: -8px;
+    top: 14px;
+    z-index: 999;
+    transform: translateY(10px);
+    border: 1px solid #e55353;
+    border-top: none;
+    border-right: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .tooltip-card::before {
+    top: 8px;
+    background-color: #3d414a;
+    border: 1px solid #3d414a;
+  }
+
+  .tooltip-container:hover {
+    .tooltip {
+      top: 2.5px;
+      opacity: 1;
+      visibility: visible;
+      z-index: 999;
+      pointer-events: auto;
+    }
+
+    .tooltip-card {
+      top: -4px;
+    }
+  }
+}
+
+.left {
+  .tooltip {
+    position: absolute;
+    top: 2.5px;
+    right: calc(100% + 9px);
+    transform: translateX(0%);
+    padding: 8px;
+    opacity: 0;
+    min-width: 200px;
+    max-width: 200px;
+    min-height: calc(100% - 16px);
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    right: 0px;
+    top: 14px;
+    z-index: 999;
+    transform: translateY(10px);
+    border: 1px solid #e55353;
+    border-bottom: none;
+    border-left: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: 2.5px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+
+.top {
+  .tooltip {
+    position: absolute;
+    top: -40;
+    left: 0;
+    transform: translateX(0%);
+    padding: 0.3em 0.6em;
+    opacity: 0;
+    width: 100%;
+    z-index: 999;
+    font-size: 12px;
+    color: #fff !important;
+    pointer-events: none;
+    transition:
+      background-color 0.3s,
+      width 0.3s,
+      height 0.3s,
+      color 0.3s;
+    border: 1px solid #e55353;
+    background-color: #e55353;
+    border-radius: 6px;
+    color: rgb(34, 34, 34);
+  }
+
+  .tooltip::before {
+    position: absolute;
+    content: '';
+    height: 0.6em;
+    width: 0.6em;
+    right: 20px;
+    z-index: 999;
+    bottom: -4px;
+    border: 1px solid #e55353;
+    border-left: none;
+    border-top: none;
+    transform: translate(50%) rotate(45deg);
+    background-color: #e55353;
+  }
+
+  .tooltip-container:hover .tooltip {
+    top: -40px;
+    opacity: 1;
+    visibility: visible;
+    z-index: 999;
+    pointer-events: auto;
+  }
+}
+
+.custom-tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-text {
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.custom-tooltip {
+  position: absolute;
+  top: 100%;
+  left: 20%;
+  opacity: 0;
+  visibility: hidden;
+  font-size: 12px;
+  background: #deefff;
+  border-color: #bee0ff;
+  padding: 5px;
+  align-items: center;
+  transition:
+    opacity 0.3s,
+    visibility 0.3s,
+    top 0.3s,
+    background 0.3s;
+  z-index: 1;
+}
+
+.custom-tooltip::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 20%;
+  /* Center the arrow */
+  border-width: 9px;
+  /* Slightly larger to act as border */
+  border-style: solid;
+  border-color: transparent transparent #bee0ff transparent;
+  /* Border color */
+  transform: translateX(-20%);
+  z-index: -1;
+  /* Ensure it's behind the ::after pseudo-element */
+}
+
+.custom-tooltip::after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 20%;
+  border-width: 8px;
+  border-style: solid;
+  border-color: transparent transparent #deefff transparent;
+  transform: translateX(-20%);
+  z-index: 1;
+}
+
+.custom-tooltip-container:hover .custom-tooltip {
+  top: 100%;
+  opacity: 1;
+  visibility: visible;
+  background: #deefff;
+  transform: translate(-20%, 10px);
+}

package/src/styles/components/treedropdown.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
 }
-.qbs-tree-list-container {
+.qbs-tree-list-container-sub {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -32,16 +32,32 @@
 }
 
 .qbs-tree-list-container-sub-container.checked {
-  background: color #8dc1f0 / 20px; /* Custom background for 'slected_node/20' */
+  background-color: rgba(
+    141,
+    194,
+    240,
+    0.15
+  ) !important; /* Corresponds to bg-green-200 in Tailwind */
 }
-.qbs-tree-list-container-sub-text {
+.qbs-tree-list-container-sub-container.marginLeft {
+  margin-left: 28px; /* 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 */
+  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 */
+  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/src/styles/global.css

@@ -3,4 +3,6 @@
 @tailwind utilities;
 
 @import './components/autocomplete.css';
-@import './components/treedropdown.css';
+@import './components/treedropdown.css';
+@import './components/selectedautocomplete.css';
+@import './components/tooltip.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/**/*"]
 }