react-core-ts 2.1.38 → 4.0.0

package/src/commontypes.ts

@@ -1,242 +0,0 @@
-import React from 'react';
-import { FieldErrors, UseFormRegister } from 'react-hook-form';
-
-export type ValueProps = {
-  [key: string]: string | number | any;
-};
-export type TabPops = {
-  id: number | string;
-  label: string;
-};
-export interface AutoSuggestionInputProps {
-  id?: string;
-  label?: string;
-  fullWidth?: boolean;
-  required?: boolean;
-  value?: string;
-  searchValue?: string; // if search is started then this value will be used to search the data
-  onChange: (value?: ValueProps | ValueProps[]) => void;
-  data?: any[];
-  type?:
-    | 'custom_select'
-    | 'auto_complete'
-    | 'custom_search_select'
-    | 'auto_suggestion';
-  placeholder?: string;
-  getData?: (
-    key?: string,
-    nextBlock?: number,
-    tabValue?: number | string
-  ) => any;
-  errors?: any;
-  name: string;
-  readOnly?: boolean;
-  disabled?: boolean;
-  isMultiple?: boolean;
-  desc?: string;
-  descId?: string;
-  singleSelect?: boolean;
-  className?: string;
-  async?: boolean;
-  scrollRef?: any;
-  paginationEnabled?: boolean;
-  nextBlock?: number;
-  initialLoad?: boolean;
-  handleAction?: () => void;
-  actionLabel?: string;
-  notDataMessage?: string;
-  initialDataMessage?: string;
-  selectedItems?: any[];
-  onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
-  onSearchValueChange?: (value: string) => void;
-  dopDownRef?: HTMLInputElement;
-  expandable?: boolean;
-  textCount?: number;
-  itemCount?: number;
-  isTreeDropdown?: boolean;
-  flatArray?: boolean;
-  parentField?: string;
-  countOnly?: boolean; // only show selected items count
-  typeOnlyFetch?: boolean; // async only call when typed any value
-  tab?: TabPops[];
-  clearTabSwitch?: boolean;
-  errorFlag?: boolean;
-  selectedRowLimit?: number; // used for showing selected items rows limit, will show scroll if more items added
-  topMargin?: number; // adjust dropdown postion manually if any overlap issue
-  currentTab?: number; // current active tab
-  selectedLabel?: string; // Able to change the "Item selected" label
-  viewMode?: boolean; // show only selected items
-  handleUpdateParent?: (val: boolean, level?: string) => void;
-  isSeachable?: boolean; // show search input
-  customDropOffset?: number; // adjust dropdown postion manually if any overlap issue
-  showIcon?: boolean;
-  handleShowIcon?: (node: any) => boolean;
-  hasDisableSelection?: (node: any) => boolean;
-  onFocusTreeDropdown?: (
-    e: React.FocusEvent<HTMLTextAreaElement, Element>
-  ) => void;
-  inputType?: 'text' | 'textarea';
-  filterCondition?: {
-    filterKey?: any;
-    filterValue?: any;
-  };
-  shortCode?: string
-  labelCode?: string,
-  tabInlineSearch?: boolean // tab dropdown search
-  matchFromStart?: boolean // match data's from the starting position
-  autoDropdown?: boolean; // enable all items list items
-  enableSelectAll?: boolean // enable select all option
-
-  tabName?: string;
-  tabDesc?: string;
-  tabDescId?: string;
-  tabSelectedItems?: any[];
-  getTabData?: (key?: string) => Promise<any>;
-  tabData?: any[];
-  enableToolsTab?: boolean;
-  toolTabs?: TabPops[];
-  toolTabClearSwitch?: boolean;
-  onToolTabChange?: (value?: ValueProps | ValueProps[]) => void;
-  autoRefreshMainDropdown?: boolean;
-  singleSelectIcon?: any;
-  autoTabSelectAll?: boolean; // auto select all when tab is selected
-  moreOptionTab?: React.ReactNode; // custom component to render in the last tab (checkbox, radio, icon, etc.)
-  moreOptionTabLabel?: string; // label for the more options tab (default: "More Options")
-  moreOptionTabIcon?: React.ReactNode; // icon to display in the more options tab
-  onMoreOptionChange?: (values?: any) => void; // separate callback for moreOptionValues
-  resetAllSearch?: boolean; // allow to reset if tabInlineSearch is false
-}
-export interface IconsProps {
-  name: any;
-  className?: string;
-  onClick?: (e: any) => void;
-  color?: string;
-  type?: string;
-  isWrapper?: boolean;
-  viewBox?: boolean;
-  svgClassName?: string;
-  custDimension?: number;
-  style?: any;
-  hasCustomSize?: boolean;
-  onMouseDown?: (e: any) => void;
-  onMouseUp?: (e: any) => void;
-  onMouseLeave?: (e: any) => void;
-}
-export interface IconProps {
-  stroke?: number;
-  className?: string;
-  color?: string;
-  width?: number;
-  height?: number;
-}
-export interface TextFieldProps {
-  id: string;
-  name: string;
-  label?: string;
-  type?: string;
-  decimal?: boolean;
-  fullwidth?: boolean;
-  step?: number;
-  disabled?: boolean;
-  uppercase?: boolean;
-  readOnly?: boolean;
-  placeholder?: string;
-  required?: boolean;
-  labelTitle?: string;
-  fieldEdit?: boolean;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xxs';
-  edited?: boolean;
-  onEditComplete?: () => void;
-  value?: string;
-  onEditCancel?: () => void;
-  adorement?: JSX.Element | string | undefined;
-  autoComplete?: boolean;
-  autoFocus?: boolean;
-  register?: any;
-  setFocus?: any;
-  errors?: FieldErrors;
-  isValid?: boolean;
-  isTooltip?: boolean;
-  className?: string;
-  showValidityCheck?: boolean;
-  maxLength?: number;
-  max?: number;
-  min?: number;
-  minLength?: number;
-  keyRegexPattern?: string;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  adjustFieldLabel?: string;
-  backGround?: any; //added for set background colour according to the form
-  prefixes?: any;
-  onPrefixChange?: (e: any) => void;
-  prefixValue?: any;
-  onStepUp?: () => void;
-  onStepDown?: () => void;
-  width?: number;
-  adorementPosition?: 'start' | 'end';
-  hideLabel?: boolean;
-  defaultData?: string[];
-  onCreatableChange?: (e: string[]) => void;
-  infoTitle?: string;
-  showInfo?: boolean;
-  inputType?: 'text' | 'textarea';
-  isModern?: boolean; // added for modern text field
-  enableSearch?: boolean; // enable search button in text field 
-  onSearchClick?: (value: string) => void; // on search click event
-  inputClassName?: string;
-}
-
-export interface TextAreaProps {
-  id: string;
-  name: string;
-  label?: string;
-  rows?: number;
-  fullwidth?: boolean;
-  className?: string;
-  disabled?: boolean;
-  placeholder?: string;
-  required?: boolean;
-  fieldEdit?: boolean;
-  edited?: boolean;
-  value?: string;
-  onEditComplete?: () => void;
-  onEditCancel?: () => void;
-  adorement?: JSX.Element;
-  autoComplete?: boolean;
-  autoFocus?: boolean;
-  hideLabel?: boolean;
-  minLength?: number;
-  maxLength?: number;
-  register?: any;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-
-  setFocus?: any;
-  errors?: FieldErrors;
-  boxHeight?: string;
-  boxMinHeight?: number | string;
-}
-export interface CheckboxProps {
-  id: string;
-  name: string;
-  label?: string;
-  disabled?: boolean;
-  intermediate?: boolean;
-  labalClass?: string;
-  className?: string;
-  checked?: boolean;
-  register?: UseFormRegister<any>;
-  handleChange?: (e: any) => void;
-  value?: string | number;
-}
-export interface RadioProps {
-  id: string;
-  name: string;
-  label?: string;
-  value?: string | number;
-  checked?: boolean;
-  disabled?: boolean;
-  customLabel?: boolean;
-  handleChange?: (e: any) => void;
-  prefixNode?: React.ReactNode;
-}

