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

ClayDropDown component

import { __NOT_PUBLIC_COLLECTION } from "@clayui/core";
import React, { useCallback, useContext, useMemo } from "react";
import { DropDownContext } from "./DropDownContext";
const { Collection } = __NOT_PUBLIC_COLLECTION;
let counter = 0;
function Group({ children, header, items, role = "group" }) {
  const ariaLabel = useMemo(() => {
    counter++;
    return `clay-dropdown-menu-group-${counter}`;
  }, []);
  const { search } = useContext(DropDownContext);
  const filterFn = useCallback(
    (value) => value.match(new RegExp(search, "i")) !== null,
    [search]
  );
  return /* @__PURE__ */ React.createElement(React.Fragment, null, header && /* @__PURE__ */ React.createElement(
    "li",
    {
      "aria-hidden": "true",
      className: "dropdown-subheader",
      id: ariaLabel,
      role: "presentation"
    },
    header
  ), /* @__PURE__ */ React.createElement("li", { role: "presentation" }, /* @__PURE__ */ React.createElement(
    "ul",
    {
      "aria-labelledby": header ? ariaLabel : void 0,
      className: "list-unstyled",
      role
    },
    /* @__PURE__ */ React.createElement(
      Collection,
      {
        filter: filterFn,
        filterKey: "textValue",
        items,
        passthroughKey: false
      },
      children
    )
  )));
}
Group.displayName = "Group";
var Group_default = Group;
export {
  Group_default as default
};