@kiwicom/orbit-components/lib/Collapse/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;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Stack = _interopRequireDefault(require("../Stack"));
var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));
var _ChevronDown = _interopRequireDefault(require("../icons/ChevronDown"));
var _Slide = _interopRequireDefault(require("../utils/Slide"));
var _useRandomId = require("../hooks/useRandomId");
var _useBoundingRect = _interopRequireDefault(require("../hooks/useBoundingRect"));
const AnimatedIcon = ({
  expanded
}) => {
  return /*#__PURE__*/React.createElement(_ChevronDown.default, {
    className: (0, _clsx.default)("duration-fast transition-transform ease-in-out", expanded && "rotate-180	"),
    color: "secondary"
  });
};
const Collapse = ({
  initialExpanded = false,
  customLabel,
  expanded: expandedProp,
  label,
  children,
  dataTest,
  id,
  onClick,
  actions
}) => {
  const isControlledComponent = expandedProp != null;
  const [expandedState, setExpandedState] = React.useState(isControlledComponent ? expandedProp : initialExpanded);
  const expanded = isControlledComponent ? expandedProp : expandedState;
  const [{
    height
  }, node] = (0, _useBoundingRect.default)({
    height: expanded ? null : 0
  });
  const randomId = (0, _useRandomId.useRandomIdSeed)();
  const slideID = randomId("slideID");
  const labelID = randomId("labelID");
  const handleClick = React.useCallback(event => {
    if (!isControlledComponent) {
      if (onClick) {
        onClick(event, !expanded);
      }
      setExpandedState(!expanded);
    } else if (onClick) {
      onClick(event, !expanded);
    }
  }, [expanded, isControlledComponent, onClick]);
  return /*#__PURE__*/React.createElement("div", {
    className: "border-b-cloud-normal pb-sm mb-md block w-full border-b border-solid last:m-0 last:border-none",
    "data-test": dataTest,
    id: id
  }, /*#__PURE__*/React.createElement("div", {
    className: "block w-full cursor-pointer",
    onClick: handleClick,
    role: "button",
    tabIndex: -1,
    id: labelID
  }, /*#__PURE__*/React.createElement(_Stack.default, {
    justify: "between",
    align: "center"
  }, label && !customLabel && /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title4"
  }, label), customLabel, /*#__PURE__*/React.createElement(_Stack.default, {
    inline: true,
    grow: false,
    align: "center",
    spacing: "small"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex items-center",
    onClick: ev => {
      ev.stopPropagation();
    }
  }, actions), /*#__PURE__*/React.createElement(_ButtonLink.default, {
    iconLeft: /*#__PURE__*/React.createElement(AnimatedIcon, {
      expanded: expanded
    }),
    size: "small",
    type: "secondary",
    ariaLabelledby: labelID,
    ariaExpanded: expanded,
    ariaControls: slideID
  })))), /*#__PURE__*/React.createElement(_Slide.default, {
    maxHeight: height,
    expanded: expanded,
    id: slideID,
    ariaLabelledBy: labelID
  }, /*#__PURE__*/React.createElement("div", {
    className: "my-sm mx-0",
    ref: node
  }, children)));
};
var _default = Collapse;
exports.default = _default;