@rio-cloud/rio-uikit 0.16.4-beta.21 → 0.16.4-beta.22

package/AssetTree.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/AssetTree' {
-    import React from 'react';
-    import { AssetTreeProps } from './types';
-    export default class AssetTree extends React.Component<AssetTreeProps> {}
-}
+export { default } from './components/assetTree/AssetTree';
+export * from './components/assetTree/AssetTree';

package/AssetTree.js

@@ -1,2 +1,2 @@
-import { default as _AssetTree } from './components/assetTree/AssetTree';
-export { _AssetTree as default };
+export { default } from './components/assetTree/AssetTree';
+export * from './components/assetTree/AssetTree';

package/ButtonDropdown.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/ButtonDropdown' {
-    import React from 'react';
-    import { ButtonDropdownProps } from './types';
-    export default class ButtonDropdown extends React.Component<ButtonDropdownProps> {}
-}
+export { default } from './components/dropdown/ButtonDropdown';
+export * from './components/dropdown/ButtonDropdown';

package/ButtonDropdown.js

@@ -1,2 +1,2 @@
-import { default as _ButtonDropdown } from './components/dropdown/ButtonDropdown';
-export { _ButtonDropdown as default };
+export { default } from './components/dropdown/ButtonDropdown';
+export * from './components/dropdown/ButtonDropdown';

package/DropdownSubmenu.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/DropdownSubmenu' {
-    import React from 'react';
-    import { DropdownSubmenuProps } from './types';
-    export default class DropdownSubmenu extends React.Component<DropdownSubmenuProps> {}
-}
+export { default } from './components/dropdown/DropdownSubmenu';
+export * from './components/dropdown/DropdownSubmenu';

package/DropdownSubmenu.js

@@ -1,2 +1,2 @@
-import { default as _DropdownSubmenu } from './components/dropdown/DropdownSubmenu';
-export { _DropdownSubmenu as default };
+export { default } from './components/dropdown/DropdownSubmenu';
+export * from './components/dropdown/DropdownSubmenu';

package/MenuItem.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/MenuItem' {
-    import React from 'react';
-    import { MenuItem as MenuItemProps } from './types';
-    export default class MenuItem extends React.Component<MenuItemProps> {}
-}
+export { default } from './components/menuItems/MenuItem';
+export * from './components/menuItems/MenuItem';

package/MenuItem.js

@@ -1,2 +1,2 @@
-import { default as _MenuItem } from './components/menuItems/MenuItem';
-export { _MenuItem as default };
+export { default } from './components/menuItems/MenuItem';
+export * from './components/menuItems/MenuItem';

package/MenuItemList.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/menuItems/MenuItemList';
+export * from './components/menuItems/MenuItemList';

package/MenuItemList.js

@@ -0,0 +1,2 @@
+export { default } from './components/menuItems/MenuItemList';
+export * from './components/menuItems/MenuItemList';

package/MenuItems.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/menuItems/MenuItems';
+export * from './components/menuItems/MenuItems';

package/MenuItems.js

@@ -0,0 +1,2 @@
+export { default } from './components/menuItems/MenuItems';
+export * from './components/menuItems/MenuItems';

package/Page.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/page/Page';
+export * from './components/page/Page';

package/Page.js

@@ -0,0 +1,2 @@
+export { default } from './components/page/Page';
+export * from './components/page/Page';

package/Sidebar.d.ts

@@ -1 +1,2 @@
 export { default } from './components/sidebars/Sidebar';
+export * from './components/sidebars/Sidebar';

package/Sidebar.js

@@ -1 +1,2 @@
 export { default } from './components/sidebars/Sidebar';
+export * from './components/sidebars/Sidebar';

package/SimpleButtonDropdown.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/SimpleButtonDropdown' {
-    import React from 'react';
-    import { SimpleButtonDropdownProps } from './types';
-    export default class SimpleButtonDropdown extends React.Component<SimpleButtonDropdownProps> {}
-}
+export { default } from './components/dropdown/SimpleButtonDropdown';
+export * from './components/dropdown/SimpleButtonDropdown';

package/SimpleButtonDropdown.js

@@ -1,2 +1,2 @@
-import { default as _SimpleButtonDropdown } from './components/dropdown/SimpleButtonDropdown';
-export { _SimpleButtonDropdown as default };
+export { default } from './components/dropdown/SimpleButtonDropdown';
+export * from './components/dropdown/SimpleButtonDropdown';

package/SingleButtonDropdown.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/SingleButtonDropdown' {
-    import React from 'react';
-    import { SingleButtonDropdownProps } from './types';
-    export default class SingleButtonDropdown extends React.Component<SingleButtonDropdownProps> {}
-}
+export { default } from './components/dropdown/SingleButtonDropdown';
+export * from './components/dropdown/SingleButtonDropdown';

