@cerberus-design/react/dist/components/deprecated/NavMenuTrigger.js

The Cerberus Design React component library.

'use client';
import { jsx } from 'react/jsx-runtime';
import { useCallback } from 'react';
import { cx } from 'styled-system/css';
import { button } from 'styled-system/recipes';
import { useNavMenuContext } from '../../context/navMenu.js';
import { Show } from '../show/show.js';
import { createNavTriggerProps } from './aria-helpers/nav-menu.aria.js';

function NavMenuTrigger(props) {
  const {
    as,
    palette,
    usage,
    shape,
    controls,
    expanded: propsExpanded,
    onClick,
    ...nativeProps
  } = props;
  const { triggerRef, onToggle, expanded } = useNavMenuContext();
  const ariaProps = createNavTriggerProps({
    controls,
    expanded: propsExpanded ?? expanded
  });
  const hasAs = Boolean(as);
  const AsSub = as;
  const handleClick = useCallback(
    (e) => {
      if (onClick) return onClick(e);
      onToggle();
    },
    [onClick, onToggle]
  );
  return /* @__PURE__ */ jsx(
    Show,
    {
      when: hasAs,
      fallback: /* @__PURE__ */ jsx(
        "button",
        {
          ...nativeProps,
          ...ariaProps,
          className: cx(
            nativeProps.className,
            button({
              palette,
              usage,
              shape
            })
          ),
          onClick: handleClick,
          ref: triggerRef,
          children: props.children
        }
      ),
      children: hasAs && /* @__PURE__ */ jsx(
        AsSub,
        {
          ...nativeProps,
          ...ariaProps,
          onClick: handleClick,
          ref: triggerRef
        }
      )
    }
  );
}

export { NavMenuTrigger };