@clayui/drop-down/lib/esm/Search.js

ClayDropDown component

import ClayButton from "@clayui/button";
import { ClayInput } from "@clayui/form";
import ClayIcon from "@clayui/icon";
import { useControlledState } from "@clayui/shared";
import classNames from "classnames";
import React, { useContext, useEffect } from "react";
import { DropDownContext } from "./DropDownContext";
function defaultOnSubmit(event) {
  return event.preventDefault();
}
const defaultSubmitProps = {
  "aria-label": "Search",
  "type": "button"
};
function Search({
  className,
  defaultValue = "",
  formProps = {},
  onChange,
  spritemap,
  submitProps = defaultSubmitProps,
  value: valueProp,
  ...otherProps
}) {
  const { className: formClassName, onSubmit, ...otherFormProps } = formProps;
  const [value, setValue, isUncontrolled] = useControlledState({
    defaultName: "defaultValue",
    defaultValue,
    handleName: "onChange",
    name: "value",
    onChange,
    value: valueProp
  });
  const { onSearch, tabFocus } = useContext(DropDownContext);
  useEffect(() => {
    if (isUncontrolled) {
      onSearch(value);
    }
  }, [isUncontrolled, value]);
  return /* @__PURE__ */ React.createElement(
    "form",
    {
      className: classNames(className, formClassName),
      onSubmit: onSubmit ? onSubmit : defaultOnSubmit,
      ...otherFormProps
    },
    /* @__PURE__ */ React.createElement("div", { className: "dropdown-section" }, /* @__PURE__ */ React.createElement(ClayInput.Group, { small: true }, /* @__PURE__ */ React.createElement(ClayInput.GroupItem, { className: "input-group-item-focusable" }, /* @__PURE__ */ React.createElement(
      ClayInput,
      {
        ...otherProps,
        insetAfter: true,
        onChange: (event) => setValue(event.target.value),
        tabIndex: !tabFocus ? -1 : void 0,
        type: "text",
        value
      }
    ), /* @__PURE__ */ React.createElement(ClayInput.GroupInsetItem, { after: true, tag: "span" }, /* @__PURE__ */ React.createElement(
      ClayButton,
      {
        ...submitProps,
        displayType: "unstyled",
        tabIndex: !tabFocus ? -1 : void 0
      },
      /* @__PURE__ */ React.createElement(
        ClayIcon,
        {
          spritemap,
          symbol: "search"
        }
      )
    )))))
  );
}
var Search_default = Search;
export {
  Search_default as default
};