text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.Layout = exports.layoutSlotClassNames = exports.layoutClassName = void 0;
  var tslib_1 = require("tslib");
  var React = require("react");
  var PropTypes = require("prop-types");
  var classnames_1 = require("classnames");
  var utils_1 = require("../../utils");
  var react_bindings_1 = require("@fluentui/react-bindings");
  exports.layoutClassName = 'ui-layout';
  exports.layoutSlotClassNames = {
      start: exports.layoutClassName + "__start",
      main: exports.layoutClassName + "__main",
      end: exports.layoutClassName + "__end",
      gap: exports.layoutClassName + "__gap",
      reducedStart: exports.layoutClassName + "--reduced__start",
      reducedMain: exports.layoutClassName + "--reduced__main",
      reducedEnd: exports.layoutClassName + "--reduced__end",
  };
  /**
   * (DEPRECATED) A layout is a utility for arranging the content of a component.
   */
  var Layout = function (props) {
      var context = react_bindings_1.useFluentContext();
      var _a = react_bindings_1.useTelemetry(exports.Layout.displayName, context.telemetry), setStart = _a.setStart, setEnd = _a.setEnd;
      setStart();
      var reducing = props.reducing, disappearing = props.disappearing, renderStartArea = props.renderStartArea, renderMainArea = props.renderMainArea, renderEndArea = props.renderEndArea, renderGap = props.renderGap, alignItems = props.alignItems, debug = props.debug, gap = props.gap, justifyItems = props.justifyItems, main = props.main, mainSize = props.mainSize, end = props.end, endSize = props.endSize, start = props.start, startSize = props.startSize, vertical = props.vertical, className = props.className, design = props.design, styles = props.styles, variables = props.variables;
      var ElementType = react_bindings_1.getElementType(props);
      var unhandledProps = react_bindings_1.useUnhandledProps(exports.Layout.handledProps, props);
      var getA11yProps = react_bindings_1.useAccessibility(props.accessibility, {
          debugName: exports.Layout.displayName,
          rtl: context.rtl,
      });
      var classes = react_bindings_1.useStyles(exports.Layout.displayName, {
          className: exports.layoutClassName,
          mapPropsToStyles: function () { return ({
              alignItems: alignItems,
              debug: debug,
              gap: gap,
              justifyItems: justifyItems,
              hasMain: !!main,
              mainSize: mainSize,
              hasEnd: !!end,
              endSize: endSize,
              hasStart: !!start,
              startSize: startSize,
              vertical: vertical,
          }); },
          mapPropsToInlineStyles: function () { return ({
              className: className,
              design: design,
              styles: styles,
              variables: variables,
          }); },
          rtl: context.rtl,
      }).classes;
      var startArea = renderStartArea(tslib_1.__assign(tslib_1.__assign({}, props), { classes: classes }));
      var mainArea = renderMainArea(tslib_1.__assign(tslib_1.__assign({}, props), { classes: classes }));
      var endArea = renderEndArea(tslib_1.__assign(tslib_1.__assign({}, props), { classes: classes }));
      if (!startArea && !mainArea && !endArea) {
          setEnd();
          return (React.createElement(ElementType, tslib_1.__assign({}, getA11yProps('root', tslib_1.__assign({ className: classes.root }, unhandledProps)))));
      }
      var activeAreas = [startArea, mainArea, endArea].filter(Boolean);
      var isSingleArea = activeAreas.length === 1;
      // disappear: render the content directly without wrapping layout or area elements
      if (disappearing && isSingleArea) {
          setEnd();
          return start || main || end;
      }
      if (reducing && isSingleArea) {
          var composedClasses = classnames_1.default(classes.root, startArea && exports.layoutSlotClassNames.reducedStart, mainArea && exports.layoutSlotClassNames.reducedMain, endArea && exports.layoutSlotClassNames.reducedEnd);
          setEnd();
          return (React.createElement(ElementType, tslib_1.__assign({}, getA11yProps('root', tslib_1.__assign({ className: composedClasses }, unhandledProps))), start || main || end));
      }
      setEnd();
      return (React.createElement(ElementType, tslib_1.__assign({}, getA11yProps('root', tslib_1.__assign({ className: classes.root }, unhandledProps))),
          startArea,
          startArea && mainArea && renderGap(tslib_1.__assign(tslib_1.__assign({}, props), { classes: classes })),
          mainArea,
          (startArea || mainArea) && endArea && renderGap(tslib_1.__assign(tslib_1.__assign({}, props), { classes: classes })),
          endArea));
  };
  exports.Layout = Layout;
  exports.Layout.displayName = 'Layout';
  exports.Layout.propTypes = tslib_1.__assign(tslib_1.__assign({}, utils_1.commonPropTypes.createCommon({
      accessibility: false,
      children: false,
      content: false,
  })), { debug: PropTypes.bool, renderStartArea: PropTypes.func, renderMainArea: PropTypes.func, renderEndArea: PropTypes.func, renderGap: PropTypes.func, rootCSS: PropTypes.object, start: PropTypes.any, startCSS: PropTypes.object, startSize: PropTypes.string, main: PropTypes.any, mainCSS: PropTypes.object, mainSize: PropTypes.string, end: PropTypes.any, endCSS: PropTypes.object, endSize: PropTypes.string, justifyItems: PropTypes.any, alignItems: PropTypes.any, gap: PropTypes.string, reducing: PropTypes.bool, disappearing: PropTypes.bool, vertical: PropTypes.bool });
  exports.Layout.defaultProps = {
      startSize: 'auto',
      mainSize: '1fr',
      endSize: 'auto',
      // TODO: when an area is another Layout, do not wrap them in an extra div
      // TODO: option 1) higher value layouts could use start={Layout.create(start)} to ensure Areas are layout root
      renderStartArea: function (_a) {
          var start = _a.start, classes = _a.classes;
          return (start && (React.createElement("div", tslib_1.__assign({ className: classnames_1.default(exports.layoutSlotClassNames.start, classes.start) }, utils_1.rtlTextContainer.getAttributes({ forElements: [start] })), start)));
      },
      renderMainArea: function (_a) {
          var main = _a.main, classes = _a.classes;
          return (main && (React.createElement("div", tslib_1.__assign({ className: classnames_1.default(exports.layoutSlotClassNames.main, classes.main) }, utils_1.rtlTextContainer.getAttributes({ forElements: [main] })), main)));
      },
      renderEndArea: function (_a) {
          var end = _a.end, classes = _a.classes;
          return (end && (React.createElement("div", tslib_1.__assign({ className: classnames_1.default(exports.layoutSlotClassNames.end, classes.end) }, utils_1.rtlTextContainer.getAttributes({ forElements: [end] })), end)));
      },
      // Heads up!
      // IE11 Doesn't support grid-gap, insert virtual columns instead
      renderGap: function (_a) {
          var gap = _a.gap, classes = _a.classes;
          return gap && React.createElement("span", { className: classnames_1.default(exports.layoutSlotClassNames.gap, classes.gap) });
      },
  };
  exports.Layout.handledProps = Object.keys(exports.Layout.propTypes);
  exports.Layout.create = utils_1.createShorthandFactory({
      Component: exports.Layout,
  });
  