armtek-uikit-react 1.0.266 → 1.0.267

package/ui/Form/TextField/TextField.d.ts

@@ -61,5 +61,6 @@ export declare const TextFieldInput: import("react").ForwardRefExoticComponent<{
     label?: string;
     wrapperClass?: string;
     WrapperProps?: ComponentPropsWithoutRef<"div">;
+    disableLabelTransition?: boolean;
 } & Omit<InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
 export default TextField;

package/ui/Form/TextField/TextField.js

@@ -12,6 +12,11 @@ var _Icon = require("../../Icon");
 var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const LABEL_TRANSITION_RESTORE_TIMEOUT = 100;
+const hasInputValue = value => {
+  if (value === undefined || value === null) return false;
+  return String(value).length > 0;
+};
 const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   var _inputRef$current;
   let {
@@ -31,8 +36,18 @@ const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props
     WrapperProps,
     ...inputProps
   } = props;
-  let [focused, setFocused] = (0, _react.useState)(!!props.defaultValue);
+  let [focused, setFocused] = (0, _react.useState)(hasInputValue(props.defaultValue) || hasInputValue(props.value));
+  let [disableLabelTransition, setDisableLabelTransition] = (0, _react.useState)(false);
+  const restoreLabelTransitionTimeoutRef = (0, _react.useRef)(null);
   const inputRef = (0, _react.useRef)(null);
+  const temporarilyDisableLabelTransition = () => {
+    setDisableLabelTransition(true);
+    if (restoreLabelTransitionTimeoutRef.current !== null) window.clearTimeout(restoreLabelTransitionTimeoutRef.current);
+    restoreLabelTransitionTimeoutRef.current = window.setTimeout(() => {
+      setDisableLabelTransition(false);
+      restoreLabelTransitionTimeoutRef.current = null;
+    }, LABEL_TRANSITION_RESTORE_TIMEOUT);
+  };
   const currentScrollHeight = (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.scrollHeight;
   (0, _react.useImperativeHandle)(ref, () => {
     return inputRef.current;
@@ -47,6 +62,40 @@ const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props
     // 	}
     // }
   }, [currentScrollHeight]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (restoreLabelTransitionTimeoutRef.current !== null) window.clearTimeout(restoreLabelTransitionTimeoutRef.current);
+    };
+  }, []);
+  (0, _react.useLayoutEffect)(() => {
+    var _valueDescriptor$enum;
+    const inputElement = inputRef.current;
+    if (!inputElement) return;
+    const prototype = inputElement instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+    const valueDescriptor = Object.getOwnPropertyDescriptor(prototype, 'value');
+    const syncFocusedState = () => {
+      setFocused(hasInputValue(inputElement.value));
+    };
+    syncFocusedState();
+    if (!(valueDescriptor != null && valueDescriptor.get) || !(valueDescriptor != null && valueDescriptor.set)) return;
+    Object.defineProperty(inputElement, 'value', {
+      configurable: true,
+      enumerable: (_valueDescriptor$enum = valueDescriptor.enumerable) != null ? _valueDescriptor$enum : true,
+      get() {
+        var _valueDescriptor$get;
+        return (_valueDescriptor$get = valueDescriptor.get) == null ? void 0 : _valueDescriptor$get.call(this);
+      },
+      set(nextValue) {
+        var _valueDescriptor$set;
+        (_valueDescriptor$set = valueDescriptor.set) == null || _valueDescriptor$set.call(this, nextValue);
+        temporarilyDisableLabelTransition();
+        syncFocusedState();
+      }
+    });
+    return () => {
+      Reflect.deleteProperty(inputElement, 'value');
+    };
+  }, [multiline]);
   const handleFocus = e => {
     setFocused(true);
     if (inputProps.onFocus) inputProps.onFocus(e);
@@ -106,6 +155,7 @@ const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props
           variant: variant,
           label: label,
           focused: realFocused,
+          disableLabelTransition: disableLabelTransition,
           error: error,
           multiline: multiline,
           ...inputProps,
@@ -162,6 +212,7 @@ const TextFieldInput = exports.TextFieldInput = /*#__PURE__*/(0, _react.forwardR
     label,
     wrapperClass,
     WrapperProps,
+    disableLabelTransition,
     className,
     onInput,
     ...inputProps
@@ -229,6 +280,7 @@ const TextFieldInput = exports.TextFieldInput = /*#__PURE__*/(0, _react.forwardR
       }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: (0, _clsx.default)('arm-textfield__label', {
           'arm-textfield__label_focused': focused || !!props.value || typeof ((_inputElementRef$curr = inputElementRef.current) == null ? void 0 : _inputElementRef$curr.value) === 'string' && !!((_inputElementRef$curr2 = inputElementRef.current) != null && _inputElementRef$curr2.value),
+          'arm-textfield__label_noTransition': disableLabelTransition,
           'arm-textfield__label_small': size === 'small',
           'arm-textfield__label_error': error
         }),