"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PanelsDecorator = exports.PanelsBase = exports.Panels = exports["default"] = void 0;

var _jsxRuntime = require("react/jsx-runtime");

var _kind = _interopRequireDefault(require("@enact/core/kind"));

var _Measurable = _interopRequireDefault(require("@enact/ui/Measurable"));

var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));

var _ViewManager = require("@enact/ui/ViewManager");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _compose = _interopRequireDefault(require("ramda/src/compose"));

var _Skinnable = _interopRequireDefault(require("../Skinnable"));

var _CancelDecorator = _interopRequireDefault(require("./CancelDecorator"));

var _Controls = _interopRequireDefault(require("./Controls"));

var _IdProvider = _interopRequireDefault(require("./IdProvider"));

var _Viewport = _interopRequireDefault(require("./Viewport"));

var _PanelsModule = _interopRequireDefault(require("./Panels.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var getControlsId = function getControlsId(id) {
  return id && "".concat(id, "-controls");
};
/**
 * Basic Panels component without breadcrumbs or default [arranger]{@link ui/ViewManager.Arranger}
 *
 * @class PanelsBase
 * @memberof agate/Panels
 * @ui
 * @public
 */


var PanelsBase = (0, _kind["default"])({
  name: 'Panels',
  propTypes:
  /** @lends agate/Panels.PanelsBase.prototype */
  {
    /**
     * Function that generates unique identifiers for Panel instances.
     *
     * @type {Function}
     * @required
     * @private
     */
    generateId: _propTypes["default"].func.isRequired,

    /**
     * Set of functions that control how the panels are transitioned into and out of the
     * viewport.
     *
     * @see {@link ui/ViewManager.SlideRightArranger}
     * @type {ui/ViewManager.Arranger}
     * @public
     */
    arranger: _ViewManager.shape,

    /**
     * An object whose keys will used as props for each child
     */
    childProps: _propTypes["default"].object,

    /**
     * Sets the hint string read when focusing the application close button.
     *
     * @type {String}
     * @default 'Exit app'
     * @public
     */
    closeButtonAriaLabel: _propTypes["default"].string,

    /**
     * A slot to insert additional Panels-level buttons into the global-navigation area.
     *
     * @type {Node}
     * @public
     */
    controls: _propTypes["default"].node,

    /**
     * The measurement bounds of the controls node
     *
     * @type {Object}
     * @private
     */
    controlsMeasurements: _propTypes["default"].object,

    /**
     * The method which receives the reference node to the controls element, used to determine
     * the `controlsMeasurements`.
     *
     * @type {Function|Object}
     * @private
     */
    controlsRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
      current: _propTypes["default"].any
    })]),

    /**
     * The portion of the screen that this `Panels` instance should cover.
     *
     * @type {('full'|'partial')}
     * @default 'full'
     * @public
     */
    cover: _propTypes["default"].oneOf(['full', 'partial']),

    /**
     * Duration of the animation (in ms) when transitioning between `Panel` components.
     *
     * @type {Number}
     * @default 500
     * @public
     */
    duration: _propTypes["default"].number,

    /**
     * Unique identifier for the Panels instance.
     *
     * When defined, `Panels` will manage the presentation state of `Panel` instances in order
     * to restore it when returning to the `Panel`. See
     * [noSharedState]{@link agate/Panels.Panels.noSharedState} for more details on shared
     * state.
     *
     * @type {String}
     * @public
     */
    id: _propTypes["default"].string,

    /**
     * Index of the active panel
     *
     * @type {Number}
     * @default 0
     * @public
     */
    index: _propTypes["default"].number,

    /**
     * Disables panel transitions.
     *
     * @type {Boolean}
     * @default false
     * @public
     */
    noAnimation: _propTypes["default"].bool,

    /**
     * Indicates the close button will not be rendered on the top right corner.
     *
     * @type {Boolean}
     * @default false
     * @public
     */
    noCloseButton: _propTypes["default"].bool,

    /**
     * Prevents maintaining shared state for framework components within this `Panels` instance.
     *
     * When `false`, each `Panel` will track the state of some framework components in order to
     * restore that state when the Panel is recreated. For example, the scroll position of a
     * `agate/Scroller` within a `Panel` will be saved and restored when returning to that
     * `Panel`.
     *
     * This only applied when navigating "back" (to a lower index) to `Panel`. When navigating
     * "forwards" (to a higher index), the `Panel` and its contained components will use their
     * default state.
     *
     * @type {Boolean}
     * @default false
     * @public
     */
    noSharedState: _propTypes["default"].bool,

    /**
     * Called when the app close button is clicked.
     *
     * @type {Function}
     * @public
     */
    onApplicationClose: _propTypes["default"].func,

    /**
     * Called with cancel/back key events.
     *
     * @type {Function}
     * @public
     */
    onBack: _propTypes["default"].func,

    /**
     * Direction of the animation when transitioning between `Panel` components.
     *
     * This is only applied when no arranger has been set. When using `'horizontal'`, a `SlideRightArranger` is used.
     * When using `'vertical'`, a `SlideBottomArranger` is used.
     *
     * Valid values are:
     * * `'horizontal'`, and
     * * `'vertical'`.
     *
     * @type {String}
     * @public
     */
    orientation: _propTypes["default"].oneOf(['horizontal', 'vertical'])
  },
  defaultProps: {
    cover: 'full',
    duration: 500,
    index: 0,
    noAnimation: false,
    noCloseButton: false,
    noSharedState: false
  },
  styles: {
    css: _PanelsModule["default"],
    className: 'panels',
    publicClassNames: 'panels enact-fit'
  },
  computed: {
    childProps: function childProps(_ref) {
      var _childProps = _ref.childProps,
          controls = _ref.controls,
          id = _ref.id,
          noCloseButton = _ref.noCloseButton;

      if (noCloseButton && !controls || !id) {
        return _childProps;
      }

      var updatedChildProps = Object.assign({}, _childProps);
      var controlsId = getControlsId(id);
      var owns = updatedChildProps['aria-owns'];

      if (owns) {
        updatedChildProps['aria-owns'] = "".concat(owns, " ").concat(controlsId);
      } else {
        updatedChildProps['aria-owns'] = controlsId;
      }

      return updatedChildProps;
    },
    className: function className(_ref2) {
      var controls = _ref2.controls,
          cover = _ref2.cover,
          noCloseButton = _ref2.noCloseButton,
          styler = _ref2.styler;
      return styler.append(cover, {
        'agate-panels-hasControls': !noCloseButton || !!controls // If there is a close button or controls were specified

      });
    },
    style: function style(_ref3) {
      var controlsMeasurements = _ref3.controlsMeasurements,
          _ref3$style = _ref3.style,
          _style = _ref3$style === void 0 ? {} : _ref3$style;

      return controlsMeasurements ? _objectSpread(_objectSpread({}, _style), {}, {
        '--agate-panels-controls-width': controlsMeasurements.width + 'px'
      }) : _style;
    },
    viewportId: function viewportId(_ref4) {
      var id = _ref4.id;
      return id && "".concat(id, "-viewport");
    }
  },
  render: function render(_ref5) {
    var arranger = _ref5.arranger,
        childProps = _ref5.childProps,
        children = _ref5.children,
        closeButtonAriaLabel = _ref5.closeButtonAriaLabel,
        controls = _ref5.controls,
        controlsRef = _ref5.controlsRef,
        duration = _ref5.duration,
        generateId = _ref5.generateId,
        id = _ref5.id,
        index = _ref5.index,
        noAnimation = _ref5.noAnimation,
        noCloseButton = _ref5.noCloseButton,
        noSharedState = _ref5.noSharedState,
        onApplicationClose = _ref5.onApplicationClose,
        orientation = _ref5.orientation,
        viewportId = _ref5.viewportId,
        rest = _objectWithoutProperties(_ref5, ["arranger", "childProps", "children", "closeButtonAriaLabel", "controls", "controlsRef", "duration", "generateId", "id", "index", "noAnimation", "noCloseButton", "noSharedState", "onApplicationClose", "orientation", "viewportId"]);

    delete rest.controlsMeasurements;
    delete rest.cover;
    delete rest.onBack;
    var controlsId = getControlsId(id);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
      id: id,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Controls["default"], {
        closeButtonAriaLabel: closeButtonAriaLabel,
        id: controlsId,
        spotlightId: controlsId,
        noCloseButton: noCloseButton,
        onApplicationClose: onApplicationClose,
        ref: controlsRef,
        children: controls
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Viewport["default"], {
        arranger: arranger,
        childProps: childProps,
        duration: duration,
        generateId: generateId,
        id: viewportId,
        index: index,
        noAnimation: noAnimation,
        noSharedState: noSharedState,
        orientation: orientation,
        children: children
      })]
    }));
  }
});
/**
 * Applies Agate specific behaviors to [Panels]{@link agate/Panels.Panels} components.
 *
 * @hoc
 * @memberof agate/Panels
 * @mixes ui/Slottable.Slottable
 * @mixes ui/Measurable.Measurable
 * @mixes agate/Skinnable.Skinnable
 * @public
 */

exports.PanelsBase = PanelsBase;
var PanelsDecorator = (0, _compose["default"])((0, _Slottable["default"])({
  slots: ['controls']
}), (0, _CancelDecorator["default"])({
  cancel: 'onBack'
}), (0, _Measurable["default"])({
  refProp: 'controlsRef',
  measurementProp: 'controlsMeasurements'
}), _IdProvider["default"], _Skinnable["default"]);
/**
 * An Agate-styled Panels component
 *
 * @class Panels
 * @memberof agate/Panels
 * @extends agate/Panels.PanelsBase
 * @mixes agate/Panels.PanelsDecorator
 * @ui
 * @public
 */

exports.PanelsDecorator = PanelsDecorator;
var Panels = PanelsDecorator(PanelsBase);
exports.Panels = Panels;
var _default = Panels;
exports["default"] = _default;