package/src/components/DropdownList.tsx

@@ -1,85 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-type ValueProps = {
-  idx: number;
-  suggestion: any;
-  isSelected: (item: any, selectedItems: any[] | string) => boolean;
-  handleSuggestionClick: (suggestion: any) => void;
-  handleMultiSelect: (e: any, suggestion: any) => void;
-  selected: any;
-  isMultiple?: boolean;
-  singleSelect?: boolean;
-  desc: string;
-  hideCheckbox?: boolean;
-  shortCode?: string
-  labelCode?: string
-  focusedIndex?: number
-  setItemRef?: (index: number, ref: HTMLDivElement | null) => void
-};
-const DropdownList: React.FC<ValueProps> = ({
-  idx,
-  suggestion,
-  isSelected,
-  handleSuggestionClick,
-  handleMultiSelect,
-  selected,
-  isMultiple,
-  singleSelect,
-  desc,
-  hideCheckbox = false,
-  shortCode = '',
-  labelCode = '',
-  focusedIndex = 0,
-  setItemRef
-}) => {
-  
-  return (
-    <div
-      key={idx.toString()}
-      ref={(el) => setItemRef?.(idx, el)}  // Properly store each ref
-      className={`qbs-autocomplete-listitem-container ${
-        (isMultiple || singleSelect) && 'qbs-autocomplete-checkbox-container'
-      } ${isSelected(suggestion, selected) ? 'is-selected' : ''} ${idx === focusedIndex ? "is-selected" : ""}`}
-      tabIndex={idx}
-    >
-      {(isMultiple || singleSelect) && !hideCheckbox && (
-        <div className="qbs-autocomplete-checkbox">
-          <input
-            onChange={(e) => handleMultiSelect(e, suggestion)}
-            type="checkbox"
-            checked={isSelected(suggestion, selected)}
-            id={`qbs-checkbox-${idx.toString()}`}
-          />
-          <label htmlFor={`qbs-checkbox-${idx.toString()}`}>
-            <svg
-              width="8"
-              height="6"
-              viewBox="0 0 8 6"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
-                fill="white"
-              />
-            </svg>
-          </label>
-        </div>
-      )}
-      <div
-        key={idx}
-        className={`qbs-autocomplete-suggestions-item ${
-          isSelected(suggestion, selected) ? 'is-selected' : ''
-        }`}
-        onClick={() => handleSuggestionClick(suggestion)}
-        data-testid={suggestion[desc]}
-      >
-        {suggestion[desc]}
-      </div>
-      {labelCode && suggestion?.[labelCode] && <div className='label-code'>{suggestion?.[labelCode]}</div>}
-      {shortCode && suggestion?.[shortCode] && <div className='short-code'>{suggestion?.[shortCode]}</div>}
-    </div>
-  );
-};
-
-export default DropdownList;