package/SingleButtonDropdown.js

@@ -1,2 +1,2 @@
-import { default as _SingleButtonDropdown } from './components/dropdown/SingleButtonDropdown';
-export { _SingleButtonDropdown as default };
+export { default } from './components/dropdown/SingleButtonDropdown';
+export * from './components/dropdown/SingleButtonDropdown';

package/SplitButtonDropdown.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/SplitButtonDropdown' {
-    import React from 'react';
-    import { SplitButtonDropdownProps } from './types';
-    export default class SplitButtonDropdown extends React.Component<SplitButtonDropdownProps> {}
-}
+export { default } from './components/dropdown/SplitButtonDropdown';
+export * from './components/dropdown/SplitButtonDropdown';

package/SplitButtonDropdown.js

@@ -1,2 +1,2 @@
-import { default as _SplitButtonDropdown } from './components/dropdown/SplitButtonDropdown';
-export { _SplitButtonDropdown as default };
+export { default } from './components/dropdown/SplitButtonDropdown';
+export * from './components/dropdown/SplitButtonDropdown';

package/Tree.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/Tree' {
-    import React from 'react';
-    import { TreeProps } from './types';
-    export default class Tree extends React.Component<TreeProps> {}
-}
+export { default } from './components/assetTree/Tree';
+export * from './components/assetTree/Tree';

package/Tree.js

@@ -1,2 +1,2 @@
-import { default as _Tree } from './components/assetTree/Tree';
-export { _Tree as default };
+export { default } from './components/assetTree/Tree';
+export * from './components/assetTree/Tree';

package/TreeCategory.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/TreeCategory' {
-    import React from 'react';
-    import { TreeCategoryProps } from './types';
-    export default class TreeCategory extends React.Component<TreeCategoryProps> {}
-}
+export { default } from './components/assetTree/TreeCategory';
+export * from './components/assetTree/TreeCategory';

package/TreeCategory.js

@@ -1,2 +1,2 @@
-import { default as _TreeCategory } from './components/assetTree/TreeCategory';
-export { _TreeCategory as default };
+export { default } from './components/assetTree/TreeCategory';
+export * from './components/assetTree/TreeCategory';

package/TreeOption.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/TreeOption' {
-    import React from 'react';
-    import { TreeOptionProps } from './types';
-    export default class TreeOption extends React.Component<TreeOptionProps> {}
-}
+export { default } from './components/assetTree/TreeOption';
+export * from './components/assetTree/TreeOption';

package/TreeOption.js

@@ -1,2 +1,2 @@
-import { default as _TreeOption } from './components/assetTree/TreeOption';
-export { _TreeOption as default };
+export { default } from './components/assetTree/TreeOption';
+export * from './components/assetTree/TreeOption';

package/TreeSearch.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/TreeSearch' {
-    import React from 'react';
-    import { TreeSearchProps } from './types';
-    export default class TreeSearch extends React.Component<TreeSearchProps> {}
-}
+export { default } from './components/assetTree/TreeSearch';
+export * from './components/assetTree/TreeSearch';

package/TreeSearch.js

@@ -1,2 +1,2 @@
-import { default as _TreeSearch } from './components/assetTree/TreeSearch';
-export { _TreeSearch as default };
+export { default } from './components/assetTree/TreeSearch';
+export * from './components/assetTree/TreeSearch';

package/TreeSummary.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/TreeSummary' {
-    import React from 'react';
-    import { TreeSummaryProps } from './types';
-    export default class TreeSummary extends React.Component<TreeSummaryProps> {}
-}
+export { default } from './components/assetTree/TreeSummary';
+export * from './components/assetTree/TreeSummary';

package/TreeSummary.js

@@ -1,2 +1,2 @@
-import { default as _TreeSummary } from './components/assetTree/TreeSummary';
-export { _TreeSummary as default };
+export { default } from './components/assetTree/TreeSummary';
+export * from './components/assetTree/TreeSummary';

package/TreeSummaryRow.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/assetTree/TreeSummaryRow';
+export * from './components/assetTree/TreeSummaryRow';

package/TreeSummaryRow.js

@@ -0,0 +1,2 @@
+export { default } from './components/assetTree/TreeSummaryRow';
+export * from './components/assetTree/TreeSummaryRow';

package/TypeCounter.d.ts

@@ -1,5 +1,2 @@
-declare module '@rio-cloud/rio-uikit/TypeCounter' {
-    import React from 'react';
-    import { TypeCounterProps } from './types';
-    export default class TypeCounter extends React.Component<TypeCounterProps> {}
-}
+export { default } from './components/assetTree/TypeCounter';
+export * from './components/assetTree/TypeCounter';

