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

package/components/sidebars/Sidebar.js

@@ -1,365 +1,216 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Resizer from '../resizer/Resizer';
-import classNames from 'classnames';
-import throttle from 'lodash/fp/throttle';
-import head from 'lodash/fp/head';
-import addEventListener from '../../utils/addEventListener';
-import ownerDocument from '../../utils/ownerDocument';
-import logPropError from '../../utils/logPropError';
-var errorProps = [{
-  prop: 'disableFullscreen',
-  replacement: 'enableFullscreenToggle'
-}, {
-  prop: 'fullscreen',
-  replacement: 'openInFullscreen'
-}];
-var renderFooter = function renderFooter(footer, footerClassName) {
-  var footerClassNames = classNames('SidebarFooter', footerClassName && footerClassName);
-  return /*#__PURE__*/React.createElement("div", {
-    className: footerClassNames
-  }, footer);
-};
-var RESIZE_THROTTLE = 500;
-var getSidebarBodyByRef = function getSidebarBodyByRef(sidebarRef) {
-  return head(sidebarRef.getElementsByClassName('SidebarBody'));
-};
-var Sidebar = /*#__PURE__*/function (_Component) {
-  _inherits(Sidebar, _Component);
-  var _super = _createSuper(Sidebar);
-  function Sidebar(props) {
-    var _this;
-    _classCallCheck(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(_assertThisInitialized(_this));
-    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
-    _this.handleResizeEnd = _this.handleResizeEnd.bind(_assertThisInitialized(_this));
-    _this.handleFullscreenChange = _this.handleFullscreenChange.bind(_assertThisInitialized(_this));
-    _this.handleEscFullscreen = _this.handleEscFullscreen.bind(_assertThisInitialized(_this));
-    _this.onWindowResize = throttle(RESIZE_THROTTLE, _this.onWindowResize.bind(_assertThisInitialized(_this)));
-    return _this;
-  }
-  _createClass(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 = addEventListener(window, 'resize', this.onWindowResize);
-
-        // Initially check breakpoint after mounting the component
-        this.adaptSidebarMode();
-      }
-      var doc = ownerDocument(this);
-      this.onDocumentKeydownListener = addEventListener(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;
-      logPropError(errorProps, this.props, 'Sidebar');
-      var classes = classNames('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 = classNames('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
-      var titleClassNames = classNames('SidebarTitle', titleClassName && titleClassName);
-      var bodyClassNames = classNames('SidebarBody', bodyClassName && bodyClassName);
-      var backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
-      var fullscreenIconClasses = classNames('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
-      var resizeLimitClasses = classNames('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.createElement("div", {
-        className: classes,
-        style: {
-          width: width
-        },
-        ref: function ref(node) {
-          return _this2.sidebarRef = node;
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: resizeLimitClasses,
-        style: resizeLimitStyle
-      }), /*#__PURE__*/React.createElement("div", {
-        className: 'SidebarContent'
-      }, /*#__PURE__*/React.createElement("div", {
-        className: headerClassNames
-      }, /*#__PURE__*/React.createElement("div", {
-        className: titleClassNames
-      }, title ? title : ''), /*#__PURE__*/React.createElement("div", {
-        className: 'SidebarButtons non-printable close'
-      }, headerButtons, enableNavigationButtons && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
-        onClick: this.handlePrevContent
-      }, /*#__PURE__*/React.createElement("span", {
-        className: ' rioglyph rioglyph-chevron-left'
-      })), /*#__PURE__*/React.createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
-        onClick: this.handleNextContent
-      }, /*#__PURE__*/React.createElement("span", {
-        className: ' rioglyph rioglyph-chevron-right'
-      }))), enableFullscreenToggle && /*#__PURE__*/React.createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
-        onClick: this.handleFullscreenChange
-      }, /*#__PURE__*/React.createElement("span", {
-        className: fullscreenIconClasses
-      })), !disableClose && (headerButtons || enableNavigationButtons || enableFullscreenToggle) && /*#__PURE__*/React.createElement("div", {
-        className: 'SidebarButtons-spacer'
-      }), !disableClose && /*#__PURE__*/React.createElement("button", {
-        className: 'btn btn-muted btn-icon-only',
-        onClick: onClose
-      }, /*#__PURE__*/React.createElement("span", {
-        className: 'rioglyph rioglyph-remove'
-      })))), /*#__PURE__*/React.createElement("div", {
-        className: bodyClassNames,
-        ref: bodyRef
-      }, children), footer && renderFooter(footer, footerClassName)), resizable && /*#__PURE__*/React.createElement(Resizer, {
-        onResizeStart: this.handleResizeStart,
-        onResize: this.handleResize,
-        onResizeEnd: this.handleResizeEnd,
-        direction: Resizer.HORIZONTAL,
-        position: isRight ? Resizer.LEFT : Resizer.RIGHT
-      }), useBackdrop && !closed && /*#__PURE__*/React.createElement("div", {
-        className: backdropClassNames,
-        onClick: onBackdropClick
-      }));
-    }
-  }]);
-  return Sidebar;
-}(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.bool,
-  fly: PropTypes.bool,
-  switchModeBreakpoint: PropTypes.number,
-  resizable: PropTypes.bool,
-  onResizeEnd: PropTypes.func,
-  disableEsc: PropTypes.bool,
-  position: PropTypes.oneOf([Sidebar.LEFT, Sidebar.RIGHT]),
-  // When sidebar is resizable it will take the provided with in px only
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  minWidth: PropTypes.number,
-  maxWidth: PropTypes.number,
-  className: PropTypes.string,
-  headerClassName: PropTypes.string,
-  titleClassName: PropTypes.string,
-  bodyClassName: PropTypes.string,
-  footerClassName: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  onClose: PropTypes.func,
-  disableClose: PropTypes.bool,
-  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  fullscreen: PropTypes.bool,
-  openInFullscreen: PropTypes.bool,
-  onFullScreenChange: PropTypes.func,
-  disableFullscreen: PropTypes.bool,
-  enableFullscreenToggle: PropTypes.bool,
-  enableNavigationButtons: PropTypes.bool,
-  useBackdrop: PropTypes.bool,
-  makeBackdropVisible: PropTypes.bool,
-  onBackdropClick: PropTypes.func,
-  backdropClassName: PropTypes.string,
-  bodyRef: PropTypes.object,
-  headerButtons: PropTypes.node
-};
-export default Sidebar;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable complexity, no-nested-ternary */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Resizer from '../resizer/Resizer';
+import classNames from 'classnames';
+import throttle from 'lodash/fp/throttle';
+import head from 'lodash/fp/head';
+import addEventListener from '../../utils/addEventListener';
+import ownerDocument from '../../utils/ownerDocument';
+import logPropError from '../../utils/logPropError';
+const errorProps = [
+    {
+        prop: 'disableFullscreen',
+        replacement: 'enableFullscreenToggle',
+    },
+    {
+        prop: 'fullscreen',
+        replacement: 'openInFullscreen',
+    },
+];
+const renderFooter = (footer, footerClassName) => {
+    const footerClassNames = classNames('SidebarFooter', footerClassName && footerClassName);
+    return _jsx("div", Object.assign({ className: footerClassNames }, { children: footer }));
+};
+const RESIZE_THROTTLE = 500;
+const getSidebarBodyByRef = sidebarRef => head(sidebarRef.getElementsByClassName('SidebarBody'));
+class Sidebar extends 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 = throttle(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 = addEventListener(window, 'resize', this.onWindowResize);
+            // Initially check breakpoint after mounting the component
+            this.adaptSidebarMode();
+        }
+        const doc = ownerDocument(this);
+        this.onDocumentKeydownListener = addEventListener(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;
+        logPropError(errorProps, this.props, 'Sidebar');
+        const classes = classNames('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 = classNames('SidebarHeader', headerClassName && headerClassName, showHeaderBorder && 'show-border');
+        const titleClassNames = classNames('SidebarTitle', titleClassName && titleClassName);
+        const bodyClassNames = classNames('SidebarBody', bodyClassName && bodyClassName);
+        const backdropClassNames = classNames('SidebarBackdrop', makeBackdropVisible && 'sidebar-backdrop-bg', backdropClassName && backdropClassName);
+        const fullscreenIconClasses = classNames('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
+        const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');
+        const isRight = position === Sidebar.RIGHT;
+        const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
+        const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };
+        return (_jsxs("div", Object.assign({ className: classes, style: { width: width }, ref: node => (this.sidebarRef = node) }, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", Object.assign({ className: 'SidebarContent' }, { children: [_jsxs("div", Object.assign({ className: headerClassNames }, { children: [_jsx("div", Object.assign({ className: titleClassNames }, { children: title ? title : '' })), _jsxs("div", Object.assign({ className: 'SidebarButtons non-printable close' }, { children: [headerButtons, enableNavigationButtons && (_jsxs(React.Fragment, { children: [_jsx("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: this.handlePrevContent }, { children: _jsx("span", { className: ' rioglyph rioglyph-chevron-left' }) })), _jsx("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: this.handleNextContent }, { children: _jsx("span", { className: ' rioglyph rioglyph-chevron-right' }) }))] })), enableFullscreenToggle && (_jsx("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: this.handleFullscreenChange }, { children: _jsx("span", { className: fullscreenIconClasses }) }))), !disableClose && (headerButtons || enableNavigationButtons || enableFullscreenToggle) && (_jsx("div", { className: 'SidebarButtons-spacer' })), !disableClose && (_jsx("button", Object.assign({ className: 'btn btn-muted btn-icon-only', onClick: onClose }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })))] }))] })), _jsx("div", Object.assign({ className: bodyClassNames, ref: bodyRef }, { children: children })), footer && renderFooter(footer, footerClassName)] })), resizable && (_jsx(Resizer, { onResizeStart: this.handleResizeStart, onResize: this.handleResize, onResizeEnd: this.handleResizeEnd, direction: Resizer.HORIZONTAL, position: isRight ? Resizer.LEFT : Resizer.RIGHT })), useBackdrop && !closed && _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: PropTypes.bool,
+    fly: PropTypes.bool,
+    switchModeBreakpoint: PropTypes.number,
+    resizable: PropTypes.bool,
+    onResizeEnd: PropTypes.func,
+    disableEsc: PropTypes.bool,
+    position: PropTypes.oneOf([Sidebar.LEFT, Sidebar.RIGHT]),
+    // When sidebar is resizable it will take the provided with in px only
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    minWidth: PropTypes.number,
+    maxWidth: PropTypes.number,
+    className: PropTypes.string,
+    headerClassName: PropTypes.string,
+    titleClassName: PropTypes.string,
+    bodyClassName: PropTypes.string,
+    footerClassName: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    onClose: PropTypes.func,
+    disableClose: PropTypes.bool,
+    footer: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    fullscreen: PropTypes.bool,
+    openInFullscreen: PropTypes.bool,
+    onFullScreenChange: PropTypes.func,
+    disableFullscreen: PropTypes.bool,
+    enableFullscreenToggle: PropTypes.bool,
+    enableNavigationButtons: PropTypes.bool,
+    useBackdrop: PropTypes.bool,
+    makeBackdropVisible: PropTypes.bool,
+    onBackdropClick: PropTypes.func,
+    backdropClassName: PropTypes.string,
+    bodyRef: PropTypes.object,
+    headerButtons: PropTypes.node,
+};
+export default Sidebar;

package/components/slider/RangeSlider.d.ts

@@ -0,0 +1,33 @@
+export default RangeSlider;
+declare function RangeSlider(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace RangeSlider {
+    namespace defaultProps {
+        const step: number;
+        const minValue: number;
+        const maxValue: number;
+        const valueLabels: boolean;
+        const disabled: boolean;
+        function onChange(): void;
+        function onDragEnd(): void;
+    }
+    namespace propTypes {
+        export const leftValue: PropTypes.Requireable<number>;
+        export const rightValue: PropTypes.Requireable<number>;
+        const minValue_1: PropTypes.Validator<number>;
+        export { minValue_1 as minValue };
+        const maxValue_1: PropTypes.Validator<number>;
+        export { maxValue_1 as maxValue };
+        const valueLabels_1: PropTypes.Requireable<boolean>;
+        export { valueLabels_1 as valueLabels };
+        const step_1: PropTypes.Requireable<number>;
+        export { step_1 as step };
+        const onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onChange_1 as onChange };
+        const onDragEnd_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onDragEnd_1 as onDragEnd };
+        export const className: PropTypes.Requireable<string>;
+        const disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
+    }
+}
+import PropTypes from "prop-types";