linear-react-components-ui 1.1.21-beta.4 → 1.1.21-beta.5

package/lib/assets/styles/button.scss

@@ -104,6 +104,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     opacity: 0.7;
     border: solid 1px $font-color-disabled;
     pointer-events: auto;
+    cursor: not-allowed;
   }
   &.-shadowsdisabled {
     box-shadow: none!important;

package/lib/assets/styles/calendar.scss

@@ -3,28 +3,58 @@
 @import "commons.scss";
 
 $padding-size: 10px;
+$border-radius-size: 5px;
 .calendar-component {
-  display: grid;
-  grid-template-rows: 30px 30px 1fr;
-  border: 1px solid $component-border-color;
-  border-radius: 5px;
-  font-size: 12px;
+  width: auto;
   height: 100%;
-  width: 100%;
+  min-height: 20rem;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  border-radius: $border-radius-size;
+  border: 1px solid $component-border-color;
   > .calendarheader,
   > .daynames {
-    background-color: #f0f0f0;
+    width: auto;
+    height: 1.85rem;
     display: grid;
+    align-items: center;
+    background-color: #f0f0f0;
     grid-template-columns: 20px 1fr 30px;
-    padding: $padding-size;
-    padding-top: 4px;
   }
   > .calendarheader {
+    width: auto;
+    height: 32px;
+    padding-top: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top-left-radius: $border-radius-size;
+    border-top-right-radius: $border-radius-size;
     > .navbutton {
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      margin: 0px 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       background-color: transparent;
       font-weight: bold;
-      padding: 0;
       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 {
       font-weight: bold;
@@ -35,16 +65,21 @@ $padding-size: 10px;
     }
   }
   > .daynames {
+    padding-top: 4px;
     border-bottom: 1px solid $component-border-color;
     grid-template-columns: repeat(7, 1fr);
     text-align: center;
-    padding-top: 9px;
   }
   > .calendarmonth {
-    background-color: $font-color-second;
+    width: 100%;
+    height: 100%;
+    flex: 1;
     display: grid;
     grid-template-rows: repeat(6, 1fr);
-    padding: $padding-size;
+    padding: 2px;
+    background-color: $font-color-second;
+    border-bottom-left-radius: $border-radius-size;
+    border-bottom-right-radius: $border-radius-size;
   }
   > .calendarmonth > .monthweek {
     text-align: center;
@@ -52,16 +87,31 @@ $padding-size: 10px;
     grid-template-columns: repeat(7, 1fr)
   }
   .calendarmonth > .monthweek > .monthday {
-    padding: 12px 0;
+    height: auto;
+    width: auto;
     text-align: center;
     border-right: 0;
     border-bottom: 0;
     transition: all 0.2s ease-in-out;
     > .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;
@@ -74,19 +124,6 @@ $padding-size: 10px;
     &.-selectedday > .daybutton { 
       color: $font-color-second;
     }
-    > .daybutton {
-      background-color: transparent;
-      height: 100%;
-      padding: 0;
-      width: 100%;
-      font-size: 13px;
-      &.-nowday {
-        font-weight: bold
-      }
-      &.-outmonth {
-        color: #777;
-      }
-    }
   }
 }
 
@@ -167,6 +204,3 @@ $padding-size: 10px;
   }
 }
 
-.numberdaycalendar {
-  border: none!important;
-}

package/lib/assets/styles/datepicker.scss

@@ -1,16 +1,36 @@
 @import "commons.scss";
 @import "effects.scss";
 
+.datepicker-container {
+  position: relative;
+  transition: none;
+}
+
 .datepicker-component {
   @extend %component-box-shadow;
-  height: auto;
-  position: absolute;
-  z-index: 999999999999999;
+  z-index: 999999999999;
+  margin-top: 4px;
+  position: fixed;
   animation: 0.5s ease-in 0s 1 slideDown;
+  transition: none;
 }
 
 .calendar-button {
   width: 26px;
-  padding: 4px;
-  border: none;
-}
+  border-radius: 0;
+  border: 0 !important;
+  display: flex;
+  align-items: center;
+  box-shadow: none !important;
+  justify-content: center;
+  padding: 0 !important;
+
+  svg {
+    margin: 0 !important;
+  }
+
+  >.icon-component {
+    width: 16px !important;
+    height: 16px !important;
+  }
+}

package/lib/assets/styles/periodpicker.scss

@@ -1,12 +1,18 @@
 @import "commons.scss";
 @import "effects.scss";
