@s-ui/react-atom-input - npm Package Compare versions

Comparing version 5.20.0 to 5.21.0-beta.0

lib/config.js

@@ -6,2 +6,4 @@ import cx from 'classnames';
 export var BASE = PREFIX + "-" + CATEGORY + COMPONENT;
+export var BASE_CLASS_ITEM = BASE + "-item";
+export var BASE_CLASS_AREA_FOCUSABLE = BASE + "-area-focusable";
 export var BASE_CLASS = BASE + "-input"; // Enums
@@ -48,3 +50,3 @@
       shape = _ref.shape;
-  return cx(BASE_CLASS, size && BASE_CLASS + "-size-" + size, charsSize && BASE_CLASS + "--charsSize", hideInput && BASE_CLASS + "--hidden", noBorder && BASE_CLASS + "--noBorder", readOnly && BASE_CLASS + "--readOnly", errorState && BASE_CLASS + "--" + INPUT_STATES.ERROR, errorState === false && BASE_CLASS + "--" + INPUT_STATES.SUCCESS, state && BASE_CLASS + "--" + state, shape && BASE_CLASS + "-shape-" + shape);
+  return cx(BASE_CLASS, size && BASE_CLASS + "-size-" + size, charsSize && BASE_CLASS + "--charsSize", hideInput && BASE_CLASS + "--hidden", noBorder && BASE_CLASS + "--noBorder", readOnly && BASE_CLASS + "--readOnly", errorState && BASE_CLASS + "--status-" + INPUT_STATES.ERROR, errorState === false && BASE_CLASS + "--status-" + INPUT_STATES.SUCCESS, state && BASE_CLASS + "--status-" + state, shape && BASE_CLASS + "-shape-" + shape);
 };

lib/index.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["type"];
+var _excluded = ["type", "shape", "size", "noBorder", "errorState", "state", "disabled", "readOnly"];
 import { forwardRef } from 'react';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import Input, { inputSizes, inputStates } from './Input/index.js';
-import Mask from './Mask/index.js';
-import Password from './Password/index.js';
-import { INPUT_SHAPES, TYPES } from './config.js';
+import Input from './Input/index.js';
+import { BASE, INPUT_SHAPES, INPUT_STATES, SIZES, TYPES } from './config.js';
 import { jsx as _jsx } from "react/jsx-runtime";
 var AtomInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var type = _ref.type,
+      shape = _ref.shape,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SIZES.MEDIUM : _ref$size,
+      noBorder = _ref.noBorder,
+      errorState = _ref.errorState,
+      state = _ref.state,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  switch (type) {
-    case 'sui-password':
-      return /*#__PURE__*/_jsx(Password, _extends({
-        ref: ref
-      }, props));
-
-    case 'mask':
-      return /*#__PURE__*/_jsx(Mask, _extends({
-        ref: ref
-      }, props));
-
-    default:
-      return /*#__PURE__*/_jsx(Input, _extends({
-        ref: ref
-      }, props, {
-        type: type
-      }));
-  }
+  return /*#__PURE__*/_jsx("span", {
+    className: cx(BASE, shape && BASE + "-shape-" + shape, size && BASE + "-size-" + size, noBorder && BASE + "-borderless", disabled && BASE + "--is-disabled", readOnly && BASE + "--is-read-only", errorState && BASE + "--status-" + INPUT_STATES.ERROR, errorState === false && BASE + "--status-" + INPUT_STATES.SUCCESS, state && BASE + "--status-" + state),
+    children: /*#__PURE__*/_jsx(Input, _extends({
+      ref: ref
+    }, _extends({
+      disabled: disabled,
+      readOnly: readOnly,
+      type: type,
+      noBorder: noBorder,
+      errorState: errorState,
+      state: state,
+      shape: shape,
+      size: size
+    }, props)))
+  });
 });
 AtomInput.displayName = 'AtomInput';
 export default AtomInput;
-export { inputSizes, inputStates, TYPES as inputTypes, INPUT_SHAPES as inputShapes };
+export { SIZES as inputSizes, INPUT_STATES as inputStates, TYPES as inputTypes, INPUT_SHAPES as inputShapes };

lib/Input/index.js

