@dnb/eufemia/cjs/components/table/table-accordion/TableAccordionContent.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TableAccordionContentRow = TableAccordionContentRow;
exports.TableAccordionContentSingle = TableAccordionContentSingle;
var _react = require("react");
var _clsx = require("clsx");
var _useId = _interopRequireDefault(require("../../../shared/helpers/useId.js"));
var _useTableAnimationHandler = _interopRequireDefault(require("./useTableAnimationHandler.js"));
var _TableContext = require("../TableContext.js");
var _TableAccordionContext = require("./TableAccordionContext.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function TableAccordionContent(componentProps) {
  const {
    variant,
    expanded = null,
    noAnimation = null,
    className,
    children,
    colSpan,
    style,
    ...props
  } = componentProps;
  const tableContext = (0, _react.useContext)(_TableContext.TableContext);
  const tableContextAllProps = tableContext?.allProps;
  const contentRef = (0, _react.useRef)(null);
  const id = (0, _useId.default)();
  const trRef = (0, _react.useRef)(null);
  const {
    ariaLive,
    isInDOM,
    isAnimating,
    isVisibleParallax,
    firstPaintStyle
  } = (0, _useTableAnimationHandler.default)({
    contentRef,
    trRef,
    expanded,
    noAnimation
  });
  const keepInDOM = Boolean((0, _react.useContext)(_TableAccordionContext.TableAccordionContext)?.keepInDOM);
  const shouldRenderContent = isInDOM || keepInDOM;
  const chevronTdProps = {
    ariaLive,
    isInDOM,
    accordionMoreContentSR: tableContextAllProps?.accordionMoreContentSR
  };
  return (0, _jsxRuntime.jsxs)("tr", {
    "aria-hidden": !isInDOM,
    hidden: isInDOM ? undefined : true,
    role: isInDOM ? 'row' : undefined,
    style: {
      ...firstPaintStyle,
      ...style,
      viewTransitionName: tableContext?.hasAccordionRows ? `accordion-content-${id}` : undefined
    },
    className: (0, _clsx.clsx)(isInDOM && 'dnb-table__tr', 'dnb-table__tr__accordion-content', `dnb-table__tr__accordion-content--${variant}`, isInDOM && 'dnb-table__tr__accordion-content--expanded', isAnimating && 'dnb-table__tr__accordion-content--animating', isVisibleParallax && 'dnb-table__tr__accordion-content--parallax', className),
    ref: trRef,
    ...props,
    children: [variant === 'row' && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [tableContextAllProps?.accordionChevronPlacement !== 'right' && (0, _jsxRuntime.jsx)(ChevronTd, {
        ...chevronTdProps
      }), shouldRenderContent && children, tableContextAllProps?.accordionChevronPlacement === 'right' && (0, _jsxRuntime.jsx)(ChevronTd, {
        ...chevronTdProps
      })]
    }), variant === 'single' && (0, _jsxRuntime.jsx)(ChevronTd, {
      ...chevronTdProps,
      colSpan: colSpan,
      children: shouldRenderContent && (0, _jsxRuntime.jsx)("div", {
        className: "dnb-table__tr__accordion-content__inner",
        ref: contentRef,
        children: (0, _jsxRuntime.jsx)("div", {
          className: "dnb-table__tr__accordion-content__inner__spacing",
          children: children
        })
      })
    })]
  });
}
const ChevronTd = ({
  children = undefined,
  colSpan = undefined,
  ariaLive,
  isInDOM,
  accordionMoreContentSR
}) => (0, _jsxRuntime.jsxs)("td", {
  role: isInDOM ? 'cell' : undefined,
  className: "dnb-table__td",
  colSpan: colSpan,
  children: [children, (0, _jsxRuntime.jsx)("span", {
    className: "dnb-sr-only",
    children: (0, _jsxRuntime.jsx)("span", {
      "aria-live": "assertive",
      children: isInDOM && ariaLive ? accordionMoreContentSR : null
    })
  })]
});
function TableAccordionContentRow(props) {
  const tableContext = (0, _react.useContext)(_TableContext.TableContext);
  tableContext.hasAccordionRows = true;
  return (0, _jsxRuntime.jsx)(TableAccordionContent, {
    variant: "row",
    ...props
  });
}
function TableAccordionContentSingle({
  colSpan = 100,
  ...props
}) {
  const tableAccordionContext = (0, _react.useContext)(_TableAccordionContext.TableAccordionContext);
  return (0, _jsxRuntime.jsx)(TableAccordionContent, {
    variant: "single",
    colSpan: tableAccordionContext?.countTds || colSpan,
    ...props
  });
}
//# sourceMappingURL=TableAccordionContent.js.map