linear-react-components-ui 1.1.20-rc.2 → 1.1.20

package/lib/alerts/BaseAlert.js

@@ -26,7 +26,7 @@ const BaseAlert = _ref => {
       alert.appendChild(messageContainerEl);
     }
     return () => {
-      alert === null || alert === void 0 ? void 0 : alert.removeChild(messageContainerEl);
+      alert?.removeChild(messageContainerEl);
     };
   }, []);
   return /*#__PURE__*/_reactDom.default.createPortal(children, messageContainerEl);

package/lib/alerts/Message.js

@@ -15,7 +15,7 @@ const getClass = _ref => {
     customClass,
     className
   } = _ref;
-  return "".concat(className, " ").concat(customClass);
+  return `${className} ${customClass}`;
 };
 const getIcon = (icon, iconName, color) => {
   if (icon !== null) {

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

@@ -54,7 +54,6 @@ $dropdown-width: 38px;
     width: auto;
     min-width: 100px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     &.selected {
       border: 1px solid $component-border-color;
@@ -113,11 +112,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 +252,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/avatar/index.js

@@ -23,7 +23,8 @@ const getClass = _ref => {
     disabled,
     size = 'default'
   } = _ref;
-  return "avatar-component ".concat(className).concat(disabled && '-disabled', " \n  ").concat(square && '-square', " ").concat(size && "-".concat(size));
+  return `avatar-component ${className}${disabled && '-disabled'} 
+  ${square && '-square'} ${size && `-${size}`}`;
 };
 const getIcon = (iconName, icon) => {
   if (icon) {
@@ -70,18 +71,18 @@ const Avatar = props => {
       if (targetRef) targetRef(r);
       dropdownRef.current = r;
     },
-    className: "".concat(getClass(props), " ").concat(customClass),
+    className: `${getClass(props)} ${customClass}`,
     style: _objectSpread({
-      width: "".concat(width),
-      height: "".concat(height),
-      backgroundColor: "".concat(color),
-      cursor: "".concat(dropdown ? 'pointer' : 'normal')
+      width: `${width}`,
+      height: `${height}`,
+      backgroundColor: `${color}`,
+      cursor: `${dropdown ? 'pointer' : 'normal'}`
     }, style)
   }, (iconName || icon) && !src && getIcon(iconName, icon), src && /*#__PURE__*/_react.default.createElement("img", {
     className: "imgavatar",
     style: {
-      width: "".concat(width),
-      height: "".concat(height)
+      width: `${width}`,
+      height: `${height}`
     },
     src: src,
     alt: srcAlt

package/lib/badge/index.js

@@ -18,12 +18,12 @@ const Badge = props => {
     right = '-11px'
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "badge-component ".concat(customClass)
+    className: `badge-component ${customClass}`
   }, children, /*#__PURE__*/_react.default.createElement("span", {
-    className: "badge -".concat(color, " ").concat(customClassForBadge),
+    className: `badge -${color} ${customClassForBadge}`,
     style: {
-      top: "".concat(top),
-      right: "".concat(right)
+      top: `${top}`,
+      right: `${right}`
     }
   }, content));
 };

package/lib/buttons/DangerButton.js

@@ -17,7 +17,7 @@ const DangerButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    customClass: "-danger ".concat(customClass)
+    customClass: `-danger ${customClass}`
   }, rest));
 };
 var _default = exports.default = DangerButton;

package/lib/buttons/DefaultButton.js