package/TypeCounter.js

@@ -1,2 +1,2 @@
-import { default as _TypeCounter } from './components/assetTree/TypeCounter';
-export { _TypeCounter as default };
+export { default } from './components/assetTree/TypeCounter';
+export * from './components/assetTree/TypeCounter';

package/components/assetTree/AssetTree.d.ts

@@ -1,3 +1,85 @@
+import React from 'react';
+export type AssetTreeProps = {
+    /**
+     * Defines if the component will overlap the body content.
+     *
+     * @default false
+     */
+    fly?: boolean;
+    /**
+     * Defines whether or not the sidebar is resizable.
+     *
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Defines whether the component has a border or not.
+     *
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Defines the width of the component. The value is set as inline style.
+     * Note: when component is resizable it will take the provided
+     * width in px only and convert it to number in case.
+     *
+     * @default 350
+     */
+    width?: number;
+    /**
+     * Defines the minimum width of the component in px that will take effect when resizing.
+     *
+     * @default 100
+     */
+    minWidth?: number;
+    /**
+     * Defines the maximum width of the component in px that will take effect when resizing.
+     *
+     * @default 0
+     */
+    maxWidth?: number;
+    /**
+     * Defines the height of the component in px.
+     */
+    height?: number;
+    /**
+     * Defines whether the component is open or not.
+     *
+     * @default true
+     */
+    isOpen?: boolean;
+    /**
+     * Callback for when the tree visibility is toggled.
+     * @param isOpen
+     * @returns
+     */
+    onToggleTree?: (isOpen: boolean) => void;
+    /**
+     * The id of the category which is currently active and shall be shown.
+     */
+    currentCategoryId: string;
+    /**
+     * Callback for handling change of category.
+     * @param selectedCategoryId
+     * @returns
+     */
+    onCategoryChange: (selectedCategoryId: string) => void;
+    /**
+     * Callback for when the resize is done.
+     */
+    onResizeEnd: VoidFunction;
+    /**
+     * Defines whether the tree components are rendered offscreen and kept mounted in the DOM.
+     *
+     * @default false
+     */
+    useOffscreen: boolean;
+    /**
+     * Additional classes added on the wrapper element.
+     */
+    className?: string;
+};
+declare const AssetTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<AssetTreeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>>;
 export default AssetTree;
-declare const AssetTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<any>>>;
-import React from "react";

package/components/assetTree/AssetTree.js