+@import "colors.scss";
+
+.datepicker-period-container {
+  position: relative;
+  transition: none;
+}
 
 .periodpicker-component {
   height: auto;
   position: relative;
   display: flex;
   border-radius: 2px;
-  border: 1px solid #dae1e8;
+  border: 1px solid $component-border-color;
 
   .inputwrapper {
     border: none;
@@ -18,31 +24,79 @@
   }
 
   .calendar-button {
-    flex: 0 0 20px;
-    padding: 4px;
-    border: none;
+    width: 26px;
+    border-radius: 0;
+    border: 0 !important;
+    display: flex;
+    align-items: center;
+    box-shadow: none !important;
+    justify-content: center;
+    padding: 0 !important;
+
+    svg {
+      margin: 0 !important;
+    }
+
+    >.icon-component {
+      width: 16px !important;
+      height: 16px !important;
+    }
   }
 
   .input-base-component {
     flex: 1;
   }
+}
 
+.datepicker-component {
+  @extend %component-box-shadow;
+  border-radius: 5px;
+  margin-top: 4px !important;
+  position: fixed;
+  animation: 0.5s ease-in 0s 1 slideDown;
+  transition: none;
+}
+
+.dropdown-period {
+  width: 100%;
+  border-radius: 3px;
+  background-color: $component-bg-default;
+  border: 1px solid $component-border-color;
+  display: grid;
+  grid-template-rows: auto;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .dropdown-period>.item {
+  all: unset;
   margin: 0;
   padding: 6px 10px;
   display: flex;
   cursor: pointer;
   justify-content: stretch;
-  border-bottom: solid 1px #e1e1e1;
+  
+  &:not(:last-child) {
+    border-bottom: solid 1px $separator-background;
+  }
+
+  &:first-child {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
 
   &:hover {
     background-color: $default-hover-color;
   }
 
   &.-selected {
-    background-color: $default-hover-color;
+    background-color: $component-bg-selected-color;
   }
 
   &.-disabled {
@@ -53,17 +107,3 @@
     }
   }
 }
-
-.dropdown-period {
-  width: 100%;
-  /* animation: 0.5s ease-in 0s 1 slideDown; */
-  background-color: #FFF;
-  border: #dae1e8;
-  display: grid;
-  grid-template-rows: auto;
-  height: auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  /* margin-top: 2px; */
-  z-index: 99999999999;
-}

package/lib/assets/styles/sidenav.scss

@@ -95,7 +95,7 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
     overflow-y: auto;
 
     &::-webkit-scrollbar {
-      width: 5px;
+      width: 2px;
     }
 
     &::-webkit-scrollbar-track {

package/lib/assets/styles/tabs.scss

@@ -49,13 +49,15 @@ $dropdown-width: 38px;
     text-shadow: 0 1px $font-color-second;
     cursor: pointer;
     line-height: 20px;
-    margin-right: 1px;
+    margin-right: 2px;
     padding: 0;
     width: auto;
-    min-width: 100px;
+    min-width: 112px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    border: 1px solid $font-color-second;
+    border-top: 2px solid $font-color-second;
+    border-bottom: 1px solid $component-border-color;
     &.selected {
       border: 1px solid $component-border-color;
       background: $font-color-second;
@@ -64,6 +66,15 @@ $dropdown-width: 38px;
       box-shadow: 0;
       font-weight: bold;
     }
+    &.witherrorcontent {
+      border: 1px solid $input-error-border-color;
+      border-top: 2px solid $input-error-border-color;
+      border-bottom: 1px solid transparent;
+      background-color: $input-error-bg-color;
+      &.selected {
+        border-top: 2px solid $component-selected-color;
+      }
+    }
     &.selected>.closepanel,
     &:hover>.closepanel {
       visibility: visible;
@@ -76,7 +87,8 @@ $dropdown-width: 38px;
     background: transparent;
     border: 0;
     width: 100%;
-    text-align: left
+    text-align: left;
+    box-shadow: none !important;
   }
 
   .menu>.menuitem>.closepanel {
@@ -113,11 +125,17 @@ $dropdown-width: 38px;
       visibility: hidden;
       pointer-events: none;
       opacity: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       &.show {
         visibility: visible;
         pointer-events: all;
         opacity: 1;
       }
+      &.has-selected {
+        border: 1px solid $component-selected-color !important;
+      }
       > svg {
         margin: 0;
         float: none;
@@ -247,20 +265,32 @@ $dropdown-width: 38px;
 /*
   Dropdown hide tabs
 */
-.dropdown-hide-tabs .menuitem {
-  cursor: pointer;
-  line-height: 20px;
-  margin-right: 1px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 50px;
-
-  >.closepanel {
-    @extend %tab-closepanel;
+.dropdown-hide-tabs  {
+  .item-container > .item {
+    width: auto;
+    padding-left: 10px;
   }
-
-  &:hover>.closepanel {
-    visibility: visible;
+  .menuitem {
+    cursor: pointer;
+    line-height: 20px;
+    margin-right: 1px;
+    display: flex;
+    align-items: center;
+    min-height: 50px;
+    gap: 8px;
+    > svg {
+      margin: 0;
+    }
+    > .menubutton {
+      padding: 0;
+    }  
+    >.closepanel {
+      @extend %tab-closepanel;
+      margin-left: auto;
+      margin-right: 0;
+    }
+    &:hover>.closepanel {
+      visibility: visible;
+    }
   }
 }

package/lib/buttons/DefaultButton.js

@@ -11,7 +11,7 @@ var _withTooltip = _interopRequireWildcard(require("../internals/withTooltip"));
 var _spinner = _interopRequireDefault(require("../spinner"));
 var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
 var _permissionValidations = require("../permissionValidations");
-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", "errorMessage", "tooltipWidth", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef", "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", "errorMessage", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef", "handlerClose", "onDeniedText", "tooltip", "tooltipWidth", "tooltipPosition"];
 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; }
@@ -54,12 +54,15 @@ const DefaultButton = _ref => {
       permissionAttr,
       skeletonize,
       errorMessage,
-      tooltipWidth,
       isFloatMenu,
       dropdownAlign,
       customClassForDropdown,
       buttonRef,
-      onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.'
+      handlerClose,
+      onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.',
+      tooltip,
+      tooltipWidth,
+      tooltipPosition
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];

package/lib/buttons/types.d.ts

@@ -41,6 +41,7 @@ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     customClassForDropdown?: string;
     dropdownAlign?: 'left' | 'right';
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    handlerClose?: (cb: () => void) => void;
     closeDropdownOnClickOutside?: boolean;
     errorMessage?: string;
     onDeniedText?: string;

package/lib/calendar/DangerCalendar.d.ts

@@ -1,4 +1,5 @@
 import { ICalendarProps } from './types.js';
+import 'react';
 import 'moment';
 import '../@types/ColorStyles.js';
 

package/lib/calendar/InfoCalendar.d.ts

@@ -1,4 +1,5 @@
 import { ICalendarProps } from './types.js';
+import 'react';
 import 'moment';
 import '../@types/ColorStyles.js';
 

package/lib/calendar/PrimaryCalendar.d.ts

@@ -1,4 +1,5 @@
 import { ICalendarProps } from './types.js';
+import 'react';
 import 'moment';
 import '../@types/ColorStyles.js';
 

package/lib/calendar/SuccessCalendar.d.ts

@@ -1,4 +1,5 @@
 import { ICalendarProps } from './types.js';
+import 'react';
 import 'moment';
 import '../@types/ColorStyles.js';
 

package/lib/calendar/WarningCalendar.d.ts

@@ -1,4 +1,5 @@
 import { ICalendarProps } from './types.js';
+import 'react';
 import 'moment';
 import '../@types/ColorStyles.js';
 

package/lib/calendar/base/Day.d.ts

@@ -1,4 +1,5 @@
 import { IDayProps } from '../types.js';
+import 'react';
 import 'moment';
 import '../../@types/ColorStyles.js';
 

package/lib/calendar/base/Day.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
 var _helpers = require("./helpers");
 var _buttons = _interopRequireDefault(require("../../buttons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -21,12 +22,15 @@ const Day = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers.getDayContainerCssClass)(currentDate, day)
   }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    id: (0, _uuid.v1)(),
+    type: "button",
+    tabIndex: (0, _helpers.dateIsEquals)(currentDate, day) ? 0 : -1,
     boxShadow: false,
+    label: day.format('D'),
     onClick: () => {
       if (handleDateChange) handleDateChange(day);
     },
-    customClass: ` ${(0, _helpers.getDayCssClass)(currentDate, day)} numberdaycalendar`,
-    label: day.format('D')
+    customClass: ` ${(0, _helpers.getDayCssClass)(currentDate, day)} numberdaycalendar`
   }));
 };
 var _default = exports.default = Day;

package/lib/calendar/base/Month.d.ts

@@ -1,7 +1,8 @@
 import { IMonthProps } from '../types.js';
+import 'react';
 import 'moment';
 import '../../@types/ColorStyles.js';
 
-declare const Month: ({ currentDate }: IMonthProps) => JSX.Element;
+declare const Month: ({ monthRef, currentDate }: IMonthProps) => JSX.Element;
 
 export { Month as default };

package/lib/calendar/base/Month.js

@@ -10,6 +10,7 @@ var _helpers = require("./helpers");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Month = _ref => {
   let {
+    monthRef,
     currentDate
   } = _ref;
   const renderWeeks = () => {
@@ -31,6 +32,7 @@ const Month = _ref => {
     return weeks;
   };
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: monthRef,
     className: "calendarmonth"
   }, renderWeeks());
 };

package/lib/calendar/base/Week.d.ts

@@ -1,4 +1,5 @@
 import { IWeekProps } from '../types.js';
+import 'react';
 import 'moment';
 import '../../@types/ColorStyles.js';
 

package/lib/calendar/base/index.d.ts

@@ -1,4 +1,5 @@
 import { ICalendarProps } from '../types.js';
+import 'react';
 import 'moment';
 import '../../@types/ColorStyles.js';