package/src/components/Icons.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-
-export const DropdownIcon: React.FC<any> = (className) => {
-  return (
-    <svg
-      width="14"
-      height="12"
-      className={className}
-      viewBox="0 0 14 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M13.2996 0.759638L0.699221 0.759638C0.571648 0.760037 0.446601 0.795222 0.337538 0.861405C0.228475 0.927588 0.139526 1.02226 0.080267 1.13523C0.0210075 1.24821 -0.00631905 1.37521 0.00122929 1.50256C0.00877762 1.62991 0.0509148 1.75279 0.123105 1.85797L6.42328 10.9582C6.68439 11.3355 7.31301 11.3355 7.57482 10.9582L13.875 1.85797C13.9479 1.75301 13.9907 1.63006 13.9986 1.5025C14.0066 1.37494 13.9794 1.24764 13.9201 1.13442C13.8608 1.02121 13.7716 0.926414 13.6622 0.860339C13.5528 0.794264 13.4274 0.759437 13.2996 0.759638Z"
-        fill="#003C71"
-      />
-    </svg>
-  );
-};
-
-export const DropSideIcon: React.FC<any> = (className) => {
-    return (
-      
-    <svg
-      width="12"
-      height="14"
-      className={className}
-      viewBox="0 0 12 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M0.884639 0.700422V13.3008C0.885038 13.4284 0.920223 13.5534 0.986406 13.6625C1.05259 13.7715 1.14726 13.8605 1.26024 13.9197C1.37321 13.979 1.50021 14.0063 1.62756 13.9988C1.75491 13.9912 1.87779 13.9491 1.98297 13.8769L11.0832 7.57672C11.4605 7.31561 11.4605 6.68699 11.0832 6.42518L1.98297 0.125005C1.87801 0.0520805 1.75506 0.00931579 1.6275 0.00135729C1.49994 -0.00660121 1.37264 0.0205509 1.25942 0.0798637C1.14621 0.139176 1.05142 0.228381 0.98534 0.337786C0.919266 0.447191 0.884438 0.572612 0.884639 0.700422Z"
-        fill="#003C71"
-      />
-    </svg>
-  );
-};

