@homecode/ui 4.20.0-beta-5 → 4.20.0-beta-7

package/dist/esm/src/components/Input/Input.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');
@@ -292,7 +301,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/src/components/Select/Select2.js

@@ -69,8 +69,10 @@ function Select2(props) {
         focusedItemId.current = items[index]?.id;
         setFocusedItemIndex(index);
     };
+    const [isSearchActive, setIsSearchActive] = useState(false);
     const handleSearchChange = (e, value) => {
         setSearchVal(value);
+        setIsSearchActive(true);
         onSearchChange?.(value);
         setNewItems(options.filter(filterOption));
     };
@@ -108,6 +110,8 @@ function Select2(props) {
     };
     const onPopupClose = () => {
         setIsOpen(false);
+        setSearchVal('');
+        setIsSearchActive(false);
         setItemFocus(0);
     };
     const onFocus = () => {
@@ -177,7 +181,7 @@ function Select2(props) {
     const renderTriggerInput = () => {
         return (jsx(Input, { ...triggerProps, ...inputProps, 
             // TODO: autoComplete
-            addonRight: triggerArrow, error: isErrorVisible, value: isFocused ? searchVal : selectedLabel, onChange: handleSearchChange, label: getFieldLabel(label) }));
+            addonRight: triggerArrow, error: isErrorVisible, value: isFocused && isSearchActive ? searchVal : selectedLabel, onChange: handleSearchChange, label: getFieldLabel(label) }));
     };
     const renderAdditionalLabel = () => {
         return null;

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-5",
+  "version": "4.20.0-beta-7",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",