@@ -0,8 +1,16 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["button", "leftAddon", "rightAddon", "leftIcon", "rightIcon", "children", "onClickLeftIcon", "onClickRightIcon", "size"];
+
+var _componentType;
+
+var _excluded = ["type"],
+    _excluded2 = ["type"],
+    _excluded3 = ["type", "button", "leftAddon", "rightAddon", "leftIcon", "rightIcon", "children", "onClickLeftIcon", "onClickRightIcon", "size"];
 import { forwardRef } from 'react';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { SIZES } from '../config.js';
-import Input, { inputSizes, inputStates } from './Component/index.js';
+import { BASE_CLASS_AREA_FOCUSABLE, BASE_CLASS_ITEM, SIZES, TYPES } from '../config.js';
+import Mask from '../Mask/index.js';
+import Password from '../Password/index.js';
+import Input from './Component/index.js';
 import InputAddons from './Wrappers/Addons/InputAddons.js';
@@ -12,15 +20,43 @@ import InputButton from './Wrappers/Button/InputButton.js';
 import { jsx as _jsx } from "react/jsx-runtime";
-var BaseInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var button = _ref.button,
-      leftAddon = _ref.leftAddon,
-      rightAddon = _ref.rightAddon,
-      leftIcon = _ref.leftIcon,
-      rightIcon = _ref.rightIcon,
-      children = _ref.children,
-      onClickLeftIcon = _ref.onClickLeftIcon,
-      onClickRightIcon = _ref.onClickRightIcon,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? SIZES.MEDIUM : _ref$size,
-      inputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+var componentType = (_componentType = {
+  undefined: function undefined(_ref) {
+    var props = _extends({}, _ref);
 
+    return [Input, _extends({}, props)];
+  }
+}, _componentType[TYPES.SUI_PASSWORD] = function (_ref2) {
+  var type = _ref2.type,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return [Password, _extends({}, props)];
+}, _componentType[TYPES.MASK] = function (_ref3) {
+  var type = _ref3.type,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+
+  return [Mask, _extends({}, props)];
+}, _componentType);
+var BaseInput = /*#__PURE__*/forwardRef(function (_ref4, forwardedRef) {
+  var type = _ref4.type,
+      button = _ref4.button,
+      leftAddon = _ref4.leftAddon,
+      rightAddon = _ref4.rightAddon,
+      leftIcon = _ref4.leftIcon,
+      rightIcon = _ref4.rightIcon,
+      children = _ref4.children,
+      onClickLeftIcon = _ref4.onClickLeftIcon,
+      onClickRightIcon = _ref4.onClickRightIcon,
+      _ref4$size = _ref4.size,
+      size = _ref4$size === void 0 ? SIZES.MEDIUM : _ref4$size,
+      inputProps = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+
+  var _ref5 = componentType[type] ? componentType[type](_extends({
+    type: type,
+    size: size
+  }, inputProps)) : componentType[undefined](_extends({
+    type: type,
+    size: size
+  }, inputProps)),
+      Component = _ref5[0],
+      passedProps = _ref5[1];
+
   return /*#__PURE__*/_jsx(InputButton, {
@@ -33,13 +69,16 @@ button: button,
       size: size,
-      children: /*#__PURE__*/_jsx(InputIcons, {
-        leftIcon: leftIcon,
-        rightIcon: rightIcon,
-        onClickLeftIcon: onClickLeftIcon,
-        onClickRightIcon: onClickRightIcon,
-        children: /*#__PURE__*/_jsx(Input, _extends({
-          ref: forwardedRef
-        }, inputProps, {
-          size: size,
-          children: children
-        }))
+      children: /*#__PURE__*/_jsx("span", {
+        className: cx(BASE_CLASS_ITEM, BASE_CLASS_AREA_FOCUSABLE),
+        children: /*#__PURE__*/_jsx(InputIcons, {
+          leftIcon: leftIcon,
+          rightIcon: rightIcon,
+          onClickLeftIcon: onClickLeftIcon,
+          onClickRightIcon: onClickRightIcon,
+          children: /*#__PURE__*/_jsx(Component, _extends({
+            ref: forwardedRef
+          }, passedProps, {
+            size: size,
+            children: children
+          }))
+        })
       })
@@ -50,2 +89,2 @@ })
 export default BaseInput;
-export { inputSizes, inputStates, BaseInput };
+export { BaseInput };

lib/Input/Wrappers/Addons/config.js

 import cx from 'classnames';
-import { BASE } from '../../../config.js';
+import { BASE, BASE_CLASS_ITEM } from '../../../config.js';
 export var BASE_CLASS_ADDON = BASE + "--withAddon";
-export var BASE_CLASS_ADDON_WRAPPER = BASE_CLASS_ADDON + "Wrapper";
 export var ADDON_TYPES = {
@@ -11,3 +10,3 @@ LEFT: 'left',
   var type = _ref.type;
-  return cx(BASE_CLASS_ADDON, BASE_CLASS_ADDON + "--" + type);
+  return cx(BASE_CLASS_ITEM, BASE_CLASS_ADDON, BASE_CLASS_ADDON + "--" + type);
 };

lib/Input/Wrappers/Addons/InputAddons.js

@@ -1,6 +0,6 @@
-import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { INPUT_SHAPES, SIZES } from '../../../config.js';
-import { ADDON_TYPES, BASE_CLASS_ADDON_WRAPPER, getClassName } from './config.js';
+import { ADDON_TYPES, getClassName } from './config.js';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,4 +19,3 @@
 
-  return /*#__PURE__*/_jsxs("div", {
-    className: cx(BASE_CLASS_ADDON_WRAPPER, shape && BASE_CLASS_ADDON_WRAPPER + "-shape-" + shape, size && BASE_CLASS_ADDON_WRAPPER + "-size-" + size),
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [leftAddon && /*#__PURE__*/_jsx("span", {
@@ -23,0 +22,0 @@ className: getClassName({

lib/Input/Wrappers/Button/config.js

@@ -1,2 +0,3 @@
-import { BASE } from '../../../config.js';
+import { BASE, BASE_CLASS_ITEM } from '../../../config.js';
+export { BASE_CLASS_ITEM };
 export var BASE_CLASS_BUTTON = BASE + "--withButton";

lib/Input/Wrappers/Button/InputButton.js

@@ -0,4 +1,6 @@
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { BASE_CLASS_BUTTON } from './config.js';
+import { BASE_CLASS_BUTTON, BASE_CLASS_ITEM } from './config.js';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -14,9 +16,5 @@
 
-  return /*#__PURE__*/_jsxs("div", {
-    className: BASE_CLASS_BUTTON,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: BASE_CLASS_BUTTON + "-input",
-      children: children
-    }), /*#__PURE__*/_jsx("div", {
-      className: BASE_CLASS_BUTTON + "-button",
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [children, /*#__PURE__*/_jsx("span", {
+      className: cx(BASE_CLASS_ITEM, BASE_CLASS_BUTTON + "-button"),
       children: button
@@ -23,0 +21,0 @@ })]

lib/Input/Wrappers/Icons/config.js

@@ -1,2 +0,2 @@
-import { BASE } from '../../../config.js';
+import { BASE, BASE_CLASS_AREA_FOCUSABLE, BASE_CLASS_ITEM } from '../../../config.js';
 export var ICON_TYPES = {
@@ -6,8 +6,8 @@ LEFT: 'left',
 };
+export { BASE_CLASS_ITEM, BASE_CLASS_AREA_FOCUSABLE };
 export var BASE_CLASS_ICON = BASE + "--withIcon";
-export var BASE_CLASS_ICON_LEFT = BASE_CLASS_ICON + "--" + ICON_TYPES.LEFT;
-export var BASE_CLASS_ICON_RIGHT = BASE_CLASS_ICON + "--" + ICON_TYPES.RIGHT;
 export var BASE_CLASS_ICON_COMPONENT = BASE_CLASS_ICON + "-icon";
+export var BASE_CLASS_ICON_CONTENT_COMPONENT = BASE_CLASS_ICON_COMPONENT + "--content";
 export var BASE_CLASS_ICON_COMPONENT_HANDLER = BASE_CLASS_ICON_COMPONENT + "--withHandler";
 export var BASE_CLASS_ICON_COMPONENT_LEFT = BASE_CLASS_ICON_COMPONENT + "--" + ICON_TYPES.LEFT;
 export var BASE_CLASS_ICON_COMPONENT_RIGHT = BASE_CLASS_ICON_COMPONENT + "--" + ICON_TYPES.RIGHT;

lib/Input/Wrappers/Icons/InputIcons.js

 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { BASE_CLASS_ICON, BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_HANDLER, BASE_CLASS_ICON_COMPONENT_LEFT, BASE_CLASS_ICON_COMPONENT_RIGHT, BASE_CLASS_ICON_LEFT, BASE_CLASS_ICON_RIGHT } from './config.js';
+import { BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_HANDLER, BASE_CLASS_ICON_COMPONENT_LEFT, BASE_CLASS_ICON_COMPONENT_RIGHT, BASE_CLASS_ICON_CONTENT_COMPONENT } from './config.js';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var InputIcons = function InputIcons(_ref) {
-  var _cx, _cx2, _cx3;
+  var _cx, _cx2;
 
@@ -16,6 +17,2 @@ var leftIcon = _ref.leftIcon,
 
-  if (!(leftIcon || rightIcon)) {
-    return children;
-  }
-
   var handleLeftClick = function handleLeftClick(event) {
@@ -29,12 +26,17 @@ onClickLeftIcon && onClickLeftIcon(event);
 
-  return /*#__PURE__*/_jsxs("div", {
-    className: cx(BASE_CLASS_ICON, (_cx = {}, _cx[BASE_CLASS_ICON_LEFT] = leftIcon, _cx[BASE_CLASS_ICON_RIGHT] = rightIcon, _cx)),
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [leftIcon && /*#__PURE__*/_jsx("span", {
-      className: cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_LEFT, (_cx2 = {}, _cx2[BASE_CLASS_ICON_COMPONENT_HANDLER] = onClickLeftIcon, _cx2)),
+      className: cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_LEFT),
       onClick: handleLeftClick,
-      children: leftIcon
+      children: /*#__PURE__*/_jsx("span", {
+        className: cx(BASE_CLASS_ICON_CONTENT_COMPONENT, (_cx = {}, _cx[BASE_CLASS_ICON_COMPONENT_HANDLER] = onClickLeftIcon, _cx)),
+        children: leftIcon
+      })
     }), children, rightIcon && /*#__PURE__*/_jsx("span", {
-      className: cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_RIGHT, (_cx3 = {}, _cx3[BASE_CLASS_ICON_COMPONENT_HANDLER] = onClickRightIcon, _cx3)),
+      className: cx(BASE_CLASS_ICON_COMPONENT, BASE_CLASS_ICON_COMPONENT_RIGHT),
       onClick: handleRightClick,
-      children: rightIcon
+      children: /*#__PURE__*/_jsx("span", {
+        className: cx(BASE_CLASS_ICON_CONTENT_COMPONENT, (_cx2 = {}, _cx2[BASE_CLASS_ICON_COMPONENT_HANDLER] = onClickRightIcon, _cx2)),
+        children: rightIcon
+      })
     })]
@@ -41,0 +43,0 @@ });

lib/Mask/index.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["name", "onChange", "mask"];
-import { forwardRef, useEffect, useRef, useState } from 'react';
+var _excluded = ["name", "onChange", "onComplete", "mask", "value", "defaultValue"];
+import { forwardRef, useEffect } from 'react';
+import { useIMask } from 'react-imask';
 import PropTypes from 'prop-types';
-import Input from '../Input/index.js';
+import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs';
+import Input from '../Input/Component/index.js';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,38 +13,45 @@ var MaskInput = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       onChange = _ref.onChange,
-      maskOptions = _ref.mask,
+      _onComplete = _ref.onComplete,
+      mask = _ref.mask,
+      propValue = _ref.value,
+      defaultValue = _ref.defaultValue,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var _useState = useState(null),
-      mask = _useState[0],
-      setMask = _useState[1];
+  var _useIMask = useIMask(_extends({}, mask), {
+    onAccept: function onAccept(value, maskRef, event) {
+      for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+        args[_key - 3] = arguments[_key];
+      }
 
-  var refInput = useRef(null);
-  useEffect(function () {
-    return function () {
-      return mask && mask.destroy();
-    };
-  }, [mask]);
+      typeof onChange === 'function' && onChange(event, _extends({
+        value: value,
+        maskRef: maskRef
+      }, args));
+    },
+    onComplete: function onComplete(value, maskRef, event) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) {
+        args[_key2 - 3] = arguments[_key2];
+      }
 
-  var handleChange = function handleChange(ev, _ref2) {
-    var value = _ref2.value;
-    typeof onChange === 'function' && onChange(ev, {
-      value: value
-    });
-  };
+      typeof _onComplete === 'function' && _onComplete(event, _extends({
+        value: value,
+        maskRef: maskRef
+      }, args));
+    }
+  }),
+      refInput = _useIMask.ref,
+      _useIMask$value = _useIMask.value,
+      maskedValue = _useIMask$value === void 0 ? '' : _useIMask$value,
+      setValue = _useIMask.setValue;
 
-  var handleFocus = function handleFocus() {
-    if (!mask) {
-      import('imask').then(function (_ref3) {
-        var IMask = _ref3["default"];
-        setMask(new IMask(refInput.current, maskOptions));
-      });
+  useEffect(function () {
+    if (propValue !== maskedValue) {
+      setValue(propValue);
     }
-  };
-
+  }, [propValue, setValue, maskedValue]);
+  var ref = useMergeRefs(refInput, forwardedRef);
   return /*#__PURE__*/_jsx(Input, _extends({
-    ref: forwardedRef,
+    ref: ref,
     id: name,
-    reference: refInput,
-    onChange: handleChange,
-    onFocus: handleFocus
+    value: maskedValue
   }, props));
@@ -49,0 +58,0 @@ });

lib/Password/config.js

@@ -1,5 +0,6 @@
-import { BASE_CLASS } from '../config.js';
-export var BASE_CLASS_PASSWORD = BASE_CLASS + "-password";
+import { BASE, BASE_CLASS_ITEM } from '../config.js';
+export { BASE_CLASS_ITEM };
+export var BASE_CLASS_PASSWORD = BASE + "-password";
 export var BASE_CLASS_PASSWORD_TOGGLE_BUTTON = BASE_CLASS_PASSWORD + "--toggleButton";
 export var TEXT = 'text';
 export var PASSWORD = 'password';

lib/Password/index.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["onChange", "pwShowLabel", "pwHideLabel"];
+var _excluded = ["onChange", "pwShowLabel", "pwHideLabel", "value", "defaultValue"];
 import { forwardRef, useState } from 'react';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import Input from '../Input/index.js';
-import { BASE_CLASS_PASSWORD, BASE_CLASS_PASSWORD_TOGGLE_BUTTON, PASSWORD, TEXT } from './config.js';
+import useControlledState from '@s-ui/react-hooks/lib/useControlledState';
+import Input from '../Input/Component/index.js';
+import { BASE_CLASS_PASSWORD_TOGGLE_BUTTON, PASSWORD, TEXT } from './config.js';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,2 +19,5 @@ var Password = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       pwHideLabel = _ref$pwHideLabel === void 0 ? 'hide' : _ref$pwHideLabel,
+      value = _ref.value,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -23,5 +29,5 @@
 
-  var _useState2 = useState(''),
-      value = _useState2[0],
-      setValue = _useState2[1];
+  var _useControlledState = useControlledState(value, defaultValue),
+      innerValue = _useControlledState[0],
+      setInnerValue = _useControlledState[1];
 
@@ -35,3 +41,3 @@ var toggle = function toggle() {
     var value = _ref2.value;
-    setValue(value);
+    setInnerValue(value);
     typeof onChange === 'function' && onChange(ev, {
@@ -42,4 +48,3 @@ value: value
 
-  return /*#__PURE__*/_jsxs("div", {
-    className: BASE_CLASS_PASSWORD,
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Input, _extends({
@@ -49,7 +54,7 @@ ref: forwardedRef
       onChange: handleChange,
-      value: value,
+      value: innerValue,
       type: type
-    })), /*#__PURE__*/_jsx("div", {
+    })), /*#__PURE__*/_jsx("span", {
       onClick: toggle,
-      className: BASE_CLASS_PASSWORD_TOGGLE_BUTTON,
+      className: cx(BASE_CLASS_PASSWORD_TOGGLE_BUTTON),
       children: type === PASSWORD ? pwShowLabel : pwHideLabel
@@ -56,0 +61,0 @@ })]

package.json

 {
   "name": "@s-ui/react-atom-input",
-  "version": "5.20.0",
+  "version": "5.21.0-beta.0",
   "description": "",
@@ -14,3 +14,3 @@ "main": "lib/index.js",
     "@s-ui/react-primitive-polymorphic-element": "1",
-    "imask": "3.4.0"
+    "react-imask": "6.4.3"
   },
@@ -17,0 +17,0 @@ "peerDependencies": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42519

increased by6.39%

Lines of code

510

increased by12.83%

Worsened metrics

Number of package files

32

decreased by-3.03%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Addedreact-imask@6.4.3

• + Addedimask@6.6.3(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-imask@6.4.3(transitive)

• + Addedreact-is@16.13.1(transitive)

• - Removedimask@3.4.0

• - Removedimask@3.4.0(transitive)