@kiwicom/orbit-components/lib/Accordion/AccordionSection/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _AccordionContext = require("../AccordionContext");
var _useRandomId = _interopRequireDefault(require("../../hooks/useRandomId"));
var _useBoundingRect = _interopRequireDefault(require("../../hooks/useBoundingRect"));
var _Slide = _interopRequireDefault(require("../../utils/Slide"));
var _Loading = _interopRequireDefault(require("../../Loading"));
var _SectionHeader = _interopRequireDefault(require("./components/SectionHeader"));
var _SectionFooter = _interopRequireDefault(require("./components/SectionFooter"));
var _SectionContent = _interopRequireDefault(require("./components/SectionContent"));
const AccordionSection = ({
  children,
  header,
  footer,
  actions,
  dataTest,
  expandable = true,
  expandOnTileClick = false
}) => {
  const {
    expanded,
    onExpand,
    loading,
    loadingTitle,
    loadingHidden
  } = (0, _AccordionContext.useAccordion)();
  const slideId = (0, _useRandomId.default)();
  const isExpanded = expandable && expanded;
  const [{
    height
  }, ref] = (0, _useBoundingRect.default)({
    height: isExpanded ? null : 0
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    // Note: update SectionFooter's border-radius in case border-width or border-radius of this component changes
    className: "border-elevation-flat-border-color rounded-300 my-200 bg-elevation-flat relative w-full border border-solid",
    "data-test": dataTest
  }, /*#__PURE__*/_react.default.createElement(_Loading.default, (0, _extends2.default)({
    loading: loading,
    type: "boxLoader",
    dataTest: dataTest && `${dataTest}Loading`
  }, loadingHidden ? {
    ariaHidden: true
  } : {
    title: loadingTitle
  }), header && /*#__PURE__*/_react.default.createElement(_SectionHeader.default, {
    actions: actions,
    expanded: Boolean(isExpanded),
    onExpand: onExpand,
    expandable: expandable,
    expandOnTileClick: expandOnTileClick,
    dataTest: dataTest,
    ariaControls: slideId
  }, header), /*#__PURE__*/_react.default.createElement(_Slide.default, {
    maxHeight: height,
    expanded: isExpanded,
    id: slideId
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: ref
  }, children && /*#__PURE__*/_react.default.createElement(_SectionContent.default, {
    dataTest: dataTest
  }, children), footer && /*#__PURE__*/_react.default.createElement(_SectionFooter.default, {
    dataTest: dataTest
  }, footer)))));
};
var _default = exports.default = AccordionSection;