react-core-ts 2.1.38 → 4.0.0

package/docs/index.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Autocomplete App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

package/docs/index.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package/docs/store.ts

@@ -1,67 +0,0 @@
-export const treeDropData = [
-  {
-    name: 'Port 22 - This is the main port in the northern region with significant traffic and operations',
-    id: 22,
-    parentId: null,
-  },
-  {
-    name: 'Port C - A key sub-port with heavy container traffic in the southern bay area',
-    id: 1,
-    parentId: null,
-  },
-  {
-    name: 'Port G - A small',
-    id: 2,
-    parentId: null,
-  },
-  {
-    name: 'Port H - A minor local port focusing on fisheries and small-scale cargo,Port H - A minor local port focusing on fisheries and small-scale cargo,Port H - A minor local port focusing on fisheries and small-scale cargo, Port H - A minor local port focusing on fisheries and small-scale cargo Port H - A minor local port focusing on fisheries and small-scale cargo Port H - A minor local port focusing on fisheries and small-scale cargo',
-    id: 3,
-    parentId: 2,
-  },
-  {
-    name: 'Port I - A coastal port for regional trade and tourism operations',
-    id: 4,
-    parentId: null,
-  },
-  {
-    name: 'Port J - A harbor for tourist cruises and commercial boats',
-    id: 5,
-    parentId: 4,
-  },
-  {
-    name: 'Port D - An industrial port dealing with large-scale cargo and ship repair services',
-    id: 6,
-    parentId: 22,
-  },
-  {
-    name: 'Port K - A dock specializing in shipbuilding and marine repairs',
-    id: 7,
-    parentId: 6,
-  },
-  {
-    name: 'Port L - A repair facility for both military and commercial vessels',
-    id: 8,
-    parentId: 7,
-  },
-  {
-    name: 'Port B - This is the largest port in the central region, supporting international trade',
-    id: 9,
-    parentId: null,
-  },
-  {
-    name: 'Port E - A primary export port dealing with raw materials and heavy goods',
-    id: 10,
-    parentId: 9,
-  },
-  {
-    name: 'Port M - A small export hub for agricultural and mining products',
-    id: 11,
-    parentId: 10,
-  },
-  {
-    name: 'Port N - A warehouse and storage center for exported goods',
-    id: 12,
-    parentId: 11,
-  },
-];

package/docs/style.css

@@ -1,4 +0,0 @@
-.autocomplete-section {
-  display: flex;
-  flex-direction: column;
-}

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: [
-    require('tailwindcss'),
-    require('autoprefixer'),
-  ],
-};

package/src/AutoComplete.tsx

