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

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

@@ -62,7 +62,6 @@ function Autocomplete(props) {
     const [searchValue, setSearchValue] = useState(value);
     const [options, setOptions] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
     const currentRequest = useRef('');
     // @ts-ignore
     const inputRef = useRef(null);
@@ -124,17 +123,11 @@ function Autocomplete(props) {
     const optionsList = useMemo(() => {
         if (!options.length)
             return null;
-        return (jsx(Menu, { className: S.options, size: size, children: options.map((option, index) => (jsx(Menu.Item, { focused: focusedIndex === index, className: S.option, onClick: () => handleSelect(option.label), onMouseEnter: () => setFocusedIndex(index), children: option.label }, option.id))) }));
+        return (jsx(Menu, { className: S.options, size: size, offset: { y: { before: 20, after: 20 } }, children: options.map((option, index) => (jsx(Menu.Item, { focused: focusedIndex === index, className: S.option, onClick: () => handleSelect(option.label), onMouseEnter: () => setFocusedIndex(index), children: option.label }, option.id))) }));
     }, [options, focusedIndex]);
-    return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, size: size, ...popupProps, trigger: jsxs("div", { className: inputWrapperClassName, children: [jsx(Input, { ref: inputRef, 
+    return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, size: size, direction: "bottom", ...popupProps, trigger: jsxs("div", { className: inputWrapperClassName, children: [jsx(Input, { ref: inputRef, 
                     // @ts-ignore
-                    size: size, ...inputProps, value: searchValue, onChange: handleInputChange, className: inputProps.className, onFocus: e => {
-                        setIsFocused(true);
-                        inputProps.onFocus?.(e);
-                    }, onBlur: e => {
-                        setIsFocused(false);
-                        inputProps.onBlur?.(e);
-                    } }), isLoading && jsx(Shimmer, { className: S.shimmer, size: size })] }), content: optionsList, contentProps: {
+                    size: size, ...inputProps, value: searchValue, onChange: handleInputChange, className: inputProps.className }), isLoading && (jsx(Shimmer, { className: S.shimmer, size: size, round: inputProps?.round }))] }), content: optionsList, contentProps: {
             className: S.popupContent,
         } }));
 }

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/src/components/Select/Select2.js

@@ -17,7 +17,7 @@ import useEvent from '../../hooks/useEvent.js';
 import S from './Select.styl.js';
 
 function Select2(props) {
-    const { className, value, onChange, onSearchChange, inputProps, popupProps, size = 'm', optionClassName, additionalOptions = [], options, variant, label, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, } = props;
+    const { className, value, onChange, onSearchChange, inputProps, popupProps, size = 'm', round, optionClassName, additionalOptions = [], options, variant, label, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, } = props;
     const isMultiple$1 = isMultiple(value);
     const closeOnSelect = props.closeOnSelect ?? !isMultiple$1;
     const contentRef = useRef(null);
@@ -46,9 +46,10 @@ function Select2(props) {
     const triggerProps = useMemo(() => ({
         label,
         size,
+        round,
         variant,
         ...props.triggerProps,
-    }), [props.triggerProps, label, size, variant]);
+    }), [props.triggerProps, label, size, round, variant]);
     // Simplified isSelected check
     const isSelected = (id) => 
     // @ts-ignore

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

@@ -2,6 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import S from './Shimmer.styl.js';
 import cn from 'classnames';
 
-const Shimmer = ({ className, size = 'm' }) => (jsx("div", { className: cn(S.root, className, S[`size-${size}`]), children: jsx("div", { className: S.inner }) }));
+const Shimmer = ({ className, size = 'm', round = false, }) => (jsx("div", { className: cn(S.root, className, S[`size-${size}`], round && S.round), children: jsx("div", { className: S.inner }) }));
 
 export { Shimmer };

package/dist/esm/src/components/Shimmer/Shimmer.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Shimmer_root__XaY5r{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.Shimmer_inner__zssMV{animation:Shimmer_shimmer__hGfzF 1.5s linear infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2) 50%,transparent);inset:0;position:absolute}.Shimmer_size-s__EYKhC{border-radius:4px}.Shimmer_size-m__AYziL{border-radius:6px}.Shimmer_size-l__GqE0a{border-radius:8px}@keyframes Shimmer_shimmer__hGfzF{0%{transform:translateX(-100%)}20%{transform:translateX(100%)}to{transform:translateX(100%)}}";
-var S = {"root":"Shimmer_root__XaY5r","inner":"Shimmer_inner__zssMV","shimmer":"Shimmer_shimmer__hGfzF","size-s":"Shimmer_size-s__EYKhC","size-m":"Shimmer_size-m__AYziL","size-l":"Shimmer_size-l__GqE0a"};
+var css_248z = ".Shimmer_root__XaY5r{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.Shimmer_inner__zssMV{animation:Shimmer_shimmer__hGfzF 1.5s linear infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2) 50%,transparent);inset:0;position:absolute}.Shimmer_size-s__EYKhC{border-radius:4px}.Shimmer_round__rwhjn.Shimmer_size-s__EYKhC{border-radius:15px}.Shimmer_size-m__AYziL{border-radius:6px}.Shimmer_round__rwhjn.Shimmer_size-m__AYziL{border-radius:20px}.Shimmer_size-l__GqE0a{border-radius:8px}.Shimmer_round__rwhjn.Shimmer_size-l__GqE0a{border-radius:25px}@keyframes Shimmer_shimmer__hGfzF{0%{transform:translateX(-100%)}20%{transform:translateX(100%)}to{transform:translateX(100%)}}";
+var S = {"root":"Shimmer_root__XaY5r","inner":"Shimmer_inner__zssMV","shimmer":"Shimmer_shimmer__hGfzF","size-s":"Shimmer_size-s__EYKhC","round":"Shimmer_round__rwhjn","size-m":"Shimmer_size-m__AYziL","size-l":"Shimmer_size-l__GqE0a"};
 styleInject(css_248z);
 
 export { S as default };

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/dist/esm/types/src/components/Menu/Menu.types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { Size } from 'uilib/types';
-export interface MenuProps {
+import { Props as ScrollProps } from 'uilib/components/Scroll/Scroll.types';
+export interface MenuProps extends ScrollProps {
     children: ReactNode;
     className?: string;
     size?: Size;

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

@@ -53,6 +53,7 @@ export type Props = FormControl<Value> & InheritedInputProps & {
     onClose?: () => void;
     isSearchable?: boolean;
     inputProps?: Omit<InputProps, 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'size'>;
+    round?: boolean;
     trigger?: ReactNode;
     triggerProps?: any;
     popupProps?: SelectPopupProps;

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

@@ -2,5 +2,6 @@ import { Size } from 'uilib/types';
 export type ShimmerProps = {
     className?: string;
     size?: Size;
+    round?: boolean;
 };
-export declare const Shimmer: ({ className, size }: ShimmerProps) => JSX.Element;
+export declare const Shimmer: ({ className, size, round, }: ShimmerProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.20.0-beta-1",
+  "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",