@zohodesk/dot/es/v1/lookup/Lookup/Lookup.js

In this Library, we Provide Some Basic Components to Build Your Application

/*** Libraries ***/
import React, { useRef, useCallback, useEffect } from 'react';
import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/*** Components ***/

import FreezeLayer from "../../../FreezeLayer/FreezeLayer";
import { Container } from '@zohodesk/components/es/v1/Layout';
import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
/*** CSS ***/

import style from "../../../lookup/Lookup/Lookup.module.css";
/*eslint-disable react/forbid-component-props */

export default function Lookup(props) {
  const {
    isActive,
    children,
    size,
    dataId,
    forwardRef,
    onClick,
    customClass,
    htmlId,
    a11y,
    childAnimationName,
    onClose,
    needFocusScope,
    customProps,
    onKeyDown,
    isMinHeight,
    lookupClass
  } = props;
  const {
    role = 'dialog',
    ariaLabelledby,
    ariaDescribedby,
    ariaLabel,
    ariaModal = isActive ? true : undefined,
    ...a11yAttributes
  } = a11y;
  const {
    focusScopeProps = {}
  } = customProps;
  const {
    needAutoFocus = true,
    needRestoreFocus = true,
    needListNavigation = false,
    needFocusLoop = true,
    needEnterAction = true
  } = focusScopeProps;
  const createRef = useRef(null);
  const handleKeyDown = useCallback(e => {
    onKeyDown && onKeyDown(e);
  }, [onKeyDown]);
  useEffectCallOnlyAfterState(() => {
    if (isActive) {
      document.addEventListener('keydown', handleKeyDown);
    } else {
      document.removeEventListener('keydown', handleKeyDown);
    }
  }, [isActive]);
  useEffect(() => {
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);
  const content = /*#__PURE__*/React.createElement("div", {
    ref: createRef,
    tabIndex: "-1",
    "data-a11y-need-focus-style": "false",
    role: role,
    "aria-labelledby": ariaLabelledby,
    "aria-describedby": ariaDescribedby,
    "aria-label": ariaLabel,
    "aria-modal": ariaModal,
    id: htmlId,
    className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
    "data-id": dataId,
    "data-test-id": dataId,
    ...a11yAttributes
  }, /*#__PURE__*/React.createElement(Container, {
    "data-drag-container": "true",
    isCover: false,
    className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`
  }, children));
  return /*#__PURE__*/React.createElement(FreezeLayer, {
    align: "horizontal",
    animationName: "fade",
    childAnimationName: childAnimationName,
    isActive: isActive,
    palette: "snow",
    forwardRef: forwardRef,
    onClick: onClick,
    customClass: customClass
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    className: style.container,
    dataId: "fldValue"
  }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
    needFocusLoop: needFocusLoop,
    needListNavigation: needListNavigation,
    elementRef: createRef,
    needAutoFocus: needAutoFocus,
    needRestoreFocus: needRestoreFocus,
    onClose: onClose,
    needEnterAction: needEnterAction
  }, content) : content));
}
Lookup.propTypes = propTypes;
Lookup.defaultProps = defaultProps; // if (__DOCS__) {
//   Lookup.docs = {
//     componentGroup: 'Lookup'
//   };
// }