@dnb/eufemia/es/components/card/CardAction.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useEffect, useRef } from 'react';
import Card from "./CardInner.js";
import { warn } from "../../shared/component-helper.js";
import useCombinedRef from "../../shared/helpers/useCombinedRef.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx } from "react/jsx-runtime";
function CardAction(props) {
  const {
    href,
    to,
    target,
    rel: relProp,
    onClick,
    element,
    ref,
    children,
    ...cardProps
  } = props;
  const isLink = Boolean(href || to);
  const internalRef = useRef(null);
  const combinedRef = useCombinedRef(ref, internalRef);
  useEffect(() => {
    if (process.env.NODE_ENV === 'production') {
      return;
    }
    const el = internalRef.current;
    if (!el) {
      return;
    }
    const nested = el.querySelector('a, button, [role="button"], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    if (nested) {
      warn('Card.Action: nested interactive elements (such as <a>, <button>, or <input>) inside a Card.Action can cause accessibility issues and unexpected event bubbling. Consider using `element="span"` on nested Button components to avoid invalid HTML nesting.');
    }
  }, []);
  const handleKeyDown = useCallback(event => {
    if (onClick && (event.key === 'Enter' || event.key === ' ')) {
      event.preventDefault();
      onClick(event);
    }
  }, [onClick]);
  const rel = target === '_blank' && !relProp ? 'noopener noreferrer' : relProp;
  const card = _jsx(Card, {
    ...cardProps,
    children: children
  });
  if (isLink) {
    const AnchorElement = element || 'a';
    if (AnchorElement !== 'a') {
      return _jsx(AnchorElement, {
        className: "dnb-card-action",
        ref: combinedRef,
        onClick: onClick,
        target: target,
        rel: rel,
        to: to || href,
        children: card
      });
    }
    return _jsx("a", {
      className: "dnb-card-action",
      ref: combinedRef,
      onClick: onClick,
      target: target,
      rel: rel,
      href: href || to,
      children: card
    });
  }
  return _jsx("div", {
    className: "dnb-card-action",
    ref: combinedRef,
    onClick: onClick,
    onKeyDown: handleKeyDown,
    role: "button",
    tabIndex: 0,
    children: card
  });
}
withComponentMarkers(CardAction, {
  _supportsSpacingProps: true
});
export default CardAction;
//# sourceMappingURL=CardAction.js.map