@atlaskit/flag/dist/esm/internal/expander.js

A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.

/* expander.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./expander.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { cx } from '@atlaskit/css';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import FadeIn from '@atlaskit/motion/fade-in';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Box, Stack } from '@atlaskit/primitives/compiled';
var styles = {
  expander: "_1bsb1osq",
  expanderTransition: "_k8m0wor5 _1oec1mzy _156yru3m",
  expanderCollapsed: "_1reo15vq _18m915vq",
  container: "_v5641xzp"
};
var Expander = function Expander(_ref) {
  var children = _ref.children,
    isExpanded = _ref.isExpanded,
    testId = _ref.testId;
  var isCollapseAnimationEnabled = fg('platform-dst-flag-collapse-animation-fix');

  // Need to always render the ExpanderInternal otherwise the
  // reveal transition doesn't happen. We can't use CSS animation for
  // the the reveal because we don't know the height of the content.

  return /*#__PURE__*/React.createElement(Box, {
    xcss: cx(styles.expander, isCollapseAnimationEnabled && styles.expanderTransition, isCollapseAnimationEnabled && !isExpanded && styles.expanderCollapsed),
    style: {
      maxHeight: isExpanded ? 150 : 0,
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      flex: '1 1 100%',
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      minWidth: 0
    },
    "aria-hidden": !isExpanded,
    testId: testId && "".concat(testId, "-expander")
  }, /*#__PURE__*/React.createElement(ExitingPersistence, {
    appear: true
  }, isExpanded && /*#__PURE__*/React.createElement(FadeIn, null, function (props) {
    return /*#__PURE__*/React.createElement(Box, _extends({
      xcss: cx(!isCollapseAnimationEnabled && styles.container)
    }, props), /*#__PURE__*/React.createElement(Stack, {
      space: "space.100"
    }, children));
  })));
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default Expander;