@homecode/ui 4.20.0-beta-6 → 4.20.0-beta-8

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

@@ -1,7 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useMemo, useEffect, createElement } from 'react';
 import cn from 'classnames';
-import omit from 'lodash.omit';
 import { Label } from '../Label/Label.js';
 import { RequiredStar } from '../RequiredStar/RequiredStar.js';
 import { AssistiveText } from '../AssistiveText/AssistiveText.js';
@@ -26,6 +25,7 @@ import '../Paranja/Paranja.styl.js';
 import '../Popup/Popup.styl.js';
 import '../Select/Select.styl.js';
 import 'justorm/react';
+import 'lodash.omit';
 import '../Checkbox/Checkbox.styl.js';
 import '../Container/Container.styl.js';
 import '../DatePicker/DatePicker.styl.js';
@@ -61,8 +61,17 @@ const TEXTAREA_SCROLL_TOP_OFFSET = {
     l: 50,
 };
 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 setRef = (element) => {
+        inputRef.current = element;
+        if (typeof ref === 'function') {
+            ref(element);
+        }
+        else if (ref) {
+            ref.current = element;
+        }
+    };
+    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 updateAutoComplete = () => {
         const form = inputRef.current?.closest('form');
         const val = form?.getAttribute('autocomplete');
@@ -202,23 +211,11 @@ const Input = forwardRef((props, ref) => {
     };
     const controlProps = useMemo(() => {
         const controlProps = {
-            ...omit(props, [
-                'className',
-                'clear',
-                'onClear',
-                'hasClear',
-                'placeholder',
-                'hideRequiredStar',
-                'size',
-                'error',
-                'checkAutofill',
-                'addonLeft',
-                'addonRight',
-                'forceLabelOnTop',
-                'changeOnEnd',
-                'scrollProps',
-            ]),
+            type,
             value: inputValue,
+            step,
+            required,
+            disabled,
             ...props.controlProps,
             onChange: handleChange,
             onFocus: handleFocus,
@@ -239,7 +236,27 @@ const Input = forwardRef((props, ref) => {
         if (controlProps.value === undefined)
             controlProps.value = ' ';
         return controlProps;
-    }, [value, isLabelOnTop, inputValue]);
+    }, [
+        type,
+        size,
+        variant,
+        inputValue,
+        defaultValue,
+        step,
+        required,
+        disabled,
+        props.controlProps,
+        handleChange,
+        onFocus,
+        onBlur,
+        isTextArea,
+        onTextAreaInput,
+        placeholder,
+        label,
+        isLabelOnTop,
+        autoComplete,
+        uid,
+    ]);
     const wrapControl = control => {
         if (isTextArea) {
             const { size } = props;
@@ -292,7 +309,9 @@ const Input = forwardRef((props, ref) => {
     }, []);
     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"))] }));
+    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: setRef, 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/Select/Select.js

@@ -28,6 +28,7 @@ class Select extends Component {
     scrollInnerElem;
     onScrollInnerRef = elem => (this.scrollInnerElem = elem);
     focusedElem;
+    selectedElem;
     items = [];
     maxIndex = -1;
     isFirstSelectedMeet = false;
@@ -157,6 +158,9 @@ class Select extends Component {
             }
         }
     };
+    onSelectedElemRef = elem => {
+        this.selectedElem = elem;
+    };
     onDocumentClick = e => {
         if (!this.isClickedInside(e.target)) {
             this.store.isOpen = false;
@@ -524,8 +528,8 @@ class Select extends Component {
             onPointerUp: () => this.onItemToggle(id),
             onPointerEnter: () => this.onOptionHover(id),
         };
-        if (isFocused || (isSelected && !this.onFocusedElemRef))
-            // @ts-ignore
+        // @ts-ignore
+        if (isFocused || isSelected)
             props.ref = this.onFocusedElemRef;
         if (isIndeterminate || (isSelected && !this.isFirstSelectedMeet)) {
             this.isFirstSelectedMeet = true;
@@ -587,7 +591,7 @@ class Select extends Component {
         const { className, popupProps, size, error, blur, disabled } = this.props;
         const { isOpen, isFocused } = this.store;
         const classes = cn(S.root, className, S[`size-${size}`]);
-        return (jsxs(Fragment, { children: [jsx(Popup, { className: classes, direction: "bottom", size: size, focusControl: true, hoverControl: isFocused, blur: blur, isOpen: isOpen, disabled: disabled, ...popupProps, onOpen: this.onPopupOpen, onClose: this.onPopupClose, trigger: this.renderTrigger(), triggerProps: {
+        return (jsxs(Fragment, { children: [jsx(Popup, { className: classes, direction: "bottom", size: size, focusControl: true, hoverControl: isFocused, blur: blur, isOpen: isOpen, disabled: disabled, ...popupProps, onOpen: this.onPopupOpen, onAfterClose: this.onPopupClose, trigger: this.renderTrigger(), triggerProps: {
                         onFocus: this.onFocus,
                         onBlur: this.onBlur,
                     }, content: this.renderOptionsList() }), this.isErrorVisible() && (jsx(AssistiveText, { variant: "danger", size: size, children: error }))] }));

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

@@ -4,12 +4,33 @@ import { Component, ReactNode } from 'react';
 export declare const SelectHelpers: typeof H;
 export declare class Select extends Component<T.Props, T.State> {
     store: any;
-    inputRef: import("react").RefObject<(props: import("../Input/Input.types").Props) => JSX.Element>;
+    inputRef: import("react").RefObject<import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange"> & Omit<import("../Input/Input.types").ControlProps, "onChange" | "ref"> & import("../../types").FormControl<import("../Input/Input.types").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?: ReactNode;
+        addonLeftClassName?: string;
+        addonRight?: ReactNode;
+        addonRightClassName?: string;
+        onClear?: () => void;
+        controlProps?: import("../Input/Input.types").ControlProps & import("../../types").ComponentType;
+        checkAutofill?: boolean;
+        scrollProps?: Partial<import("../Scroll/Scroll.types").Props>;
+    } & import("react").RefAttributes<HTMLInputElement>>>;
     triggerInputRef: import("react").RefObject<HTMLDivElement>;
     contentRef: import("react").RefObject<HTMLDivElement>;
     scrollInnerElem: HTMLDivElement;
     onScrollInnerRef: (elem: any) => any;
     focusedElem: HTMLDivElement;
+    selectedElem: HTMLDivElement;
     items: any[];
     maxIndex: number;
     isFirstSelectedMeet: boolean;
@@ -35,6 +56,7 @@ export declare class Select extends Component<T.Props, T.State> {
     getDefaultSelected(): any;
     isClickedInside: (elem: any) => any;
     onFocusedElemRef: (elem: any) => void;
+    onSelectedElemRef: (elem: any) => void;
     onDocumentClick: (e: any) => void;
     onDocumentKeyDown: (e: any) => void;
     onDocumentKeyUp: (e: any) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.20.0-beta-6",
+  "version": "4.20.0-beta-8",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",