@crossed/primitive/lib/module/Dropdown/DropdownTrigger.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef } from "react";
import { useContext } from "./context";
import { composeEventHandlers, composeRefs } from "@crossed/core";
const createDropdownTrigger = (StyledRoot) => (
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  forwardRef((props, ref) => {
    const { id, open, setOpen } = useContext();
    const refInter = useRef(null);
    const openRef = useRef(open);
    useEffect(() => {
      var _a, _b;
      if (!open && openRef.current) {
        (_b = (_a = refInter.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
      }
    }, [open]);
    useEffect(() => {
      openRef.current = open;
    }, [open]);
    return /* @__PURE__ */ jsx(
      StyledRoot,
      {
        "aria-haspopup": "menu",
        "aria-expanded": open.toString(),
        "aria-activedescendant": open ? id : void 0,
        "aria-controls": open ? id : void 0,
        id: `label-${id}`,
        ...props,
        onClick: composeEventHandlers(props.onClick, () => {
          setOpen(!open);
        }),
        onKeyDown: composeEventHandlers(props.onKeyDown, (e) => {
          e.preventDefault();
          switch (e.code) {
            case "ArrowDown":
            case "ArrowUp":
            case "Space":
            case "Enter":
              setOpen(true);
              break;
          }
        }),
        ref: composeRefs(ref, refInter)
      }
    );
  })
);
export {
  createDropdownTrigger
};
//# sourceMappingURL=DropdownTrigger.js.map