linear-react-components-ui 1.1.20-beta.8 → 1.1.20-rc.0

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/effects.scss

@@ -135,12 +135,10 @@
 @keyframes revealelement {
   0% {
     color: transparent;
-    height: 0%;
     opacity: 0.0;
   }
   50% {
     color: inherit;
-    height: auto;
     opacity: 0.3;
   }
   100% {

package/lib/assets/styles/input.scss

@@ -2,7 +2,7 @@
 @import "fonts.scss";
 @import "colors.scss";
 @import "effects";
-.input-base-component > .labelcontainer {
+.input-base-component > .labelcontainer > .text-content {
   margin: 0; 
   padding: 0;
   line-height: 14px;
@@ -115,7 +115,7 @@
 }
 
 .input-base-component.-skeletonized {
-  > .labelcontainer > .label,
+  > .labelcontainer > .text-content > .label,
   > .hint {
     @extend %skeleton-component;
     color: transparent;

package/lib/assets/styles/popover.scss

@@ -38,4 +38,7 @@
       color: rgb(59, 59, 59);
     }
   }
+  &.-hint {
+    width: 100% !important;
+  }
 }

package/lib/assets/styles/select.scss

@@ -19,6 +19,7 @@
       cursor: pointer;
       display: flex;
       align-items: center;
+      padding: 0 4px;
     }
   }
 
@@ -151,4 +152,4 @@
     font-style: italic;
     font-size: 13px;
   }
-}
+}

package/lib/assets/styles/treetable.scss

