wix-style-react/dist/src/Sidebar/Sidebar.js

wix-style-react

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

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

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

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

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

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

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

var _react = _interopRequireWildcard(require("react"));

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

var _SidebarSt = require("./Sidebar.st.css");

var _SidebarItem = require("./SidebarItem");

var _SidebarPersistentHeader = require("./SidebarPersistentHeader");

var _SidebarPersistentFooter = require("./SidebarPersistentFooter");

var _SidebarBackButton = require("./SidebarBackButton");

var _SidebarAPI = require("./SidebarAPI");

var _constants = require("./constants");

var _SidebarContentWrapper = require("./SidebarContentWrapper");

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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) { (0, _defineProperty2["default"])(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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var CollapsibeInnerMenuOpenChildren = function CollapsibeInnerMenuOpenChildren(props) {
  var children = props.children,
      waitForOtherMenuToClose = props.waitForOtherMenuToClose,
      skin = props.skin,
      isAlreadyOpen = props.isAlreadyOpen;
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": 'open-inner-menu-children',
    className: isAlreadyOpen ? '' : (0, _SidebarSt.st)(waitForOtherMenuToClose ? _SidebarSt.classes.innerMenuWrapperInToPlaceAfterClosingOther : _SidebarSt.classes.innerMenuWrapperInToPlace)
  }, /*#__PURE__*/_react["default"].createElement(_SidebarContentWrapper.SidebarContentWrapper, {
    containerClasses: (0, _SidebarSt.st)(_SidebarSt.classes.innerMenu),
    containerDataHook: _constants.dataHooks.drivenInChildren,
    skin: skin
  }, children));
};

var CollapsibeInnerMenuCloseChildren = function CollapsibeInnerMenuCloseChildren(props) {
  var children = props.children;
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": 'closed-inner-menu-children',
    className: (0, _SidebarSt.st)(_SidebarSt.classes.innerMenuWrapperOutOfPlace)
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _SidebarSt.st)(_SidebarSt.classes.innerMenu),
    "data-hook": _constants.dataHooks.drivenOutChildren
  }, children));
};

var CollapsibeInnerMenuCloseParent = function CollapsibeInnerMenuCloseParent(props) {
  var isAlreadyClosed = props.isAlreadyClosed,
      children = props.children;
  var closeParentClass = (0, _SidebarSt.st)(isAlreadyClosed ? _SidebarSt.classes.closedInnerMenu : _SidebarSt.classes.closingInnerMenu);
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": "closed-inner-menu",
    className: closeParentClass
  }, children);
};

var CollapsibeInnerMenuOpenParent = function CollapsibeInnerMenuOpenParent(props) {
  var isAlreadyOpen = props.isAlreadyOpen,
      children = props.children,
      waitForOtherMenuToClose = props.waitForOtherMenuToClose;
  var openParentClass = waitForOtherMenuToClose ? (0, _SidebarSt.st)(_SidebarSt.classes.openingInnerMenuAfterClosingOther) : (0, _SidebarSt.st)(isAlreadyOpen ? _SidebarSt.classes.openInnerMenu : _SidebarSt.classes.openingInnerMenu);
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": 'open-inner-menu',
    className: openParentClass
  }, children);
};
/** A sidebar navigation component  */


