linear-react-components-ui 1.1.21-beta.4 → 1.1.21-beta.6

package/lib/inputs/mask/imaskHOC.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _imask = _interopRequireDefault(require("imask"));
+var helpers = _interopRequireWildcard(require("./helpers"));
+var _permissionValidations = require("../../permissionValidations");
+var _format_number = require("../number/format_number");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
+const IMaskHOC = ComposedComponent => {
+  const MaskedComponent = props => {
+    const {
+      permissionAttr,
+      skeletonize,
+      inputRef,
+      placeholderChar = '_',
+      lazy = false,
+      pattern = '',
+      radix = ' ',
+      thousandsSeparator = '',
+      mapToRadix = [],
+      scale = 2,
+      signed = false,
+      normalizeZeros = true,
+      padFractionalZeros = true,
+      mask,
+      commit = () => {},
+      parse,
+      format,
+      definitions,
+      groups,
+      min,
+      max,
+      dispatch,
+      value = '',
+      onChange,
+      isDateField = false,
+      autoCompleteMask
+    } = props;
+    const maskOptions = {
+      placeholderChar: placeholderChar === '' ? ' ' : placeholderChar,
+      lazy,
+      pattern,
+      radix,
+      thousandsSeparator,
+      mapToRadix,
+      scale,
+      signed,
+      normalizeZeros,
+      padFractionalZeros,
+      mask,
+      commit,
+      parse,
+      format,
+      definitions,
+      groups,
+      min,
+      max,
+      dispatch
+    };
+    const [onDenied] = (0, _react.useState)((0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr));
+    const elementRef = (0, _react.useRef)(null);
+    const maskRef = (0, _react.useRef)(null);
+    const {
+      hideContent,
+      unvisible,
+      disabled,
+      readOnly
+    } = onDenied;
+    const dontInitMask = hideContent || unvisible || skeletonize;
+    const disableCallbacks = disabled || readOnly;
+    const setValue = newValue => {
+      if (maskRef.current) {
+        if (props.unmask) maskRef.current.unmaskedValue = newValue.toString();
+        maskRef.current.value = String(newValue);
+      }
+    };
+    const onAccept = (0, _react.useCallback)(() => {
+      if (onChange && !disableCallbacks && maskRef.current) {
+        const {
+          unmaskedValue,
+          el
+        } = maskRef.current;
+        const name = el.name || el.input && el.input.name;
+        onChange({
+          target: {
+            value: unmaskedValue,
+            name
+          }
+        }, props.unmask ? unmaskedValue : maskRef.current.value);
+      }
+    }, [onChange]);
+    const onComplete = (0, _react.useCallback)(() => {
+      if (props.onComplete && !disableCallbacks && maskRef.current) {
+        const {
+          unmaskedValue,
+          el
+        } = maskRef.current;
+        const name = el.name || el.input && el.input.name;
+        props.onComplete({
+          target: {
+            value: unmaskedValue,
+            name
+          }
+        }, props.unmask ? unmaskedValue : maskRef.current.value);
+      }
+    }, [props.onComplete]);
+    const autoCompleteMaskValue = (0, _react.useCallback)(eventTargetValue => {
+      if (autoCompleteMask && eventTargetValue.length && maskRef.current && elementRef.current) {
+        const sizeMask = maskRef.current.mask.toString().replace(/\D+/g, '').length;
+        if (sizeMask > eventTargetValue.length) {
+          switch (autoCompleteMask) {
+            case 'left':
+              setValue(eventTargetValue.padStart(sizeMask, '0'));
+              break;
+            case 'right':
+              setValue(eventTargetValue.padEnd(sizeMask, '0'));
+              break;
+            default:
+              setValue(eventTargetValue);
+              break;
+          }
+        }
+      }
+    }, [autoCompleteMask, maskRef.current, elementRef.current]);
+    const getMask = () => {
+      const element = elementRef.current;
+      if (element) {
+        const maskCurrent = maskRef.current;
+        if (!maskCurrent) {
+          maskRef.current = (0, _imask.default)(element, maskOptions);
+          if (value && typeof value !== 'number' && value.trim() !== '' || value && typeof value === 'number') onAccept();
+          setValue(value);
+        } else {
+          maskCurrent.updateOptions(maskOptions);
+        }
+      }
+    };
+    const destroyMask = () => {
+      if (maskRef.current) {
+        maskRef.current.destroy();
+        maskRef.current = null;
+      }
+    };
+    (0, _react.useEffect)(() => {
+      if (props.handlerSetOnDenied) props.handlerSetOnDenied(onDenied);
+      if (!props.mask || dontInitMask) return;
+      getMask();
+    }, [maskOptions]);
+    (0, _react.useEffect)(() => {
+      if (!maskRef.current) return;
+      const maskCurrent = maskRef.current;
+      maskCurrent.on('accept', onAccept);
+      maskCurrent.on('complete', onComplete);
+
+      // eslint-disable-next-line consistent-return
+      return () => {
+        maskCurrent.off('accept', onAccept);
+        maskCurrent.off('complete', onComplete);
+      };
+    }, [onAccept, onComplete]);
+    (0, _react.useEffect)(() => {
+      if (maskOptions.mask && !dontInitMask) {
+        if (maskRef.current) {
+          const formattedValue = isDateField ? value : (0, _format_number.numberToPtBR)(value) || '';
+          setValue(formattedValue);
+        } else {
+          getMask();
+        }
+      } else if (!dontInitMask) {
+        destroyMask();
+        if (value && elementRef.current) elementRef.current.value = value;
+      }
+    }, [value, isDateField]);
+    (0, _react.useEffect)(() => destroyMask, []);
+    return /*#__PURE__*/_react.default.createElement(ComposedComponent, _extends({}, helpers.extractNonMaskProps(props, maskOptions), {
+      onDeniedActions: onDenied,
+      defaultValue: value,
+      onBlur: e => {
+        autoCompleteMaskValue(e.target.value);
+        if (props.onBlur) props.onBlur(e);
+      },
+      onChange: e => setValue(e.target.value),
+      inputRef: el => {
+        elementRef.current = el;
+        if (inputRef) {
+          if (typeof inputRef === 'object') inputRef.current = el;else inputRef(el);
+        }
+      }
+    }));
+  };
+  const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
+  MaskedComponent.displayName = "IMask(".concat(nestedComponentName, ")");
+  return MaskedComponent;
+};
+var _default = exports.default = IMaskHOC;

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

