armtek-uikit-react 1.0.260 → 1.0.264

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

@@ -1,6 +1,12 @@
 import { TextFieldProps } from '../TextField/TextField';
-export type TextAreaProps = {} & TextFieldProps;
+export type TextAreaProps = {
+    minRows?: number;
+    maxRows?: number;
+} & TextFieldProps;
 declare const TextArea: import("react").ForwardRefExoticComponent<{
+    minRows?: number;
+    maxRows?: number;
+} & {
     label?: string;
     size?: Exclude<import("../../../types/theme").SizeType, "extraLarge" | "medium">;
     variant?: import("../../../types/theme").VariantType;
@@ -8,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

@@ -9,24 +9,32 @@ var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
 const TextArea = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _textareaRef$current, _textareaRef$current2;
   let {
     className,
+    style,
+    minRows = 3,
+    maxRows = 10,
+    rows,
     ...restProps
   } = props;
-  let [minHeight, setMinHeight] = (0, _react.useState)(0);
   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;
   }, []);
-  (0, _react.useEffect)(() => {
-    if (textareaRef.current && 'clientHeight' in textareaRef.current) setMinHeight(textareaRef.current.clientHeight);
-  }, [textareaRef]);
-  let textHeight = (((_textareaRef$current = textareaRef.current) == null ? void 0 : _textareaRef$current.scrollHeight) || 0) < minHeight ? minHeight : (_textareaRef$current2 = textareaRef.current) == null ? void 0 : _textareaRef$current2.scrollHeight;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
       ref: textareaRef,
       ...restProps,
+      rows: initialRows,
+      minRows: normalizedMinRows,
+      maxRows: maxRows,
       className: (0, _clsx.default)('arm-textarea', ['arm-textarea_size_' + restProps.size], className),
       multiline: true,
       classes: {
@@ -34,7 +42,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
         ...restProps.classes
       },
       style: {
-        height: textHeight + 'px'
+        ...style
       }
     })
   });

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,6 +54,9 @@ 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;

package/ui/Form/TextField/TextField.js

@@ -22,6 +22,7 @@ const TextField = exports.TextField = /*#__PURE__*/(0, _react.forwardRef)((props
     helperText,
     size = 'large',
     variant = 'solid',
+    startAdornment,
     endAdornment,
     className,
     classes,
@@ -54,6 +55,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 +96,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,
@@ -143,20 +148,62 @@ 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,
     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 +215,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 +228,7 @@ 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_small': size === 'small',
           'arm-textfield__label_error': error
         }),

package/ui/Icon/Mi.d.ts

@@ -3,4 +3,20 @@ import { TooltipProps } from '../../ui/Tooltip';
 export type MiProps = {
     tooltipProps?: Omit<TooltipProps, 'text' | 'children'>;
 } & IconProps;
-export declare const Mi: (props: MiProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Mi: import("react").ForwardRefExoticComponent<{
+    tooltipProps?: Omit<TooltipProps, "text" | "children">;
+} & {
+    icon: string;
+    variant?: import("../../types/theme").VariantType;
+    color?: import("../../types/theme").ColorType | import("../../types/theme").ColorStatusType;
+    size?: import("../../types/theme").SizeType;
+    theme?: import("../../types/theme").ThemeType;
+    fs?: number;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof {
+    icon: string;
+    variant?: import("../../types/theme").VariantType;
+    color?: import("../../types/theme").ColorType | import("../../types/theme").ColorStatusType;
+    size?: import("../../types/theme").SizeType;
+    theme?: import("../../types/theme").ThemeType;
+    fs?: number;
+}> & import("react").RefAttributes<HTMLSpanElement>>;

package/ui/Icon/Mi.js

@@ -5,8 +5,9 @@ exports.__esModule = true;
 exports.Mi = void 0;
 var _Icon = _interopRequireDefault(require("./Icon"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
-const Mi = props => {
+const Mi = exports.Mi = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     tooltipProps,
     title,
@@ -17,13 +18,14 @@ const Mi = props => {
       ...tooltipProps,
       text: title,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        ref: ref,
         variant: 'outlined',
         ...iconProps
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      ref: ref,
       variant: 'outlined',
       ...iconProps
     })
   });
-};
-exports.Mi = Mi;
+});

package/ui/Icon/Mis.d.ts

@@ -1,2 +1,2 @@
 import { MiProps } from './Mi';
