react-magma-dom 4.15.1-next.1 → 4.15.1-next.2

package/dist/esm/index.js

@@ -18980,17 +18980,44 @@ var PasswordInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var _React$useState2 = useState(0),
     buttonWidth = _React$useState2[0],
     setButtonWidth = _React$useState2[1];
+  var _React$useState3 = useState(0),
+    maxButtonWidth = _React$useState3[0],
+    setMaxButtonWidth = _React$useState3[1];
   useLayoutEffect(function () {
-    if (buttonRef.current && !usesDefaultText) {
-      setButtonWidth(buttonRef.current.offsetWidth);
+    var button = buttonRef.current;
+    if (!button || usesDefaultText) {
+      return;
+    }
+    var container = button.closest('div');
+    var updateWidths = function updateWidths() {
+      if (container) {
+        setMaxButtonWidth(Math.floor(container.offsetWidth / 2));
+      }
+      setButtonWidth(button.offsetWidth);
+    };
+    updateWidths();
+    if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
+      var resizeObserver = new window.ResizeObserver(updateWidths);
+      resizeObserver.observe(button);
+      if (container) {
+        resizeObserver.observe(container);
+      }
+      return function () {
+        return resizeObserver.disconnect();
+      };
     }
   }, [usesDefaultText, passwordShown, SHOW_PASSWORD_BUTTON_TEXT, HIDE_PASSWORD_BUTTON_TEXT]);
   var getButtonWidth = function getButtonWidth() {
     if (usesDefaultText) {
       return inputSize === InputSize.large ? '64px' : '54px';
-    } else if (buttonWidth !== 0) {
-      return buttonWidth + "px";
     }
+    return undefined;
+  };
+  var getButtonMaxWidth = function getButtonMaxWidth() {
+    if (usesDefaultText) {
+      return getButtonWidth();
+    }
+    return maxButtonWidth > 0 ? maxButtonWidth + "px" : undefined;
   };
   var getInputStyle = function getInputStyle() {
     if (isPasswordMaskButtonHidden) {
@@ -19049,7 +19076,10 @@ var PasswordInput = /*#__PURE__*/forwardRef(function (props, ref) {
       margin: '0 3px 0 0',
       width: getButtonWidth(),
       minWidth: 0,
-      maxWidth: getButtonWidth()
+      maxWidth: getButtonMaxWidth(),
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
     },
     type: ButtonType.button,
     variant: ButtonVariant.link,