@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/lib/es/components/sidebars/Sidebar.js

@@ -1,375 +1,219 @@
-"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 _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 _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
-var _head = _interopRequireDefault(require("lodash/fp/head"));
-var _addEventListener = _interopRequireDefault(require("../../utils/addEventListener"));
-var _ownerDocument = _interopRequireDefault(require("../../utils/ownerDocument"));
-var _logPropError = _interopRequireDefault(require("../../utils/logPropError"));
-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 _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; } } /* eslint-disable complexity, no-nested-ternary */
-var errorProps = [{
-  prop: 'disableFullscreen',
-  replacement: 'enableFullscreenToggle'
-}, {
-  prop: 'fullscreen',
-  replacement: 'openInFullscreen'
-}];
-var renderFooter = function renderFooter(footer, footerClassName) {
-  var footerClassNames = (0, _classnames["default"])('SidebarFooter', footerClassName && footerClassName);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: footerClassNames
-  }, footer);
-};
-var RESIZE_THROTTLE = 500;
-var getSidebarBodyByRef = function getSidebarBodyByRef(sidebarRef) {
-  return (0, _head["default"])(sidebarRef.getElementsByClassName('SidebarBody'));
-};
-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);
-    var _this$props = _this.props,
-      width = _this$props.width,
-      fly = _this$props.fly,
-      openInFullscreen = _this$props.openInFullscreen;
-    _this.state = {
-      width: width,
-      sidebarMode: fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID,
-      isFullscreen: openInFullscreen
-    };
-    _this.handleResizeStart = _this.handleResizeStart.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleResize = _this.handleResize.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleResizeEnd = _this.handleResizeEnd.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleFullscreenChange = _this.handleFullscreenChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleEscFullscreen = _this.handleEscFullscreen.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.onWindowResize = (0, _throttle["default"])(RESIZE_THROTTLE, _this.onWindowResize.bind((0, _assertThisInitialized2["default"])(_this)));
-    return _this;
-  }
-  (0, _createClass2["default"])(Sidebar, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props2 = this.props,
-        resizable = _this$props2.resizable,
-        width = _this$props2.width,
-        switchModeBreakpoint = _this$props2.switchModeBreakpoint;
-      this.setState({
-        width: resizable ? parseInt(width, 10) : width
-      });
-      if (switchModeBreakpoint > 0) {
-        this.resizeListener = (0, _addEventListener["default"])(window, 'resize', this.onWindowResize);
-
-        // Initially check breakpoint after mounting the component
-        this.adaptSidebarMode();
-      }
-      var doc = (0, _ownerDocument["default"])(this);
-      this.onDocumentKeydownListener = (0, _addEventListener["default"])(doc, 'keydown', this.handleEscFullscreen);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.resizeListener) {
-        this.resizeListener.remove();
-      }
-      if (this.onDocumentKeydownListener) {
-        this.onDocumentKeydownListener.remove();
-      }
-    }
-  }, {
-    key: "onWindowResize",
-    value: function onWindowResize() {
-      this.adaptSidebarMode();
-    }
-  }, {
-    key: "adaptSidebarMode",
-    value: function adaptSidebarMode() {
-      if (window.innerWidth <= this.props.switchModeBreakpoint) {
-        this.setState({
-          sidebarMode: Sidebar.MODE_FLY
-        });
-      } else {
-        this.setState({
-          sidebarMode: Sidebar.MODE_FLUID
-        });
-      }
-    }
-  }, {
-    key: "getWidthInBoundaries",
-    value: function getWidthInBoundaries(minWidth, maxWidth, width) {
-      if (width > 0 && width < minWidth) {
-        return minWidth;
-      }
-      if (width > 0 && width > maxWidth) {
-        return maxWidth;
-      }
-      if (width > 0 && width > maxWidth) {
-        return maxWidth;
-      }
-      return width;
-    }
-  }, {
-    key: "handleResize",
-    value: function handleResize(diff) {
-      var _this$props3 = this.props,
-        maxWidth = _this$props3.maxWidth,
-        minWidth = _this$props3.minWidth,
-        position = _this$props3.position;
-      var _this$state = this.state,
-        width = _this$state.width,
-        wasSplit = _this$state.isSplit;
-      var halfWindowWidth = window.innerWidth * 0.5;
-      var usedMaxWidth = maxWidth || halfWindowWidth;
-      var updatedWidth = position === Sidebar.RIGHT ? width + diff : width - diff;
-      var newWidth = this.getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
-      var isSplit = newWidth === halfWindowWidth;
-
-      // Check for sidebar with if it is half window size. If it was before but the sidebar was resized so it is
-      // no longer walf window size, set the sidebar with to hals window size to avoid jumping sidebar to old width
-      this.setState({
-        isSplit: isSplit,
-        width: wasSplit && !isSplit ? halfWindowWidth : newWidth
-      });
-    }
-  }, {
-    key: "handleResizeStart",
-    value: function handleResizeStart() {
-      var body = getSidebarBodyByRef(this.sidebarRef);
-      if (body) {
-        body.classList.add('pointer-events-none');
-      }
-      this.setState({
-        isResize: true
-      });
-    }
-  }, {
-    key: "handleResizeEnd",
-    value: function handleResizeEnd() {
-      var body = getSidebarBodyByRef(this.sidebarRef);
-      if (body) {
-        body.classList.remove('pointer-events-none');
-      }
-      this.setState({
-        isResize: false
-      });
-      this.props.onResizeEnd();
-    }
-  }, {
-    key: "handleFullscreenChange",
-    value: function handleFullscreenChange() {
-      var onFullScreenChange = this.props.onFullScreenChange;
-      var isFullscreen = this.state.isFullscreen;
-      var newFullscreenState = !isFullscreen;
-      this.setState({
-        isFullscreen: newFullscreenState
-      });
-      onFullScreenChange(newFullscreenState);
-    }
-  }, {
-    key: "handleEscFullscreen",
-    value: function handleEscFullscreen(event) {
-      var _this$props4 = this.props,
-        disableEsc = _this$props4.disableEsc,
-        enableFullscreenToggle = _this$props4.enableFullscreenToggle,
-        onFullScreenChange = _this$props4.onFullScreenChange;
-      var isFullscreen = this.state.isFullscreen;
-      if (!disableEsc && enableFullscreenToggle && isFullscreen && event.keyCode === 27) {
-        this.setState({
-          isFullscreen: false
-        });
-        onFullScreenChange(false);
-      }
-    }
-  }, {
-    key: "handlePrevContent",
-    value: function handlePrevContent() {}
-  }, {
-    key: "handleNextContent",
-    value: function handleNextContent() {}
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props5 = this.props,
-        className = _this$props5.className,
-        closed = _this$props5.closed,
-        title = _this$props5.title,
-        headerClassName = _this$props5.headerClassName,
-        showHeaderBorder = _this$props5.showHeaderBorder,
-        titleClassName = _this$props5.titleClassName,
-        bodyClassName = _this$props5.bodyClassName,
-        footer = _this$props5.footer,
-        footerClassName = _this$props5.footerClassName,
-        onClose = _this$props5.onClose,
-        children = _this$props5.children,
-        resizable = _this$props5.resizable,
-        position = _this$props5.position,
-        maxWidth = _this$props5.maxWidth,
-        useBackdrop = _this$props5.useBackdrop,
-        makeBackdropVisible = _this$props5.makeBackdropVisible,
-        onBackdropClick = _this$props5.onBackdropClick,
-        backdropClassName = _this$props5.backdropClassName,
-        enableFullscreenToggle = _this$props5.enableFullscreenToggle,
-        enableNavigationButtons = _this$props5.enableNavigationButtons,
-        disableClose = _this$props5.disableClose,
-        bodyRef = _this$props5.bodyRef,
-        headerButtons = _this$props5.headerButtons;
-      var _this$state2 = this.state,
-        width = _this$state2.width,
-        isFullscreen = _this$state2.isFullscreen,
-        isSplit = _this$state2.isSplit,
-        isResize = _this$state2.isResize;
-      (0, _logPropError["default"])(errorProps, this.props, 'Sidebar');
-      var classes = (0, _classnames["default"])('Sidebar', className, closed && 'closed', isFullscreen && 'width-100vw sidebar-fullscreen', isSplit && !isFullscreen && 'max-width-50vw width-50vw', this.state.sidebarMode === Sidebar.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid');
-      var headerClassNames = (0, _classnames["default"])('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
-      var titleClassNames = (0, _classnames["default"])('SidebarTitle', titleClassName && titleClassName);
-      var bodyClassNames = (0, _classnames["default"])('SidebarBody', bodyClassName && bodyClassName);
-      var backdropClassNames = (0, _classnames["default"])('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
-      var fullscreenIconClasses = (0, _classnames["default"])('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
-      var resizeLimitClasses = (0, _classnames["default"])('SidebarResizeLimit', isResize && 'display-block');
-      var isRight = position === Sidebar.RIGHT;
-      var resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
-      var resizeLimitStyle = isRight ? {
-        right: resizeIndicatorPosition
-      } : {
-        left: resizeIndicatorPosition
-      };
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes,
-        style: {
-          width: width
-        },
-        ref: function ref(node) {
-          return _this2.sidebarRef = node;
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: resizeLimitClasses,
-        style: resizeLimitStyle
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'SidebarContent'
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: headerClassNames
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: titleClassNames
-      }, title ? title : ''), /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'SidebarButtons non-printable close'
-      }, headerButtons, enableNavigationButtons && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
-        onClick: this.handlePrevContent
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: ' rioglyph rioglyph-chevron-left'
-      })), /*#__PURE__*/_react["default"].createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
-        onClick: this.handleNextContent
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: ' rioglyph rioglyph-chevron-right'
-      }))), enableFullscreenToggle && /*#__PURE__*/_react["default"].createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
-        onClick: this.handleFullscreenChange
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: fullscreenIconClasses
-      })), !disableClose && (headerButtons || enableNavigationButtons || enableFullscreenToggle) && /*#__PURE__*/_react["default"].createElement("div", {
-        className: 'SidebarButtons-spacer'
-      }), !disableClose && /*#__PURE__*/_react["default"].createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
-        onClick: onClose
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: 'rioglyph rioglyph-remove'
-      })))), /*#__PURE__*/_react["default"].createElement("div", {
-        className: bodyClassNames,
-        ref: bodyRef
-      }, children), footer && renderFooter(footer, footerClassName)), resizable && /*#__PURE__*/_react["default"].createElement(_Resizer["default"], {
-        onResizeStart: this.handleResizeStart,
-        onResize: this.handleResize,
-        onResizeEnd: this.handleResizeEnd,
-        direction: _Resizer["default"].HORIZONTAL,
-        position: isRight ? _Resizer["default"].LEFT : _Resizer["default"].RIGHT
-      }), useBackdrop && !closed && /*#__PURE__*/_react["default"].createElement("div", {
-        className: backdropClassNames,
-        onClick: onBackdropClick
-      }));
-    }
-  }]);
-  return Sidebar;
-}(_react.Component);
-Sidebar.LEFT = 'left';
-Sidebar.RIGHT = 'right';
-Sidebar.MODE_FLY = 'fly';
-Sidebar.MODE_FLUID = 'fluid';
-Sidebar.defaultProps = {
-  closed: false,
-  width: 350,
-  minWidth: 100,
-  maxWidth: 0,
-  resizable: false,
-  onResizeEnd: function onResizeEnd() {},
-  disableEsc: false,
-  enableFullscreenToggle: false,
-  enableNavigationButtons: false,
-  disableClose: false,
-  position: Sidebar.LEFT,
-  fly: false,
-  switchModeBreakpoint: 0,
-  onClose: function onClose() {},
-  useBackdrop: false,
-  openInfullscreen: false,
-  onFullScreenChange: function onFullScreenChange() {},
-  makeBackdropVisible: false,
-  onBackdropClick: function onBackdropClick() {},
-  backdropClassName: ''
-};
-Sidebar.propTypes = {
-  closed: _propTypes["default"].bool,
-  fly: _propTypes["default"].bool,
-  switchModeBreakpoint: _propTypes["default"].number,
-  resizable: _propTypes["default"].bool,
-  onResizeEnd: _propTypes["default"].func,
-  disableEsc: _propTypes["default"].bool,
-  position: _propTypes["default"].oneOf([Sidebar.LEFT, Sidebar.RIGHT]),
-  // When sidebar is resizable it will take the provided with in px only
-  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  minWidth: _propTypes["default"].number,
-  maxWidth: _propTypes["default"].number,
-  className: _propTypes["default"].string,
-  headerClassName: _propTypes["default"].string,
-  titleClassName: _propTypes["default"].string,
-  bodyClassName: _propTypes["default"].string,
-  footerClassName: _propTypes["default"].string,
-  title: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),
-  onClose: _propTypes["default"].func,
-  disableClose: _propTypes["default"].bool,
-  footer: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),
-  fullscreen: _propTypes["default"].bool,
-  openInFullscreen: _propTypes["default"].bool,
-  onFullScreenChange: _propTypes["default"].func,
-  disableFullscreen: _propTypes["default"].bool,
-  enableFullscreenToggle: _propTypes["default"].bool,
-  enableNavigationButtons: _propTypes["default"].bool,
-  useBackdrop: _propTypes["default"].bool,
-  makeBackdropVisible: _propTypes["default"].bool,
-  onBackdropClick: _propTypes["default"].func,
-  backdropClassName: _propTypes["default"].string,
-  bodyRef: _propTypes["default"].object,
-  headerButtons: _propTypes["default"].node
-};
-var _default = Sidebar;
-exports["default"] = _default;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable complexity, no-nested-ternary */
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const Resizer_1 = tslib_1.__importDefault(require("../resizer/Resizer"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/fp/throttle"));
+const head_1 = tslib_1.__importDefault(require("lodash/fp/head"));
+const addEventListener_1 = tslib_1.__importDefault(require("../../utils/addEventListener"));
+const ownerDocument_1 = tslib_1.__importDefault(require("../../utils/ownerDocument"));
+const logPropError_1 = tslib_1.__importDefault(require("../../utils/logPropError"));
+const errorProps = [
+    {
+        prop: 'disableFullscreen',
+        replacement: 'enableFullscreenToggle',
+    },
+    {
+        prop: 'fullscreen',
+        replacement: 'openInFullscreen',
+    },
+];
+const renderFooter = (footer, footerClassName) => {
+    const footerClassNames = (0, classnames_1.default)('SidebarFooter', footerClassName && footerClassName);
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: footerClassNames }, { children: footer }));
+};
+const RESIZE_THROTTLE = 500;
+const getSidebarBodyByRef = sidebarRef => (0, head_1.default)(sidebarRef.getElementsByClassName('SidebarBody'));
+class Sidebar extends react_1.Component {
+    constructor(props) {
+        super(props);
+        const { width, fly, openInFullscreen } = this.props;
+        this.state = {
+            width,
+            sidebarMode: fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID,
+            isFullscreen: openInFullscreen,
+        };
+        this.handleResizeStart = this.handleResizeStart.bind(this);
+        this.handleResize = this.handleResize.bind(this);
+        this.handleResizeEnd = this.handleResizeEnd.bind(this);
+        this.handleFullscreenChange = this.handleFullscreenChange.bind(this);
+        this.handleEscFullscreen = this.handleEscFullscreen.bind(this);
+        this.onWindowResize = (0, throttle_1.default)(RESIZE_THROTTLE, this.onWindowResize.bind(this));
+    }
+    componentDidMount() {
+        const { resizable, width, switchModeBreakpoint } = this.props;
+        this.setState({
+            width: resizable ? parseInt(width, 10) : width,
+        });
+        if (switchModeBreakpoint > 0) {
+            this.resizeListener = (0, addEventListener_1.default)(window, 'resize', this.onWindowResize);
+            // Initially check breakpoint after mounting the component
+            this.adaptSidebarMode();
+        }
+        const doc = (0, ownerDocument_1.default)(this);
+        this.onDocumentKeydownListener = (0, addEventListener_1.default)(doc, 'keydown', this.handleEscFullscreen);
+    }
+    componentWillUnmount() {
+        if (this.resizeListener) {
+            this.resizeListener.remove();
+        }
+        if (this.onDocumentKeydownListener) {
+            this.onDocumentKeydownListener.remove();
+        }
+    }
+    onWindowResize() {
+        this.adaptSidebarMode();
+    }
+    adaptSidebarMode() {
+        if (window.innerWidth <= this.props.switchModeBreakpoint) {
+            this.setState({
+                sidebarMode: Sidebar.MODE_FLY,
+            });
+        }
+        else {
+            this.setState({
+                sidebarMode: Sidebar.MODE_FLUID,
+            });
+        }
+    }
+    getWidthInBoundaries(minWidth, maxWidth, width) {
+        if (width > 0 && width < minWidth) {
+            return minWidth;
+        }
+        if (width > 0 && width > maxWidth) {
+            return maxWidth;
+        }
+        if (width > 0 && width > maxWidth) {
+            return maxWidth;
+        }
+        return width;
+    }
+    handleResize(diff) {
+        const { maxWidth, minWidth, position } = this.props;
+        const { width, isSplit: wasSplit } = this.state;
+        const halfWindowWidth = window.innerWidth * 0.5;
+        const usedMaxWidth = maxWidth || halfWindowWidth;
+        const updatedWidth = position === Sidebar.RIGHT ? width + diff : width - diff;
+        const newWidth = this.getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
+        const isSplit = newWidth === halfWindowWidth;
+        // Check for sidebar with if it is half window size. If it was before but the sidebar was resized so it is
+        // no longer walf window size, set the sidebar with to hals window size to avoid jumping sidebar to old width
+        this.setState({
+            isSplit,
+            width: wasSplit && !isSplit ? halfWindowWidth : newWidth,
+        });
+    }
+    handleResizeStart() {
+        const body = getSidebarBodyByRef(this.sidebarRef);
+        if (body) {
+            body.classList.add('pointer-events-none');
+        }
+        this.setState({ isResize: true });
+    }
+    handleResizeEnd() {
+        const body = getSidebarBodyByRef(this.sidebarRef);
+        if (body) {
+            body.classList.remove('pointer-events-none');
+        }
+        this.setState({ isResize: false });
+        this.props.onResizeEnd();
+    }
+    handleFullscreenChange() {
+        const { onFullScreenChange } = this.props;
+        const { isFullscreen } = this.state;
+        const newFullscreenState = !isFullscreen;
+        this.setState({ isFullscreen: newFullscreenState });
+        onFullScreenChange(newFullscreenState);
+    }
+    handleEscFullscreen(event) {
+        const { disableEsc, enableFullscreenToggle, onFullScreenChange } = this.props;
+        const { isFullscreen } = this.state;
+        if (!disableEsc && enableFullscreenToggle && isFullscreen && event.keyCode === 27) {
+            this.setState({ isFullscreen: false });
+            onFullScreenChange(false);
+        }
+    }
+    handlePrevContent() { }
+    handleNextContent() { }
+    render() {
+        const { className, closed, title, headerClassName, showHeaderBorder, titleClassName, bodyClassName, footer, footerClassName, onClose, children, resizable, position, maxWidth, useBackdrop, makeBackdropVisible, onBackdropClick, backdropClassName, enableFullscreenToggle, enableNavigationButtons, disableClose, bodyRef, headerButtons, } = this.props;
+        const { width, isFullscreen, isSplit, isResize } = this.state;
+        (0, logPropError_1.default)(errorProps, this.props, 'Sidebar');
+        const classes = (0, classnames_1.default)('Sidebar', className, closed && 'closed', isFullscreen && 'width-100vw sidebar-fullscreen', isSplit && !isFullscreen && 'max-width-50vw width-50vw', this.state.sidebarMode === Sidebar.MODE_FLY ? 'fly' : isFullscreen ? 'fly' : 'fluid');
+        const headerClassNames = (0, classnames_1.default)('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
+        const titleClassNames = (0, classnames_1.default)('SidebarTitle', titleClassName && titleClassName);
+        const bodyClassNames = (0, classnames_1.default)('SidebarBody', bodyClassName && bodyClassName);
+        const backdropClassNames = (0, classnames_1.default)('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
+        const fullscreenIconClasses = (0, classnames_1.default)('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
+        const resizeLimitClasses = (0, classnames_1.default)('SidebarResizeLimit', isResize && 'display-block');
+        const isRight = position === Sidebar.RIGHT;
+        const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
+        const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, style: { width: width }, ref: node => (this.sidebarRef = node) }, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'SidebarContent' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: headerClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: titleClassNames }, { children: title ? title : '' })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'SidebarButtons non-printable close' }, { children: [headerButtons, enableNavigationButtons && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: this.handlePrevContent }, { children: (0, jsx_runtime_1.jsx)("span", { className: ' rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: this.handleNextContent }, { children: (0, jsx_runtime_1.jsx)("span", { className: ' rioglyph rioglyph-chevron-right' }) }))] })), enableFullscreenToggle && ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: this.handleFullscreenChange }, { children: (0, jsx_runtime_1.jsx)("span", { className: fullscreenIconClasses }) }))), !disableClose && (headerButtons || enableNavigationButtons || enableFullscreenToggle) && ((0, jsx_runtime_1.jsx)("div", { className: 'SidebarButtons-spacer' })), !disableClose && ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: onClose }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: bodyClassNames, ref: bodyRef }, { children: children })), footer && renderFooter(footer, footerClassName)] })), resizable && ((0, jsx_runtime_1.jsx)(Resizer_1.default, { onResizeStart: this.handleResizeStart, onResize: this.handleResize, onResizeEnd: this.handleResizeEnd, direction: Resizer_1.default.HORIZONTAL, position: isRight ? Resizer_1.default.LEFT : Resizer_1.default.RIGHT })), useBackdrop && !closed && (0, jsx_runtime_1.jsx)("div", { className: backdropClassNames, onClick: onBackdropClick })] })));
+    }
+}
+Sidebar.LEFT = 'left';
+Sidebar.RIGHT = 'right';
+Sidebar.MODE_FLY = 'fly';
+Sidebar.MODE_FLUID = 'fluid';
+Sidebar.defaultProps = {
+    closed: false,
+    width: 350,
+    minWidth: 100,
+    maxWidth: 0,
+    resizable: false,
+    onResizeEnd: () => { },
+    disableEsc: false,
+    enableFullscreenToggle: false,
+    enableNavigationButtons: false,
+    disableClose: false,
+    position: Sidebar.LEFT,
+    fly: false,
+    switchModeBreakpoint: 0,
+    onClose: () => { },
+    useBackdrop: false,
+    openInfullscreen: false,
+    onFullScreenChange: () => { },
+    makeBackdropVisible: false,
+    onBackdropClick: () => { },
+    backdropClassName: '',
+};
+Sidebar.propTypes = {
+    closed: prop_types_1.default.bool,
+    fly: prop_types_1.default.bool,
+    switchModeBreakpoint: prop_types_1.default.number,
+    resizable: prop_types_1.default.bool,
+    onResizeEnd: prop_types_1.default.func,
+    disableEsc: prop_types_1.default.bool,
+    position: prop_types_1.default.oneOf([Sidebar.LEFT, Sidebar.RIGHT]),
+    // When sidebar is resizable it will take the provided with in px only
+    width: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
+    minWidth: prop_types_1.default.number,
+    maxWidth: prop_types_1.default.number,
+    className: prop_types_1.default.string,
+    headerClassName: prop_types_1.default.string,
+    titleClassName: prop_types_1.default.string,
+    bodyClassName: prop_types_1.default.string,
+    footerClassName: prop_types_1.default.string,
+    title: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.string]),
+    onClose: prop_types_1.default.func,
+    disableClose: prop_types_1.default.bool,
+    footer: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.string]),
+    fullscreen: prop_types_1.default.bool,
+    openInFullscreen: prop_types_1.default.bool,
+    onFullScreenChange: prop_types_1.default.func,
+    disableFullscreen: prop_types_1.default.bool,
+    enableFullscreenToggle: prop_types_1.default.bool,
+    enableNavigationButtons: prop_types_1.default.bool,
+    useBackdrop: prop_types_1.default.bool,
+    makeBackdropVisible: prop_types_1.default.bool,
+    onBackdropClick: prop_types_1.default.func,
+    backdropClassName: prop_types_1.default.string,
+    bodyRef: prop_types_1.default.object,
+    headerButtons: prop_types_1.default.node,
+};
+exports.default = Sidebar;