@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",
    ariaHidden: true
  });
};
const Collapse = ({
  initialExpanded = false,
  customLabel,
  expanded: expandedProp,
  label,
  children,
  dataTest,
  id,
  onClick,
  actions,
  expandButtonLabel,
  collapseButtonLabel
}) => {
  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-300 mb-400 block w-full border-b border-solid last:m-0 last:border-none",
    "data-test": dataTest,
    id: id
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex items-center justify-between"
  }, label || customLabel ? /*#__PURE__*/React.createElement("div", {
    className: "flex w-full self-stretch",
    id: labelID,
    role: "button",
    tabIndex: 0,
    "aria-expanded": expanded,
    "aria-controls": slideID,
    onClick: handleClick,
    onKeyDown: e => {
      if (e.key === "Enter" || e.key === " ") {
        handleClick(e);
      }
    }
  }, /*#__PURE__*/React.createElement(_Stack.default, {
    justify: "between",
    align: "center"
  }, label && !customLabel && /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title4"
  }, label), customLabel)) : /*#__PURE__*/React.createElement("div", {
    className: "flex w-full self-stretch"
  }), /*#__PURE__*/React.createElement(_Stack.default, {
    inline: true,
    grow: false,
    align: "center",
    spacing: "none"
  }, actions && /*#__PURE__*/React.createElement("div", {
    className: "mx-300 flex items-center"
  }, actions), /*#__PURE__*/React.createElement(_ButtonLink.default, {
    iconLeft: /*#__PURE__*/React.createElement(AnimatedIcon, {
      expanded: expanded
    }),
    size: "small",
    type: "secondary",
    title: expanded ? collapseButtonLabel : expandButtonLabel,
    onClick: handleClick,
    ariaControls: slideID,
    ariaExpanded: expanded
  }))), /*#__PURE__*/React.createElement(_Slide.default, {
    maxHeight: height,
    expanded: expanded,
    id: slideID
  }, /*#__PURE__*/React.createElement("div", {
    className: "my-300 mx-0",
    ref: node
  }, children)));
};
var _default = exports.default = Collapse;