@@ -1,15 +1,25 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { memo, useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
+import React, { memo, useState, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
 import head from 'lodash/fp/head';
 import isArray from 'lodash/fp/isArray';
+import noop from 'lodash/fp/noop';
+import invariant from 'tiny-invariant';
+import TreeCategory from './TreeCategory';
 import Resizer from '../resizer/Resizer';
 import TreeSidebar from './TreeSidebar';
-import TreeCategory from './TreeCategory';
 import getWidthInBoundaries from '../../utils/getWidthInBoundaries';
-const getSidebarBodyRef = sidebarRef => head(sidebarRef.current.getElementsByClassName('AssetTreeBody'));
+import mergeRefs from '../../utils/mergeRefs';
+import usePrevious from '../../usePrevious';
+const DEFAULT_WIDTH = 350;
+const DEFAULT_MIN_WIDTH = 100;
+const DEFAULT_MAX_WIDTH = 0;
+const TreeMode = {
+    MODE_FLY: 'fly',
+    MODE_FLUID: 'fluid',
+};
+const getSidebarBodyRef = (sidebarRef) => { var _a; return head((_a = sidebarRef === null || sidebarRef === void 0 ? void 0 : sidebarRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('AssetTreeBody')); };
 const getCurrentCategoryElement = (children, currentCategoryId) => {
     return isArray(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;
 };
@@ -19,30 +29,42 @@ const renderTreesOffscreen = (children, categoryId) => {
         return _jsx("div", Object.assign({ className: offscreenClasses }, { children: child }));
     });
 };
+// Check if the child is a React element and if it has the type TreeCategory
+const isTreeCategory = (child) => {
+    return React.isValidElement(child) && child.type === TreeCategory;
+};
 const AssetTree = memo(forwardRef((props, ref) => {
-    const { className, resizable, width, maxWidth, minWidth, height, bordered, currentCategoryId, isOpen, useOffscreen, fly, onCategoryChange, onToggleTree, onResizeEnd, children } = props, remainingProps = __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] = useState(parseInt(width, 10));
+    const { className, resizable = true, width = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, height, bordered = false, currentCategoryId, isOpen = true, useOffscreen = false, fly = false, onCategoryChange = noop, onToggleTree = noop, onResizeEnd = noop, children = [] } = props, remainingProps = __rest(props, ["className", "resizable", "width", "minWidth", "maxWidth", "height", "bordered", "currentCategoryId", "isOpen", "useOffscreen", "fly", "onCategoryChange", "onToggleTree", "onResizeEnd", "children"]);
+    const getSidebarMode = (isFly) => (isFly ? TreeMode.MODE_FLY : TreeMode.MODE_FLUID);
+    const [treeWidth, setTreeWidth] = useState(width);
     const [isResize, setIsResize] = useState(false);
     const [sidebarMode, setSidebarMode] = useState(getSidebarMode(fly));
-    const sidebarRef = useRef();
-    useImperativeHandle(ref, () => sidebarRef, []);
+    const sidebarRef = useRef(null);
+    const mergedRefs = mergeRefs([ref, sidebarRef]);
     // Update internal state when props change
-    useEffect(() => setTreeWidth(width), [width]);
-    useEffect(() => setSidebarMode(getSidebarMode(fly)), [fly]);
-    const classes = classNames('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
+    const previousWidth = usePrevious(width);
+    if (previousWidth !== width) {
+        setTreeWidth(width);
+    }
+    const previousMode = usePrevious(fly);
+    if (previousMode !== fly) {
+        setSidebarMode(getSidebarMode(fly));
+    }
+    const childrenArray = React.Children.toArray(children);
+    // check for children type of TreeCategory and throw error in case
+    invariant(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type "TreeCategory"');
+    const classes = classNames('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid');
     const resizeLimitClasses = classNames('AssetTreeResizeLimit', isResize && 'display-block');
     const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
     const resizeLimitStyle = { left: resizeIndicatorPosition };
-    const categoryId = currentCategoryId || 0;
-    const firstChild = head(children);
-    const category = currentCategoryId ? getCurrentCategoryElement(children, currentCategoryId) : firstChild;
+    const firstChild = head(childrenArray);
+    const category = currentCategoryId ? getCurrentCategoryElement(childrenArray, currentCategoryId) : firstChild;
     const style = {
         width: treeWidth,
         height,
     };
     const handleToggleTreeContent = () => onToggleTree(!isOpen);
-    const handleSelectCategory = selectedCategoryId => {
+    const handleSelectCategory = (selectedCategoryId) => {
         onCategoryChange(selectedCategoryId);
         if (!isOpen) {
             handleToggleTreeContent();
@@ -51,7 +73,7 @@ const AssetTree = memo(forwardRef((props, ref) => {
             handleToggleTreeContent();
         }
     };
-    const handleResize = diff => {
+    const handleResize = (diff) => {
         const halfWindowWidth = window.innerWidth * 0.5;
         const usedMaxWidth = maxWidth || halfWindowWidth;
         // Check for sidebar width if it is half window size. If it was before but the sidebar was resized so it is
@@ -77,50 +99,8 @@ const AssetTree = memo(forwardRef((props, ref) => {
         setIsResize(false);
         onResizeEnd();
     };
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: sidebarRef }, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", Object.assign({ className: 'AssetTreeContent' }, { children: [_jsx(TreeSidebar, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: isArray(children) ? children : [children] })), _jsx("div", Object.assign({ className: 'AssetTreeBody' }, { children: useOffscreen ? renderTreesOffscreen(children, categoryId) : category }))] })), resizable && isOpen && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: Resizer.RIGHT }))] })));
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: mergedRefs }, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", Object.assign({ className: 'AssetTreeContent' }, { children: [_jsx(TreeSidebar, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: isArray(children) ? children : [children] })), _jsx("div", Object.assign({ className: 'AssetTreeBody' }, { children: useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category }))] })), resizable && isOpen && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: Resizer.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: PropTypes.bool,
-    resizable: PropTypes.bool,
-    bordered: PropTypes.bool,
-    // When sidebar is resizable it will take the provided width in px only
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    minWidth: PropTypes.number,
-    maxWidth: PropTypes.number,
-    height: PropTypes.number,
-    isOpen: PropTypes.bool,
-    onToggleTree: PropTypes.func,
-    currentCategoryId: PropTypes.string.isRequired,
-    onCategoryChange: PropTypes.func,
-    className: PropTypes.string,
-    onResizeEnd: PropTypes.func,
-    useOffscreen: PropTypes.bool,
-    children: (props, propName, componentName) => {
-        const prop = props[propName];
-        let error = null;
-        React.Children.forEach(prop, child => {
-            if (child.type !== TreeCategory) {
-                error = new Error(`\`${componentName}\` children should be of type \`TreeCategory\`.`);
-            }
-        });
-        return error;
-    },
-};
+Object.assign(AssetTree, TreeMode);
 export default AssetTree;