@gechiui/components/build/flyout/flyout-content/component.js

UI components for GeChiUI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@gechiui/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _context = require("../context");

var _styles = require("../styles");

var _context2 = require("../../ui/context");

/**
 * Internal dependencies
 */

/**
 *
 * @param {import('../../ui/context').GeChiUIComponentProps<import('../types').ContentProps, 'div', false>} props
 * @param {import('react').Ref<any>}                                                                          forwardedRef
 */
function FlyoutContent(props, forwardedRef) {
  const {
    children,
    elevation,
    maxWidth,
    style = {},
    ...otherProps
  } = (0, _context2.useContextSystem)(props, 'FlyoutContent');
  const {
    label,
    flyoutState
  } = (0, _context.useFlyoutContext)();

  if (!flyoutState) {
    throw new Error('`FlyoutContent` must only be used inside a `Flyout`.');
  }

  const showContent = flyoutState.visible || flyoutState.animating;
  return (0, _element.createElement)(_styles.FlyoutContentView, (0, _extends2.default)({
    "aria-label": label // maxWidth is applied via inline styles in order to avoid the `React does
    // not recognize the maxWidth prop on a DOM element` error that comes from
    // passing `maxWidth` as a prop to `FlyoutContentView`
    ,
    style: {
      maxWidth,
      ...style
    }
  }, otherProps, flyoutState), showContent && (0, _element.createElement)(_styles.CardView, {
    elevation: elevation,
    ref: forwardedRef
  }, children));
}

const ConnectedFlyoutContent = (0, _context2.contextConnect)(FlyoutContent, 'FlyoutContent');
var _default = ConnectedFlyoutContent;
exports.default = _default;
//# sourceMappingURL=component.js.map