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

package/lib/es/components/applicationLayout/ApplicationLayoutSidebar.js

@@ -1,33 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.ApplicationLayoutSidebar = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["className", "children"];
-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; }
-var ApplicationLayoutSidebar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    remainigProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = (0, _classnames["default"])('ApplicationLayoutSidebar', className);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    ref: ref
-  }, remainigProps, {
-    className: classes
-  }), children);
-});
-exports.ApplicationLayoutSidebar = ApplicationLayoutSidebar;
-ApplicationLayoutSidebar.propTypes = {
-  className: _propTypes["default"].string
-};
-var _default = ApplicationLayoutSidebar;
-exports["default"] = _default;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const ApplicationLayoutSidebar = (0, react_1.forwardRef)((props, ref) => {
+    const { className, children } = props, remainingProps = tslib_1.__rest(props, ["className", "children"]);
+    const classes = (0, classnames_1.default)('ApplicationLayoutSidebar', className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, remainingProps, { className: classes }, { children: children })));
+});
+exports.default = ApplicationLayoutSidebar;

package/lib/es/components/applicationLayout/SubNavigation.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ModulePropType } from '../applicationHeader/ApplicationHeader';
+export type SubNavigationProps = {
+    navItems?: ModulePropType[];
+    className?: string;
+};
+declare const SubNavigation: React.ForwardRefExoticComponent<SubNavigationProps & React.RefAttributes<HTMLDivElement>>;
+export default SubNavigation;

package/lib/es/components/applicationLayout/SubNavigation.js

@@ -1,49 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.SubNavigation = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["className", "navItems", "right"];
-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; }
-var SubNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var className = props.className,
-    navItems = props.navItems,
-    right = props.right,
-    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var navigationClasses = (0, _classnames["default"])('SubNavigation', 'width-100pct display-flex align-items-center justify-content-between overflow-auto', className);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    ref: ref
-  }, remainingProps, {
-    className: navigationClasses
-  }), /*#__PURE__*/_react["default"].createElement("ul", {
-    className: "SubmoduleNavigation nav"
-  }, navItems.map(function (navItem) {
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      className: "submodule",
-      key: navItem.key,
-      "data-nav-item-key": navItem.key
-    }, navItem.route);
-  })));
-});
-exports.SubNavigation = SubNavigation;
-SubNavigation.defaultProps = {
-  navItems: []
-};
-SubNavigation.propTypes = {
-  navItems: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    key: _propTypes["default"].string.isRequired,
-    route: _propTypes["default"].node.isRequired
-  })),
-  className: _propTypes["default"].string
-};
-var _default = SubNavigation;
-exports["default"] = _default;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SubNavigation = (0, react_1.forwardRef)((props, ref) => {
+    const { className, navItems = [] } = props, remainingProps = tslib_1.__rest(props, ["className", "navItems"]);
+    const navigationClasses = (0, classnames_1.default)('SubNavigation', 'width-100pct display-flex align-items-center justify-content-between overflow-auto', className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, remainingProps, { className: navigationClasses }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'SubmoduleNavigation nav' }, { children: navItems.map(navItem => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'submodule', "data-nav-item-key": navItem.key }, { children: navItem.route }), navItem.key))) })) })));
+});
+exports.default = SubNavigation;

package/lib/es/components/aspectRatioPlaceholder/AspectRatioPlaceholder.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from 'react';
+export type AspectRatioPlaceholderProps = {
+    /** Defines the aspect ratio width. @default 16 */
+    height?: number;
+    /** Defines the aspect ratio height. @default 9 */
+    width?: number;
+    /** Additional class names that are added to the wrapping element. */
+    className?: string;
+};
+declare const AspectRatioPlaceholder: (props: AspectRatioPlaceholderProps & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export default AspectRatioPlaceholder;

package/lib/es/components/aspectRatioPlaceholder/AspectRatioPlaceholder.js

@@ -1,33 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var AspectRatioPlaceholder = function AspectRatioPlaceholder(props) {
-  var width = props.width,
-    height = props.height,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    children = props.children;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "position-relative ".concat(className),
-    style: {
-      aspectRatio: "".concat(width, " / ").concat(height)
-    }
-  }, children);
-};
-AspectRatioPlaceholder.defaultProps = {
-  width: 16,
-  height: 9
-};
-AspectRatioPlaceholder.propTypes = {
-  width: _propTypes["default"].number,
-  height: _propTypes["default"].number,
-  className: _propTypes["default"].string
-};
-var _default = AspectRatioPlaceholder;
-exports["default"] = _default;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const AspectRatioPlaceholder = (props) => {
+    const { width = 16, height = 9, className = '', children } = props;
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `position-relative ${className}`, style: { aspectRatio: `${width} / ${height}` } }, { children: children })));
+};
+exports.default = AspectRatioPlaceholder;

