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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _CardInner = _interopRequireDefault(require("./CardInner.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _useCombinedRef = _interopRequireDefault(require("../../shared/helpers/useCombinedRef.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function CardAction(props) {
  const {
    href,
    to,
    target,
    rel: relProp,
    onClick,
    element,
    ref,
    children,
    ...cardProps
  } = props;
  const isLink = Boolean(href || to);
  const internalRef = (0, _react.useRef)(null);
  const combinedRef = (0, _useCombinedRef.default)(ref, internalRef);
  (0, _react.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) {
      (0, _componentHelper.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 = (0, _react.useCallback)(event => {
    if (onClick && (event.key === 'Enter' || event.key === ' ')) {
      event.preventDefault();
      onClick(event);
    }
  }, [onClick]);
  const rel = target === '_blank' && !relProp ? 'noopener noreferrer' : relProp;
  const card = (0, _jsxRuntime.jsx)(_CardInner.default, {
    ...cardProps,
    children: children
  });
  if (isLink) {
    const AnchorElement = element || 'a';
    if (AnchorElement !== 'a') {
      return (0, _jsxRuntime.jsx)(AnchorElement, {
        className: "dnb-card-action",
        ref: combinedRef,
        onClick: onClick,
        target: target,
        rel: rel,
        to: to || href,
        children: card
      });
    }
    return (0, _jsxRuntime.jsx)("a", {
      className: "dnb-card-action",
      ref: combinedRef,
      onClick: onClick,
      target: target,
      rel: rel,
      href: href || to,
      children: card
    });
  }
  return (0, _jsxRuntime.jsx)("div", {
    className: "dnb-card-action",
    ref: combinedRef,
    onClick: onClick,
    onKeyDown: handleKeyDown,
    role: "button",
    tabIndex: 0,
    children: card
  });
}
(0, _withComponentMarkers.default)(CardAction, {
  _supportsSpacingProps: true
});
var _default = exports.default = CardAction;
//# sourceMappingURL=CardAction.js.map