@homecode/ui 4.20.0-beta-2 → 4.20.0-beta-3

package/dist/esm/src/components/Input/Input.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect, createElement } from 'react';
+import { forwardRef, useRef, useState, useMemo, useEffect, createElement } from 'react';
 import cn from 'classnames';
 import omit from 'lodash.omit';
 import { Label } from '../Label/Label.js';
@@ -60,8 +60,9 @@ const TEXTAREA_SCROLL_TOP_OFFSET = {
     m: 40,
     l: 50,
 };
-const Input = (props) => {
+const Input = forwardRef((props, ref) => {
     const { type = 'text', size = 'm', variant = 'default', value, defaultValue = '', onChange, onFocus, onBlur, onClear, onInput, changeOnEnd, checkAutofill, hasClear, required, hideRequiredStar, disabled, error, label, placeholder, addonLeft, addonRight, forceLabelOnTop, scrollProps, step = 1, round, className, } = props;
+    const inputRef = useRef(null);
     const updateAutoComplete = () => {
         const form = inputRef.current?.closest('form');
         const val = form?.getAttribute('autocomplete');
@@ -76,7 +77,6 @@ const Input = (props) => {
         elem.selectionStart = cursorPos.current;
         elem.selectionEnd = cursorPos.current;
     };
-    const inputRef = useRef(null);
     const isFocusedRef = useRef(false);
     const [isFocused, _setIsFocused] = useState(false);
     const setIsFocused = (val) => {
@@ -271,7 +271,7 @@ const Input = (props) => {
     useEffect(() => {
         document.addEventListener('keydown', onDocKeyUp);
         if (isTextArea) {
-            inputRef.current.addEventListener('paste', onTextareaPaste);
+            inputRef.current?.addEventListener('paste', onTextareaPaste);
         }
         return () => {
             document.removeEventListener('keydown', onDocKeyUp);
@@ -293,6 +293,6 @@ const Input = (props) => {
     const Control = isTextArea ? 'span' : 'input';
     const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, round && S.round, className);
     return (jsxs("div", { className: classes, title: String(value), children: [jsxs("label", { className: S.main, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), renderAddon('left'), wrapControl(jsxs(Fragment, { children: [createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: inputRef, key: "control" }), isTextArea && controlProps.placeholder && !controlProps.value && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder }))] })), isNumber && (jsxs("div", { className: S.numberArrows, children: [jsx(Button, { variant: "clear", onClick: () => onNumberWheel(1), tabIndex: -1, children: jsx(Icon, { type: "chevronUp", size: size }) }), jsx(Button, { variant: "clear", onClick: () => onNumberWheel(-1), tabIndex: -1, children: jsx(Icon, { type: "chevronDown", size: size }) })] })), jsx(Label, { className: cn(S.label, addonRight && S.hasAddonRight), size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: onLabelClipPathChange, children: label }, "label"), renderAddon('right'), required && !hideRequiredStar && (jsx(RequiredStar, { size: size }, "required-star"))] }, "main"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, onClick: onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));
-};
+});
 
 export { Input };

package/dist/esm/src/components/InputFile/InputFile.js

@@ -19,16 +19,16 @@ import '../Spinner/Spinner.styl.js';
 import '../Button/Button.styl.js';
 import '../ButtonGroup/ButtonGroup.styl.js';
 import '../Calendar/Calendar.styl.js';
-import 'lodash.omit';
-import '../RequiredStar/RequiredStar.styl.js';
-import 'nanoid';
-import '../Input/Input.styl.js';
+import '../Input/Input.js';
 import '../../tools/dom.js';
+import 'nanoid';
 import '../../tools/queryParams.js';
 import '../Portal/Portal.js';
 import '../Paranja/Paranja.styl.js';
 import '../Popup/Popup.styl.js';
+import '../RequiredStar/RequiredStar.styl.js';
 import '../Select/Select.styl.js';
+import 'lodash.omit';
 import '../Checkbox/Checkbox.styl.js';
 import '../Container/Container.styl.js';
 import '../DatePicker/DatePicker.styl.js';

package/dist/esm/types/src/components/Input/Input.d.ts

@@ -1,3 +1,23 @@
 import * as T from './Input.types';
 export type InputProps = T.Props;
-export declare const Input: (props: T.Props) => JSX.Element;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange"> & Omit<T.ControlProps, "onChange" | "ref"> & import("../../types").FormControl<T.Value, HTMLInputElement> & {
+    name?: string;
+    step?: number;
+    size?: import("../../types").Size;
+    label?: string;
+    variant?: import("../../types").Variant;
+    round?: boolean;
+    hideRequiredStar?: boolean;
+    forceLabelOnTop?: boolean;
+    error?: string | boolean;
+    hasClear?: boolean;
+    changeOnEnd?: boolean;
+    addonLeft?: import("react").ReactNode;
+    addonLeftClassName?: string;
+    addonRight?: import("react").ReactNode;
+    addonRightClassName?: string;
+    onClear?: () => void;
+    controlProps?: T.ControlProps & import("../../types").ComponentType;
+    checkAutofill?: boolean;
+    scrollProps?: Partial<import("../Scroll/Scroll.types").Props>;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.20.0-beta-2",
+  "version": "4.20.0-beta-3",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",
@@ -39,6 +39,12 @@
   "module": "dist/esm",
   "types": "dist/esm/types/index.d.ts",
   "type": "module",
+  "bugs": {
+    "url": "https://github.com/apostololeg/uilib/issues"
+  },
+  "directories": {
+    "dist": "./dist"
+  },
   "dependencies": {
     "@homecode/ui": "^4.17.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
@@ -63,11 +69,10 @@
     "svgo": "^3.0.2",
     "timen": "^0.1.0"
   },
-  "bugs": {
-    "url": "https://github.com/apostololeg/uilib/issues"
-  },
-  "directories": {
-    "dist": "./dist"
+  "peerDependencies": {
+    "justorm": ">=3.0.0-beta-24",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",