armtek-uikit-react 1.0.265 → 1.0.267

package/ui/Form/Password/Password.d.ts

@@ -6,8 +6,12 @@ export declare const Password: import("react").ForwardRefExoticComponent<{
     errorTooltip?: string;
     success?: boolean;
     helperText?: string | import("react").ReactNode;
+    startAdornment?: string | import("react").ReactNode;
     endAdornment?: string | import("react").ReactNode;
     multiline?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
     focused?: boolean;
     editable?: boolean;
     classes?: Partial<{

package/ui/Form/TextArea/TextArea.d.ts

@@ -14,8 +14,12 @@ declare const TextArea: import("react").ForwardRefExoticComponent<{
     errorTooltip?: string;
     success?: boolean;
     helperText?: string | import("react").ReactNode;
+    startAdornment?: string | import("react").ReactNode;
     endAdornment?: string | import("react").ReactNode;
     multiline?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
     focused?: boolean;
     editable?: boolean;
     classes?: Partial<{

package/ui/Form/TextArea/TextArea.js

@@ -11,53 +11,30 @@ var _jsxRuntime = require("react/jsx-runtime");
 const TextArea = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   let {
     className,
-    minRows,
-    maxRows,
-    onInput,
     style,
+    minRows = 3,
+    maxRows = 10,
+    rows,
     ...restProps
   } = props;
   let textareaRef = (0, _react.useRef)(null);
+  const getRowsCount = value => {
+    if (typeof value !== 'number' || !Number.isFinite(value)) return undefined;
+    return Math.max(1, Math.floor(value));
+  };
+  const normalizedRows = getRowsCount(rows);
+  const normalizedMinRows = getRowsCount(minRows);
+  const initialRows = normalizedRows !== undefined ? normalizedRows : normalizedMinRows;
   (0, _react.useImperativeHandle)(ref, () => {
     return textareaRef.current;
   }, []);
-  const getRowsCount = rows => {
-    if (typeof rows !== 'number' || !Number.isFinite(rows)) return undefined;
-    return Math.max(1, Math.floor(rows));
-  };
-  const getHeightByRows = (rows, textarea) => {
-    const style = window.getComputedStyle(textarea);
-    const parsedLineHeight = parseFloat(style.lineHeight);
-    const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : 20;
-    const verticalPadding = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
-    const verticalBorders = (parseFloat(style.borderTopWidth) || 0) + (parseFloat(style.borderBottomWidth) || 0);
-    return lineHeight * rows + verticalPadding + verticalBorders;
-  };
-  const resizeTextarea = () => {
-    if (!textareaRef.current) return;
-    const textarea = textareaRef.current;
-    const minRowsValue = getRowsCount(minRows) || 1;
-    const maxRowsValue = getRowsCount(maxRows);
-    const resolvedMaxRows = maxRowsValue !== undefined ? Math.max(minRowsValue, maxRowsValue) : undefined;
-    const minHeight = getHeightByRows(minRowsValue, textarea);
-    const maxHeight = resolvedMaxRows !== undefined ? getHeightByRows(resolvedMaxRows, textarea) : undefined;
-    textarea.style.height = 'auto';
-    let nextHeight = Math.max(textarea.scrollHeight, minHeight);
-    if (maxHeight !== undefined) nextHeight = Math.min(nextHeight, maxHeight);
-    textarea.style.height = nextHeight + 'px';
-  };
-  (0, _react.useEffect)(() => {
-    resizeTextarea();
-  }, [minRows, maxRows, props.value, props.defaultValue, props.size]);
-  const handleInput = event => {
-    resizeTextarea();
-    if (onInput) onInput(event);
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
       ref: textareaRef,
       ...restProps,
-      onInput: handleInput,
+      rows: initialRows,
+      minRows: normalizedMinRows,
+      maxRows: maxRows,
       className: (0, _clsx.default)('arm-textarea', ['arm-textarea_size_' + restProps.size], className),
       multiline: true,
       classes: {

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

@@ -9,8 +9,12 @@ export type TextFieldProps = {
     errorTooltip?: string;
     success?: boolean;
     helperText?: string | ReactNode;
+    startAdornment?: string | ReactNode;
     endAdornment?: string | ReactNode;
     multiline?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
     focused?: boolean;
     editable?: boolean;
     classes?: Partial<Classes>;
@@ -24,8 +28,12 @@ export declare const TextField: import("react").ForwardRefExoticComponent<{
     errorTooltip?: string;
     success?: boolean;
     helperText?: string | ReactNode;
+    startAdornment?: string | ReactNode;
     endAdornment?: string | ReactNode;
     multiline?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
     focused?: boolean;
     editable?: boolean;
     classes?: Partial<Classes>;
@@ -46,9 +54,13 @@ export declare const TextFieldInput: import("react").ForwardRefExoticComponent<{
     size?: TextFieldProps["size"];
     variant?: TextFieldProps["variant"];
     multiline?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
     error?: boolean;
     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 {
@@ -22,6 +27,7 @@ const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props
     helperText,
     size = 'large',
     variant = 'solid',
+    startAdornment,
     endAdornment,
     className,
     classes,
@@ -30,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;
@@ -46,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);
@@ -54,6 +104,10 @@ const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props
     setFocused(false);
     if (inputProps.onBlur) inputProps.onBlur(e);
   };
+  let startContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Adornment.AdornmentContainer, {
+    className: 'arm-textfield__adornment arm-textfield__adornment_start',
+    children: startAdornment
+  });
   let endContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Adornment.AdornmentContainer, {
     className: 'arm-textfield__adornment',
     children: [endAdornment, error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
@@ -91,7 +145,7 @@ const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props
         error: error,
         success: success,
         className: classes == null ? void 0 : classes.root,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextFieldInput, {
+        children: [startAdornment && startContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(TextFieldInput, {
           WrapperProps: WrapperProps,
           wrapperClass: classes == null ? void 0 : classes.wrapper,
           className: classes == null ? void 0 : classes.input,
@@ -101,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,
@@ -143,20 +198,63 @@ const TextFieldContainer = props => {
 };
 exports.TextFieldContainer = TextFieldContainer;
 const TextFieldInput = exports.TextFieldInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _ref$current, _ref$current2;
+  var _inputElementRef$curr, _inputElementRef$curr2;
   let {
     Component = 'input',
     size,
     variant,
     multiline,
+    rows,
+    minRows,
+    maxRows,
     error,
     focused,
     label,
     wrapperClass,
     WrapperProps,
+    disableLabelTransition,
     className,
+    onInput,
     ...inputProps
   } = props;
+  const inputElementRef = (0, _react.useRef)(null);
+  const setInputRef = node => {
+    inputElementRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+  };
+  const getRowsCount = rows => {
+    if (typeof rows !== 'number' || !Number.isFinite(rows)) return undefined;
+    return Math.max(1, Math.floor(rows));
+  };
+  const getHeightByRows = (rows, textarea) => {
+    const style = window.getComputedStyle(textarea);
+    const parsedLineHeight = parseFloat(style.lineHeight);
+    const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : 20;
+    const verticalPadding = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+    const verticalBorders = (parseFloat(style.borderTopWidth) || 0) + (parseFloat(style.borderBottomWidth) || 0);
+    return lineHeight * rows + verticalPadding + verticalBorders;
+  };
+  const resizeTextarea = () => {
+    if (!multiline || !(inputElementRef.current instanceof HTMLTextAreaElement)) return;
+    const textarea = inputElementRef.current;
+    const minRowsValue = getRowsCount(minRows) || 1;
+    const maxRowsValue = getRowsCount(maxRows);
+    const resolvedMaxRows = maxRowsValue !== undefined ? Math.max(minRowsValue, maxRowsValue) : undefined;
+    const minHeight = getHeightByRows(minRowsValue, textarea);
+    const maxHeight = resolvedMaxRows !== undefined ? getHeightByRows(resolvedMaxRows, textarea) : undefined;
+    textarea.style.height = 'auto';
+    const hasValue = textarea.value.length > 0;
+    let nextHeight = hasValue ? Math.max(textarea.scrollHeight, minHeight) : minHeight;
+    if (maxHeight !== undefined) nextHeight = Math.min(nextHeight, maxHeight);
+    textarea.style.height = nextHeight + 'px';
+  };
+  (0, _react.useEffect)(() => {
+    resizeTextarea();
+  }, [multiline, minRows, maxRows, inputProps.value, inputProps.defaultValue, size]);
+  const handleInput = event => {
+    if (multiline) resizeTextarea();
+    if (onInput) onInput(event);
+  };
   const handleWheel = e => {
     if (inputProps.type === 'number' && e.target instanceof HTMLElement) e.target.blur();else if (props.onWheel) props.onWheel(e);
   };
@@ -168,8 +266,10 @@ const TextFieldInput = exports.TextFieldInput = /*#__PURE__*/(0, _react.forwardR
         'arm-textfield__wrapper_outlined': variant === 'outlined'
       }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
-        ref: ref,
+        ref: setInputRef,
         ...inputProps,
+        rows: multiline ? rows : undefined,
+        onInput: handleInput,
         onWheel: handleWheel,
         className: (0, _clsx.default)('arm-textfield__input', ['arm-textfield__input_size_' + size], ['arm-textfield__input_' + variant], {
           'arm-textfield__input_label': !!label,
@@ -179,7 +279,8 @@ const TextFieldInput = exports.TextFieldInput = /*#__PURE__*/(0, _react.forwardR
         }, className)
       }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: (0, _clsx.default)('arm-textfield__label', {
-          'arm-textfield__label_focused': focused || !!props.value || typeof ((_ref$current = ref.current) == null ? void 0 : _ref$current.value) === 'string' && !!((_ref$current2 = ref.current) != null && _ref$current2.value),
+          '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
         }),