linear-react-components-ui 1.1.24-rc.2 → 1.1.25-beta.10

package/lib/{BaseMask-0c14ef51.d.ts → BaseMask-78847f45.d.ts}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { T as TextFieldInputProps } from './index-3b70931d.js';
+import { T as TextFieldInputProps } from './index-02a27c19.js';
 import { FactoryOpts } from 'imask';
 
 interface MaskFieldProps extends TextFieldInputProps {

package/lib/{Cnpj-bde01dd0.d.ts → Cnpj-8366781f.d.ts}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { M as MaskFieldProps } from './BaseMask-0c14ef51.js';
+import { M as MaskFieldProps } from './BaseMask-78847f45.js';
 
 interface CnpjFieldProps extends MaskFieldProps {
     onValidate?: (errors: string[]) => void;

package/lib/{Cpf-3fa496ad.d.ts → Cpf-3dfd54eb.d.ts}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { M as MaskFieldProps } from './BaseMask-0c14ef51.js';
+import { M as MaskFieldProps } from './BaseMask-78847f45.js';
 
 interface CpfFieldProps extends MaskFieldProps {
     onValidate?: (errors: string[]) => void;

package/lib/{Phone-2bb0b397.d.ts → Phone-1962c0f2.d.ts}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { M as MaskFieldProps } from './BaseMask-0c14ef51.js';
+import { M as MaskFieldProps } from './BaseMask-78847f45.js';
 
 interface PhoneFieldProps extends MaskFieldProps {
     isCellphone?: boolean;

package/lib/{ZipCode-09460e18.d.ts → ZipCode-be9c5b3b.d.ts}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { M as MaskFieldProps } from './BaseMask-0c14ef51.js';
+import { M as MaskFieldProps } from './BaseMask-78847f45.js';
 
 declare const Input: React__default.ForwardRefExoticComponent<MaskFieldProps & React__default.RefAttributes<HTMLInputElement>>;
 

package/lib/assets/styles/button.scss

@@ -366,7 +366,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   border-color: transparent !important;
   transition: none;
 
-  > svg {
+  svg {
     opacity: 0;
     visibility: hidden;
   }

package/lib/assets/styles/calendar.scss

@@ -44,10 +44,10 @@ $border-radius-size: 5px;
       justify-content: center;
       background-color: transparent;
       font-weight: bold;
-      border: none;
+      border: 1px solid transparent;
 
       svg {
-        margin: 0;
+        margin: 0 !important;
       }
 
       &:hover {
@@ -110,7 +110,7 @@ $border-radius-size: 5px;
       width: 100%;
       padding: 0;
       font-size: 13px;
-      border: none;
+      border: 2px solid transparent;
       background-color: transparent;
 
       &.-nowday {

package/lib/assets/styles/datepicker2.scss

@@ -58,7 +58,7 @@ input::-webkit-inner-spin-button {
   .container {
     position: relative;
     width: 100%;
-    height: 32px;
+    height: 31px;
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -106,14 +106,18 @@ input::-webkit-inner-spin-button {
     .input {
       @extend %input-placeholder;
       @extend %component-fonts;
-      flex-grow: 1;
-      max-width: 100%;
+      flex: 1;
+      height: 100%;
+      width: 100%;
       padding: 6px;
       font-size: 0.875rem;
       text-indent: 0.375rem;
       line-height: 0.875rem;
       border: none;
       background-color: transparent;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       &[data-state-text-align=left] {
         text-align: left;
       }

package/lib/assets/styles/dialog.scss

@@ -96,7 +96,7 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
           }
         }
       }
-      .footer {
+      > .footer {
         bottom: 0px;
         background: #ffffff;
         padding: 10px 0 8px 8px;

package/lib/assets/styles/drawers.scss

@@ -1,9 +1,9 @@
 @import "colors.scss";
 @import "commons.scss";
 @import "effects.scss";
+
 .drawer-component {
   position: fixed;
-  z-index: 9998;
   overflow: auto;
   & .drawercontainer {
     font-family: 'Roboto', sans-serif;
@@ -155,5 +155,4 @@
   width: 100%;
   top: 0;
   left: 0;
-  z-index: 9997;
 }

package/lib/assets/styles/fieldset.scss

@@ -64,7 +64,7 @@
     background-color: $fieldset-default;
     text-transform: uppercase;
     border-radius: 0px 10px 0px 0px;
-    z-index: 9;
+    z-index: 0;
     display: flex;
     align-items: center;
     gap: 8px;

package/lib/assets/styles/gridlayout.scss

@@ -26,31 +26,32 @@ html {
   &.-withskeleton {
     margin-bottom: 10px;
   }
-}
 
-@media (min-width: 576px) {
-  .container {
-    max-width: 540px;
+  @media (min-width: 576px) {
+    >.container {
+      max-width: 540px;
+    }
   }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 720px;
+  
+  @media (min-width: 768px) {
+    >.container {
+      max-width: 720px;
+    }
   }
-}
-
-@media (min-width: 992px) {
-  .container {
-    max-width: 960px;
+  
+  @media (min-width: 992px) {
+    >.container {
+      max-width: 960px;
+    }
   }
-}
-
-@media (min-width: 1200px) {
-  .container {
-    max-width: 1140px;
+  
+  @media (min-width: 1200px) {
+    >.container {
+      max-width: 1140px;
+    }
   }
 }
+
 .container-fluid {
   width: 100%;
   padding-right: 15px;

package/lib/assets/styles/multiSelect.scss

@@ -58,23 +58,23 @@
   z-index: 9999;
 
   >.filtercontainer {
-    position: relative;
-    display: grid;
-    grid-template-columns: 1fr 20px;
+    display: flex;
+    align-items: center;
+    justify-content: start;
     border: 1px solid $component-border-color;
     margin: 4px;
 
     >.filterinput {
       border: 0;
+      flex: 1;
       font-size: 13px;
       text-indent: 4px;
       padding: 10px 5px;
     }
 
     >.filtericon {
-      position: absolute;
-      right: 5px;
-      top: 10px;
+      margin: 0px;
+      margin-right: 6px;
     }
   }
 

package/lib/assets/styles/periodpicker.scss

@@ -76,7 +76,7 @@
   display: flex;
   cursor: pointer;
   justify-content: stretch;
-  
+
   &:not(:last-child) {
     border-bottom: solid 1px $separator-background;
   }

package/lib/assets/styles/radio.scss

@@ -4,153 +4,180 @@
 $radio-button-checked-color: $component-selected-color;
 $radio-button-border-color: rgba(0, 0, 0, 0.54);
 $radio-button-size: 20px;
-$radio-button-checked-size: 10px; 
+$radio-button-checked-size: 10px;
 $radio-button-ripple-size: 15px;
 
+:root {
+  --radio-small: 12px;
+  --radio-medium: 16px;
+  --radio-large: 20px;
+  --radio-border-size: 1px;
+  --radio-checked-blank-size: calc(var(--radio-border-size) * 6);
+}
+
 @keyframes ripple {
   0% {
     box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0);
   }
-  50% { 
+
+  50% {
     box-shadow: 0px 0px 0px $radio-button-ripple-size rgba(0, 0, 0, 0.1);
   }
+
   100% {
     box-shadow: 0px 0px 0px $radio-button-ripple-size rgba(0, 0, 0, 0);
   }
 }
-.radio-component:disabled + .description:before {
-  background-color: #e5e5e5!important;
+
+.radio-button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.radio-component:disabled+.description:before {
+  background-color: #e5e5e5 !important;
 }
 
 .radio-component {
-  &:disabled + .description:before {
+  cursor: pointer;
+
+  &:disabled+.description:before {
     background-color: rgb(229, 229, 229);
   }
-  &:disabled + .description {
+
+  &:disabled+.description {
     color: $font-color-disabled;
   }
 }
 
-.radio-component:checked,
-.radio-component:not(:checked) {
-  position: absolute;
-  left: -9999px;
-}
-
-.radio-component:focus + label:before {
-	box-shadow: 0 0 2px 1px $radio-button-checked-color;
+.radio-component:focus+label:before {
+  box-shadow: 0 0 2px 1px $radio-button-checked-color;
 }
 
-.radio-component:checked + .description,
-.radio-component:not(:checked) + .description {
-  position: relative;
-  padding-left: 1.35rem;
+.radio-component:checked+.description,
+.radio-component:not(:checked)+.description {
+  text-indent: 0.375rem;
   cursor: pointer;
   line-height: 20px;
   display: inline-block;
-  color: $font-color-soft; 
+  color: $font-color-soft;
+
   &.-medium {
-    padding-left: 1.6rem;
     padding-top: 0.1rem;
   }
+
   &.-large {
-    padding-left: 1.875rem;
     padding-top: 0.2rem;
   }
 }
 
-.disabled + .description {
+.disabled+.description {
   @extend %component-menu-disabled;
 }
 
-.radio-component:checked + .description:before,
-.radio-component:not(:checked) + .description:before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  border: 1px solid $component-border-color;
+input.radio-component {
+  appearance: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 100%;
-  background: $default-color;
-}
+  width: var(--radio-medium);
+  height: var(--radio-medium);
+  background-color: $default-color;
+  border: 1px solid $component-border-color;
 
-.radio-button {
-  .-small:before{
-    width: 16px;
-    height: 16px;
-    top: 0.225rem;
-    left: 0.265rem;
-  }
-  .-medium:before{
-    width: 20px;
-    height: 20px;
-    top: 0.245rem;
-    left: 0.285rem;
-  }
-  .-large:before{
-    width: 24px;
-    height: 24px;
-    top: 0.245rem;
-    left: 0.285rem;
-  }
-
-  .-small:after{
-    width: 8px;
-    height: 8px;
-    top: 0.23rem;
-    left: 0.27rem;
-  }
-  .-medium:after{
-    width: 12px;
-    height: 12px;
-    top: 0.24rem;
-    left: 0.26rem;
-  }
-  .-large:after{
-    width: 16px;
-    height: 16px;
-    top: 0.245rem;
-    left: 0.285rem;
+  &:checked {
+    border-color: $radio-button-checked-color;
+
+    &::after {
+      content: '';
+      width: calc(var(--radio-medium) - var(--radio-checked-blank-size));
+      height: calc(var(--radio-medium) - var(--radio-checked-blank-size));
+      border-radius: 100%;
+      background-color: $radio-button-checked-color;
+    }
   }
-}
 
-.radio-component:checked + .description:after,
-.radio-component:not(:checked) + .description:after {
-  content: '';
-  background: $radio-button-checked-color;
-  position: absolute;
-  border-radius: 100%;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+  &:hover,
+  &:focus {
+    outline: 3px solid rgba(161, 13, 13, 0.35);
+    outline-offset: 0px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    cursor: default;
+    background-color: $input-disabled-bg-color;
+
+    &:checked {
+      border-color: $font-color-disabled;
+
+      &::after {
+        background-color: $font-color-disabled;
+      }
+    }
+  }
+
+  &[data-state-size="small"] {
+    width: var(--radio-small);
+    height: var(--radio-small);
+
+    &::after {
+      width: calc(var(--radio-small) - var(--radio-checked-blank-size));
+      height: calc(var(--radio-small) - var(--radio-checked-blank-size));
+    }
+  }
+
+  &[data-state-size="medium"] {
+    width: var(--radio-medium);
+    height: var(--radio-medium);
+
+    &::after {
+      width: calc(var(--radio-medium) - var(--radio-checked-blank-size));
+      height: calc(var(--radio-medium) - var(--radio-checked-blank-size));
+    }
+  }
+
+  &[data-state-size="large"] {
+    width: var(--radio-large);
+    height: var(--radio-large);
+
+    &::after {
+      width: calc(var(--radio-large) - var(--radio-checked-blank-size));
+      height: calc(var(--radio-large) - var(--radio-checked-blank-size));
+    }
+  }
 }
 
-.radio-component:not(:checked) + .description:after {
+.radio-component:not(:checked)+.description:after {
   opacity: 0;
   -webkit-transform: scale(0);
   transform: scale(0);
 }
 
-.radio-component:checked + .description:after {
+.radio-component:checked+.description:after {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
 }
 
 .radio-button.-skeletonized {
-  > .radio-component:not(:checked) +.description,
-  > .radio-component:checked +.description {
+
+  >.radio-component:not(:checked)+.description,
+  >.radio-component:checked+.description {
     cursor: initial;
   }
 
-  > .radio-component:checked + .description:before,
-  > .radio-component:checked +.description:after,
-  > .radio-component:not(:checked) + .description:before,
-  > .radio-component:not(:checked) +.description:after {
+  >.radio-component:checked+.description:before,
+  >.radio-component:checked+.description:after,
+  >.radio-component:not(:checked)+.description:before,
+  >.radio-component:not(:checked)+.description:after {
     @extend %skeleton-component;
     border-color: transparent;
   }
 
-  > .description > span {
+  >.description>span {
     @extend %skeleton-component;
   }
-}
+}

package/lib/assets/styles/selectfield.scss

@@ -62,7 +62,7 @@ input::-webkit-inner-spin-button {
   .container {
     position: relative;
     width: 100%;
-    min-height: 32px;
+    min-height: 31px;
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -116,14 +116,18 @@ input::-webkit-inner-spin-button {
       .input {
         @extend %input-placeholder;
         @extend %component-fonts;
-        flex-grow: 1;
-        max-width: 100%;
+        flex: 1;
+        width: 100%;
+        height: 100%;
         padding: 6px;
         font-size: 0.875rem;
         text-indent: 0.375rem;
         line-height: 0.875rem;
         border: none;
         background-color: transparent;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         &[data-state-text-align=left] {
           text-align: left;
         }

package/lib/assets/styles/split.scss

@@ -41,7 +41,7 @@
       overflow: hidden;
       text-align: center;
       font-size: 1px;
-      z-index: 1;
+      z-index: 0;
       background: #aaaaaa;
       visibility: visible;
       height: 50px;

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/assets/styles/tabs.scss

@@ -82,8 +82,6 @@ $dropdown-width: 38px;
   }
 
   .menu>.menuitem>.menubutton {
-    white-space: nowrap;
-    text-overflow: ellipsis;
     background: transparent;
     border: 0;
     width: 100%;
@@ -92,10 +90,16 @@ $dropdown-width: 38px;
     box-shadow: none !important;
 
     .button-container {
+      overflow: hidden;
       justify-content: flex-start;
       > svg {
         margin-right: 10px;
       }
+      .button-content {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
     }
   }
 

package/lib/assets/styles/textfield.scss

@@ -62,7 +62,7 @@ input[type="number"] {
   }
   .container {
     width: 100%;
-    height: 32px;
+    height: 31px;
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -108,14 +108,18 @@ input[type="number"] {
     .input {
       @extend %input-placeholder;
       @extend %component-fonts;
-      flex-grow: 1;
-      max-width: 100%;
+      flex: 1;
+      height: 100%;
+      width: 100%;
       padding: 6px;
       font-size: 0.875rem;
       text-indent: 0.375rem;
       line-height: 0.875rem;
       border: none;
       background-color: transparent;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       &[data-state-text-align="left"] {
         text-align: left;
       }

package/lib/assets/styles/tooltip.scss

@@ -1,6 +1,7 @@
 @import "colors.scss";
 
 .tooltip-component {
+  --arrow-position: 50%;
   font-family: 'Roboto', sans-serif;
   position: absolute;
   padding: 8px;
@@ -13,7 +14,7 @@
   z-index: 999999;
   pointer-events: none;
   max-width: 300px;
-  word-break: break-word;
+  word-break: break-word; 
   &.left::after {
     content: " ";
     position: absolute;
@@ -34,11 +35,11 @@
     border-style: solid;
     border-color: transparent rgba(black, 0.85) transparent transparent;
   }
-  &.top::after {
+  &.top::after {    
     content: " ";
     position: absolute;
     top: 100%;
-    left: 50%;
+    left: var(--arrow-position);
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
@@ -48,7 +49,7 @@
     content: " ";
     position: absolute;
     bottom: 100%;
-    left: 50%;
+    left: var(--arrow-position);
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;

package/lib/buttons/DefaultButton.js

@@ -67,7 +67,7 @@ const DefaultButton = _ref => {
   const refButton = (0, _react.useRef)(null);
   const disabledIconColor = 'rgb(193, 193, 193)';
   const disabledByPermission = onDenied.disabled;
-  const isDisabled = !!onDenied.disabled || disabled;
+  const isDisabled = !!onDenied.disabled || disabled || skeletonize;
   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 returnPadlockIcon = resultantStyle => /*#__PURE__*/_react.default.createElement(_icons.default, {
     name: "padlock",

package/lib/checkbox/index.js

@@ -45,7 +45,8 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     customClassForLabel,
     hintPosition = 'below',
     themePopover = 'light',
-    popoverAlign = 'left'
+    popoverAlign = 'left',
+    tabIndex = 0
   } = _ref;
   const [isChecked, setIsChecked] = (0, _react.useState)(checked);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -95,6 +96,7 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       if (targetRef) targetRef(r);
       inputRef.current = r;
     },
+    tabIndex: tabIndex,
     className: "input",
     type: "checkbox",
     autoFocus: autofocus,