linear-react-components-ui 0.4.76-rc.7 → 0.4.76

package/lib/menus/sidenav/NavMenuItem.js

@@ -19,6 +19,8 @@ var _helpers = require("./helpers");
 
 var _permissionValidations = require("../../permissionValidations");
 
+var _withTooltip = _interopRequireDefault(require("../../internals/withTooltip"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -49,7 +51,8 @@ var NavMenuItem = function NavMenuItem(props) {
       permissionAttr = props.permissionAttr,
       maxWidth = props.maxWidth,
       minWidth = props.minWidth,
-      columnsQtty = props.columnsQtty;
+      columnsQtty = props.columnsQtty,
+      targetRef = props.targetRef;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -69,7 +72,8 @@ var NavMenuItem = function NavMenuItem(props) {
 
   var _useContext = (0, _react.useContext)(_helpers.SideNavContext),
       isExpanded = _useContext.isExpanded,
-      menuSize = _useContext.menuSize;
+      menuSize = _useContext.menuSize,
+      openSearchMenuPopup = _useContext.openSearchMenuPopup;
 
   var unvisible = onDenied.unvisible,
       disabled = onDenied.disabled;
@@ -93,6 +97,7 @@ var NavMenuItem = function NavMenuItem(props) {
   return /*#__PURE__*/_react["default"].createElement(_helpers.SubMenuContext.Provider, {
     value: contextValues()
   }, /*#__PURE__*/_react["default"].createElement("li", {
+    ref: targetRef,
     className: "item ".concat(url && !disabled && '-withlink', " ").concat(customClass, " ").concat(disabled && '-disabled'),
     onMouseEnter: function onMouseEnter(e) {
       _onMouseEnter(e);
@@ -108,7 +113,7 @@ var NavMenuItem = function NavMenuItem(props) {
     customClass: "menuicon"
   }), isExpanded && /*#__PURE__*/_react["default"].createElement("span", {
     className: "title"
-  }, title), !childrenIsSubMenu && children)), showSubMenu && children && childrenIsSubMenu && !disabled && /*#__PURE__*/_react["default"].createElement("div", {
+  }, title), !childrenIsSubMenu && children)), showSubMenu && children && childrenIsSubMenu && !disabled && !openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement("div", {
     className: "submenu-container",
     style: {
       marginLeft: targetDimensions.width,
@@ -134,9 +139,10 @@ NavMenuItem.propTypes = {
   url: _propTypes["default"].string,
   customClass: _propTypes["default"].string,
   permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
-  minWidth: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].number]),
-  maxWidth: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].number]),
-  columnsQtty: _propTypes["default"].number
+  minWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  maxWidth: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  columnsQtty: _propTypes["default"].number,
+  targetRef: _propTypes["default"].func
 };
 NavMenuItem.defaultProps = {
   childrenIsSubMenu: true,
@@ -148,7 +154,10 @@ NavMenuItem.defaultProps = {
   permissionAttr: undefined,
   minWidth: 500,
   maxWidth: '90%',
-  columnsQtty: 2
+  columnsQtty: 2,
+  targetRef: undefined
 };
-var _default = NavMenuItem;
+
+var _default = (0, _withTooltip["default"])(NavMenuItem);
+
 exports["default"] = _default;

package/lib/menus/sidenav/index.js

@@ -43,8 +43,6 @@ var _NavSubMenuItem = _interopRequireDefault(require("./NavSubMenuItem"));
 
 var _NavMenuGroup = _interopRequireDefault(require("./NavMenuGroup"));
 
-var _text = _interopRequireDefault(require("../../inputs/text"));
-
 var _ExpandMenu = _interopRequireDefault(require("./ExpandMenu"));
 
 require("../../assets/styles/sidenav.scss");
@@ -53,6 +51,8 @@ var _helpers = require("./helpers");
 
 var _icons = _interopRequireDefault(require("../../icons"));
 
+var constants = _interopRequireWildcard(require("../../internals/constants"));
+
 var _popup_menu_search = _interopRequireDefault(require("./popup_menu_search"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -98,30 +98,20 @@ var SideNav = function SideNav(props) {
       isExpanded = _useState2[0],
       setIsExpanded = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(true),
+  var _useState3 = (0, _react.useState)([]),
       _useState4 = _slicedToArray(_useState3, 2),
-      searchFieldHasNoFocus = _useState4[0],
-      setSearchFieldHasNoFocus = _useState4[1];
+      menuItemsContent = _useState4[0],
+      setMenuItemsContent = _useState4[1];
 
-  var _useState5 = (0, _react.useState)([]),
+  var _useState5 = (0, _react.useState)({}),
       _useState6 = _slicedToArray(_useState5, 2),
-      menuItemsContent = _useState6[0],
-      setMenuItemsContent = _useState6[1];
+      sideNavDimensions = _useState6[0],
+      setSideNavDimensions = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      searchContent = _useState8[0],
-      setSearchContent = _useState8[1];
-
-  var _useState9 = (0, _react.useState)({}),
-      _useState10 = _slicedToArray(_useState9, 2),
-      sideNavDimensions = _useState10[0],
-      setSideNavDimensions = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      openSearchMenuPopup = _useState12[0],
-      setOpenSearchMenuPopup = _useState12[1];
+      openSearchMenuPopup = _useState8[0],
+      setOpenSearchMenuPopup = _useState8[1];
 
   var searchFieldRef = (0, _react.useRef)(null);
   var sideNavRef = (0, _react.useRef)(null);
@@ -131,41 +121,6 @@ var SideNav = function SideNav(props) {
     if (onExpandMenuClick) onExpandMenuClick(!isExpanded);
   };
 
-  var returnLeftElements = function returnLeftElements() {
-    var propsTextField = {};
-
-    if (searchFieldHasNoFocus) {
-      propsTextField = {
-        leftElements: [/*#__PURE__*/_react["default"].createElement("div", {
-          key: "searchMenuIcon",
-          role: "button",
-          tabIndex: "-1",
-          style: {
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            justifyContent: 'center'
-          },
-          onKeyDown: function onKeyDown() {},
-          onClick: function onClick() {
-            if (searchFieldRef && searchFieldRef.current) {
-              setSearchFieldHasNoFocus(false);
-              setTimeout(function () {
-                searchFieldRef.current.focus();
-              }, 150);
-            }
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
-          name: "search",
-          customClass: "searchmenuicon",
-          size: menuSize === 'small' && 16 || menuSize === 'medium' && 22 || menuSize === 'large' && 32
-        }))]
-      };
-    }
-
-    return propsTextField;
-  };
-
   var getPopupMenuSearchStyle = function getPopupMenuSearchStyle() {
     var left = sideNavDimensions.left,
         top = sideNavDimensions.top,
@@ -178,14 +133,13 @@ var SideNav = function SideNav(props) {
   var getContextValues = function getContextValues() {
     return {
       isExpanded: isExpanded,
-      menuSize: menuSize
+      menuSize: menuSize,
+      openSearchMenuPopup: openSearchMenuPopup
     };
   };
 
   var closeSearchMenuPopup = function closeSearchMenuPopup() {
     setOpenSearchMenuPopup(false);
-    setSearchContent('');
-    setSearchFieldHasNoFocus(true);
   };
 
   var compareChild = function compareChild(child) {
@@ -194,6 +148,7 @@ var SideNav = function SideNav(props) {
 
     if ((type === _NavMenuItem["default"] || type === _NavSubMenuItem["default"]) && !child.props.children) {
       menuItemsContent.push({
+        id: "".concat(child.props.title, "-").concat(_uuid["default"].v1()),
         content: child.props.title,
         url: child.props.url
       });
@@ -217,6 +172,24 @@ var SideNav = function SideNav(props) {
     }
   };
 
+  var openSearchMenu = function openSearchMenu() {
+    setOpenSearchMenuPopup(true);
+    if (searchFieldRef.current) searchFieldRef.current.focus();
+  };
+
+  var onKeyDown = function onKeyDown(e) {
+    if ([constants.keyCodes.F].includes(e.keyCode) && e.ctrlKey && e.shiftKey) {
+      e.preventDefault();
+      openSearchMenu();
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', onKeyDown);
+    return function () {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, []);
   (0, _react.useEffect)(function () {
     if (enableMenuSearch && sideNavRef && sideNavRef.current) {
       setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
@@ -239,30 +212,24 @@ var SideNav = function SideNav(props) {
       key: "popup-menusearch-".concat(_uuid["default"].v1())
     }, /*#__PURE__*/_react["default"].createElement(_NavMenuItem["default"], {
       childrenIsSubMenu: false,
-      customClass: "-customsidenavitem"
-    }, /*#__PURE__*/_react["default"].createElement(_text["default"], _extends({
-      value: searchContent,
-      customClassForWrapper: "-customsizes",
-      customClass: "-customsizes",
-      customClassForSideButtons: "-iconcenter",
-      tooltip: "Pesquisar funcionalidades",
-      tooltipPosition: "right",
-      customClassForInputContent: searchFieldHasNoFocus ? '-hidden' : '',
-      onFocus: function onFocus() {
-        return setSearchFieldHasNoFocus(false);
-      },
-      onBlur: function onBlur(e) {
-        if (e.target.value === '') setSearchFieldHasNoFocus(true);
-      },
-      inputRef: searchFieldRef,
-      onChange: function onChange(e) {
-        setSearchContent(e.target.value);
-        setOpenSearchMenuPopup(e.target.value !== '');
-        setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
+      customClass: "-customsidenavitem",
+      tooltip: "Pesquisar funcionalidades (CTRL+SHIFT+F)",
+      tooltipPosition: "right"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      key: "searchMenuIcon",
+      className: "searchmenubutton",
+      role: "button",
+      tabIndex: "-1",
+      onKeyDown: function onKeyDown() {},
+      onClick: function onClick() {
+        openSearchMenu();
       }
-    }, returnLeftElements())), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
+    }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+      name: "search",
+      customClass: "searchmenuicon",
+      size: menuSize === 'small' && 16 || menuSize === 'medium' && 22 || menuSize === 'large' && 32
+    })), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
       style: getPopupMenuSearchStyle(),
-      searchContent: searchContent,
       handlerClose: closeSearchMenuPopup,
       menuItemsContent: menuItemsContent && returnMenuItems()
     }))));
@@ -280,7 +247,7 @@ var SideNav = function SideNav(props) {
   return /*#__PURE__*/_react["default"].createElement(_helpers.SideNavContext.Provider, {
     value: getContextValues()
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sidenav-component ".concat(customClass),
+    className: "sidenav-component ".concat(openSearchMenuPopup ? '-blocked' : '', " ").concat(customClass),
     ref: sideNavRef
   }, showExpandMenu && /*#__PURE__*/_react["default"].createElement(_ExpandMenu["default"], {
     expandMenuCustomClass: "".concat(isExpanded && 'closefromexpanded', " ").concat(expandMenuCustomClass),
@@ -298,7 +265,8 @@ SideNav.propTypes = {
   showExpandMenu: _propTypes["default"].bool,
   children: _propTypes["default"].arrayOf(_propTypes["default"].element).isRequired,
   enableMenuSearch: _propTypes["default"].bool,
-  menuSearchEmptyMessage: _propTypes["default"].string
+  menuSearchEmptyMessage: _propTypes["default"].string,
+  menuSearchPlaceholder: _propTypes["default"].string
 };
 SideNav.defaultProps = {
   expanded: true,
@@ -308,7 +276,8 @@ SideNav.defaultProps = {
   showExpandMenu: false,
   onExpandMenuClick: undefined,
   enableMenuSearch: false,
-  menuSearchEmptyMessage: undefined
+  menuSearchEmptyMessage: '',
+  menuSearchPlaceholder: ''
 };
 var _default = SideNav;
 exports["default"] = _default;

package/lib/menus/sidenav/popup_menu_search/index.js

@@ -9,8 +9,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _uuid = _interopRequireDefault(require("uuid"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _search = _interopRequireDefault(require("../../../inputs/search"));
@@ -43,12 +41,12 @@ var body = document.getElementsByTagName('body')[0];
 
 var PopupMenuSearch = function PopupMenuSearch(props) {
   var style = props.style,
-      searchContent = props.searchContent,
       menuItemsContent = props.menuItemsContent,
       handlerClose = props.handlerClose,
-      menuSearchEmptyMessage = props.menuSearchEmptyMessage;
+      menuSearchEmptyMessage = props.menuSearchEmptyMessage,
+      menuSearchPlaceholder = props.menuSearchPlaceholder;
 
-  var _useState = (0, _react.useState)(searchContent),
+  var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
       searchFieldContent = _useState2[0],
       setSearchFieldContent = _useState2[1];
@@ -58,6 +56,11 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
       searchResult = _useState4[0],
       setSearchResult = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      defaultSelectedItemId = _useState6[0],
+      setDefaultSelectedItemId = _useState6[1];
+
   var searchFieldRef = (0, _react.useRef)(null);
   var popupRef = (0, _react.useRef)(document.createElement('div'));
   popupRef.current.className = 'searchmenu';
@@ -81,35 +84,40 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
   (0, _react.useEffect)(function () {
     popupRef.current.style = style;
   }, [style]);
+  (0, _react.useEffect)(function () {
+    if (searchResult.length > 0) setDefaultSelectedItemId(searchResult[0].id);
+  }, []);
 
   var search = function search(value) {
     var filter = value.toLowerCase();
     var result = menuItemsContent && menuItemsContent.filter(function (item) {
       return item.content.toLowerCase().includes(filter);
     });
+    if (result.length > 0) setDefaultSelectedItemId(result[0].id);
     setSearchFieldContent(value);
     setSearchResult(result);
   };
 
-  (0, _react.useEffect)(function () {
-    setSearchFieldContent(searchContent);
-    search(searchContent);
-  }, [searchContent]);
-
   var returnList = function returnList() {
     if (searchResult && searchResult.length > 0) {
       return /*#__PURE__*/_react["default"].createElement(_list["default"], {
         condensed: true,
         transparent: true,
+        selectable: true,
+        onSelectItem: handlerClose,
+        selectedItemId: defaultSelectedItemId,
+        selectOnEnter: true,
         style: {
-          margin: '25px 0px'
+          margin: '25px 0px',
+          border: 'none',
+          boxShadow: 'none'
         }
-      }, searchResult && searchResult.map(function (item) {
+      }, searchResult.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement(_list.ListItem, {
-          key: "".concat(item.content, "-").concat(_uuid["default"].v1()),
+          key: item.id,
+          itemId: item.id,
           url: item.url,
-          text: item.content,
-          onClick: handlerClose
+          text: item.content
         });
       }));
     }
@@ -136,8 +144,9 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
       },
       inputRef: searchFieldRef,
       value: searchFieldContent,
+      placeHolder: menuSearchPlaceholder,
       onReset: function onReset() {
-        setSearchFieldContent('');
+        search('');
       }
     }), /*#__PURE__*/_react["default"].createElement("div", {
       style: {

package/lib/menus/sidenav/sidenav.spec.js

@@ -206,38 +206,30 @@ describe('SideNav Menu', function () {
 
       expect(container.querySelector('.openclosemenu')).toBeInTheDocument();
     });
-    it('should enable menu search', function () {
-      var _render4 = (0, _react2.render)(sidebarNavMockRender({
-        enableMenuSearch: true
-      })),
-          container = _render4.container;
-
-      expect(container.querySelector('.inputwrapper')).toBeInTheDocument();
-    });
     it('should render all items', function () {
-      var _render5 = (0, _react2.render)(sidebarNavMockRender()),
-          container = _render5.container;
+      var _render4 = (0, _react2.render)(sidebarNavMockRender()),
+          container = _render4.container;
       /* primeiro item é o float menu */
 
 
       expect(container.querySelectorAll('li.item').length - 1).toBe(menuDataMock.length);
     });
     it('should be rendering 3 items SVGs', function () {
-      var _render6 = (0, _react2.render)(sidebarNavMockRender()),
-          container = _render6.container;
+      var _render5 = (0, _react2.render)(sidebarNavMockRender()),
+          container = _render5.container;
 
       expect(container.querySelectorAll('li.item .icon-component').length).toBe(3);
     });
     it('should open submenu on over', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var _render7, container;
+      var _render6, container;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _render7 = (0, _react2.render)(sidebarNavMockRender({
+              _render6 = (0, _react2.render)(sidebarNavMockRender({
                 menuSize: 'large'
-              })), container = _render7.container;
+              })), container = _render6.container;
 
               _react2.fireEvent.mouseOver(container.querySelector('.customscroll .item'));
 
@@ -257,13 +249,13 @@ describe('SideNav Menu', function () {
       }, _callee);
     })));
     it('submenu should render all items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var _render8, container;
+      var _render7, container;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              _render8 = (0, _react2.render)(sidebarNavMockRender()), container = _render8.container;
+              _render7 = (0, _react2.render)(sidebarNavMockRender()), container = _render7.container;
 
               _react2.fireEvent.mouseOver(container.querySelector('.customscroll .item'));
 
@@ -283,13 +275,13 @@ describe('SideNav Menu', function () {
       }, _callee2);
     })));
     it('submenu should have title', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _render9, container;
+      var _render8, container;
 
       return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              _render9 = (0, _react2.render)(sidebarNavMockRender()), container = _render9.container;
+              _render8 = (0, _react2.render)(sidebarNavMockRender()), container = _render8.container;
 
               _react2.fireEvent.mouseOver(container.querySelector('.customscroll .item'));
 
@@ -308,5 +300,80 @@ describe('SideNav Menu', function () {
         }
       }, _callee3);
     })));
+    describe('Popup Search Menu', function () {
+      it('should enable menu search', function () {
+        var _render9 = (0, _react2.render)(sidebarNavMockRender({
+          enableMenuSearch: true
+        })),
+            container = _render9.container;
+
+        expect(container.querySelector('.searchmenubutton')).toBeInTheDocument();
+      });
+      it('should render tooltip on over menu search item', function () {
+        var _render10 = (0, _react2.render)(sidebarNavMockRender({
+          enableMenuSearch: true
+        })),
+            container = _render10.container;
+
+        var navitem = container.querySelector('.-customsidenavitem');
+
+        _react2.fireEvent.mouseOver(navitem);
+
+        expect(document.querySelector('.tooltip-component')).toBeInTheDocument();
+      });
+      it('should open popup menu when pressed HotKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+        var _render11, container;
+
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                _render11 = (0, _react2.render)(sidebarNavMockRender({
+                  enableMenuSearch: true
+                })), container = _render11.container;
+
+                _react2.fireEvent.keyDown(container, {
+                  key: 'F',
+                  code: 'keyF',
+                  keyCode: 70,
+                  ctrlKey: true,
+                  shiftKey: true
+                });
+
+                expect(document.querySelector('.searchmenu')).toBeInTheDocument();
+
+              case 3:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      })));
+      it('should search on input change', function () {
+        var _render12 = (0, _react2.render)(sidebarNavMockRender({
+          enableMenuSearch: true
+        })),
+            container = _render12.container;
+
+        _react2.fireEvent.keyDown(container, {
+          key: 'F',
+          code: 'keyF',
+          keyCode: 70,
+          ctrlKey: true,
+          shiftKey: true
+        });
+
+        var input = document.querySelector('.searchmenu .inputwrapper .inputcontent .textinput');
+
+        _react2.fireEvent.change(input, {
+          target: {
+            value: 'A'
+          }
+        });
+
+        expect(document.querySelector('.searchmenu')).toBeInTheDocument();
+        expect(document.querySelectorAll('.searchmenu .list-component .item').length).toBe(5);
+      });
+    });
   });
 });

