react-core-ts 3.0.0 → 4.0.0

package/src/styles/components/treedropdown.css

@@ -1,97 +0,0 @@
-.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/src/utilities/NewTooltip.tsx

@@ -1,185 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-
-const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
-  const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
-  const dropRef = useRef(null);
-  const menuButtonRef = useRef<HTMLDivElement>(null);
-  const [isTooltipMounted, setIsTooltipMounted] = useState(false);
-
-  const [visible, setVisible] = useState(false);
-  const [tooltipStyle, setTooltipStyle] = useState({
-    top: 0,
-    left: 0,
-    width: 0,
-  });
-  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const handleMouseEnter = (e: React.MouseEvent) => {
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
-    if (isTooltipMounted) {
-      setVisible(true);
-    }
-  };
-
-  useEffect(() => {
-    if (
-      visible &&
-      isTooltipMounted &&
-      menuButtonRef.current &&
-      dropRef.current
-    ) {
-      const inputBoxRect = menuButtonRef.current.getBoundingClientRect();
-      const tooltipHeight = dropRef.current.offsetHeight;
-      const tooltipWidth = dropRef.current.offsetWidth;
-      const boxWidth = inputBoxRect.width;
-      const viewportHeight = window.innerHeight;
-
-      const spaceAbove = inputBoxRect.top;
-      const spaceBelow = viewportHeight - inputBoxRect.bottom;
-
-      let dropPosition: 'top-position' | 'bottom-position' = 'bottom-position';
-      if (spaceBelow >= tooltipHeight + 20) {
-        dropPosition = 'bottom-position';
-      } else if (spaceAbove >= tooltipHeight + 20) {
-        dropPosition = 'top-position';
-      } else {
-        dropPosition =
-          spaceBelow > spaceAbove ? 'bottom-position' : 'top-position';
-      }
-      setDropdownPosition(dropPosition);
-
-      let top =
-        dropPosition === 'bottom-position'
-          ? inputBoxRect.bottom + 8 + window.scrollY
-          : inputBoxRect.top - tooltipHeight - 8 + window.scrollY;
-
-      const left = inputBoxRect.left + boxWidth / 2 - 200 / 2 + window.scrollX;
-
-      setTooltipStyle({
-        top,
-        left: Math.max(left, 8),
-        width: 200,
-      });
-
-      // ✨ Recalculate again after a small delay
-      setTimeout(() => {
-        if (dropRef.current) {
-          const correctedHeight = dropRef.current.offsetHeight;
-          const correctedTop =
-            dropPosition === 'bottom-position'
-              ? inputBoxRect.bottom + 8 + window.scrollY
-              : inputBoxRect.top - correctedHeight - 8 + window.scrollY;
-
-          setTooltipStyle((prev) => ({
-            ...prev,
-            top: correctedTop,
-          }));
-        }
-      }, 0);
-    }
-  }, [visible]);
-
-  useEffect(() => {
-    const handleMouseMove = (event: MouseEvent) => {
-      if (!menuButtonRef.current || !dropRef.current) return;
-
-      const target = event.target as Node;
-      const menuContains = menuButtonRef.current.contains(target);
-      const tooltipContains = dropRef.current.contains(target);
-
-      if (!menuContains && !tooltipContains) {
-        if (!hideTimeoutRef.current) {
-          hideTimeoutRef.current = setTimeout(() => {
-            setVisible(false);
-            hideTimeoutRef.current = null;
-          }, 200); // small delay (200ms) to avoid flicker
-        }
-      } else {
-        if (hideTimeoutRef.current) {
-          clearTimeout(hideTimeoutRef.current);
-          hideTimeoutRef.current = null;
-        }
-      }
-    };
-
-    if (visible) {
-      document.addEventListener('mousemove', handleMouseMove);
-    }
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current);
-        hideTimeoutRef.current = null;
-      }
-    };
-  }, [visible]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropRef.current && !dropRef.current.contains(event.target as Node)) {
-        setVisible(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-  return (
-    <div
-      onMouseEnter={handleMouseEnter}
-      ref={menuButtonRef}
-      style={{ display: 'flex', pointerEvents: 'auto' }}
-    >
-      {children}
-
-      {enabled &&
-        tooltipStyle &&
-        ReactDOM.createPortal(
-          <div
-            ref={(node) => {
-              dropRef.current = node;
-              if (node) {
-                setIsTooltipMounted(true);
-              }
-            }}
-            className={`tooltiptext custom_tooltip_style_class ${
-              dropdownPosition == 'bottom-position' ? 'down' : 'up'
-            }`}
-            style={{
-              top: tooltipStyle.top,
-              left: tooltipStyle.left,
-              opacity: visible ? 1 : 0,
-              visibility: visible ? 'visible' : 'hidden',
-              width: tooltipStyle.width,
-              minWidth: '60px',
-              maxWidth: '200px',
-              pointerEvents: 'auto',
-              maxHeight: '210px',
-            }}
-          >
-            <div
-              className=""
-              style={{
-                maxHeight: '200px',
-                overflowY: 'auto', // ✅ Scroll only inside content
-                overflowX: 'hidden',
-                padding: '4px',
-              }}
-            >
-              {title}
-            </div>
-          </div>,
-          document.body
-        )}
-    </div>
-  );
-};
-
-export default ExpandableToolTip;

package/src/utilities/autosuggestions.ts

@@ -1,99 +0,0 @@
-import { useEffect, useState } from "react";
-
-type ValueProps = {
-  [key: string]: string;
-};
-
-type UseSuggestionsType = (
-  getData: (
-    key?: string,
-    next?: number,
-    tabValue?: number | string
-  ) => Promise<ValueProps[]>,
-  initialData?: ValueProps[],
-  dropOpen?: boolean,
-  asyncFetch?: boolean,
-  paginationEnabled?: boolean,
-  typeOnlyFetch?: boolean,
-  inputValue?: string,
-  isMultiple?: boolean,
-  setNextPage?: (value: number) => void,
-  selectedItems?: any[],
-  initialLoad?: boolean
-) => {
-  suggestions: ValueProps[];
-  isLoading: boolean;
-
-  handlePickSuggestions: (
-    value?: string,
-    next?: number,
-    append?: boolean,
-    tabValue?: string | number
-  ) => Promise<void>;
-  resetSuggections?: () => void
-};
-
-export const useSuggestions: UseSuggestionsType = (
-  getData,
-  initialData = [],
-  dropOpen = false,
-  asyncFetch = false,
-  paginationEnabled = false,
-  initialLoad = false,
-  inputValue = "",
-  isMultiple,
-  setNextPage,
-  selectedItems = [],
-  typeOnlyFetch = false
-) => {
-  const [suggestions, setSuggestions] = useState<ValueProps[]>(initialData);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  const resetSuggections = () => {
-    setSuggestions([]);
-  }
-
-  const handlePickSuggestions = async (
-    value?: string,
-    nextPage?: number,
-    appendData?: boolean,
-    tabValue?: string | number
-  ) => {
-    setIsLoading(true);
-    try {
-      const data = await (asyncFetch || initialLoad
-        ? typeOnlyFetch && value === ""
-          ? Promise.resolve([])
-          : getData(value, nextPage, tabValue)
-        : Promise.resolve(initialData));
-      if (!data || data?.length === 0) {
-        setNextPage(undefined);
-      }
-      const newSuggestions = appendData ? [...suggestions, ...data] : data;
-      setSuggestions(newSuggestions);
-    } catch (error) {
-      console.error("Error fetching data:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (dropOpen) {
-      if (!isMultiple && (!inputValue || suggestions.length === 0)) {
-        setNextPage(1);
-        handlePickSuggestions("", paginationEnabled ? 1 : undefined);
-      } else if (
-        isMultiple &&
-        (suggestions.length === 0 ||
-          !selectedItems ||
-          selectedItems?.length === 0)
-      ) {
-        if (!typeOnlyFetch && !inputValue)
-          handlePickSuggestions("", paginationEnabled ? 1 : undefined);
-      }
-    }
-  }, [dropOpen]);
-
-  return { suggestions, isLoading, handlePickSuggestions, resetSuggections};
-};

package/src/utilities/convertFlatArraytoTreeStructure.ts

@@ -1,27 +0,0 @@
-export function buildTree(data: any[], idField: string, parentField: string) {
-  const nodeMap = new Map();
-
-  // Initialize all nodes
-  data.forEach((node) => {
-    node.children = [];
-    nodeMap.set(node[idField], node);
-  });
-
-  // Build the tree structure
-  const tree: any[] = [];
-
-  data.forEach((node) => {
-    if (node[parentField]) {
-      // Find the parent and add the node as a child
-      const parent = nodeMap.get(node[parentField]);
-      if (parent) {
-        parent.children.push({ ...node, checked: false });
-      }
-    } else {
-      // No parentId means it's a root node
-      tree.push({ ...node, checked: false });
-    }
-  });
-
-  return tree;
-}

package/src/utilities/debounce.ts

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

package/src/utilities/deepDebounce.ts

@@ -1,15 +0,0 @@
-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/deepEqual.ts

@@ -1,54 +0,0 @@
-export function deepEqual(value1: any, value2: any): boolean {
-  // Check for strict equality first
-  if (value1 === value2) {
-    return true;
-  }
-
-  // If either is null (but not both), they're not equal
-  if (value1 === null || value2 === null) {
-    return false;
-  }
-
-  // If types differ, they're not equal
-  if (typeof value1 !== typeof value2) {
-    return false;
-  }
-
-  // Check objects (including arrays)
-  if (typeof value1 === 'object' && typeof value2 === 'object') {
-    // Different constructors means they are different objects
-    if (value1.constructor !== value2.constructor) {
-      return false;
-    }
-
-    if (Array.isArray(value1)) {
-      // Array length comparison
-      if (value1.length !== value2.length) {
-        return false;
-      }
-      // Deep compare each element
-      for (let i = 0; i < value1.length; i++) {
-        if (!deepEqual(value1[i], value2[i])) {
-          return false;
-        }
-      }
-      return true;
-    } else {
-      // Compare object keys and values
-      const keys1 = Object.keys(value1);
-      const keys2 = new Set(Object.keys(value2));
-      if (keys1.length !== keys2.size) {
-        return false;
-      }
-      for (const key of keys1) {
-        if (!keys2.has(key) || !deepEqual(value1[key], value2[key])) {
-          return false;
-        }
-      }
-      return true;
-    }
-  }
-
-  // If none of the above, they're not equal
-  return false;
-}

package/src/utilities/expandableTootltip.tsx

@@ -1,147 +0,0 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-
-const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
-  const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
-  const dropRef = useRef(null);
-  const menuButtonRef = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
-  const [tooltipStyle, setTooltipStyle] = useState({
-    top: 0,
-    left: 0,
-    width: 0,
-  });
-  const adjustDropdownPosition = (): string => {
-    if (menuButtonRef.current) {
-      const inputBoxRect = menuButtonRef.current?.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-
-      const spaceAbove = inputBoxRect.top;
-      const spaceBelow = viewportHeight - inputBoxRect.bottom;
-      if (spaceAbove > spaceBelow) {
-        if (spaceAbove > 90 && spaceBelow < 120) {
-          return 'top-position';
-        } else {
-          return 'bottom-position';
-        }
-      } else {
-        const diff: number = spaceBelow - spaceAbove;
-        if (spaceAbove > 90 && spaceBelow > 90 && diff < 90) {
-          return 'top-position';
-        } else {
-          return 'bottom-position';
-        }
-      }
-    }
-  };
-
-  const handleMouseEnter = (e: React.MouseEvent) => {
-    if (menuButtonRef.current) {
-      const dropPosition = adjustDropdownPosition();
-      setDropdownPosition(dropPosition);
-      const rect = (e.target as HTMLElement).getBoundingClientRect();
-      let top = rect.bottom + window.scrollY;
-      let left = rect.left + window.scrollX;
-      const height = rect.height;
-      const width = dropRef?.current?.offsetWidth;
-      if (dropPosition === 'bottom-position') {
-        top = top + height / 2 - 5;
-      } else {
-        top = top - height * 2 + 15;
-      }
-
-      setTooltipStyle({
-        top: top,
-        left: left,
-        width: width,
-      });
-      setVisible(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    setVisible(false);
-  };
-
-  useLayoutEffect(() => {
-    const updateTooltipPosition = () => {
-      if (dropRef.current && visible && tooltipStyle) {
-        const tooltipHeight = dropRef.current.offsetHeight;
-        const tooltipWidth = dropRef.current.offsetWidth;
-        const boxWidth = menuButtonRef.current.offsetWidth;
-        setTooltipStyle((prevStyle) => ({
-          ...prevStyle,
-          left:
-            prevStyle.left + boxWidth / 2 - tooltipWidth / 2 < 0
-              ? 20
-              : prevStyle.left + boxWidth / 2 - tooltipWidth / 2,
-          width: tooltipWidth,
-          top:
-            dropdownPosition === 'bottom-position'
-              ? prevStyle.top
-              : prevStyle.top - tooltipHeight,
-        }));
-      }
-    };
-
-    if (visible) {
-      updateTooltipPosition();
-    }
-
-    window.addEventListener('resize', updateTooltipPosition);
-
-    return () => {
-      window.removeEventListener('resize', updateTooltipPosition);
-    };
-  }, [visible, dropdownPosition]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropRef.current && !dropRef.current.contains(event.target as Node)) {
-        setVisible(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      ref={menuButtonRef}
-      style={{ display: 'flex' }}
-    >
-      {children}
-
-      {visible &&
-        enabled &&
-        tooltipStyle &&
-        ReactDOM.createPortal(
-          <span
-            ref={(node) => (dropRef.current = node)}
-            className={`tooltiptext custom_tooltip_style_class  ${
-              dropdownPosition == 'bottom-position' ? 'down' : 'up'
-            }`}
-            style={{
-              top: tooltipStyle.top,
-              left: tooltipStyle.left,
-              opacity: 1,
-              width: tooltipStyle.width,
-              minWidth: '60px',
-              maxWidth: '200px',
-              visibility: 'visible',
-            }}
-          >
-            <span className="tooltip-text-container">{title}</span>
-          </span>,
-          document.body
-        )}
-    </div>
-  );
-};
-
-export default ExpandableToolTip;

package/src/utilities/filterSuggestions.ts

@@ -1,54 +0,0 @@
-interface Item {
-  [key: string]: string;
-}
-
-export const filterSuggestions = (
-  data: Item[],
-  query: string,
-  type: string,
-  desc: string,
-  inputValue?: any[] | string,
-  async?: boolean, // API filter
-  isTreeDropdown?: boolean, // Tree dropdowns
-  withoutSort?: boolean, // Don't show selected items on top of the suggections
-  matchFromStart?: boolean
-): Item[] => {
-  if (
-    (type === 'custom_search_select' ||
-      type === 'auto_complete' ||
-      type === 'auto_suggestion') &&
-    !async &&
-    query &&
-    !isTreeDropdown
-  ) {
-    return data?.filter((item) =>
-      matchFromStart
-        ? item[desc].toLowerCase().startsWith(query.toLowerCase())
-        : item[desc].toLowerCase().includes(query.toLowerCase())
-    );
-  }
-  return isTreeDropdown || withoutSort
-    ? data
-    : sortedArrayData(data, inputValue, desc);
-};
-
-const sortedArrayData = (
-  filteredData: any[],
-  selectedItems: any[] | string,
-  desc: any
-) => {
-  return [...filteredData].sort((a, b) => {
-    let aIsSelected: boolean;
-    let bIsSelected: boolean;
-
-    if (Array.isArray(selectedItems)) {
-      aIsSelected = selectedItems.some((item) => item[desc] === a[desc]);
-      bIsSelected = selectedItems.some((item) => item[desc] === b[desc]);
-    } else {
-      aIsSelected = a[desc] === selectedItems;
-      bIsSelected = b[desc] === selectedItems;
-    }
-
-    return (bIsSelected ? 1 : 0) - (aIsSelected ? 1 : 0);
-  });
-};

package/src/utilities/generateInnerWidth.ts

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