-export declare const Mis: (props: Omit<MiProps, "variant">) => import("react/jsx-runtime").JSX.Element;
+export declare const Mis: import("react").ForwardRefExoticComponent<Omit<MiProps, "variant"> & import("react").RefAttributes<HTMLSpanElement>>;

package/ui/Icon/Mis.js

@@ -3,13 +3,14 @@
 exports.__esModule = true;
 exports.Mis = void 0;
 var _Mi = require("./Mi");
+var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
-const Mis = props => {
+const Mis = exports.Mis = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Mi.Mi, {
       ...props,
+      ref: ref,
       variant: 'contained'
     })
   });
-};
-exports.Mis = Mis;
+});

package/ui/Link/Link.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ElementType } from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactElement, RefAttributes } from 'react';
 import { ColorStatusType, ColorType, SizeType, ThemeType } from '../../types/theme';
 type LinkType = 'a';
 type OwnProps<T extends ElementType = LinkType> = {
@@ -11,5 +11,6 @@ type OwnProps<T extends ElementType = LinkType> = {
     disablestyles?: string;
 };
 export type LinkProps<T extends ElementType = LinkType> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
-declare const Link: <T extends ElementType = LinkType>(props: LinkProps<T>) => import("react/jsx-runtime").JSX.Element;
+type LinkComponent = <T extends ElementType = LinkType>(props: LinkProps<T> & RefAttributes<HTMLElement>) => ReactElement | null;
+declare const Link: LinkComponent;
 export default Link;

package/ui/Link/Link.js

@@ -3,9 +3,10 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
+var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _jsxRuntime = require("react/jsx-runtime");
-const Link = props => {
+const Link = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   let {
     border,
     children,
@@ -32,12 +33,13 @@ const Link = props => {
   } : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      ref: ref,
       ...restProps,
       ...polymorphProps,
       className: !disablestyles ? classNames : className,
       children: children
     })
   });
-};
+});
 var _default = exports.default = Link;
 module.exports = exports.default;

package/ui/Popper/Popper.d.ts

@@ -1,4 +1,4 @@
 import { PopperBaseProps } from './PopperBase';
 export type PopperProps = {} & PopperBaseProps;
-export declare const Popper: (props: PopperProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Popper: (props: PopperBaseProps & import("react").RefAttributes<HTMLDivElement>) => JSX.Element;
 export default Popper;

package/ui/Popper/Popper.js

@@ -4,17 +4,18 @@ exports.__esModule = true;
 exports.default = exports.Popper = void 0;
 var _reactDom = require("react-dom");
 var _PopperBase = require("./PopperBase");
+var _helpers = require("../../lib/helpers");
 var _jsxRuntime = require("react/jsx-runtime");
 //TODO TESTS
 
-const Popper = props => {
+const Popper = exports.Popper = (0, _helpers.fixedForwardRef)((props, ref) => {
   if (!props.open) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_PopperBase.PopperBase, {
+      ref: ref,
       ...props,
       children: props.children
     }), document.body)
   });
-};
-exports.Popper = Popper;
+});
 var _default = exports.default = Popper;

package/ui/Popper/PopperBase.d.ts

@@ -10,5 +10,5 @@ export type PopperBaseProps = {
     className?: string;
     placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 };
-export declare const PopperBase: (props: PopperBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopperBase: (props: PopperBaseProps & import("react").RefAttributes<HTMLDivElement>) => JSX.Element;
 export default PopperBase;

package/ui/Popper/PopperBase.js

@@ -7,17 +7,19 @@ exports.default = exports.PopperBase = void 0;
 var _react = require("react");
 var _core = require("@popperjs/core");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _helpers = require("../../lib/helpers");
 var _jsxRuntime = require("react/jsx-runtime");
-const PopperBase = props => {
+const PopperBase = exports.PopperBase = (0, _helpers.fixedForwardRef)((props, ref) => {
   const {
     anchorEl,
     children,
-    placement,
+    placement = 'top',
     className,
     anchorPosition,
     open
   } = props;
   const tooltipRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => tooltipRef.current, []);
   (0, _react.useEffect)(() => {
     let modifiers = [{
       name: 'offset',
@@ -54,6 +56,5 @@ const PopperBase = props => {
       children: children
     })
   });
-};
-exports.PopperBase = PopperBase;
+});
 var _default = exports.default = PopperBase;