linear-react-components-ui 1.1.22 → 1.1.23

package/lib/assets/styles/label.scss

@@ -36,7 +36,6 @@ $shadow-text-button: 0 1px 0 rgba(0,0,0,.1);
   &.-warning {
     background-color: $warning-color;
     color: $font-color-second;
-    border: 1px solid $warning-color;
     text-shadow: $shadow-text-button;
     &.-bordered {
       border: 1px solid $warning-color;
@@ -98,13 +97,16 @@ $shadow-text-button: 0 1px 0 rgba(0,0,0,.1);
 
 .label-component.-skeletonized {
   @extend %skeleton-component;
-  border-color: transparent;
 
   > svg {
     fill: transparent;
   }
 }
 
+.label-component.-skeletonized.-bordered {
+  border-color: transparent;
+}
+
 .lbl-container {
   width: auto;
   .label-component {

package/lib/assets/styles/select.scss

@@ -23,15 +23,15 @@
     }
   }
 
-  .selectwrapper>.multiselect {
+  .selectwrapper > .multiselect {
     flex-wrap: wrap;
 
-    >.textinput {
+    > .textinput {
       order: 1;
       display: inline-block;
     }
 
-    >.selecteditem {
+    > .selecteditem {
       background-color: #f2f9fc;
       border: 1px solid #c9e6f2;
       border-radius: 3px;
@@ -44,14 +44,18 @@
       float: left;
       margin: 2px;
       padding: 0px 8px 0px 5px;
-
+      &.-disabled {
+        @extend %component-disabled;
+        opacity: 0.7;
+        border: solid 1px $font-color-disabled;
+      }
       .close {
         all: unset;
       }
     }
   }
 
-  .selectwrapper>.multiselect>.selecteditem>.close {
+  .selectwrapper > .multiselect > .selecteditem > .close {
     cursor: pointer;
 
     &:after {
@@ -63,9 +67,9 @@
   }
 }
 
-.dropdown-component>.select-dropdown {
+.dropdown-component > .select-dropdown {
   animation: 0.5s ease-in 0s 1 slideDown;
-  background-color: #FFF;
+  background-color: #fff;
   border: $component-border-color;
   @extend %component-menu-dropdown;
   display: grid;
@@ -75,7 +79,7 @@
   overflow-x: hidden;
   margin-top: 2px;
 
-  >.filtercontainer {
+  > .filtercontainer {
     display: grid;
     grid-template-columns: 1fr 20px;
     align-items: center;
@@ -83,7 +87,7 @@
     margin: 4px;
   }
 
-  >.filtercontainer>.filterinput {
+  > .filtercontainer > .filterinput {
     border: 0;
     width: 100%;
     font-size: 13px;
@@ -91,7 +95,7 @@
     padding: 10px 5px;
   }
 
-  >.item {
+  > .item {
     margin: 0;
     padding: 6px 10px;
     display: flex;
@@ -132,21 +136,21 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      width: 100%
+      width: 100%;
     }
 
     .menubutton {
-      >.label {
+      > .label {
         flex-grow: 1;
       }
 
-      >.menuicon {
-        margin-right: 5px
+      > .menuicon {
+        margin-right: 5px;
       }
     }
   }
 
-  >.notfound {
+  > .notfound {
     text-indent: 10px;
     color: graytext;
     font-style: italic;

package/lib/buttons/DefaultButton.js

@@ -162,7 +162,10 @@ const DefaultButton = _ref => {
     },
     tabIndex: isDisabled ? -1 : tabIndex
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "button-container"
+    className: "button-container",
+    style: {
+      pointerEvents: 'none'
+    }
   }, !dropdown && getIcon(), content || label && /*#__PURE__*/_react.default.createElement("div", {
     className: "button-content"
   }, content, label || ''), dropdown && getIcon()), isLoading && /*#__PURE__*/_react.default.createElement("div", {

package/lib/drawer/Drawer.js

@@ -79,9 +79,10 @@ const BaseDrawer = _ref => {
     componentEl.appendChild(drawerContainerEl.current);
     drawerComponentEl.current = componentEl;
   };
-  const setDrawerOverlay = body => {
+  const setDrawerOverlay = (body, id) => {
     const drawerOverlay = document.createElement('div');
     drawerOverlay.className = 'drawer-overlay';
+    drawerOverlay.id = id;
     drawerOverlay.dataset.testid = 'drawer-overlay';
     body.appendChild(drawerOverlay);
   };
@@ -93,16 +94,19 @@ const BaseDrawer = _ref => {
   };
   (0, _react.useEffect)(() => {
     let body;
-    const randonId = Math.round(+new Date() / 1000);
+    const randomId = Math.round(+new Date() / 1000);
+    const overlayId = `overlay-${randomId}`;
     if (targetId === undefined) {
       body = document.getElementsByTagName('body')[0];
     } else {
       body = document.getElementById(targetId);
     }
-    if (body) setDrawerComponent(body, randonId);
-    if (overlay && !targetId && body) setDrawerOverlay(body);
+    if (body) setDrawerComponent(body, randomId);
+    if (overlay && body) {
+      setDrawerOverlay(body, overlayId);
+    }
     return () => {
-      const drawerOverlay = document.getElementsByClassName('drawer-overlay')[0];
+      const drawerOverlay = document.getElementById(overlayId);
       if (closeOnEsc) document.body.removeEventListener('keydown', closeDrawerOnEsc);
       if (targetId) {
         const drawerComponentTarget = document.getElementById(targetId);
@@ -110,7 +114,7 @@ const BaseDrawer = _ref => {
           drawerComponentTarget.removeChild(drawerComponentEl.current);
         }
       } else if (drawerComponentEl.current) document.body.removeChild(drawerComponentEl.current);
-      if (drawerOverlay && !targetId && body) body.removeChild(drawerOverlay);
+      if (drawerOverlay && body) body.removeChild(drawerOverlay);
     };
   }, []);
   (0, _react.useEffect)(() => {

package/lib/inputs/mask/BaseMask.js

@@ -34,7 +34,7 @@ const returnEventFormattedValue = (props, event) => {
     const value = props.defaultValue || '';
     return _objectSpread(_objectSpread({}, event), {}, {
       target: {
-        value: (0, _format_number.numberToEnUS)(value),
+        value: String((0, _format_number.numberToEnUS)(value)),
         name
       }
     });
@@ -119,10 +119,10 @@ const BaseMask = _ref => {
   const {
     ref,
     setValue,
-    setTypedValue,
+    setUnmaskedValue,
     maskRef
   } = (0, _reactImask.useIMask)(_objectSpread({}, maskOptions), {
-    defaultValue: defaultValue,
+    defaultValue,
     onAccept: (_, r) => {
       if (!disableCallbacks && onChange) {
         const event = {
@@ -151,10 +151,13 @@ const BaseMask = _ref => {
     }
   });
   (0, _react.useEffect)(() => {
-    if (typeof valueProp === 'number') {
-      if (String(valueProp).trim().length > 0) setTypedValue(valueProp);else setTypedValue(0);
+    if (mask === Number || typeof valueProp === 'number') {
+      const updatedUnmaskedValue = (0, _format_number.numberToEnUS)(String(valueProp));
+      if (!Number.isNaN(updatedUnmaskedValue)) setUnmaskedValue(String(updatedUnmaskedValue));
+      return;
     }
-    setValue((0, _format_number.numberToPtBR)(valueProp) ?? '');
+    const updatedValue = valueProp ? String(valueProp) : '';
+    setValue(updatedValue);
   }, [valueProp]);
   return /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({
     inputRef: r => {

package/lib/inputs/mask/helpers.js

@@ -30,7 +30,7 @@ const getMaskOptions = _ref => {
       pattern = '',
       radix = ' ',
       thousandsSeparator = '',
-      mapToRadix = [],
+      mapToRadix = ['.'],
       scale = 2,
       normalizeZeros = true,
       padFractionalZeros = true,

package/lib/inputs/number/BaseNumber.js

@@ -67,10 +67,11 @@ const BaseNumber = _ref => {
     returnFormattedValueOnKeyDown: true
   });
   return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({
-    value: (0, _format_number.numberToPtBR)(value ?? 0),
+    mask: Number,
+    value: value ?? 0,
     thousandsSeparator: ".",
     radix: ",",
-    mask: Number,
+    mapToRadix: ['.'],
     isNumeric: true
   }, props, getEventProps(eventProps)));
 };

package/lib/inputs/number/format_number.d.ts

@@ -1,5 +1,5 @@
 declare const numberToPtBR: (value?: string | number) => string | undefined;
-declare const numberToEnUS: (value: string) => string | number;
+declare const numberToEnUS: (value: string) => number;
 declare const formatOnlyNumbers: (value: string) => string;
 
 export { formatOnlyNumbers, numberToEnUS, numberToPtBR };

package/lib/inputs/number/format_number.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.numberToPtBR = exports.numberToEnUS = exports.formatOnlyNumbers = void 0;
+const ptBRRegex = /\b\d{1,3}(?:\.\d{3})*,\d+\b/;
 const numberToPtBR = value => {
   if (value !== undefined && typeof value === 'number') {
     return value.toLocaleString('pt-BR');
@@ -13,11 +14,12 @@ const numberToPtBR = value => {
 exports.numberToPtBR = numberToPtBR;
 const numberToEnUS = value => {
   let formattedNumber;
-  if (value) {
+  const isPTBR = ptBRRegex.test(value);
+  if (isPTBR) {
     formattedNumber = value.replaceAll('.', '').replaceAll(',', '.');
     return Number(formattedNumber);
   }
-  return value;
+  return Number(value);
 };
 exports.numberToEnUS = numberToEnUS;
 const formatOnlyNumbers = value => {

package/lib/inputs/number/types.d.ts

@@ -12,7 +12,7 @@ import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
 interface INumberFieldProps extends IMaskHOCProps {
-    value?: string;
+    value?: string | number;
     permissionAttr?: PermissionAttr;
     disabled?: boolean;
     hint?: string | string[];

package/lib/inputs/select/multiple/Selecteds.d.ts

@@ -8,6 +8,6 @@ import '../../../@types/Period.js';
 import '../../../internals/types.js';
 import '../../../@types/Position.js';
 
-declare const Selecteds: ({ currents, descriptionKey, idKey, handlerOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;
+declare const Selecteds: ({ currents, descriptionKey, idKey, disabled, handlerOnUnselect, }: ISelectedsMultipleProps) => JSX.Element;
 
 export { Selecteds as default };

package/lib/inputs/select/multiple/Selecteds.js

@@ -11,12 +11,14 @@ const Selecteds = _ref => {
     currents,
     descriptionKey,
     idKey,
+    disabled,
     handlerOnUnselect
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currents.map(selected => /*#__PURE__*/_react.default.createElement("div", {
-    className: "selecteditem",
+    className: `selecteditem ${disabled ? '-disabled' : ''}`,
     key: `selected-${selected[idKey]}`
   }, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("button", {
+    disabled: disabled,
     className: "close",
     tabIndex: -1,
     onClick: () => handlerOnUnselect(selected[idKey])

package/lib/inputs/select/multiple/index.js

@@ -33,7 +33,8 @@ const MultipleSelect = props => {
     customClassForLabel,
     customClassForWrapper,
     customClassForInputContent,
-    customClassForSideButtons
+    customClassForSideButtons,
+    disabled = false
   } = props;
   const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
   const [currents, setCurrents] = (0, _react.useState)([]);
@@ -172,7 +173,7 @@ const MultipleSelect = props => {
   const setOnDenied = denied => {
     setOnDeniedSelect(denied);
   };
-  const shouldDisable = () => props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
+  const shouldDisable = () => disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
   const shouldBeReadOnly = () => props.readOnly || onDenied && onDenied.readOnly;
   (0, _react.useEffect)(() => {
     window.addEventListener('resize', onScreenResize);

package/lib/inputs/select/simple/index.js

@@ -141,9 +141,6 @@ const SimpleSelect = props => {
     if (props.onBlur) {
       const event = getSelectEvent(selected);
       props.onBlur(event);
-      if (selected && opened) {
-        onSelect(selected);
-      }
       if (selected && descriptionKeyIsString && inputText !== selected[descriptionKey] || !descriptionKeyIsString && inputText !== descriptionKey(selected)) {
         setSelected(null);
         setInputText(inputText);
@@ -223,6 +220,9 @@ const SimpleSelect = props => {
       setSelected(newCurrent);
       if (descriptionKeyIsString) setInputText(newCurrent ? newCurrent[descriptionKey] : '');else setInputText(newCurrent ? descriptionKey(newCurrent) : '');
     }
+    if (dataSourceWithAllOptions.length === 0 && inputText) {
+      setInputText('');
+    }
   }, [dataSourceWithAllOptions.length, value]);
   (0, _react.useEffect)(() => {
     if (!_lodash.default.isEqual(dataCombo, dataSourceWithAllOptions)) {

package/lib/inputs/select/types.d.ts

@@ -103,6 +103,7 @@ interface IMultipleSelectProps extends Omit<ISimpleSelectProps, 'idKey' | 'value
     popoverAlign?: 'right' | 'left';
 }
 interface ISelectedsMultipleProps {
+    disabled?: boolean;
     idKey: string;
     descriptionKey: DescriptionKey;
     currents: DataCombo[];

package/lib/inputs/types.d.ts

@@ -50,7 +50,7 @@ interface IInputHOCProps {
 }
 interface IMaskHOCProps {
     label?: string;
-    value?: string;
+    value?: string | number;
     unmask?: boolean;
     name?: string;
     commit?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",
@@ -8,7 +8,7 @@
     "lib"
   ],
   "scripts": {
-    "lib": "babel src/lib/ -d lib/ --extensions \".js,.jsx,.ts,.tsx\" --ignore **/*.spec.tsx && babel src/lib/assets -d lib/assets --copy-files && npm run lib:types",
+    "lib": "rm -rf lib && babel src/lib/ -d lib/ --extensions \".js,.jsx,.ts,.tsx\" --ignore **/*.spec.tsx && babel src/lib/assets -d lib/assets --copy-files && npm run lib:types",
     "lib:types": "tsup --dts-only --dts --external react",
     "demo": "node scripts/start.js",
     "demo:prod": "webpack --config ./config/webpack.config.js --mode production",