@@ -1,562 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-
-import { AutoSuggestionInputProps } from './commontypes';
-import { useSuggestions } from './utilities/autosuggestions';
-import { debounce } from './utilities/debounce';
-import { deepEqual } from './utilities/deepEqual';
-import { filterSuggestions } from './utilities/filterSuggestions';
-import { isSelectionMatch, isSelectionMatchValue } from './utilities/getKeyValue';
-import { Close, DropArrow, Search, Spinner } from './utilities/icons';
-import Tooltip from './utilities/tooltip';
-
-type ValueProps = {
-  [key: string]: string;
-};
-const AutoComplete = forwardRef<HTMLInputElement, AutoSuggestionInputProps>(
-  (
-    {
-      label,
-      onChange,
-      getData = async () => [],
-      data = [],
-      errors,
-      required = false,
-      name,
-      fullWidth = false,
-      placeholder,
-      id,
-      type = 'custom_select',
-      selectedItems: propsSeelctedItems = [],
-      readOnly = false,
-      disabled = false,
-      value,
-      isMultiple = false,
-      desc = 'name',
-      descId = 'id',
-      singleSelect,
-      className,
-      async = false,
-      paginationEnabled,
-      initialLoad,
-      actionLabel,
-      handleAction,
-      nextBlock,
-      notDataMessage,
-      onFocus,
-    },
-    ref,
-  ) => {
-    const dropdownRef = useRef<HTMLDivElement>(null);
-    // State Hooks Section
-    const [isInitialRender, setIsInitialRender] = useState(true);
-
-    const [inputValue, setInputValue] = useState<string>(value);
-    const [searchValue, setSearchValue] = useState<string>('');
-    const [nextPage, setNextPage] = useState<number | undefined>(1);
-    const [dropOpen, setDropOpen] = useState<boolean>(false);
-    const [selectedItems, setSelectedItems] = useState<ValueProps[]>([]);
-    // API call for suggestions through a custom hook
-    const [dropdownPosition, setDropdownPosition] = useState('bottom');
-    const inputRef = useRef(null);
-    const dropRef = useRef(null);
-    useImperativeHandle(ref, () => inputRef.current);
-
-    const adjustDropdownPosition = () => {
-      if (inputRef.current && dropRef.current) {
-        const inputBoxRect = inputRef.current.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-
-        const spaceAbove = inputBoxRect.top;
-        const spaceBelow = viewportHeight - inputBoxRect.bottom;
-        if (spaceAbove > spaceBelow) {
-          setDropdownPosition('top');
-        } else {
-          setDropdownPosition('bottom');
-        }
-      }
-    };
-
-    useEffect(() => {
-      window.addEventListener('resize', adjustDropdownPosition);
-      adjustDropdownPosition();
-
-      return () => {
-        window.removeEventListener('resize', adjustDropdownPosition);
-      };
-    }, [dropOpen]);
-
-    const { suggestions, isLoading, handlePickSuggestions } = useSuggestions(
-      getData,
-      data,
-      dropOpen,
-      async,
-      paginationEnabled,
-      initialLoad,
-      String(searchValue || inputValue || ''),
-      isMultiple,
-      setNextPage,
-      selectedItems,
-      // nextBlock
-    );
-
-    // Handling the selection of a suggestion
-    const handleSuggestionClick = useCallback((suggestion: ValueProps) => {
-      isSelectingRef.current = true;
-      if (isMultiple) {
-        setSelectedItems((prev) => {
-          const isAdded = prev.some(
-            (item) => item[descId] === suggestion[descId],
-          );
-          if (isAdded) {
-            return prev.filter((item) => item[descId] !== suggestion[descId]);
-          } else {
-            return [...prev, suggestion];
-          }
-        });
-      } else {
-        setInputValue(suggestion[desc]);
-        setSearchValue('');
-        onChange(suggestion);
-        setDropOpen(false);
-      }
-    }, []);
-
-    // Adding debounce to avoid making API calls on every keystroke
-    const handleChangeWithDebounce = debounce((value) => {
-      if ((type === 'auto_complete' || type === 'auto_suggestion') && async) {
-        handlePickSuggestions(value, 1);
-      }
-    }, 1000);
-
-    const handleMultiSelect = (e: any, suggestion: ValueProps) => {
-      const { checked } = e.target;
-      if (isMultiple) {
-        if (checked) {
-          setSelectedItems((prev) => [...prev, suggestion]);
-        } else {
-          setSelectedItems((prev) => {
-            return prev.filter(
-              (item, i) => item[descId] !== suggestion[descId],
-            );
-          });
-        }
-      } else {
-        if (checked) {
-          setInputValue(suggestion[desc]);
-          onChange(suggestion);
-        } else {
-          setInputValue('');
-        }
-      }
-    };
-    useEffect(() => {
-      if (!deepEqual(selectedItems, propsSeelctedItems))
-        setSelectedItems(propsSeelctedItems);
-    }, [propsSeelctedItems]);
-    // Effect to set the input value whenever `value` prop changes
-    useEffect(() => {
-      setInputValue(value ?? '');
-    }, [value]);
-
-    const isSelectingRef = useRef(false);
-
-    const selectExactMatchFromSuggestions = () => {
-      // If user is clicking on dropdown, don't execute exact match logic
-      if (isSelectingRef.current) {
-        isSelectingRef.current = false;
-        return;
-      }
-
-      if (!inputValue) {
-        return;
-      }
-
-      if (!filteredData || filteredData.length === 0) {
-        // No suggestions to match against – notify parent with raw value
-        onChange({ [descId]: '', [desc]: inputValue });
-        return;
-      }
-
-      const normalizedInput = inputValue.toString().trim().toLowerCase();
-      const match = filteredData.find((item: ValueProps) => {
-        const descValue = item?.[desc]?.toString().trim().toLowerCase();
-        return descValue === normalizedInput;
-      });
-
-      if (match) {
-        handleSuggestionClick(match);
-      } else {
-        // No exact match – notify parent with typed value
-        onChange({ [descId]: '', [desc]: inputValue });
-        setInputValue('');
-      }
-    };
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { value } = e.target;
-      setDropOpen(true);
-      setSearchValue(value);
-      handleChangeWithDebounce(value);
-      if (!value) {
-        setInputValue('');
-        onChange({ [descId]: '', [desc]: '' });
-      }
-    };
-    const handleSuggestionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { value } = e.target;
-      setDropOpen(true);
-      setSearchValue(value);
-      handleChangeWithDebounce(value);
-    };
-
-    const handleBlur = () => {
-      setTimeout(() => {
-        setDropOpen(false);
-      }, 200);
-    };
-
-    const handleClear = () => {
-      if (searchValue) {
-        setSearchValue('');
-        setDropOpen(false);
-      } else {
-        setInputValue('');
-        onChange({ [descId]: '', [desc]: '' });
-        setDropOpen(false);
-      }
-    };
-
-    const generateClassName = useCallback(() => {
-      return `qbs-textfield-default ${className} ${
-        errors && errors?.message ? 'textfield-error' : 'textfield'
-      }`;
-    }, [errors, name]);
-    const handleRemoveSelectedItem = (index: number) => {
-      setSelectedItems((prev) => {
-        return prev.filter((_, i) => i !== index);
-      });
-    };
-
-    useEffect(() => {
-      if (isInitialRender) {
-        setIsInitialRender(false);
-      } else {
-        onChange(selectedItems);
-      }
-    }, [selectedItems]);
-
-    useEffect(() => {
-      const handleClickOutside = (event: React.MouseEvent) => {
-        if (
-          dropdownRef.current &&
-          event.target instanceof Node &&
-          !dropdownRef.current.contains(event.target)
-        ) {
-          setDropOpen(false);
-          setSearchValue('');
-        }
-      };
-      document.addEventListener('mousedown', handleClickOutside as any);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside as any);
-      };
-    }, []);
-
-    // Filtering suggestions based on type and search value
-    const selected: any = isMultiple ? selectedItems : inputValue;
-    const filteredData: ValueProps[] = filterSuggestions(
-      suggestions,
-      searchValue,
-      type,
-      desc,
-      selected,
-      async,
-    );
-    const isSelected = (
-      item: ValueProps,
-      selectedItems: ValueProps[] | string,
-    ): boolean => {
-      if (Array.isArray(selectedItems)) {
-        return selectedItems.some((selectedItem) =>
-          isSelectionMatch(selectedItem, item, desc, descId),
-        );
-      }
-
-      return isSelectionMatchValue(item, selectedItems, desc, descId);
-    };
-
-    const handleLoadMore = () => {
-      if (paginationEnabled) {
-        handlePickSuggestions(searchValue, nextPage + 1, true);
-        setNextPage(nextPage + 1);
-      }
-    };
-
-    const handleOnClick = () => {
-      !disabled && !readOnly ? setDropOpen(true) : '';
-    };
-    const tooltipContent =
-      selectedItems?.length > 1
-        ? selectedItems
-            ?.slice(1)
-            .map((item) => item[desc])
-            .join(', ')
-        : '';
-
-    return (
-      <div className={fullWidth ? 'fullWidth' : 'autoWidth'} ref={dropdownRef}>
-        {label && (
-          <div
-            style={{
-              marginBottom: 5,
-              display: 'flex',
-              justifyContent: 'space-between',
-            }}
-          >
-            <label className={`labels label-text`}>
-              {label}
-              {required && <span className="text-error"> *</span>}
-            </label>
-            <span onClick={() => handleAction?.()} className={`action_label`}>
-              {actionLabel}
-            </span>
-          </div>
-        )}
-        {/* Displaying selected items for multi-select */}
-
-        <div style={{ position: 'relative' }}>
-          <div className="selected-items-container ">
-            {selectedItems?.length > 0 && (
-              <>
-                <div key={selectedItems[0].id} className="selected-item">
-                  <Tooltip title={selectedItems[0]?.[desc]}>
-                    {selectedItems[0]?.[desc]?.length > 8
-                      ? `${selectedItems[0]?.[desc].substring(0, 8)}...`
-                      : selectedItems[0]?.[desc]}
-                  </Tooltip>
-                  <button
-                    onClick={() => handleRemoveSelectedItem(0)}
-                    className="remove-item-btn"
-                    aria-label={`Remove ${selectedItems[0]?.[desc]}`}
-                  >
-                    X
-                  </button>
-                </div>
-                <Tooltip title={tooltipContent}>
-                  {selectedItems?.length > 1 && (
-                    <div className="selected-item-more">
-                      +{selectedItems?.length - 1} more
-                    </div>
-                  )}
-                </Tooltip>
-              </>
-            )}
-          </div>
-          <input
-            id={id}
-            ref={inputRef}
-            autoComplete="off"
-            type="text"
-            value={
-              type === 'auto_suggestion'
-                ? inputValue
-                : searchValue || inputValue
-            }
-            onChange={handleChange}
-            onBlur={(e) => {
-              // Delay to allow click events on dropdown to process first
-              setTimeout(() => {
-                // Check if focus moved to dropdown or if user is selecting
-                const relatedTarget = e.relatedTarget as Node;
-                if (
-                  dropdownRef.current &&
-                  relatedTarget &&
-                  dropdownRef.current.contains(relatedTarget)
-                ) {
-                  return; // Focus moved to dropdown, don't execute exact match
-                }
-                handleBlur();
-                selectExactMatchFromSuggestions();
-              }, 200);
-            }}
-            onFocus={onFocus}
-            onClick={() => handleOnClick()}
-            className={generateClassName()}
-            placeholder={selectedItems?.length > 0 ? '' : (placeholder ?? '')}
-            readOnly={
-              readOnly || type === 'custom_select' || type == 'auto_suggestion'
-            }
-            disabled={disabled}
-            data-testid="custom-autocomplete"
-          />
-
-          {/* Icons for Clearing Input or Toggling Dropdown */}
-          <div className="qbs-autocomplete-close-icon">
-            {(inputValue || searchValue) && !disabled && !readOnly && (
-              <button
-                onClick={handleClear}
-                className="icon-button"
-                aria-label="clear"
-              >
-                <Close />
-              </button>
-            )}
-
-            <button
-              disabled={disabled || readOnly}
-              type="button"
-              onClick={() => setDropOpen(!dropOpen)}
-              className="icon-button"
-              aria-label="toggle"
-            >
-              <DropArrow />
-            </button>
-          </div>
-
-          {/* Displaying Loading Spinner */}
-
-          {/* Suggestions Dropdown */}
-          {dropOpen && (
-            <ul
-              ref={dropRef}
-              className={`qbs-autocomplete-suggestions ${dropdownPosition}`}
-            >
-              {type == 'auto_suggestion' && (
-                <div
-                  style={{ position: 'relative' }}
-                  className="react-core-ts-search-container"
-                >
-                  <span className="dropdown-search-icon">
-                    <Search />
-                  </span>
-                  <input
-                    className="dropdown-search-input"
-                    onChange={handleSuggestionChange}
-                    value={searchValue}
-                    autoComplete="off"
-                    placeholder="Search"
-                  />
-                </div>
-              )}
-
-              <div className="qbs-autocomplete-suggestions-sub">
-                {/* Displaying Suggestions or Not Found Message */}
-                {/* {isLoading && ( 
-              <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <span>
-                  <Spinner />
-                </span>
-              </div>
-
-              {/* )} */}
-
-                {filteredData?.length > 0 ? (
-                  filteredData.map((suggestion: ValueProps, idx: number) => (
-                    <div
-                      key={idx.toString()}
-                      className={`qbs-autocomplete-listitem-container ${
-                        (isMultiple || singleSelect) &&
-                        'qbs-autocomplete-checkbox-container'
-                      } ${
-                        isSelected(suggestion, selected) ? 'is-selected' : ''
-                      }`}
-                    >
-                      {(isMultiple || singleSelect) && (
-                        <div className="qbs-autocomplete-checkbox">
-                          <input
-                            onChange={(e) => handleMultiSelect(e, suggestion)}
-                            type="checkbox"
-                            autoComplete="off"
-                            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>
-                      )}
-                      <li
-                        key={idx}
-                        className={`qbs-autocomplete-suggestions-item ${
-                          isSelected(suggestion, selected) ? 'is-selected' : ''
-                        }`}
-                        onMouseDown={(e) => {
-                          e.preventDefault(); // Prevent input blur before click
-                          isSelectingRef.current = true;
-                        }}
-                        onClick={() => handleSuggestionClick(suggestion)}
-                        data-testid={suggestion[desc]}
-                      >
-                        {suggestion[desc]}
-                      </li>
-                    </div>
-                  ))
-                ) : (
-                  <>
-                    {isLoading ? (
-                      <div
-                        style={{ display: 'flex', justifyContent: 'center' }}
-                      >
-                        <span>
-                          <Spinner />
-                        </span>
-                      </div>
-                    ) : (
-                      <li
-                        className="qbs-autocomplete-notfound"
-                        onClick={handleBlur}
-                      >
-                        {notDataMessage ?? 'No Results Found'}
-                      </li>
-                    )}
-                  </>
-                )}
-                {paginationEnabled &&
-                  nextBlock !== 0 &&
-                  nextBlock !== undefined &&
-                  filteredData?.length > 0 && (
-                    <div
-                      className="loadMoreSection"
-                      onClick={() => handleLoadMore()}
-                    >
-                      <p style={{ margin: 2 }}>Load More</p>
-                    </div>
-                  )}
-              </div>
-            </ul>
-          )}
-        </div>
-
-        {/* Displaying Validation Error */}
-        {errors && (
-          <div
-            className="text-error text-error-label mt-[1px]"
-            data-testid="autocomplete-error"
-          >
-            {errors.message}
-          </div>
-        )}
-      </div>
-    );
-  },
-);
-
-export default React.memo(AutoComplete);