linear-react-components-ui 1.1.24-beta.4 → 1.1.25-rc.1

package/lib/@types/ColorStyles.d.ts

@@ -1,4 +1,3 @@
 type ColorStyles = 'primary' | 'success' | 'danger' | 'info' | 'warning';
-type ColorTheme = 'light' | 'dark';
 
-export { ColorStyles, ColorTheme };
+export { ColorStyles };

package/lib/@types/Position.d.ts

@@ -1,4 +1,3 @@
 type Position = 'left' | 'right' | 'center' | 'top' | 'bottom';
-type HintPosition = 'below' | 'onLabelRight';
 
-export { HintPosition, Position };
+export { Position };

package/lib/assets/styles/calendar.scss

@@ -1,9 +1,9 @@
-
 @import "colors.scss";
 @import "commons.scss";
 
 $padding-size: 10px;
 $border-radius-size: 5px;
+
 .calendar-component {
   width: auto;
   height: 100%;
@@ -13,8 +13,9 @@ $border-radius-size: 5px;
   flex-direction: column;
   border-radius: $border-radius-size;
   border: 1px solid $component-border-color;
-  > .calendarheader,
-  > .daynames {
+
+  >.calendarheader,
+  >.daynames {
     width: auto;
     height: 1.85rem;
     display: grid;
@@ -22,7 +23,8 @@ $border-radius-size: 5px;
     background-color: #f0f0f0;
     grid-template-columns: 20px 1fr 30px;
   }
-  > .calendarheader {
+
+  >.calendarheader {
     width: auto;
     height: 32px;
     padding-top: 4px;
@@ -31,7 +33,8 @@ $border-radius-size: 5px;
     justify-content: space-between;
     border-top-left-radius: $border-radius-size;
     border-top-right-radius: $border-radius-size;
-    > .navbutton {
+
+    >.navbutton {
       width: 2rem;
       height: 2rem;
       padding: 0;
@@ -42,21 +45,26 @@ $border-radius-size: 5px;
       background-color: transparent;
       font-weight: bold;
       border: none;
+
       svg {
         margin: 0;
       }
+
       &:hover {
         background-color: $component-border-color;
       }
+
       &:focus {
         -webkit-box-shadow: none !important;
         box-shadow: none !important;
         border: 1px solid $default-border-color;
         background-color: $component-border-color;
       }
+
       transition: none;
     }
-    > .monthname {
+
+    >.monthname {
       font-weight: bold;
       vertical-align: middle;
       text-align: center;
@@ -64,117 +72,209 @@ $border-radius-size: 5px;
       font-size: 14px;
     }
   }
-  > .daynames {
+
+  >.daynames {
     padding-top: 4px;
     border-bottom: 1px solid $component-border-color;
     grid-template-columns: repeat(7, 1fr);
     text-align: center;
   }
-  > .calendarmonth {
+
+  >.calendarmonth {
     width: 100%;
     height: 100%;
     flex: 1;
     display: grid;
-    grid-template-rows: repeat(6, 1fr);
     padding: 2px;
     background-color: $font-color-second;
     border-bottom-left-radius: $border-radius-size;
     border-bottom-right-radius: $border-radius-size;
   }
-  > .calendarmonth > .monthweek {
+
+  >.calendarmonth>.monthweek {
     text-align: center;
     display: grid;
     grid-template-columns: repeat(7, 1fr)
   }
-  .calendarmonth > .monthweek > .monthday {
+
+  .calendarmonth>.monthweek>.monthday {
     height: auto;
     width: auto;
     text-align: center;
     border-right: 0;
     border-bottom: 0;
     transition: all 0.2s ease-in-out;
-    > .daybutton {
+
+    >.daybutton {
       height: 100%;
       width: 100%;
       padding: 0;
       font-size: 13px;
       border: none;
       background-color: transparent;
+
       &.-nowday {
         font-weight: bold
       }
+
       &.-outmonth {
         color: #777;
       }
+
       &:focus {
         -webkit-box-shadow: none !important;
         box-shadow: none !important;
         border: 2px solid $default-border-color;
       }
+
       transition: none;
     }
+
     &:hover {
       background-color: $component-border-color;
       border-radius: 4px;
     }
+
     &.-selectedday {
       background-color: $font-selected-color;
       border-radius: 4px;
     }
-    &.-selectedday > .daybutton { 
+
+    &.-selectedday>.daybutton {
       color: $font-color-second;
     }
   }
 }
 
 .calendar-component {
-  &.-success, &.-primary, &.-info, &.-warning, &.-danger {
-    > .calendarheader, >.daynames {
+
+  &.-success,
+  &.-primary,
+  &.-info,
+  &.-warning,
+  &.-danger {
+
+    >.calendarheader,
+    >.daynames {
       color: $font-color-second;
     }
+
+    .navbutton {
+      svg {
+        fill: $font-color-second;
+      }
+    }
   }
+
   &.-success {
-    border: none;
-    > .calendarheader, >.daynames {
+
+    >.calendarheader,
+    >.daynames {
       background-color: $success-color;
     }
+
+    .navbutton {
+      &:focus {
+        background-color: $success-actived-color;
+        border-color: $success-border-color;
+      }
+
+      &:hover {
+        background-color: $success-hover-color;
+      }
+    }
   }
+
   &.-primary {
-    border: none;
-    > .calendarheader, >.daynames {
+
+    >.calendarheader,
+    >.daynames {
       background-color: $primary-color;
     }
+
+    .navbutton {
+      &:focus {
+        background-color: $primary-actived-color;
+        border-color: $primary-border-color;
+      }
+
+      &:hover {
+        background-color: $primary-hover-color;
+      }
+    }
   }
+
   &.-info {
-    border: none;
-    > .calendarheader, >.daynames {
+
+    >.calendarheader,
+    >.daynames {
       background-color: $info-color;
     }
+
+    .navbutton {
+      &:focus {
+        background-color: $info-actived-color;
+        border-color: $info-border-color;
+      }
+
+      &:hover {
+        background-color: $info-hover-color;
+      }
+    }
   }
+
   &.-warning {
-    border: none;
-    > .calendarheader, >.daynames {
+
+    >.calendarheader,
+    >.daynames {
       background-color: $warning-color;
     }
+
+    .navbutton {
+      &:focus {
+        background-color: $warning-actived-color;
+        border-color: $warning-border-color;
+      }
+
+      &:hover {
+        background-color: $warning-hover-color;
+      }
+    }
   }
+
   &.-danger {
-    border: none;
-    > .calendarheader, >.daynames {
+
+    >.calendarheader,
+    >.daynames {
       background-color: $danger-color;
     }
+
+    .navbutton {
+      &:focus {
+        background-color: $danger-actived-color;
+        border-color: $danger-border-color;
+      }
+
+      &:hover {
+        background-color: $danger-hover-color;
+      }
+    }
   }
 }
 
 //Add border to days container
 .calendar-component.-draw-grid-lines {
-  > .calendarmonth > .monthweek {
+  >.calendarmonth>.monthweek {
     border-bottom: 1px solid $component-border-color;
+
     &:first-child {
       border-top: 1px solid $component-border-color;
     }
   }
-  > .calendarmonth > .monthweek > .monthday {
+
+  >.calendarmonth>.monthweek>.monthday {
     border-left: 1px solid $component-border-color;
+
     &:last-child {
       border-right: 1px solid $component-border-color;
     }
@@ -183,24 +283,29 @@ $border-radius-size: 5px;
 
 //Remove padding
 .calendar-component.-unpadding {
-  > .calendarmonth, > .daynames {
+
+  >.calendarmonth,
+  >.daynames {
     padding: 0;
   }
-  > .calendarmonth > .monthweek {
+
+  >.calendarmonth>.monthweek {
     &:first-child {
       border-top: 0px;
     }
+
     &:last-child {
       border-bottom: 0px;
     }
   }
-  > .calendarmonth > .monthweek > .monthday {
+
+  >.calendarmonth>.monthweek>.monthday {
     &:last-child {
       border-right: 0px
     }
+
     &:first-child {
       border-left: 0;
     }
   }
-}
-
+}

package/lib/assets/styles/colorpicker.scss

@@ -1,8 +1,9 @@
 .colorpicker-colormirror {
   height: 31px;
-  width: 20px;
+  width: 20px; 
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
+  margin: -3px -5px 0;
 }
 
 .colorpicker-palettebutton {
@@ -10,3 +11,7 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
+.colorpicker-hideinputcolor {
+  display: none;
+}

package/lib/assets/styles/colors.scss

@@ -18,12 +18,13 @@ $font-color-default: #333333;
 $font-color-second: #ffffff;
 $font-color-soft: #777777;
 $font-selected-color: #6C757D;
-$font-color-disabled: #cacaca !important;
+$font-color-disabled: #cacaca!important;
+
 
 // COMPONENTS DEFAULTS
 $component-border-color: #dae1e8;
 $component-border-color-soft: #e6e6e6;
-$component-selected-color: #a10d0d;
+$component-selected-color: rgb(161, 13, 13);
 $component-bg-selected-color: #dbf1ff;
 $component-bg-default: #fff;
 $component-item-hover: #eeebeb; //Usado para hover de table rows ou li
@@ -38,8 +39,8 @@ $color-light-dark: #858585;
 
 // TABLES
 $table-striped-bg-color: #fcfcfc;
-$table-vertical-header-bg-color: #f0f0f0;
-$table-vertical-row-bg-color: #f8f8f8;
+$table-vertical-header-bg-color: rgb(240, 240, 240);
+$table-vertical-row-bg-color: rgb(248, 248, 248);
 
 //COLORS DEFAULT
 $default-color: #ffffff;
@@ -102,19 +103,18 @@ $alert-danger-border: #f5c6cb;
 
 //COLOR CHECKBOX DEFAULT
 $checked: #d30f0f;
-$checked-effect: #a10d0d;
+$checked-effect: $component-selected-color;
 $check-background: #C3C3C3;
 
 // COLOR LIST DEFAULT 
 // TODO - Refatorar o css da lista para reaproveitar variaveis genericas já existens
 $list-container-border: #E8E8E8;
 $list-container-box-shadow: #d1d1d1;
-$list-header-title: rgba(0, 0, 0, 0.54);
+$list-header-title:rgba(0, 0, 0, 0.54);
 $list-item-text: rgba(0, 0, 0, 0.54);
 $list-item-hover: #e1e1e1;
 $list-item-focus: #e1e1e1;
 $list-separator: #e1e1e1;
-$list-striped-bg: #e0e0e0;
 
 //COLORS TOOLBAR DEFAULT
 // TODO - Refatorar o css para reaproveitar variaveis genericas já existens
@@ -123,58 +123,22 @@ $separator-border-left: #d1d3d4;
 $separator-border-right: #b8c4ce;
 
 // INPUTS
-$input-read-only-bg-color: #fff5e5;
-$input-disabled-bg-color: #f5f5f5;
+$input-error-border-color:#f48181;
 $input-error-bg-color: #f9d6d6;
-$input-error-border-color: #f48181;
-
-// SELECTFIELD
-$selectfield-bg-selected: #f2f9fc;
-$selectfield-border-color: #c9e6f2;
 
 //PLACEHOLDER
 $placeholder-color: #8e8e8e;
-
 %input-placeholder {
-  &::-webkit-input-placeholder {
-    /* Chrome/Opera/Safari */
+  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
     color: $placeholder-color;
   }
-
-  &::-moz-placeholder {
-    /* Firefox 19+ */
+  &::-moz-placeholder { /* Firefox 19+ */
     color: $placeholder-color;
   }
-
-  &:-ms-input-placeholder {
-    /* IE 10+ */
+  &:-ms-input-placeholder { /* IE 10+ */
     color: $placeholder-color;
   }
-
-  &:-moz-placeholder {
-    /* Firefox 18- */
+  &:-moz-placeholder { /* Firefox 18- */
     color: $placeholder-color;
   }
 }
-
-%input-placeholder-transparent {
-  &::-webkit-input-placeholder {
-    /* Chrome/Opera/Safari */
-    color: transparent;
-  }
-
-  &::-moz-placeholder {
-    /* Firefox 19+ */
-    color: transparent;
-  }
-
-  &:-ms-input-placeholder {
-    /* IE 10+ */
-    color: transparent;
-  }
-
-  &:-moz-placeholder {
-    /* Firefox 18- */
-    color: transparent;
-  }
-}

package/lib/assets/styles/file.scss

@@ -170,6 +170,14 @@
 }
 
 .input-simple-file-container {
+  .file-content {
+    flex: 1;
+  }
+
+  .file-wrapper {
+    align-items: center;
+  }
+
   .-disabledVisualApply {
     background: #fff5e5 !important;
     > .size-position-icon {

package/lib/assets/styles/table.scss

@@ -177,3 +177,9 @@
     overflow: hidden;
   }
 }
+
+div:has(table.table-component).horizontal-scroll-container {
+  height: auto;
+  width: 100%;
+  overflow-x: scroll;
+}

package/lib/buttons/ActivateButton.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const ActivateButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/AddButton.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const AddButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/Button.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 interface ButtonProps extends IButtonProps {
     split?: boolean;

package/lib/buttons/CancelButton.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const CancelButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/DangerButton.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const DangerButton: ({ customClass, ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/DefaultButton.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const _default: {
     (props: Omit<IButtonProps, "split">): JSX.Element;

package/lib/buttons/DefaultButton.js

@@ -7,11 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _icons = _interopRequireDefault(require("../../lib/icons"));
+var _withTooltip = _interopRequireWildcard(require("../internals/withTooltip"));
 var _spinner = _interopRequireDefault(require("../spinner"));
 var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
 var _permissionValidations = require("../permissionValidations");
-var _tooltip = require("../tooltip");
-const _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "tooltip", "tooltipWidth", "tooltipPosition", "buttonRef", "errorMessage", "type", "onDeniedText"];
+const _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "buttonRef", "onDeniedText"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -53,12 +53,7 @@ const DefaultButton = _ref => {
       round,
       permissionAttr,
       skeletonize,
-      tooltip,
-      tooltipWidth,
-      tooltipPosition,
       buttonRef,
-      errorMessage,
-      type = 'button',
       onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.'
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -69,6 +64,9 @@ const DefaultButton = _ref => {
   const disabledIconColor = 'rgb(193, 193, 193)';
   const disabledByPermission = onDenied.disabled;
   const isDisabled = !!onDenied.disabled || disabled;
+  const {
+    handlerSetOnDeniedText
+  } = (0, _react.useContext)(_withTooltip.TooltipContext);
   const getClass = () => `button-component ${className}
       ${customClass}
       ${transparent && '-transparent'}
@@ -126,9 +124,11 @@ const DefaultButton = _ref => {
     }
     return null;
   };
+  (0, _react.useEffect)(() => {
+    if (disabledByPermission) handlerSetOnDeniedText(onDeniedText);
+  }, [disabledByPermission]);
   if (!visible || onDenied.unvisible) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("button", _extends({}, _lodash.default.omit(rest, 'dropdownAlign'), {
-    type: type,
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("button", _extends({}, rest, {
     style: style,
     onKeyDown: e => {
       if (e && (e.key === 'Enter' || e.key === ' ')) {
@@ -141,20 +141,12 @@ const DefaultButton = _ref => {
       }
     },
     onClick: e => {
-      if (type === 'submit') {
-        if (isDisabled) {
-          e.preventDefault();
-          return;
-        }
-      }
-      if (type !== 'submit') {
-        e.preventDefault();
-        if (isDisabled) return;
-        // É Necessário que tenha o preventDefault pois foi retirado o disabled do botão, assim evitando que o evento padrão seja disparado.
-        if (onClick) onClick(e);
-        if (dropdown && showDropdown) showDropdown();
-        if (onClick && toggleable) setActiveButton(!activeButton);
-      }
+      // É Necessário que tenha o preventDefault pois foi retirado o disabled do botão, assim evitando que o evento padrão seja disparado.
+      e.preventDefault();
+      if (isDisabled) return;
+      if (onClick) onClick(e);
+      if (dropdown && showDropdown) showDropdown();
+      if (onClick && toggleable) setActiveButton(!activeButton);
     },
     className: `${getClass()} ${activeButton ? '-toggleable' : ''} ${skeletonize ? '-skeletonized' : ''}`,
     ref: r => {
@@ -181,13 +173,6 @@ const DefaultButton = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
     align: "none",
     delayTime: 0
-  }))), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
-    targetRef: refButton,
-    text: tooltip,
-    width: tooltipWidth,
-    position: tooltipPosition,
-    onDeniedText: disabledByPermission ? onDeniedText : undefined,
-    textError: errorMessage
-  }), dropdown && refButton.current && getDropdownPopup && getDropdownPopup(refButton.current));
+  }))), dropdown && refButton.current && getDropdownPopup && getDropdownPopup(refButton.current));
 };
-var _default = exports.default = (0, _withDropdown.default)(DefaultButton);
+var _default = exports.default = (0, _withDropdown.default)((0, _withTooltip.default)(DefaultButton));

package/lib/buttons/DestroyButton.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const DestroyButton: ({ ...rest }: IButtonProps) => JSX.Element;
 

package/lib/buttons/EditButton.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const EditButton: (props: IButtonProps) => JSX.Element;
 

package/lib/buttons/InactivateButton.d.ts

@@ -5,7 +5,6 @@ import '../@types/Position.js';
 import '../@types/Size.js';
 import '../@types/Icon.js';
 import '../icons/helper.js';
-import '../tooltip/types.js';
 
 declare const InactivateButton: (props: IButtonProps) => JSX.Element;