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

UI components for GeChiUI.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * Internal dependencies
 */
import { useFlyoutContext } from '../context';
import { FlyoutContentView, CardView } from '../styles';
import { contextConnect, useContextSystem } from '../../ui/context';
/**
 *
 * @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
  } = useContextSystem(props, 'FlyoutContent');
  const {
    label,
    flyoutState
  } = useFlyoutContext();

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

  const showContent = flyoutState.visible || flyoutState.animating;
  return createElement(FlyoutContentView, _extends({
    "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 && createElement(CardView, {
    elevation: elevation,
    ref: forwardedRef
  }, children));
}

const ConnectedFlyoutContent = contextConnect(FlyoutContent, 'FlyoutContent');
export default ConnectedFlyoutContent;
//# sourceMappingURL=component.js.map