@@ -57,6 +57,7 @@ type IBaseMaskProps = {
     pattern?: string;
     mapToRadix?: string[];
     normalizeZeros?: boolean;
+    isDateTimeField?: boolean;
 };
 type ICnpjFieldProps = IBaseMaskProps & {
     value?: string;

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

@@ -12,6 +12,6 @@ import '../../drawer/types.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const BaseNumber: (props: IBaseNumberProps) => JSX.Element;
+declare const BaseNumber: ({ value, ...props }: IBaseNumberProps) => JSX.Element;
 
 export { BaseNumber as default };

package/lib/inputs/number/BaseNumber.js

@@ -7,8 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _BaseMask = _interopRequireDefault(require("../mask/BaseMask"));
 var _format_number = require("./format_number");
+const _excluded = ["value"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -54,13 +57,17 @@ const getEventProps = props => {
     }
   };
 };
-const BaseNumber = props => {
+const BaseNumber = _ref => {
+  let {
+      value
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const eventProps = _objectSpread(_objectSpread({}, props), {}, {
     returnFormattedValueOnBlur: true,
     returnFormattedValueOnKeyDown: true
   });
   return /*#__PURE__*/_react.default.createElement(_BaseMask.default, _extends({
-    value: (0, _format_number.numberToPtBR)(props.value),
+    value: (0, _format_number.numberToPtBR)(value ?? 0),
     thousandsSeparator: ".",
     radix: ",",
     mask: Number,

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

@@ -12,6 +12,6 @@ import '../../drawer/types.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const CurrencyField: (props: ICurrencyProps) => JSX.Element;
+declare const CurrencyField: ({ displayCurrencySymbol, ...props }: ICurrencyProps) => JSX.Element;
 
 export { CurrencyField as default };

package/lib/inputs/number/Currency.js

@@ -6,17 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _BaseNumber = _interopRequireDefault(require("./BaseNumber"));
+const _excluded = ["displayCurrencySymbol"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const CurrencyField = props => {
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const CurrencyField = _ref => {
+  let {
+      displayCurrencySymbol
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const {
     currencySymbol = 'R$'
   } = props;
-  const leftElements = props.displayCurrencySymbol ? /*#__PURE__*/_react.default.createElement("span", {
+  const leftElements = displayCurrencySymbol ? /*#__PURE__*/_react.default.createElement("span", {
     className: "currency-symbol"
   }, currencySymbol) : [];
-  return /*#__PURE__*/_react.default.createElement(_BaseNumber.default, _extends({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_BaseNumber.default, _extends({
     leftElements: leftElements
-  }));
+  }, props));
 };
 var _default = exports.default = CurrencyField;

package/lib/inputs/period/Dialog.d.ts

@@ -9,6 +9,6 @@ import '../../@types/Align.js';
 import '../../internals/types.js';
 import '../../@types/Position.js';
 
-declare const Dialog: ({ onOpenChange, children, dialogSize }: IDialogProps) => JSX.Element;
+declare const Dialog: ({ onOpenChange, handlerClose, children, dialogSize }: IDialogProps) => JSX.Element;
 
 export { Dialog as default };

package/lib/inputs/period/Dialog.js

@@ -10,16 +10,18 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Dialog = _ref => {
   let {
     onOpenChange,
+    handlerClose,
     children,
     dialogSize
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_base.default, {
+    closeOnOutsideClick: true,
+    closeOnEsc: true,
+    wrapperClassName: "",
     width: dialogSize.width,
     height: dialogSize.height,
     onOpenChange: onOpenChange,
-    closeOnOutsideClick: true,
-    closeOnEsc: true,
-    wrapperClassName: ""
+    handlerClose: () => handlerClose(false)
   }, children);
 };
 var _default = exports.default = Dialog;

package/lib/inputs/period/Dropdown.js

@@ -6,23 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _helper = _interopRequireDefault(require("./helper"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const body = document.getElementsByTagName('body')[0];
+const CALENDAR_MIN_WIDTH = 250;
 const Dropdown = props => {
+  const {
+    children,
+    dropdownRef,
+    containerRef,
+    inputDimensions
+  } = props;
   const elementRef = (0, _react.useRef)(document.createElement('div'));
+  const width = inputDimensions && inputDimensions.width || CALENDAR_MIN_WIDTH;
   (0, _react.useEffect)(() => {
     elementRef.current.className = 'datepicker-component';
-    elementRef.current.setAttribute('style', (0, _helper.default)(props));
-    body.appendChild(elementRef.current);
-    props.dropdownRef(elementRef.current);
+    elementRef.current.style.width = String(width).concat('px');
+    elementRef.current.style.top = String(inputDimensions?.bottom).concat('px');
+    containerRef.current?.appendChild(elementRef.current);
+    dropdownRef(elementRef.current);
     return () => {
-      body.removeChild(elementRef.current);
+      containerRef.current?.removeChild(elementRef.current);
     };
   }, []);
   (0, _react.useEffect)(() => {
-    elementRef.current.setAttribute('style', (0, _helper.default)(props));
+    elementRef.current.style.width = String(width).concat('px');
+    elementRef.current.style.top = String(props.inputDimensions?.bottom).concat('px');
   }, [props]);
-  return /*#__PURE__*/_reactDom.default.createPortal(props.children, elementRef.current);
+  return /*#__PURE__*/_reactDom.default.createPortal(children, elementRef.current);
 };
 var _default = exports.default = Dropdown;

package/lib/inputs/period/PeriodList.js

@@ -38,24 +38,15 @@ const PeriodList = _ref => {
     className: "dropdown-period"
   }, periodOptions.map(item => {
     const itemSelected = selected === item.id;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      role: "button",
+    return /*#__PURE__*/_react.default.createElement("button", {
+      key: String('item-').concat(item.id),
       tabIndex: -1,
-      onKeyDown: () => {},
-      key: `item-${item.id}`,
       className: (0, _helper.getDropdownItemCssClass)(itemSelected),
       onClick: () => {
         const dates = item.id !== 'custom' ? (0, _helper.CalcDatesByPeriod)(item.id) : null;
         handleOnSelect(item.id, dates);
       }
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      role: "button",
-      className: "menubutton",
-      tabIndex: -1,
-      onKeyPress: () => {}
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "label"
-    }, item.label)));
+    }, item.label);
   }));
 };
 var _default = exports.default = PeriodList;