linear-react-components-ui 0.4.77-beta.8 → 1.0.0-rc.1

package/lib/assets/styles/sidenav.scss

@@ -6,37 +6,31 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
 @import "commons.scss";
 @import "effects.scss";
 @import "colors.scss";
-
 .sidenav-component {
   height: 100%;
   width: 100%;
   overflow: hidden;
   background-color: transparent;
   border: 1px solid #eee;
-
   &.-blocked {
     opacity: 0.4;
     pointer-events: none;
   }
-
-  >.expandedmenu,
-  >.collapsedmenu {
+  > .expandedmenu,
+  > .collapsedmenu {
     height: auto;
     width: 100%;
-
-    >.item {
+    > .item {
       cursor: pointer;
       border-bottom: 1px solid #eee;
       width: 100%;
       transition: all 0.2s ease-in-out;
-
       &.-customsidenavitem {
         display: flex;
         align-items: center;
         justify-content: center;
         padding-left: 0px;
-
-        >.searchmenubutton {
+        > .searchmenubutton {
           width: 100%;
           height: 100%;
           display: flex;
@@ -44,57 +38,46 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
           justify-content: center;
         }
       }
-
       &.-customsidenavitem:hover {
         background-color: white;
       }
-
       &.-disabled {
         @extend %component-disabled;
       }
     }
-
-    >.item:hover {
+    > .item:hover {
       background-color: #eee;
     }
-
-    >.item:hover>.menuicon,
-    >.item:hover .searchmenuicon,
-    >.item:hover>.menulink>.menuicon,
-    >.item:hover>.menulink .searchmenuicon {
+    > .item:hover > .menuicon,
+    > .item:hover .searchmenuicon,
+    > .item:hover > .menulink > .menuicon,
+    > .item:hover > .menulink .searchmenuicon {
       fill: rgb(114, 114, 114);
     }
-
-    >.item:hover>.title,
-    >.item:hover>.menulink>.title {
+    > .item:hover > .title,
+    > .item:hover > .menulink > .title {
       color: rgb(114, 114, 114);
     }
   }
-
-  >.expandedmenu.customscroll,
-  >.collapsedmenu.customscroll {
+  > .expandedmenu.customscroll,
+  > .collapsedmenu.customscroll {
     overflow-y: auto;
     height: 100%;
-
     &::-webkit-scrollbar {
       width: 5px;
     }
-
     &::-webkit-scrollbar-track {
       background: rgba(196, 222, 247, 0.5);
       border-radius: 10px;
     }
-
     &::-webkit-scrollbar-thumb {
       box-shadow: inset 0 0 5px #cecece;
       border-radius: 10px;
     }
-
     &::-webkit-scrollbar-thumb:hover {
       background: rgb(0, 195, 255);
     }
   }
-
   .openclosemenu {
     background: #f5f5f5;
     width: 100%;
@@ -106,17 +89,14 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     align-content: center;
     text-align: center;
     transition: all 0.2s ease-in-out;
-
     &:hover {
       background: $border-container;
     }
-
     .icon-component {
       justify-self: center;
       width: 12px;
     }
   }
-
   &.closefromexpanded {
     background: transparent;
     margin-top: 2px;
@@ -126,7 +106,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   }
 }
 
-.sidenav-component>.expandedmenu {
+.sidenav-component > .expandedmenu {
   animation: revealelement 0.3s;
   background-color: #fff;
   overflow: none;
@@ -134,32 +114,27 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   -webkit-box-flex: 0;
   -ms-flex: 0 0 70px;
   flex: 0 0 70px;
-
-  >.item {
+  > .item {
     align-content: center;
     background-color: #fff;
     display: grid;
     grid-template-columns: 30px 1fr;
     height: 45px;
     padding-left: 5px;
-
     &.-withlink {
       grid-template-columns: 1fr;
     }
-
     .menulink {
       display: grid;
       grid-template-columns: 30px 1fr;
       align-items: center;
       text-decoration: none;
     }
-
-    >.menuicon {
+    > .menuicon {
       justify-self: center;
     }
-
-    >.title,
-    >.menulink>.title {
+    > .title,
+    > .menulink > .title {
       color: #666;
       align-self: center;
       justify-self: left;
@@ -168,75 +143,62 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   }
 }
 
-.sidenav-component>.collapsedmenu {
+.sidenav-component > .collapsedmenu {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
-
-  >.item {
+  > .item {
     height: 50px;
     display: grid;
     grid-template-rows: 1fr;
     align-items: center;
-    align-content: center;
-
+    align-content: center; 
     &.-withlink {
       align-items: stretch;
     }
-
-    >.menulink {
+    > .menulink {
       display: grid;
       grid-template-rows: 1fr;
       align-items: center;
     }
-
-    >.menuicon,
-    >.menulink>.menuicon {
+    > .menuicon,
+    > .menulink > .menuicon {
       justify-self: center;
     }
   }
-
   &.-small {
     width: 55px;
-
-    >.item {
+    > .item {
       height: 40px;
     }
-
     .-iconcenter {
       width: 55px !important;
     }
   }
-
   &.-medium {
     width: 55px;
-
-    >.item {
+    > .item {
       height: 50px;
     }
-
     .-iconcenter {
       width: 65px !important;
     }
   }
-
   &.-large {
     width: 75px;
-
-    >.item {
+    > .item {
       height: 60px;
     }
-
     .-iconcenter {
       width: 75px !important;
     }
   }
 }
 
-.sidenav-component>.collapsedmenu>.item>.submenu-container,
-.sidenav-component>.expandedmenu>.item>.submenu-container {
+.sidenav-component > .collapsedmenu > .item > .submenu-container,
+.sidenav-component > .expandedmenu > .item > .submenu-container {
   animation: 0.5s ease-in 0s 1 slideLeft;
-  background-color: #eee;
+  background-color: #eee ;
   height: auto;
   width: auto;
   float: right;
@@ -246,8 +208,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   -moz-box-shadow: 3px 1px 6px 0px rgba(50, 50, 50, 0.35);
   box-shadow: 3px 1px 6px 0px rgba(50, 50, 50, 0.35);
   z-index: 9999999;
-
-  >.title {
+  > .title {
     color: #777777;
     font-size: 24px;
     font-weight: bold;
@@ -255,33 +216,28 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     height: 36px;
     line-height: 36px;
   }
-
   .submenu {
     color: #808080;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     align-content: center;
     align-items: flex-start;
-
-    >.item {
+    > .item {
       display: grid;
       min-height: 40px;
       /* height: 40px; */
       align-content: center;
       display: grid;
       margin-left: 20px;
-
       &.-disabled {
         @extend %component-disabled;
         background-color: #eee !important;
       }
     }
-
-    >.item:hover {
+    > .item:hover {
       color: #333;
     }
-
-    >.item:before {
+    > .item:before {
       position: absolute;
       content: '';
       left: -15px;
@@ -290,27 +246,24 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
       border-bottom: 5px solid transparent;
       border-left: 5px solid #808080;
     }
-
-    >.item:nth-child(even) {
+    > .item:nth-child(even) {
       padding-left: 5px;
     }
-
-    >.item>.menulink {
+    > .item > .menulink {
       grid-template-columns: 1fr;
       text-decoration: none;
     }
   }
 }
-
+  
 .searchmenu {
-  background-color: #fff;
+  background-color: #fff ;
   border: solid 1px $component-border-color;
   border-radius: 4px;
   width: 300px;
   position: absolute;
   padding: 20px;
-
-  >.closebutton {
+  > .closebutton {
     cursor: pointer;
     float: right;
     margin: -21px -33px 15px 0px;
@@ -324,19 +277,15 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   justify-content: center;
   height: 100%;
   width: 100%;
-
-  >.text,
-  .subtext {
+  > .text, .subtext {
     color: #a8a8a8;
     text-align: center;
   }
-
-  >.text {
+  > .text {
     font-size: 26px;
     margin-top: 20px;
   }
-
-  >.subtext {
+  > .subtext {
     font-size: 15px;
     margin-top: 5px;
   }

package/lib/assets/styles/table.scss

@@ -1,6 +1,5 @@
 @import "colors.scss";
 @import "effects.scss";
-@import "commons.scss";
 
 .table-component {
   width: 100%;
@@ -24,7 +23,13 @@
   > .tbody {
     position: relative;
     &.skeleton-transparency::before {
-      @extend %skeleton-transparency;
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: rgb(255,255,255);
+      background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%,
+        rgba(255,255,255,0.6) 70%,rgba(255,255,255,0.8) 100%);
     }
   }
   > .headercontainer > .innertable > .theader > .trow,

package/lib/avatar/index.d.ts

@@ -0,0 +1,12 @@
+import { IAvatarProps } from './types.js';
+import 'react';
+import '../@types/Icon.js';
+import '../icons/helper.js';
+import '../@types/Size.js';
+
+declare const _default: {
+    (props: IAvatarProps): JSX.Element;
+    displayName: string;
+};
+
+export { _default as default };

package/lib/avatar/index.js

@@ -1,43 +1,42 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _icons = _interopRequireDefault(require("../../lib/icons"));
 
 require("../assets/styles/avatar.scss");
 
 var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var getClass = function getClass(_ref) {
   var className = _ref.className,
       square = _ref.square,
       disabled = _ref.disabled,
-      size = _ref.size;
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size;
   return "avatar-component ".concat(className).concat(disabled && '-disabled', " \n  ").concat(square && '-square', " ").concat(size && "-".concat(size));
 };
 
 var getIcon = function getIcon(iconName, icon) {
-  if (icon !== null) {
+  if (icon) {
     return icon;
-  } else if (iconName !== null) {
-    return /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+  } else if (iconName) {
+    return /*#__PURE__*/_react.default.createElement(_icons.default, {
       name: iconName,
       size: 16
     });
@@ -54,7 +53,8 @@ var Avatar = function Avatar(props) {
       iconName = props.iconName,
       icon = props.icon,
       src = props.src,
-      srcAlt = props.srcAlt,
+      _props$srcAlt = props.srcAlt,
+      srcAlt = _props$srcAlt === void 0 ? 'Avatar' : _props$srcAlt,
       customClass = props.customClass,
       targetRef = props.targetRef,
       label = props.label,
@@ -64,15 +64,15 @@ var Avatar = function Avatar(props) {
       style = props.style,
       id = props.id;
   var dropdownRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "avatar",
     id: id,
-    onKeyPress: null,
+    onKeyPress: function onKeyPress() {},
     role: "button",
     tabIndex: -1,
-    onClick: function onClick() {
-      if (_onClick) _onClick();
-      if (dropdown) showDropdown();
+    onClick: function onClick(event) {
+      if (_onClick) _onClick(event);
+      if (dropdown && showDropdown) showDropdown();
     },
     ref: function ref(r) {
       if (targetRef) targetRef(r);
@@ -85,7 +85,7 @@ var Avatar = function Avatar(props) {
       backgroundColor: "".concat(color),
       cursor: "".concat(dropdown ? 'pointer' : 'normal')
     }, style)
-  }, (iconName || icon) && !src && getIcon(iconName, icon), src && /*#__PURE__*/_react["default"].createElement("img", {
+  }, (iconName || icon) && !src && getIcon(iconName, icon), src && /*#__PURE__*/_react.default.createElement("img", {
     className: "imgavatar",
     style: {
       width: "".concat(width),
@@ -93,54 +93,9 @@ var Avatar = function Avatar(props) {
     },
     src: src,
     alt: srcAlt
-  }), label), dropdown && getDropdownPopup(dropdownRef.current));
-};
-
-Avatar.propTypes = {
-  onClick: _propTypes["default"].func,
-  size: _propTypes["default"].string,
-  width: _propTypes["default"].string,
-  height: _propTypes["default"].string,
-  color: _propTypes["default"].string,
-  iconName: _propTypes["default"].string,
-  icon: _propTypes["default"].instanceOf(Object),
-  src: _propTypes["default"].string,
-  srcAlt: _propTypes["default"].string,
-  children: _propTypes["default"].element,
-  square: _propTypes["default"].bool,
-  customClass: _propTypes["default"].string,
-  dropdown: _propTypes["default"].bool,
-  dropdownOnHover: _propTypes["default"].bool,
-  targetRef: _propTypes["default"].func,
-  label: _propTypes["default"].string,
-  showDropdown: _propTypes["default"].func,
-  getDropdownPopup: _propTypes["default"].func,
-  style: _propTypes["default"].object,
-  id: _propTypes["default"].string
-};
-Avatar.defaultProps = {
-  label: '',
-  size: 'default',
-  width: '',
-  height: '',
-  color: '',
-  iconName: '',
-  icon: null,
-  src: '',
-  srcAlt: 'Avatar',
-  customClass: '',
-  children: null,
-  square: false,
-  dropdown: false,
-  dropdownOnHover: false,
-  targetRef: undefined,
-  showDropdown: undefined,
-  getDropdownPopup: undefined,
-  onClick: undefined,
-  style: {},
-  id: undefined
+  }), label), dropdown && getDropdownPopup && getDropdownPopup(dropdownRef.current));
 };
 
-var _default = (0, _withDropdown["default"])(Avatar);
+var _default = (0, _withDropdown.default)(Avatar);
 
-exports["default"] = _default;
+exports.default = _default;

package/lib/avatar/types.d.ts

@@ -0,0 +1,31 @@
+import { MouseEvent, ReactElement, ReactNode, CSSProperties } from 'react';
+import { IconNames } from '../@types/Icon.js';
+import { Size } from '../@types/Size.js';
+import '../icons/helper.js';
+
+interface IAvatarProps {
+    onClick?: (event: MouseEvent) => void;
+    size?: Size;
+    width?: string;
+    height?: string;
+    color?: string;
+    iconName?: IconNames;
+    icon?: ReactElement;
+    src?: string;
+    srcAlt?: string;
+    children?: ReactNode;
+    square?: boolean;
+    customClass?: string;
+    className?: string;
+    targetRef?: (ref: HTMLDivElement | null) => void;
+    dropdown?: boolean;
+    dropdownOnHover?: boolean;
+    showDropdown?: () => void;
+    getDropdownPopup?: (ref: HTMLDivElement | null) => ReactNode;
+    label?: string;
+    style?: CSSProperties;
+    id?: string;
+    disabled?: boolean;
+}
+
+export { IAvatarProps };

package/lib/avatar/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/badge/index.d.ts

@@ -0,0 +1,6 @@
+import { IBadgeProps } from './types.js';
+import 'react';
+
+declare const Badge: (props: IBadgeProps) => JSX.Element;
+
+export { Badge as default };

package/lib/badge/index.js

@@ -3,27 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 require("../assets/styles/badge.scss");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Badge = function Badge(props) {
-  var color = props.color,
+  var _props$color = props.color,
+      color = _props$color === void 0 ? 'default' : _props$color,
       customClass = props.customClass,
       customClassForBadge = props.customClassForBadge,
       children = props.children,
       content = props.content,
-      top = props.top,
-      right = props.right;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      _props$top = props.top,
+      top = _props$top === void 0 ? '-16px' : _props$top,
+      _props$right = props.right,
+      right = _props$right === void 0 ? '-11px' : _props$right;
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "badge-component ".concat(customClass)
-  }, children, /*#__PURE__*/_react["default"].createElement("span", {
+  }, children, /*#__PURE__*/_react.default.createElement("span", {
     className: "badge -".concat(color, " ").concat(customClassForBadge),
     style: {
       top: "".concat(top),
@@ -32,22 +33,5 @@ var Badge = function Badge(props) {
   }, content));
 };
 
-Badge.defaultProps = {
-  color: 'default',
-  top: '-16px',
-  right: '-11',
-  customClass: '',
-  customClassForBadge: '',
-  content: null
-};
-Badge.propTypes = {
-  color: _propTypes["default"].string,
-  top: _propTypes["default"].string,
-  right: _propTypes["default"].string,
-  children: _propTypes["default"].element.isRequired,
-  customClass: _propTypes["default"].string,
-  customClassForBadge: _propTypes["default"].string,
-  content: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string])
-};
 var _default = Badge;
-exports["default"] = _default;
+exports.default = _default;

package/lib/badge/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+interface IBadgeProps {
+    color?: 'default' | 'primary' | 'danger' | 'warning' | 'success' | 'info';
+    top?: string;
+    right?: string;
+    children: ReactNode;
+    customClass?: string;
+    customClassForBadge?: string;
+    content?: ReactNode;
+}
+
+export { IBadgeProps };

package/lib/badge/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/buttons/ActivateButton.d.ts

@@ -0,0 +1,9 @@
+import { IButtonProps } from './types.js';
+import 'react';
+import '../@types/PermissionAttr.js';
+import '../@types/Position.js';
+import '../@types/Size.js';
+
+declare const ActivateButton: (props: IButtonProps) => JSX.Element;
+
+export { ActivateButton as default };