@@ -75,7 +75,16 @@ const DefaultButton = _ref => {
   const {
     handlerSetOnDeniedText
   } = (0, _react.useContext)(_withTooltip.TooltipContext);
-  const getClass = () => "button-component ".concat(className, "\n      ").concat(customClass, "\n      ").concat(transparent && '-transparent', "\n      ").concat(isDisabled && '-disabled', "\n      ").concat(size && "-".concat(size), "\n      ").concat(dropdown && !round && 'icon-right', "\n      ").concat(dropdown && round && 'icon-center', "\n      ").concat(iconAlign && !dropdown && "icon-".concat(iconAlign), "\n      ").concat(boxShadow ? '' : '-shadowsdisabled', "\n      ").concat(round && '-round');
+  const getClass = () => `button-component ${className}
+      ${customClass}
+      ${transparent && '-transparent'}
+      ${isDisabled && '-disabled'}
+      ${size && `-${size}`}
+      ${dropdown && !round && 'icon-right'}
+      ${dropdown && round && 'icon-center'}
+      ${iconAlign && !dropdown && `icon-${iconAlign}`}
+      ${boxShadow ? '' : '-shadowsdisabled'}
+      ${round && '-round'}`;
   const returnPadlockIcon = resultantStyle => /*#__PURE__*/_react.default.createElement(_icons.default, {
     name: "padlock",
     size: 16,
@@ -131,11 +140,10 @@ const DefaultButton = _ref => {
     style: style,
     onKeyDown: e => {
       if (e && (e.key === 'Enter' || e.key === ' ')) {
-        var _refButton$current;
         e.preventDefault();
         e.stopPropagation();
         if (isDisabled) return;
-        if (onClick) refButton === null || refButton === void 0 ? void 0 : (_refButton$current = refButton.current) === null || _refButton$current === void 0 ? void 0 : _refButton$current.click();
+        if (onClick) refButton?.current?.click();
         if (dropdown && showDropdown) showDropdown();
         if (onClick && toggleable) setActiveButton(!activeButton);
       }
@@ -148,7 +156,7 @@ const DefaultButton = _ref => {
       if (dropdown && showDropdown) showDropdown();
       if (onClick && toggleable) setActiveButton(!activeButton);
     },
-    className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : '', " ").concat(skeletonize ? '-skeletonized' : ''),
+    className: `${getClass()} ${activeButton ? '-toggleable' : ''} ${skeletonize ? '-skeletonized' : ''}`,
     ref: r => {
       if (buttonRef) {
         if (!_lodash.default.isFunction(buttonRef)) {

package/lib/buttons/InfoButton.js

@@ -17,7 +17,7 @@ const InfoButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    customClass: "-info ".concat(customClass)
+    customClass: `-info ${customClass}`
   }, rest));
 };
 var _default = exports.default = InfoButton;

package/lib/buttons/PrimaryButton.js

@@ -17,7 +17,7 @@ const PrimaryButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    customClass: "-primary ".concat(customClass)
+    customClass: `-primary ${customClass}`
   }, rest));
 };
 var _default = exports.default = PrimaryButton;

package/lib/buttons/SuccessButton.js

@@ -17,7 +17,7 @@ const SuccessButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, rest, {
-    customClass: "-success ".concat(customClass)
+    customClass: `-success ${customClass}`
   }));
 };
 var _default = exports.default = SuccessButton;

package/lib/buttons/WarningButton.js

@@ -17,7 +17,7 @@ const WarningButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, rest, {
-    customClass: "-warning ".concat(customClass)
+    customClass: `-warning ${customClass}`
   }));
 };
 var _default = exports.default = WarningButton;

package/lib/buttons/button_container/index.js

@@ -23,7 +23,7 @@ const ButtonContainer = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "button-container",
-    className: "btn-container ".concat(customClass),
+    className: `btn-container ${customClass}`,
     style: getStyles(style, position)
   }, children);
 };

package/lib/buttons/split_button/index.js

@@ -37,7 +37,7 @@ const SplitButton = props => {
     }
   })), /*#__PURE__*/_react.default.createElement(_DefaultButton.default, _extends({}, splitProps, {
     iconName: "down",
-    customClass: "".concat(customClass, " -transparenttext"),
+    customClass: `${customClass} -transparenttext`,
     iconStyle: {
       marginRight: -7,
       marginLeft: 0

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: " ".concat((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 };