package/src/components/InputActions.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-
-import { Close, DropArrow } from '../utilities/icons';
-
-type ValueProps = {
-  inputValue: string;
-  searchValue: string;
-  dropOpen: boolean;
-  countOnly?: boolean;
-  handleDropOpen: (e: any) => void;
-  handleDropClose: (e: any) => void;
-  disabled: boolean;
-  readOnly: boolean;
-  expandable: boolean;
-  handleClear: () => void;
-  error?: boolean;
-  viewMode?: boolean;
-  uniqueDropArrowId?: string;
-  autoDropdown?: boolean;
-};
-const InputActions: React.FC<ValueProps> = ({
-  inputValue,
-  searchValue,
-  dropOpen,
-  handleDropOpen,
-  handleDropClose,
-  disabled,
-  readOnly,
-  expandable,
-  handleClear,
-  countOnly,
-  error,
-  viewMode,
-  uniqueDropArrowId,
-  autoDropdown = false,
-}) => {
-  return (
-    <div
-      className={`${
-        error
-          ? 'qbs-autocomplete-witherror-close-icon'
-          : 'qbs-autocomplete-close-icon'
-      } `}
-    >
-      {(inputValue || searchValue) &&
-        !disabled &&
-        !readOnly &&
-        !expandable &&
-        !countOnly && (
-          <button
-            onClick={handleClear}
-            className="icon-button text-[#667085] "
-            type="button"
-            aria-label="clear"
-          >
-            <Close />
-          </button>
-        )}
-      {!autoDropdown &&
-        (dropOpen ? (
-          <button
-            type="button"
-            onClick={(e) => handleDropClose(e)}
-            className="icon-button text-[#667085] "
-            aria-label="toggle"
-            name="toggle"
-          >
-            <DropArrow
-              className={`icon-button-rotate`}
-              uniqueId={uniqueDropArrowId}
-            />
-          </button>
-        ) : (
-          <button
-            disabled={(disabled || readOnly) && !viewMode}
-            type="button"
-            className="icon-button text-[#667085] "
-            onClick={(e) => handleDropOpen(e)}
-            aria-label="toggle"
-            name="toggle"
-          >
-            <DropArrow uniqueId={uniqueDropArrowId} />
-          </button>
-        ))}
-    </div>
-  );
-};
-
-export default InputActions;

package/src/components/TreeNode.tsx

@@ -1,136 +0,0 @@
-import React from 'react';
-
-import QuestionIcon from './customIcons/QuestionIcon';
-import { DropSideIcon } from './Icons';
-
-const TreeNode: React.FC<any> = ({
-  node,
-  isMultiple,
-  singleSelect,
-  idx,
-  desc,
-  toggleExpand,
-  updateNode,
-  children,
-  descId,
-  isSelected,
-  selected,
-  handleSelect,
-  singleSelectIcon,
-  showIcon,
-  hasDisableSelection,
-}) => {
-  // Toggle the expanded state when clicking on the node
-  const handleToggle = (node?: any) => {
-    toggleExpand(node[descId]);
-  };
-
-  const handleCheckbox = (e: any, dataItem: any) => {
-    const { checked } = e.target;
-    updateNode(dataItem[descId], checked, dataItem);
-  };
-
-  return (
-    <div>
-      <li className="qbs-tree-list-container">
-        <div
-          className={`qbs-tree-list-container-sub ${
-            node?.children?.length > 0 ? '' : 'no-children'
-          } `}
-        >
-          {/* Show an icon based on the expanded/collapsed state */}
-
-          {node?.children && node?.children?.length > 0 && (
-            <span
-              onClick={() => handleToggle(node)}
-              className={`qbs-tree-list-container-sub-icon ${
-                node.expanded ? 'expanded' : ''
-              }`}
-            >
-              <DropSideIcon />
-            </span>
-          )}
-          <div
-            className={`${
-              isMultiple || (singleSelect && !showIcon)
-                ? 'qbs-tree-list-container-sub-container'
-                : 'qbs-tree-list-container-sub-container-hideicon'
-            } ${isSelected(node, selected) ? 'checked' : ''} ${
-              node.expanded ? 'qbs-expanded-child' : ''
-            } ${node?.children?.length > 0 ? '' : 'lightmarginLeft'}`}
-          >
-            {(isMultiple || (singleSelect && showIcon)) && (
-              <div
-                style={{ alignItems: singleSelect ? 'flex-start' : 'center' }}
-                className={`${'qbs-autocomplete-checkbox'}`}
-              >
-                {!singleSelect ? (
-                  <>
-                    <input
-                      onChange={(e) => handleCheckbox(e, node)} // Pass correct node to the handler
-                      type="checkbox"
-                      checked={isSelected(node, selected)}
-                      id={`qbs-checkbox-${idx.toString()}`}
-                    />
-                    <label htmlFor={`qbs-checkbox-${idx.toString()}`}>
-                      <svg
-                        width="8"
-                        height="6"
-                        viewBox="0 0 8 6"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
-                          fill="white"
-                        />
-                      </svg>
-                    </label>
-                  </>
-                ) : (
-                  showIcon && (
-                    <span className="qbs-tree-single-select-icon">
-                      {singleSelectIcon ?? <QuestionIcon />}
-                    </span>
-                  )
-                )}
-              </div>
-            )}
-            {singleSelect ? (
-              hasDisableSelection ? (
-                <span
-                  className={`${
-                    node.expanded ? 'qbs-expanded-child' : ''
-                  } qbs-tree-list-container-sub-text `}
-                >
-                  {node[desc]}
-                </span>
-              ) : (
-                <span
-                  onClick={() => handleSelect(node)}
-                  className={`${
-                    node.expanded ? 'qbs-expanded-child' : ''
-                  } qbs-tree-list-container-sub-text cursor-pointer`}
-                >
-                  {node[desc]}
-                </span>
-              )
-            ) : (
-              <span
-                className={`${
-                  node.expanded ? 'qbs-expanded-child' : ''
-                } qbs-tree-list-container-sub-text`}
-              >
-                {node[desc]}
-              </span>
-            )}
-          </div>
-        </div>
-      </li>
-
-      {children}
-    </div>
-  );
-};
-
-export default TreeNode;

