rsuite/esm/InputPicker/InputPickerPopup.js

A suite of react components

'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useEffect } from 'react';
import SearchBox from "../internals/SearchBox/index.js";
import PickerPopup from "../internals/Picker/PickerPopup.js";
import { useCombobox } from "../internals/Picker/index.js";
const InputPickerPopup = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    children,
    searchable,
    searchKeyword,
    searchPlaceholder,
    searchInput,
    onSearch,
    ...popupProps
  } = props;
  const {
    breakpoint
  } = useCombobox();
  const showSearchBox = searchable && breakpoint === 'xs';
  useEffect(() => {
    if (!showSearchBox || typeof requestAnimationFrame === 'undefined') {
      return;
    }
    const animationFrame = requestAnimationFrame(() => {
      searchInput?.current?.focus();
    });
    return () => cancelAnimationFrame(animationFrame);
  }, [searchInput, showSearchBox]);
  return /*#__PURE__*/React.createElement(PickerPopup, _extends({
    ref: ref
  }, popupProps), showSearchBox && /*#__PURE__*/React.createElement(SearchBox, {
    placeholder: searchPlaceholder,
    value: searchKeyword,
    inputRef: searchInput,
    onChange: onSearch
  }), children);
});
InputPickerPopup.displayName = 'InputPickerPopup';
export default InputPickerPopup;