react-magma-dom 4.14.0 → 4.14.1-next.0

package/dist/esm/index.js

@@ -18738,16 +18738,20 @@ var PasswordInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var theme = useContext(ThemeContext);
   var isInverse = useIsInverse(props.isInverse);
   var usesDefaultText = SHOW_PASSWORD_BUTTON_TEXT === i18n.password.shown.buttonText && HIDE_PASSWORD_BUTTON_TEXT === i18n.password.hidden.buttonText;
-  var buttonRef = useRef();
+  var buttonRef = useRef(null);
+  var _React$useState2 = useState(0),
+    buttonWidth = _React$useState2[0],
+    setButtonWidth = _React$useState2[1];
+  useLayoutEffect(function () {
+    if (buttonRef.current && !usesDefaultText) {
+      setButtonWidth(buttonRef.current.offsetWidth);
+    }
+  }, [usesDefaultText, passwordShown, SHOW_PASSWORD_BUTTON_TEXT, HIDE_PASSWORD_BUTTON_TEXT]);
   var getButtonWidth = function getButtonWidth() {
     if (usesDefaultText) {
-      if (inputSize === InputSize.large) {
-        return '64px';
-      }
-      return '54px';
-    } else {
-      var _buttonRef$current;
-      return (buttonRef == null || (_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.offsetWidth) + "px";
+      return inputSize === InputSize.large ? '64px' : '54px';
+    } else if (buttonWidth !== 0) {
+      return buttonWidth + "px";
     }
   };
   var getInputStyle = function getInputStyle() {
@@ -18762,9 +18766,9 @@ var PasswordInput = /*#__PURE__*/forwardRef(function (props, ref) {
         width: 'calc(100% - 64px)'
       };
     } else {
-      var _buttonRef$current2;
+      // right margin (3px) so input doesn't overflow
       return {
-        width: "calc(100% - " + (buttonRef == null || (_buttonRef$current2 = buttonRef.current) == null ? void 0 : _buttonRef$current2.offsetWidth) + "px)"
+        width: "calc(100% - " + (buttonWidth + 3) + "px)"
       };
     }
   };