@@ -78,13 +78,13 @@ table {
       display: flex;
       flex-direction: row;
       align-items: center;
+      justify-content: space-between;
     }
 
     span.container-toolbar-buttons {
-      width: 100%;
+      width: auto;
       height: auto;
       margin-left: 4px;
-      margin-right: 16px;
     }
 
     .row-toolbar {

package/lib/assets/styles/treeview.scss

@@ -1,6 +1,6 @@
 @import "./colors.scss";
 @import "./effects.scss";
-.treeview-component { 
+.treeview-component {
   display: flex;
   flex-direction: column;
   > .treeviewcontainer {
@@ -52,17 +52,17 @@
     align-items: center;
     min-height: 25px;
     color: $font-color-soft;
-    >.node-menu {
+    > .node-menu {
       animation: revealelement 0.3s forwards ease-in-out;
       margin-left: 10px;
     }
-    >.node-rightelements {
+    > .node-rightelements {
       animation: revealelement 0.3s forwards ease-in-out;
       display: flex;
       justify-content: flex-start;
       align-items: center;
     }
-    >.node-toolbarelements {
+    > .node-toolbarelements {
       animation: revealelement 0.3s forwards ease-in-out;
       width: auto;
       height: 100%;
@@ -82,15 +82,31 @@
   }
 }
 
-.nodelist > .treeviewitem > .label > .node-rightelements  > .element,
-.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-rightelements > .element {
+.nodelist > .treeviewitem > .label > .node-rightelements > .element,
+.treeview-component
+  > .treeviewcontainer
+  > .treeviewitem
+  > .label
+  > .node-rightelements
+  > .element {
   margin-left: 10px;
   display: flex;
   align-items: center;
   height: 100%;
 }
 
-.nodelist > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar,
-.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar {
+.nodelist
+  > .treeviewitem
+  > .label
+  > .node-toolbarelements
+  > .toolbar-group
+  > .buttonbar,
+.treeview-component
+  > .treeviewcontainer
+  > .treeviewitem
+  > .label
+  > .node-toolbarelements
+  > .toolbar-group
+  > .buttonbar {
   border: none;
 }

package/lib/assets/styles/wizard.scss

@@ -0,0 +1,127 @@
+@import "colors.scss";
+
+.wizard-dialog {
+  .wizard-wrapper {
+    .wizard-content {
+      display: flex !important;
+      flex-direction: column;
+      .wizard-body{
+        overflow: auto;
+      }
+      .wizard-progresbar {
+        width: 100%;
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+        justify-content: space-between;
+        padding: 20px;
+        margin-bottom: 20px;
+        border-bottom: 2px solid $component-border-color;
+        gap: 10px;
+        > .title {
+          font-size: 16px;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          position: relative;
+          flex: 1;
+          text-align: center;
+          &:first-child {
+            .step {
+              align-self: flex-start;
+            }
+            .step-title {
+              align-self: flex-start;
+              text-align: left;
+            }
+            &:before {
+              right: auto;
+              left: 45px;
+            }
+          }
+          &:last-child {
+            .step {
+              align-self: flex-end;
+            }
+            .step-title {
+              align-self: flex-end;
+              text-align: right;
+            }
+            &:after {
+              left: auto;
+              right: 45px;
+            }
+          }
+          &::after, &::before {
+            content: "";
+            position: absolute;
+            height: 2px;
+            background-color: $component-border-color;
+            top: 18px;
+            width: calc(100% - 25px);
+            transition: all 0.2s ease-in-out;
+          }
+          &::after {
+            left: calc(50% + 18px);
+          }
+          &::before {
+            right: calc(50% + 18px);
+          }
+          &[data-completed="true"] {
+            &::after {
+              background-color: $success-color !important;
+            }
+            + .title::before {
+              background-color: $success-color !important;
+            }
+            &:first-child::before {
+              background-color: $success-color !important;
+            }
+            & + .title:after {
+              background-color: $success-color !important;
+            }
+            > .step {
+              > .number {
+                background-color: $success-color;
+                border-color: $success-color;
+              }
+            }
+          }
+          &[data-disabled="true"] .step {
+            opacity: 0.3;
+          }
+          > .step {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 54px;
+            > .number {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 20px;
+              font-weight: 600;
+              width: 36px;
+              height: 36px;
+              border-radius: 100%;
+              color: #fff;
+              background-color: $color-light-dark;
+              z-index: 1;
+              transition: all 0.2s ease-in-out;
+              border: 2px solid $color-light-dark;
+            }
+          }
+          > .step-title {
+            max-width: 150px;
+            overflow: hidden;
+            margin-top: 6px;
+            font-weight: 500;
+            color: $font-color-soft;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -72,7 +72,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,
@@ -89,8 +98,9 @@ const DefaultButton = _ref => {
     }
     if (dropdown && showIconDropdown) {
       const openDropDownRule = isDropdownOpened ? 'mini_up' : 'mini_down';
+      const dropdownIcon = iconName || openDropDownRule;
       return /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: openDropDownRule,
+        name: dropdownIcon,
         size: 16,
         customClass: "dropdown-icon",
         pointerEvents: "none",
@@ -125,6 +135,16 @@ const DefaultButton = _ref => {
   if (!visible || onDenied.unvisible) return null;
   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 === ' ')) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDisabled) return;
+        if (onClick) refButton?.current?.click();
+        if (dropdown && showDropdown) showDropdown();
+        if (onClick && toggleable) setActiveButton(!activeButton);
+      }
+    },
     onClick: e => {
       // É 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();
@@ -133,7 +153,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)) {
@@ -145,7 +165,7 @@ const DefaultButton = _ref => {
       if (targetRef) targetRef(r);
       refButton.current = r;
     },
-    tabIndex: tabIndex
+    tabIndex: isDisabled ? -1 : tabIndex
   }), content, getIcon(), label || '', isLoading && /*#__PURE__*/_react.default.createElement("div", {
     className: "spinnercontainer"
   }, /*#__PURE__*/_react.default.createElement(_spinner.default, {

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/base/Day.js

@@ -25,7 +25,7 @@ const Day = _ref => {
     onClick: () => {
       if (handleDateChange) handleDateChange(day);
     },
-    customClass: " ".concat((0, _helpers.getDayCssClass)(currentDate, day), " numberdaycalendar"),
+    customClass: ` ${(0, _helpers.getDayCssClass)(currentDate, day)} numberdaycalendar`,
     label: day.format('D')
   }));
 };

package/lib/calendar/base/Month.js

@@ -21,7 +21,7 @@ const Month = _ref => {
       const week = /*#__PURE__*/_react.default.createElement(_Week.default, {
         currentDate: currentDate,
         weekStartDate: startOfWeek,
-        key: "week-".concat(startOfWeek.format('YYYYMMDD'))
+        key: `week-${startOfWeek.format('YYYYMMDD')}`
       });
       weeks = [...weeks, week];
       weekIndex += 1;

package/lib/calendar/base/helpers.js

@@ -89,8 +89,8 @@ function getCalendarCssClass(_ref) {
     customClass,
     colorStyle
   } = _ref;
-  let cssClass = "calendar-component ".concat(customClass);
-  cssClass += " -".concat(colorStyle);
+  let cssClass = `calendar-component ${customClass}`;
+  cssClass += ` -${colorStyle}`;
   cssClass += unpadding ? ' -unpadding' : '';
   cssClass += drawGridLines ? ' -draw-grid-lines' : '';
   return cssClass;

package/lib/calendar/base/index.js

@@ -71,7 +71,7 @@ const Calendar = props => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "daynames"
   }, (0, _helpers.dayNames)().map(name => /*#__PURE__*/_react.default.createElement("div", {
-    key: "day-".concat(name)
+    key: `day-${name}`
   }, name))), /*#__PURE__*/_react.default.createElement(_Month.default, {
     currentDate: dataAtual
   })));

package/lib/checkbox/index.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Label = _interopRequireDefault(require("./Label"));
 var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _permissionValidations = require("../permissionValidations");
 require("../assets/styles/checkbox.scss");
 var _errorMessage = require("../inputs/errorMessage");
 var _ = require("..");
+var _textContent = _interopRequireDefault(require("../textContent"));
+var _popover = _interopRequireDefault(require("../popover"));
+var _hint = _interopRequireDefault(require("../hint"));
 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; }
@@ -40,7 +42,11 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tooltipWidth = 'auto',
     skeletonize,
     targetRef,
-    errorMessages
+    errorMessages,
+    customClassForLabel,
+    hintPosition = 'below',
+    themePopover = 'light',
+    popoverAlign = 'left'
   } = _ref;
   const [isChecked, setIsChecked] = (0, _react.useState)(checked);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -52,7 +58,7 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, [checked]);
   const shouldDisable = () => disabled || onDenied.disabled;
   const getProps = () => {
-    if (!onChange || shouldDisable()) return null;
+    if (shouldDisable()) return null;
     const target = {
       checked: !isChecked,
       id,
@@ -61,26 +67,30 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
     return {
       onClick: () => {
-        onChange({
-          target
-        });
+        if (!shouldDisable() && !skeletonize) {
+          setIsChecked(!isChecked);
+          onChange?.({
+            target
+          });
+        }
       },
       onKeyDown: undefined,
       role: 'checkbox',
       tabIndex: -1
     };
   };
-  const renderInput = () => /*#__PURE__*/_react.default.createElement("div", _extends({}, getProps(), {
+  const renderInput = () => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-skeletonized": skeletonize,
     className: "checkbox-component",
-    "data-skeletonized": skeletonize
-  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", _extends({
     "data-testid": "checkbox-container",
     className: "inputcontent",
-    onClick: !shouldDisable() && !skeletonize ? () => setIsChecked(!isChecked) : undefined,
-    tabIndex: -1,
-    role: "checkbox",
-    "aria-checked": "false"
-  }, /*#__PURE__*/_react.default.createElement("input", {
+    "aria-checked": isChecked
+  }, getProps()), /*#__PURE__*/_react.default.createElement("input", {
     id: id || undefined,
     ref: r => {
       if (targetRef) targetRef(r);
@@ -98,14 +108,31 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_.Icon, {
     size: 12,
     name: "checkmark"
-  })), label && /*#__PURE__*/_react.default.createElement(_Label.default, {
-    label: label,
+  })), label && /*#__PURE__*/_react.default.createElement("div", {
+    className: "description"
+  }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
+    required: required,
+    disabled: shouldDisable(),
+    className: customClassForLabel,
     tooltip: tooltip,
     tooltipWidth: tooltipWidth,
-    tooltipPosition: tooltipPosition,
+    tooltipPosition: tooltipPosition
+  }), label, /*#__PURE__*/_react.default.createElement(_textContent.default, null), /*#__PURE__*/_react.default.createElement(_hint.default, {
     disabled: disabled,
-    hint: hint
-  })), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    visible: !!hint && hintPosition === 'below',
+    description: hint,
+    customClass: "hint"
+  }))), !!hint && hintPosition === 'onLabelRight' && !skeletonize && /*#__PURE__*/_react.default.createElement(_popover.default, {
+    theme: themePopover,
+    align: popoverAlign,
+    customClass: "-hint",
+    iconColor: "#03bde2",
+    style: {
+      margin: '0px 5px',
+      height: 'auto',
+      width: 20
+    }
+  }, hint)), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
     messages: errorMessages
   }));
   if (onDenied.unvisible) return null;

package/lib/checkbox/types.d.ts

@@ -29,6 +29,7 @@ interface ICheckBoxProps {
     children?: ReactElement;
     autofocus?: boolean;
     hint?: string;
+    hintPosition?: 'below' | 'onLabelRight';
     gridLayout?: string;
     permissionAttr?: PermissionAttr | PermissionAttr[];
     tooltip?: string;
@@ -38,6 +39,9 @@ interface ICheckBoxProps {
     targetRef?: (ref: HTMLInputElement | null) => void;
     targetSpanRef?: (ref: HTMLSpanElement | null) => void;
     errorMessages?: string[] | undefined;
+    customClassForLabel?: string;
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 
 export { ChangeEvent, ICheckBoxProps };