var Sidebar = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Sidebar, _Component);

  var _super = _createSuper(Sidebar);

  function Sidebar(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Sidebar);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getInnerMenuCollapsibleState", function (options) {
      var _this$itemKeyToChildr, _this$itemKeyToChildr2;

      var menuToClose = options.menuToClose,
          menuToOpen = options.menuToOpen,
          selected = options.selected;
      var expandedInnerMenu = undefined;
      var openMenuChildren = ((_this$itemKeyToChildr = _this.itemKeyToChildren[menuToOpen]) === null || _this$itemKeyToChildr === void 0 ? void 0 : _this$itemKeyToChildr.children) || [];
      var closeMenuChildren = ((_this$itemKeyToChildr2 = _this.itemKeyToChildren[menuToClose]) === null || _this$itemKeyToChildr2 === void 0 ? void 0 : _this$itemKeyToChildr2.children) || [];

      var collapsibleOnScreenChildren = _this.firstLevelItems.reduce(function (accumalator, child) {
        var shouldExpand = menuToOpen && child.props.itemKey === menuToOpen && (openMenuChildren === null || openMenuChildren === void 0 ? void 0 : openMenuChildren.length) > 0;
        var shouldCollapse = _this.state.expandedInnerMenu && menuToClose && (closeMenuChildren === null || closeMenuChildren === void 0 ? void 0 : closeMenuChildren.length) > 0 && child.props.itemKey === menuToClose && _this.state.expandedInnerMenu === menuToClose;
        var waitForOtherMenuToClose = _this.state.expandedInnerMenu && menuToClose && _this.state.expandedInnerMenu === menuToClose && menuToClose !== menuToOpen;

        if (shouldExpand) {
          expandedInnerMenu = menuToOpen;
          return [].concat((0, _toConsumableArray2["default"])(accumalator), [/*#__PURE__*/_react["default"].createElement(CollapsibeInnerMenuOpenParent, {
            key: "open-parent-".concat(menuToOpen),
            isAlreadyOpen: _this._isAlreadyOpen(menuToOpen),
            waitForOtherMenuToClose: waitForOtherMenuToClose
          }, child), /*#__PURE__*/_react["default"].createElement(CollapsibeInnerMenuOpenChildren, {
            key: "open-children-".concat(menuToOpen),
            waitForOtherMenuToClose: waitForOtherMenuToClose,
            skin: _this.props.skin,
            isAlreadyOpen: _this._isAlreadyOpen(menuToOpen)
          }, openMenuChildren)]);
        }

        if (shouldCollapse) {
          return [].concat((0, _toConsumableArray2["default"])(accumalator), [/*#__PURE__*/_react["default"].createElement(CollapsibeInnerMenuCloseParent, {
            key: "closed-parent-".concat(menuToClose),
            isAlreadyClosed: _this._isAlreadyClosed(selected, menuToClose)
          }, child), /*#__PURE__*/_react["default"].createElement(CollapsibeInnerMenuCloseChildren, {
            key: "closed-children-".concat(menuToClose)
          }, closeMenuChildren)]);
        }

        return [].concat((0, _toConsumableArray2["default"])(accumalator), [child]);
      }, []);

      return {
        collapsibleOnScreenChildren: collapsibleOnScreenChildren,
        expandedInnerMenu: expandedInnerMenu
      };
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_shouldCollapseInnerMenu", function (itemKey) {
      return _this.state.expandedInnerMenu === itemKey && (itemKey === _this.state.selectedKey && _this.state.expandedInnerMenu || itemKey !== _this.state.selectedKey);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_shouldExpandInnerMenu", function (parentKey, itemKey) {
      return parentKey === _this.state.lastSelectedKey && !_this.state.expandedInnerMenu || _this.itemKeyToParentKey[itemKey] === parentKey || parentKey !== _this.state.lastSelectedKey;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_navigateTo", function (itemKey) {
      if (_this._isChild(itemKey)) {
        _this._selectItem(itemKey);

        _this.sidebarContext = _this._getSidebarContext();
        return;
      }

      if (_this._isParent(itemKey)) {
        _this._openInnerMenu(itemKey);

        _this.sidebarContext = _this._getSidebarContext();
        return;
      }

      if (itemKey) {
        _this._closeInnerMenu(itemKey);

        _this.sidebarContext = _this._getSidebarContext();
        return;
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getSidebarContext", function () {
      return {
        itemClicked: _this._navigateTo,
        backClicked: function backClicked() {
          _this._closeInnerMenu();

          _this.sidebarContext = _this._getSidebarContext();
        },
        getSelectedKey: function getSelectedKey() {
          return _this.state.selectedKey;
        },
        getSkin: function getSkin() {
          return _this.props.skin;
        },
        getIsMenuExpanded: function getIsMenuExpanded() {
          return _this.state.expandedInnerMenu;
        }
      };
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "sidebarContext", _this._getSidebarContext());
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getInnerChildSelectedState", function (itemKey) {
      var collapsibleInnerMenuState = _this._getInnerMenuCollapsibleState({
        menuToClose: _this.state.lastSelectedKey,
        menuToOpen: _this.itemKeyToParentKey[itemKey],
        selected: itemKey
      });

      if (_this.itemKeyToParentKey[itemKey] !== _this.state.lastSelectedKey) {
        return _objectSpread({
          drivenInChildren: _this.itemKeyToChildren[_this.itemKeyToParentKey[itemKey]].children,
          selectedKey: itemKey,
          lastSelectedKey: _this.itemKeyToParentKey[itemKey]
        }, collapsibleInnerMenuState);
      } else {
        return _objectSpread(_objectSpread({}, collapsibleInnerMenuState), {}, {
          selectedKey: itemKey
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getInnerMenuOpenState", function (itemKey) {
      var _this$itemKeyToChildr3 = _this.itemKeyToChildren[itemKey],
          children = _this$itemKeyToChildr3.children,
          selectedKey = _this$itemKeyToChildr3.selectedKey;
      var selected = _this.itemKeyToParentKey[_this.state.lastSelectedKey] === itemKey ? _this.state.lastSelectedKey : selectedKey;
      var parentKey = _this.itemKeyToParentKey[selected];

      var parentItemKeyToOpen = _this._getItemToOpenKey(parentKey, itemKey);

      var parentItemKeyToClose = _this._getItemToCloseKey(_this.state.lastSelectedKey);

      return _objectSpread(_objectSpread({}, _this._getInnerMenuCollapsibleState({
        menuToClose: parentItemKeyToClose,
        menuToOpen: parentItemKeyToOpen,
        selected: selected
      })), {}, {
        drivenInChildren: children,
        drivenOutChildren: [],
        selectedKey: selected,
        lastSelectedKey: itemKey
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getItemToCloseKey", function (itemKey) {
      if (_this._shouldCollapseInnerMenu(itemKey)) {
        return _this.itemKeyToParentKey[itemKey] || itemKey;
      }

      if (_this._shouldCollapseInnerMenu(_this.state.lastSelectedKey)) {
        return _this.itemKeyToParentKey[_this.state.lastSelectedKey] || _this.state.lastSelectedKey;
      }

      return undefined;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getItemToOpenKey", function (parentKey, itemKey) {
      return _this._shouldExpandInnerMenu(parentKey, itemKey) ? parentKey : undefined;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getInnerMenuCloseState", function (itemKey, updateCollapsibleOnlyOnChange) {
      var selectedKey = _this.state.lastSelectedKey || itemKey;

      var parentItemKeyToClose = _this._getItemToCloseKey(selectedKey);

      return _objectSpread(_objectSpread({}, _this._getInnerMenuCollapsibleState({
        menuToClose: parentItemKeyToClose,
        selected: selectedKey
      })), {}, {
        selectedKey: itemKey || _this.state.lastSelectedKey,
        lastSelectedKey: selectedKey,
        drivenInChildren: [],
        drivenOutChildren: _this.state.drivenInChildren
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getItemWithKey", function (item, itemKey) {
      return item.props.itemKey ? item : /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
        itemKey: itemKey
      }));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getChildrenWithKeys", function (child) {
      var _child$props$innerMen;

      return ((_child$props$innerMen = child.props.innerMenu) === null || _child$props$innerMen === void 0 ? void 0 : _child$props$innerMen.map(function (innerChild, index) {
        return _this._getItemWithKey(innerChild, child.props.itemKey + index);
      })) || [];
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_isParent", function (itemKey) {
      return _this.itemKeyToChildren[itemKey];
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_isChild", function (itemKey) {
      return _this.itemKeyToParentKey[itemKey];
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_isAlreadyOpen", function (menuToOpen) {
      return _this.state.lastSelectedKey === menuToOpen && _this.itemKeyToParentKey[_this.props.selectedKey] === menuToOpen && _this.state.expandedInnerMenu === menuToOpen;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_isAlreadyClosed", function (selected, menuToClose) {
      return _this.itemKeyToParentKey[selected] !== menuToClose;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_selectItem", function (itemKey) {
      return _this.setState(_this._getInnerChildSelectedState(itemKey));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_openInnerMenu", function (itemKey) {
      return _this.setState(_this._getInnerMenuOpenState(itemKey));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_closeInnerMenu", function (itemKey) {
      return _this.setState(_this._getInnerMenuCloseState(itemKey));
    });
    _this.itemKeyToChildren = {};
    _this.itemKeyToParentKey = {};
    _this.firstLevelItems = [];
    _this.state = {
      persistentTopChildren: [],
      drivenOutChildren: [],
      onScreenChildren: [],
      collapsibleOnScreenChildren: [],
      drivenInChildren: [],
      persistentBottomChildren: [],
      selectedKey: '',
      lastSelectedKey: '',
      expandedInnerMenu: undefined
    };
    return _this;
  }

  (0, _createClass2["default"])(Sidebar, [{
    key: "UNSAFE_componentWillMount",
    value: function UNSAFE_componentWillMount() {
      this._setInnerMenus(this.props);
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(props) {
      this._setInnerMenus(props);
    }
  }, {
    key: "_setInnerMenus",
    value: function _setInnerMenus(props) {
      var _this2 = this;

      var persistentTopChildren = [];
      var persistentBottomChildren = [];
      var onScreenChildren = [];

      var findEnabledChild = function findEnabledChild(item) {
        return item.props.innerMenu && item.props.innerMenu.find(function (c) {
          return c.type === _SidebarItem.SidebarItem && !c.props.disable;
        });
      };

      var handleChild = function handleChild(child) {
        if (child.type === _SidebarItem.SidebarItem) {
          var enabledChild = findEnabledChild(child);

          var innerChildrenWithKeys = _this2._getChildrenWithKeys(child);

          _this2.itemKeyToChildren[child.props.itemKey] = {
            selectedKey: enabledChild ? enabledChild.props.itemKey : child.props.itemKey,
            children: innerChildrenWithKeys
          };

          if (child.props.innerMenu) {
            innerChildrenWithKeys.forEach(function (innerChild) {
              if (innerChild.type !== _SidebarBackButton.SidebarBackButton) {
                _this2.itemKeyToParentKey[innerChild.props.itemKey] = child.props.itemKey;
              }
            });
          }

          onScreenChildren.push(child);
        } else if (child.type === _SidebarPersistentHeader.SidebarPersistentHeader) {
          persistentTopChildren.push(child);
        } else if (child.type === _SidebarPersistentFooter.SidebarPersistentFooter) {
          persistentBottomChildren.push(child);
        } else {
          onScreenChildren.push(child);
        }
      };

      if (props.children) {
        if (props.children.length) {
          props.children.forEach(function (child) {
            if (child) {
              if (child.length > 0) {
                child.forEach(handleChild);
              } else {
                handleChild(child);
              }
            }
          });
        } else {
          handleChild(props.children);
        }
      }

      this.firstLevelItems = onScreenChildren.slice();
      var newState = {
        persistentTopChildren: persistentTopChildren,
        persistentBottomChildren: persistentBottomChildren,
        onScreenChildren: onScreenChildren,
        selectedKey: props.selectedKey
      };
      var selectedItemParentKey = this.itemKeyToParentKey[props.selectedKey];

      if (selectedItemParentKey) {
        this.setState(_objectSpread(_objectSpread({}, newState), {}, {
          drivenInChildren: this.itemKeyToChildren[selectedItemParentKey].children,
          lastSelectedKey: selectedItemParentKey
        }, this._getInnerMenuCollapsibleState({
          menuToClose: this.itemKeyToParentKey[this.props.selectedKey] || this.props.selctedKey,
          menuToOpen: selectedItemParentKey,
          selected: props.selectedKey
        })));
      } else {
        var updateCollapsibleOnlyOnChange = true;
        this.setState(_objectSpread(_objectSpread({}, newState), {}, {
          drivenInChildren: []
        }, this._getInnerMenuCloseState(props.selectedKey, updateCollapsibleOnlyOnChange)));
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props = this.props,
          isHidden = _this$props.isHidden,
          skin = _this$props.skin;

      var css = _objectSpread(_objectSpread({}, _SidebarSt.classes), this.props.classNames);

      var sliderClasses = (0, _SidebarSt.st)(css.slider, {
        skin: skin
      }, this.state.drivenInChildren.length !== 0 && css.sliderOutToLeft, this.state.drivenInChildren.length === 0 && this.state.drivenOutChildren.length !== 0 && css.sliderInFromLeft);
      var collapsibleSliderClasses = (0, _SidebarSt.st)(css.slider, {
        skin: skin
      });
      var sliderOutToRightClasses = (0, _SidebarSt.st)(css.slider, {
        skin: skin
      }, !this.props.isHidden && css.sliderOutToRight);
      var sliderInFromRightClasses = (0, _SidebarSt.st)(css.slider, {
        skin: skin
      }, !this.props.isHidden && css.sliderInFromRight);
      var rootClasses = (0, _SidebarSt.st)(css.sideBar || _SidebarSt.classes.root, {
        hidden: isHidden,
        skin: skin
      });
      return /*#__PURE__*/_react["default"].createElement(_context.WixStyleReactContext.Consumer, null, function (_ref) {
        var sidebarExperimentCollapsible = _ref.sidebarExperimentCollapsible;
        return /*#__PURE__*/_react["default"].createElement(_SidebarAPI.SidebarContext.Provider, {
          value: _this3.sidebarContext
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: rootClasses,
          "data-hook": _this3.props.dataHook
        }, _this3.state.persistentTopChildren, /*#__PURE__*/_react["default"].createElement("div", {
          className: (0, _SidebarSt.st)(css.content)
        }, !sidebarExperimentCollapsible && _this3.state.drivenInChildren.length === 0 && _this3.state.drivenOutChildren.length !== 0 && /*#__PURE__*/_react["default"].createElement("div", {
          className: sliderOutToRightClasses,
          "data-hook": _constants.dataHooks.drivenOutChildren
        }, _this3.state.drivenOutChildren), /*#__PURE__*/_react["default"].createElement(_SidebarContentWrapper.SidebarContentWrapper, {
          containerClasses: sidebarExperimentCollapsible ? collapsibleSliderClasses : sliderClasses,
          skin: skin
        }, sidebarExperimentCollapsible ? _this3.state.collapsibleOnScreenChildren : _this3.state.onScreenChildren), !sidebarExperimentCollapsible && _this3.state.drivenInChildren.length !== 0 && /*#__PURE__*/_react["default"].createElement(_SidebarContentWrapper.SidebarContentWrapper, {
          key: "collapsiblle",
          containerClasses: sliderInFromRightClasses,
          containerDataHook: _constants.dataHooks.drivenInChildren,
          skin: skin
        }, _this3.state.drivenInChildren)), _this3.state.persistentBottomChildren));
      });
    }
  }]);
  return Sidebar;
}(_react.Component);

(0, _defineProperty2["default"])(Sidebar, "displayName", 'Sidebar');
(0, _defineProperty2["default"])(Sidebar, "Item", _SidebarItem.SidebarItem);
(0, _defineProperty2["default"])(Sidebar, "PersistentHeader", _SidebarPersistentHeader.SidebarPersistentHeader);
(0, _defineProperty2["default"])(Sidebar, "PersistentFooter", _SidebarPersistentFooter.SidebarPersistentFooter);
(0, _defineProperty2["default"])(Sidebar, "BackButton", _SidebarBackButton.SidebarBackButton);
(0, _defineProperty2["default"])(Sidebar, "propTypes", {
  /** classNames overrides  */
  classNames: _propTypes["default"].shape({
    sideBar: _propTypes["default"].string,
    content: _propTypes["default"].string,
    slider: _propTypes["default"].string,
    sliderOutToLeft: _propTypes["default"].string,
    sliderOutToRight: _propTypes["default"].string,
    sliderInFromLeft: _propTypes["default"].string,
    sliderInFromRight: _propTypes["default"].string
  }),

  /** The dataHook of the Sidebar */
  dataHook: _propTypes["default"].string,

  /**  Sidebar menu children */
  children: _propTypes["default"].node,

  /**  Sidebar indicator for animating out or in */
  isHidden: _propTypes["default"].bool,

  /** Sets the skin of the Sidebar */
  skin: _propTypes["default"].oneOf(['dark', 'light'])
});
(0, _defineProperty2["default"])(Sidebar, "defaultProps", {
  skin: _constants.sidebarSkins.dark,
  isHidden: false
});
var _default = Sidebar;
exports["default"] = _default;