package/src/components/customIcons/Attachments.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-
-import { IconProps } from '../../commontypes'
-
-const Attachment: React.FC<IconProps> = ({ className = '', stroke = 1.5 }) => {
-  return (
-    <path
-      d="M21.1525 10.8995L12.1369 19.9151C10.0866 21.9653 6.7625 21.9653 4.71225 19.9151C2.662 17.8648 2.662 14.5407 4.71225 12.4904L13.7279 3.47483C15.0947 2.108 17.3108 2.108 18.6776 3.47483C20.0444 4.84167 20.0444 7.05775 18.6776 8.42458L10.0156 17.0866C9.33213 17.7701 8.22409 17.7701 7.54068 17.0866C6.85726 16.4032 6.85726 15.2952 7.54068 14.6118L15.1421 7.01037"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  )
-}
-
-export default Attachment

package/src/components/customIcons/CommentIcon.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-
-import { IconProps } from '../../commontypes'
-
-const CommentIcon: React.FC<IconProps> = ({ className = '', stroke = 1.5 }) => {
-  return (
-    <path
-      d="M17 0C17.7956 0 18.5587 0.316071 19.1213 0.87868C19.6839 1.44129 20 2.20435 20 3V13C20 13.7956 19.6839 14.5587 19.1213 15.1213C18.5587 15.6839 17.7956 16 17 16H5.333L2 18.5C1.176 19.118 0 18.53 0 17.5V3C0 2.20435 0.316071 1.44129 0.87868 0.87868C1.44129 0.316071 2.20435 0 3 0H17ZM9 9H6C5.73478 9 5.48043 9.10536 5.29289 9.29289C5.10536 9.48043 5 9.73478 5 10C5 10.2652 5.10536 10.5196 5.29289 10.7071C5.48043 10.8946 5.73478 11 6 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10C10 9.73478 9.89464 9.48043 9.70711 9.29289C9.51957 9.10536 9.26522 9 9 9ZM14 5H6C5.74512 5.00028 5.49997 5.09788 5.31463 5.27285C5.1293 5.44782 5.01777 5.68695 5.00283 5.94139C4.98789 6.19584 5.07067 6.44638 5.23426 6.64183C5.39786 6.83729 5.6299 6.9629 5.883 6.993L6 7H14C14.2549 6.99972 14.5 6.90212 14.6854 6.72715C14.8707 6.55218 14.9822 6.31305 14.9972 6.05861C15.0121 5.80416 14.9293 5.55362 14.7657 5.35817C14.6021 5.16271 14.3701 5.0371 14.117 5.007L14 5Z"
-      fill="currentColor"
-    />
-  )
-}
-
-export default CommentIcon