package/lib/panel/Header.js

@@ -64,7 +64,7 @@ var PanelHeader = function PanelHeader(props) {
     style: style
   }, (icon || titleIcon) && /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(icon !== null || titleIcon !== null ? 'icon-left-panel' : '')
-  }, getIcon(titleIcon, icon)), /*#__PURE__*/_react["default"].createElement("h1", {
+  }, getIcon(titleIcon, icon)), title && /*#__PURE__*/_react["default"].createElement("h1", {
     className: "title ".concat(customClassForTitle),
     style: styleForTitle
   }, title), toggleable && /*#__PURE__*/_react["default"].createElement(_buttons.ButtonContainer, {
@@ -83,7 +83,7 @@ var PanelHeader = function PanelHeader(props) {
 };
 
 PanelHeader.propTypes = {
-  title: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string,
   children: _propTypes["default"].element,
   icon: _propTypes["default"].instanceOf(Object),
   titleIcon: _propTypes["default"].string,
@@ -101,7 +101,8 @@ PanelHeader.defaultProps = {
   styleForTitle: {},
   customClassForTitle: '',
   headerColored: true,
-  children: null
+  children: null,
+  title: ''
 };
 var _default = PanelHeader;
 exports["default"] = _default;

package/lib/radio/index.js

@@ -50,7 +50,8 @@ var Radio = function Radio(props) {
       _onChange = props.onChange,
       id = props.id,
       checked = props.checked,
-      permissionAttr = props.permissionAttr;
+      permissionAttr = props.permissionAttr,
+      skeletonize = props.skeletonize;
 
   var _useState = (0, _react.useState)(checked),
       _useState2 = _slicedToArray(_useState, 2),
@@ -68,7 +69,7 @@ var Radio = function Radio(props) {
   }, [checked]);
 
   var shouldDisable = function shouldDisable() {
-    return disabled || onDenied.disabled;
+    return disabled || onDenied.disabled || skeletonize;
   };
 
   var getCustomProps = function getCustomProps() {
@@ -96,7 +97,7 @@ var Radio = function Radio(props) {
 
   if (onDenied.unvisible) return null;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "radio-button ".concat(disabled)
+    className: "radio-button ".concat(disabled ? 'disabled' : '', " ").concat(skeletonize ? '-skeletonized' : '')
   }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, getCustomProps(), {
     className: "radio-component",
     type: "radio",
@@ -108,7 +109,7 @@ var Radio = function Radio(props) {
   })), /*#__PURE__*/_react["default"].createElement("label", {
     className: "description",
     htmlFor: id
-  }, label));
+  }, /*#__PURE__*/_react["default"].createElement("span", null, label)));
 };
 
 Radio.propTypes = {
@@ -121,7 +122,8 @@ Radio.propTypes = {
   required: _propTypes["default"].bool,
   onChange: _propTypes["default"].func,
   checked: _propTypes["default"].bool,
-  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
+  permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]),
+  skeletonize: _propTypes["default"].bool
 };
 Radio.defaultProps = {
   label: null,
@@ -132,7 +134,8 @@ Radio.defaultProps = {
   value: undefined,
   checked: undefined,
   id: undefined,
-  permissionAttr: undefined
+  permissionAttr: undefined,
+  skeletonize: false
 };
 var _default = Radio;
 exports["default"] = _default;

package/lib/skeleton/SkeletonContainer.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var SkeletonContainer = function SkeletonContainer(_ref) {
+  var children = _ref.children,
+      row = _ref.row,
+      customClass = _ref.customClass,
+      style = _ref.style;
+
+  var getClass = function getClass() {
+    return "skeletoncontainer-component ".concat(customClass, "\n    ").concat(row && '-row');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: getClass(),
+    style: style
+  }, children);
+};
+
+SkeletonContainer.propTypes = {
+  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]).isRequired,
+  row: _propTypes["default"].bool,
+  customClass: _propTypes["default"].string,
+  style: _propTypes["default"].object
+};
+SkeletonContainer.defaultProps = {
+  row: false,
+  customClass: undefined,
+  style: null
+};
+var _default = SkeletonContainer;
+exports["default"] = _default;