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

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/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';
 

package/lib/calendar/base/index.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _uuid = require("uuid");
 var _moment = _interopRequireDefault(require("moment"));
 var _Month = _interopRequireDefault(require("./Month"));
 var _buttons = _interopRequireDefault(require("../../buttons"));
+var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
 var _helpers = require("./helpers");
 require("../../assets/styles/calendar.scss");
 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; }
+const arrowKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];
 const Calendar = props => {
   const {
     currentDate = (0, _moment.default)(),
@@ -20,12 +23,14 @@ const Calendar = props => {
     drawGridLines = false,
     colorStyle,
     unpadding = false,
-    customClass
+    customClass,
+    gridLayout,
+    currentDateButton,
+    calendarContainer
   } = props;
+  const currentMonth = (0, _react.useRef)(null);
+  const currentCalendarRef = (0, _react.useRef)(null);
   const [dataAtual, setDataAtual] = (0, _react.useState)((0, _helpers.validDate)(currentDate));
-  (0, _react.useEffect)(() => {
-    setDataAtual((0, _helpers.validDate)(currentDate));
-  }, []);
   const onDateChangeFunction = date => {
     if (onDateChange) onDateChange(date);
     setDataAtual(date);
@@ -38,12 +43,46 @@ const Calendar = props => {
     const currentDateClone = dataAtual.clone();
     setDataAtual(currentDateClone.add(1, 'month'));
   };
+  const navigateWithArrows = event => {
+    const sourceTarget = event.target;
+    const daysOfMonth = currentMonth.current?.getElementsByClassName('daybutton');
+    let indexCurrentDay = 0;
+    if (daysOfMonth.length) {
+      Array.from(daysOfMonth).find((dayButton, index) => {
+        if (dayButton && dayButton.id === sourceTarget.id) indexCurrentDay = index;
+      });
+    }
+    const element = {
+      ArrowUp: daysOfMonth[indexCurrentDay - 7],
+      ArrowRight: daysOfMonth[indexCurrentDay + 1],
+      ArrowDown: daysOfMonth[indexCurrentDay + 7],
+      ArrowLeft: daysOfMonth[indexCurrentDay - 1]
+    }[event.code];
+    if (element) element.focus();
+  };
   const contextValues = {
     handleDateChange: onDateChangeFunction
   };
-  return /*#__PURE__*/_react.default.createElement(_helpers.CalendarContext.Provider, {
-    value: contextValues
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  (0, _react.useEffect)(() => {
+    calendarContainer?.(currentCalendarRef?.current);
+    setDataAtual((0, _helpers.validDate)(currentDate));
+    document.addEventListener('keydown', event => {
+      if (event && event.code && arrowKeys.includes(event.code) && currentCalendarRef.current && currentCalendarRef.current.contains(document.activeElement) && currentMonth.current && currentMonth.current.contains(document.activeElement)) {
+        navigateWithArrows(event);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    });
+    return () => {
+      document.removeEventListener('keydown', () => {});
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    const daysOfMonth = currentMonth.current?.getElementsByClassName('-selectedday')[0];
+    currentDateButton?.(daysOfMonth.firstChild);
+  }, [currentDate]);
+  const component = /*#__PURE__*/_react.default.createElement("div", {
+    ref: currentCalendarRef,
     className: (0, _helpers.getCalendarCssClass)({
       unpadding,
       drawGridLines,
@@ -53,27 +92,36 @@ const Calendar = props => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "calendarheader"
   }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
-    iconName: "arrow_left",
+    id: (0, _uuid.v1)(),
     boxShadow: false,
+    iconName: "arrow_left",
+    customClass: "navbutton nav-arrow-left",
     onClick: () => {
       previousMonth();
-    },
-    customClass: "navbutton"
+    }
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "monthname"
   }, dataAtual.format('MMMM YYYY')), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    id: (0, _uuid.v1)(),
     boxShadow: false,
     iconName: "arrow_right",
+    customClass: "navbutton nav-arrow-right",
     onClick: () => {
       nextMonth();
-    },
-    customClass: "navbutton"
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "daynames"
   }, (0, _helpers.dayNames)().map(name => /*#__PURE__*/_react.default.createElement("div", {
     key: `day-${name}`
   }, name))), /*#__PURE__*/_react.default.createElement(_Month.default, {
+    monthRef: currentMonth,
     currentDate: dataAtual
-  })));
+  }));
+  return /*#__PURE__*/_react.default.createElement(_helpers.CalendarContext.Provider, {
+    value: contextValues
+  }, !gridLayout ? component : /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
+    customClass: "-withinput",
+    cols: gridLayout
+  }, component));
 };
 var _default = exports.default = Calendar;

package/lib/calendar/index.d.ts

@@ -5,6 +5,7 @@ export { default as DangerCalendar } from './DangerCalendar.js';
 export { default as WarningCalendar } from './WarningCalendar.js';
 export { default as InfoCalendar } from './InfoCalendar.js';
 import './types.js';
+import 'react';
 import 'moment';
 import '../@types/ColorStyles.js';
 

package/lib/calendar/types.d.ts

@@ -1,3 +1,4 @@
+import { LegacyRef } from 'react';
 import { Moment } from 'moment';
 import { ColorStyles } from '../@types/ColorStyles.js';
 
@@ -9,6 +10,9 @@ interface ICalendarProps {
     onDateChange?: (date: Moment) => void;
     colorStyle?: ColorStyles;
     handleDateChange?: (date: Moment) => void;
+    gridLayout?: string;
+    currentDateButton?: (buttonElement: HTMLButtonElement) => void;
+    calendarContainer?: (calendarElement: HTMLDivElement | null) => void;
 }
 interface IWeekProps {
     weekStartDate: Moment;
@@ -19,6 +23,7 @@ interface IDayProps {
     day: Moment;
 }
 interface IMonthProps {
+    monthRef: LegacyRef<HTMLDivElement> | undefined;
     currentDate: Moment;
 }