package/lib/es/components/assetTree/AssetTree.d.ts

@@ -0,0 +1,3 @@
+export default AssetTree;
+declare const AssetTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<any>>>;
+import React from "react";

package/lib/es/components/assetTree/AssetTree.js

@@ -1,212 +1,137 @@
-"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _head = _interopRequireDefault(require("lodash/fp/head"));
-var _isArray = _interopRequireDefault(require("lodash/fp/isArray"));
-var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
-var _TreeSidebar = _interopRequireDefault(require("./TreeSidebar"));
-var _TreeCategory = _interopRequireDefault(require("./TreeCategory"));
-var _excluded = ["className", "resizable", "width", "maxWidth", "minWidth", "height", "bordered", "currentCategoryId", "isOpen", "useOffscreen", "fly", "onCategoryChange", "onToggleTree", "onResizeEnd", "children"];
-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; }
-var getSidebarBodyRef = function getSidebarBodyRef(sidebarRef) {
-  return (0, _head["default"])(sidebarRef.current.getElementsByClassName('AssetTreeBody'));
-};
-var getWidthInBoundaries = 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;
-};
-var getCurrentCategoryElement = function getCurrentCategoryElement(children, currentCategoryId) {
-  return (0, _isArray["default"])(children) ? children.find(function (child) {
-    return child && child.props.id === currentCategoryId;
-  }) : children;
-};
-var renderTreesOffscreen = function renderTreesOffscreen(children, categoryId) {
-  return _react["default"].Children.map(children, function (child) {
-    var offscreenClasses = (0, _classnames["default"])('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen');
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: offscreenClasses
-    }, child);
-  });
-};
-var AssetTree = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var className = props.className,
-    resizable = props.resizable,
-    width = props.width,
-    maxWidth = props.maxWidth,
-    minWidth = props.minWidth,
-    height = props.height,
-    bordered = props.bordered,
-    currentCategoryId = props.currentCategoryId,
-    isOpen = props.isOpen,
-    useOffscreen = props.useOffscreen,
-    fly = props.fly,
-    onCategoryChange = props.onCategoryChange,
-    onToggleTree = props.onToggleTree,
-    onResizeEnd = props.onResizeEnd,
-    children = props.children,
-    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var getSidebarMode = function getSidebarMode(isFly) {
-    return isFly ? AssetTree.MODE_FLY : AssetTree.MODE_FLUID;
-  };
-  var _useState = (0, _react.useState)(parseInt(width, 10)),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    treeWidth = _useState2[0],
-    setTreeWidth = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isResize = _useState4[0],
-    setIsResize = _useState4[1];
-  var _useState5 = (0, _react.useState)(getSidebarMode(fly)),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    sidebarMode = _useState6[0],
-    setSidebarMode = _useState6[1];
-  var sidebarRef = (0, _react.useRef)();
-  (0, _react.useImperativeHandle)(ref, function () {
-    return sidebarRef;
-  }, []);
-
-  // Update internal state when props change
-  (0, _react.useEffect)(function () {
-    return setTreeWidth(width);
-  }, [width]);
-  (0, _react.useEffect)(function () {
-    return setSidebarMode(getSidebarMode(fly));
-  }, [fly]);
-  var classes = (0, _classnames["default"])('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
-  var resizeLimitClasses = (0, _classnames["default"])('AssetTreeResizeLimit', isResize && 'display-block');
-  var resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
-  var resizeLimitStyle = {
-    left: resizeIndicatorPosition
-  };
-  var categoryId = currentCategoryId || 0;
-  var firstChild = (0, _head["default"])(children);
-  var category = currentCategoryId ? getCurrentCategoryElement(children, currentCategoryId) : firstChild;
-  var style = {
-    width: treeWidth,
-    height: height
-  };
-  var handleToggleTreeContent = function handleToggleTreeContent() {
-    return onToggleTree(!isOpen);
-  };
-  var handleSelectCategory = function handleSelectCategory(selectedCategoryId) {
-    onCategoryChange(selectedCategoryId);
-    if (!isOpen) {
-      handleToggleTreeContent();
-    } else if (isOpen && currentCategoryId === selectedCategoryId) {
-      handleToggleTreeContent();
-    }
-  };
-  var handleResize = function handleResize(diff) {
-    var halfWindowWidth = window.innerWidth * 0.5;
-    var usedMaxWidth = maxWidth || halfWindowWidth;
-    var updatedWidth = treeWidth - diff;
-    var newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
-
-    // 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
-    setTreeWidth(newWidth);
-  };
-  var handleResizeStart = function handleResizeStart() {
-    var body = getSidebarBodyRef(sidebarRef);
-    if (body) {
-      body.classList.add('pointer-events-none');
-    }
-    setIsResize(true);
-  };
-  var handleResizeEnd = function handleResizeEnd() {
-    var body = getSidebarBodyRef(sidebarRef);
-    if (body) {
-      body.classList.remove('pointer-events-none');
-    }
-    setIsResize(false);
-    onResizeEnd();
-  };
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainingProps, {
-    className: classes,
-    style: style,
-    ref: sidebarRef
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: resizeLimitClasses,
-    style: resizeLimitStyle
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "AssetTreeContent"
-  }, /*#__PURE__*/_react["default"].createElement(_TreeSidebar["default"], {
-    onSelectCategory: handleSelectCategory,
-    currentCategoryId: currentCategoryId,
-    onClick: handleToggleTreeContent
-  }, (0, _isArray["default"])(children) ? children : [children]), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "AssetTreeBody"
-  }, useOffscreen ? renderTreesOffscreen(children, categoryId) : category)), resizable && isOpen && /*#__PURE__*/_react["default"].createElement(_Resizer["default"], {
-    onResizeStart: handleResizeStart,
-    onResize: handleResize,
-    onResizeEnd: handleResizeEnd,
-    direction: _Resizer["default"].HORIZONTAL,
-    position: _Resizer["default"].RIGHT
-  }));
-}));
-AssetTree.displayName = 'AssetTree';
-AssetTree.MODE_FLY = 'fly';
-AssetTree.MODE_FLUID = 'fluid';
-AssetTree.defaultProps = {
-  width: 350,
-  minWidth: 100,
-  maxWidth: 0,
-  resizable: true,
-  bordered: false,
-  fly: false,
-  isOpen: true,
-  onToggleTree: function onToggleTree() {},
-  children: [],
-  onCategoryChange: function onCategoryChange() {},
-  onResizeEnd: function onResizeEnd() {},
-  useOffscreen: false
-};
-AssetTree.propTypes = {
-  fly: _propTypes["default"].bool,
-  resizable: _propTypes["default"].bool,
-  bordered: _propTypes["default"].bool,
-  // When sidebar is resizable it will take the provided width in px only
-  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  minWidth: _propTypes["default"].number,
-  maxWidth: _propTypes["default"].number,
-  height: _propTypes["default"].number,
-  isOpen: _propTypes["default"].bool,
-  onToggleTree: _propTypes["default"].func,
-  currentCategoryId: _propTypes["default"].string.isRequired,
-  onCategoryChange: _propTypes["default"].func,
-  className: _propTypes["default"].string,
-  onResizeEnd: _propTypes["default"].func,
-  useOffscreen: _propTypes["default"].bool,
-  children: function children(props, propName, componentName) {
-    var prop = props[propName];
-    var error = null;
-    _react["default"].Children.forEach(prop, function (child) {
-      if (child.type !== _TreeCategory["default"]) {
-        error = new Error("`".concat(componentName, "` children should be of type `TreeCategory`."));
-      }
-    });
-    return error;
-  }
-};
-var _default = AssetTree;
-exports["default"] = _default;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const head_1 = tslib_1.__importDefault(require("lodash/fp/head"));
+const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
+const Resizer_1 = tslib_1.__importDefault(require("../resizer/Resizer"));
+const TreeSidebar_1 = tslib_1.__importDefault(require("./TreeSidebar"));
+const TreeCategory_1 = tslib_1.__importDefault(require("./TreeCategory"));
+const getSidebarBodyRef = sidebarRef => (0, head_1.default)(sidebarRef.current.getElementsByClassName('AssetTreeBody'));
+const 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;
+};
+const getCurrentCategoryElement = (children, currentCategoryId) => {
+    return (0, isArray_1.default)(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;
+};
+const renderTreesOffscreen = (children, categoryId) => {
+    return react_1.default.Children.map(children, child => {
+        const offscreenClasses = (0, classnames_1.default)('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen');
+        return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: offscreenClasses }, { children: child }));
+    });
+};
+const AssetTree = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const { className, resizable, width, maxWidth, minWidth, height, bordered, currentCategoryId, isOpen, useOffscreen, fly, onCategoryChange, onToggleTree, onResizeEnd, children } = props, remainingProps = tslib_1.__rest(props, ["className", "resizable", "width", "maxWidth", "minWidth", "height", "bordered", "currentCategoryId", "isOpen", "useOffscreen", "fly", "onCategoryChange", "onToggleTree", "onResizeEnd", "children"]);
+    const getSidebarMode = isFly => (isFly ? AssetTree.MODE_FLY : AssetTree.MODE_FLUID);
+    const [treeWidth, setTreeWidth] = (0, react_1.useState)(parseInt(width, 10));
+    const [isResize, setIsResize] = (0, react_1.useState)(false);
+    const [sidebarMode, setSidebarMode] = (0, react_1.useState)(getSidebarMode(fly));
+    const sidebarRef = (0, react_1.useRef)();
+    (0, react_1.useImperativeHandle)(ref, () => sidebarRef, []);
+    // Update internal state when props change
+    (0, react_1.useEffect)(() => setTreeWidth(width), [width]);
+    (0, react_1.useEffect)(() => setSidebarMode(getSidebarMode(fly)), [fly]);
+    const classes = (0, classnames_1.default)('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
+    const resizeLimitClasses = (0, classnames_1.default)('AssetTreeResizeLimit', isResize && 'display-block');
+    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
+    const resizeLimitStyle = { left: resizeIndicatorPosition };
+    const categoryId = currentCategoryId || 0;
+    const firstChild = (0, head_1.default)(children);
+    const category = currentCategoryId ? getCurrentCategoryElement(children, currentCategoryId) : firstChild;
+    const style = {
+        width: treeWidth,
+        height,
+    };
+    const handleToggleTreeContent = () => onToggleTree(!isOpen);
+    const handleSelectCategory = selectedCategoryId => {
+        onCategoryChange(selectedCategoryId);
+        if (!isOpen) {
+            handleToggleTreeContent();
+        }
+        else if (isOpen && currentCategoryId === selectedCategoryId) {
+            handleToggleTreeContent();
+        }
+    };
+    const handleResize = diff => {
+        const halfWindowWidth = window.innerWidth * 0.5;
+        const usedMaxWidth = maxWidth || halfWindowWidth;
+        const updatedWidth = treeWidth - diff;
+        const newWidth = getWidthInBoundaries(minWidth, usedMaxWidth, updatedWidth);
+        // 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
+        setTreeWidth(newWidth);
+    };
+    const handleResizeStart = () => {
+        const body = getSidebarBodyRef(sidebarRef);
+        if (body) {
+            body.classList.add('pointer-events-none');
+        }
+        setIsResize(true);
+    };
+    const handleResizeEnd = () => {
+        const body = getSidebarBodyRef(sidebarRef);
+        if (body) {
+            body.classList.remove('pointer-events-none');
+        }
+        setIsResize(false);
+        onResizeEnd();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: sidebarRef }, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'AssetTreeContent' }, { children: [(0, jsx_runtime_1.jsx)(TreeSidebar_1.default, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: (0, isArray_1.default)(children) ? children : [children] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'AssetTreeBody' }, { children: useOffscreen ? renderTreesOffscreen(children, categoryId) : category }))] })), resizable && isOpen && ((0, jsx_runtime_1.jsx)(Resizer_1.default, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer_1.default.HORIZONTAL, position: Resizer_1.default.RIGHT }))] })));
+}));
+AssetTree.displayName = 'AssetTree';
+AssetTree.MODE_FLY = 'fly';
+AssetTree.MODE_FLUID = 'fluid';
+AssetTree.defaultProps = {
+    width: 350,
+    minWidth: 100,
+    maxWidth: 0,
+    resizable: true,
+    bordered: false,
+    fly: false,
+    isOpen: true,
+    onToggleTree: () => { },
+    children: [],
+    onCategoryChange: () => { },
+    onResizeEnd: () => { },
+    useOffscreen: false,
+};
+AssetTree.propTypes = {
+    fly: prop_types_1.default.bool,
+    resizable: prop_types_1.default.bool,
+    bordered: prop_types_1.default.bool,
+    // When sidebar is resizable it will take the provided width 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,
+    height: prop_types_1.default.number,
+    isOpen: prop_types_1.default.bool,
+    onToggleTree: prop_types_1.default.func,
+    currentCategoryId: prop_types_1.default.string.isRequired,
+    onCategoryChange: prop_types_1.default.func,
+    className: prop_types_1.default.string,
+    onResizeEnd: prop_types_1.default.func,
+    useOffscreen: prop_types_1.default.bool,
+    children: (props, propName, componentName) => {
+        const prop = props[propName];
+        let error = null;
+        react_1.default.Children.forEach(prop, child => {
+            if (child.type !== TreeCategory_1.default) {
+                error = new Error(`\`${componentName}\` children should be of type \`TreeCategory\`.`);
+            }
+        });
+        return error;
+    },
+};
+exports.default = AssetTree;

package/lib/es/components/assetTree/Tree.d.ts

@@ -0,0 +1,4 @@
+export function excludeFromList(list: any, itemId: any): any;
+export default Tree;
+declare const Tree: React.NamedExoticComponent<object>;
+import React from "react";