@homecode/ui 4.18.70 → 4.19.0

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { AssistiveText } from './src/components/AssistiveText/AssistiveText.js';
+export { Autocomplete } from './src/components/Autocomplete/Autocomplete.js';
 export { Button } from './src/components/Button/Button.js';
 export { ButtonGroup } from './src/components/ButtonGroup/ButtonGroup.js';
 export { Calendar } from './src/components/Calendar/Calendar.js';
@@ -18,6 +19,7 @@ export { InputFile } from './src/components/InputFile/InputFile.js';
 export { Label } from './src/components/Label/Label.js';
 export { Lazy } from './src/components/Lazy/Lazy.js';
 export { LightBox } from './src/components/LightBox/LightBox.js';
+export { Menu } from './src/components/Menu/Menu.js';
 export { Notifications, NotificationsStore } from './src/components/Notifications/Notifications.js';
 export { Paranja } from './src/components/Paranja/Paranja.js';
 export { ANIMATION_DURATION, Popup } from './src/components/Popup/Popup.js';
@@ -27,6 +29,9 @@ export { Router, RouterContext, RouterStore } from './src/components/Router/Rout
 export { RequiredStar } from './src/components/RequiredStar/RequiredStar.js';
 export { Select, SelectHelpers } from './src/components/Select/Select.js';
 export { Scroll } from './src/components/Scroll/Scroll.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import './src/components/Shimmer/Shimmer.styl.js';
 export { Spinner } from './src/components/Spinner/Spinner.js';
 export { Table } from './src/components/Table/Table.js';
 export { Tabs } from './src/components/Tabs/Tabs.js';

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

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import '../AssistiveText/AssistiveText.styl.js';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import debounce from '../../tools/debounce.js';
+import { useIsMounted } from '../../hooks/useIsMounted.js';
+import Time from 'timen';
+import S from './Autocomplete.styl.js';
+import Shimmer from '../Shimmer/Shimmer.js';
+import { useListKeyboardControl } from '../../hooks/useListKeyboardControl.js';
+import '../Spinner/Spinner.styl.js';
+import '../Button/Button.styl.js';
+import '../ButtonGroup/ButtonGroup.styl.js';
+import '../Calendar/Calendar.styl.js';
+import { Input } from '../Input/Input.js';
+import '../../tools/dom.js';
+import '../Icon/Icon.js';
+import '../Label/Label.styl.js';
+import { Popup } from '../Popup/Popup.js';
+import '../RequiredStar/RequiredStar.styl.js';
+import '../Select/Select.styl.js';
+import 'justorm/react';
+import 'lodash.omit';
+import 'compareq';
+import 'lodash.pick';
+import '../Scroll/Scroll.styl.js';
+import 'nanoid';
+import '../Checkbox/Checkbox.styl.js';
+import '../Container/Container.styl.js';
+import '../DatePicker/DatePicker.styl.js';
+import 'moment';
+import '../DatePickerInput/DatePickerInput.styl.js';
+import '../../tools/queryParams.js';
+import '../Draggable/Draggable.styl.js';
+import '../Expand/Expand.styl.js';
+import '../Form/Form.styl.js';
+import '../Form/Validator.js';
+import '../Form/SubmitButtons/SubmitButtons.styl.js';
+import '../Gallery/Gallery.styl.js';
+import '../Heading/Heading.js';
+import '../InputFile/InputFile.styl.js';
+import '../InputFile/Item/Item.styl.js';
+import '../../services/i18n.js';
+import '../Portal/Portal.js';
+import '../Paranja/Paranja.styl.js';
+import '../LightBox/LightBox.styl.js';
+import { Menu } from '../Menu/Menu.js';
+import '../Notifications/Notifications.js';
+import '../PopupMenu/PopupMenu.styl.js';
+import '../Router/Router.js';
+import '../Table/Table.styl.js';
+import '../Tabs/Tabs.styl.js';
+import '../Text/Text.js';
+import '../Virtualized/Virtualized.styl.js';
+import '../Virtualized/List/List.styl.js';
+import '../Virtualized/List/ListScroll.styl.js';
+
+function Autocomplete(props) {
+    const { className, inputWrapperClassName, value, onChange, size = 'm', getOptions, onSelect, debounceDelay = 300, inputProps = {}, popupProps = {}, } = props;
+    const isMounted = useIsMounted();
+    const [searchValue, setSearchValue] = useState(value);
+    const [options, setOptions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const currentRequest = useRef('');
+    const inputRef = useRef(null);
+    const isOpen = isFocused && options.length > 0;
+    const classes = cn(S.root, className);
+    const handleInputChange = (e, value) => {
+        const val = (value || e?.target.value) ?? '';
+        setOptions([]);
+        setSearchValue(val);
+        onChange(e, val);
+        fetchOptions(val);
+        return true;
+    };
+    const handleSelect = (value) => {
+        setSearchValue(value);
+        setOptions([]);
+        onSelect(value);
+        // set input caret to the end
+        requestAnimationFrame(() => {
+            const input = inputRef.current?.inputRef.current;
+            if (!input)
+                return;
+            input.focus();
+            input.setSelectionRange(value.length, value.length);
+        });
+    };
+    const { focusedIndex, setFocusedIndex } = useListKeyboardControl({
+        isActive: isOpen,
+        itemsCount: options.length,
+        onSelect: index => {
+            handleSelect(options[index].label);
+        },
+    });
+    const fetchOptions = debounce(async (inputValue) => {
+        if (!inputValue) {
+            setOptions([]);
+            return;
+        }
+        currentRequest.current = inputValue;
+        setIsLoading(true);
+        try {
+            const newOptions = await getOptions(inputValue);
+            if (!isMounted.current)
+                return;
+            if (currentRequest.current !== inputValue)
+                return;
+            setOptions(newOptions);
+        }
+        catch (error) {
+            setOptions([]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, debounceDelay);
+    useEffect(() => {
+        setSearchValue(value);
+    }, [value]);
+    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))) }));
+    }, [options, focusedIndex]);
+    return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, size: size, ...popupProps, trigger: jsxs("div", { className: inputWrapperClassName, children: [jsx(Input, { ref: inputRef, 
+                    // @ts-ignore
+                    size: size, ...inputProps, value: searchValue, onChange: handleInputChange, className: inputProps.className, onFocus: () => setIsFocused(true), onBlur: () => Time.after(100, () => setIsFocused(false)) }), isLoading && jsx(Shimmer, { className: S.shimmer, size: size })] }), content: optionsList, contentProps: {
+            className: S.popupContent,
+        } }));
+}
+
+export { Autocomplete };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Autocomplete_root__86RQs{position:relative}.Autocomplete_popupContent__Aet6P{margin-top:8px;width:100%}.Autocomplete_options__NtttU{max-height:200px;overflow-y:auto}.Autocomplete_option__uBuih{cursor:pointer;padding:8px 12px}.Autocomplete_shimmer__s6rri{height:100%;left:0;position:absolute;top:0;width:100%}";
+var S = {"root":"Autocomplete_root__86RQs","popupContent":"Autocomplete_popupContent__Aet6P","options":"Autocomplete_options__NtttU","option":"Autocomplete_option__uBuih","shimmer":"Autocomplete_shimmer__s6rri"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -12,15 +12,17 @@ import { Scroll } from '../Scroll/Scroll.js';
 import { capitalize } from '../../tools/string.js';
 import { generateUID } from '../../tools/uid.js';
 import S from './Input.styl.js';
+import debounce from '../../tools/debounce.js';
+import 'timen';
+import '../Autocomplete/Autocomplete.styl.js';
+import '../Shimmer/Shimmer.styl.js';
 import '../ButtonGroup/ButtonGroup.styl.js';
 import '../Calendar/Calendar.styl.js';
 import '../../tools/dom.js';
-import 'timen';
 import '../Portal/Portal.js';
 import '../Paranja/Paranja.styl.js';
 import 'compareq';
 import 'lodash.pick';
-import debounce from '../../tools/debounce.js';
 import '../Popup/Popup.styl.js';
 import '../../tools/queryParams.js';
 import '../Select/Select.styl.js';
@@ -40,6 +42,7 @@ import '../Heading/Heading.js';
 import '../InputFile/InputFile.styl.js';
 import '../InputFile/Item/Item.styl.js';
 import '../LightBox/LightBox.styl.js';
+import '../Menu/Menu.js';
 import '../Notifications/Notifications.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Router/Router.js';
@@ -196,7 +199,7 @@ class Input extends Component {
     };
     handleChange = (e) => {
         const value = this.getValue(e.target.value);
-        this.onChange(value);
+        this.onChange(value, e);
     };
     onChange = (value, e) => {
         const { onChange, changeOnEnd, type } = this.props;

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

@@ -13,6 +13,8 @@ import { spliceWhere } from '../../tools/array.js';
 import S from './InputFile.styl.js';
 import Item from './Item/Item.js';
 import '../AssistiveText/AssistiveText.styl.js';
+import '../Autocomplete/Autocomplete.styl.js';
+import '../Shimmer/Shimmer.styl.js';
 import '../Spinner/Spinner.styl.js';
 import '../Button/Button.styl.js';
 import '../ButtonGroup/ButtonGroup.styl.js';
@@ -40,6 +42,7 @@ import '../Form/SubmitButtons/SubmitButtons.styl.js';
 import '../Gallery/Gallery.styl.js';
 import '../Heading/Heading.js';
 import '../LightBox/LightBox.styl.js';
+import '../Menu/Menu.js';
 import '../Notifications/Notifications.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Router/Router.js';

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

@@ -0,0 +1,23 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import cn from 'classnames';
+import { Scroll } from '../Scroll/Scroll.js';
+import S from './Menu.styl.js';
+
+const MenuComponent = forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx(Scroll, { y: true, ref: ref, className: cn(S.root, className), ...props, children: children }));
+});
+const MenuItem = forwardRef((props, ref) => {
+    const { children, className, selected, focused, disabled, level = 0, onClick, size = 'm', ...rest } = props;
+    const classes = cn(S.item, S[`size-${size}`], level > 0 && S[`level-${level}`], selected && S.selected, focused && S.focused, disabled && S.disabled, className);
+    return (jsx("div", { ref: ref, className: classes, onClick: disabled ? undefined : onClick, ...rest, children: jsx("span", { children: children }) }));
+});
+const MenuGroup = ({ children, className, label, ...props }) => {
+    return (jsxs(Fragment, { children: [jsx("div", { className: cn(S.group, className), ...props, children: label }), children] }));
+};
+const Menu = Object.assign(MenuComponent, {
+    Item: MenuItem,
+    Group: MenuGroup,
+});
+
+export { Menu };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Menu_root__xhtlo{max-height:200px;width:100%}.keyboard .Menu_root__xhtlo{pointer-events:none}.Menu_item__VtmwS{align-items:center;animation:Menu_fadeIn__XRZkT .3s ease-out;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:calc(100% - 2px)}.Menu_item__VtmwS:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Menu_item__VtmwS:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Menu_item__VtmwS>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Menu_item__VtmwS.Menu_size-s__DA0r3{font-size:16px;height:34px;padding:0 8px}.Menu_item__VtmwS.Menu_size-m__0EI47{font-size:20px;height:38px;padding:0 12px}.Menu_item__VtmwS.Menu_size-l__PXpIm{font-size:24px;height:42px;padding:0 14px}.Menu_item__VtmwS.Menu_size-xl__U1WW8{height:46px}.Menu_item__VtmwS.Menu_selected__V71xy{background-color:var(--active-color-alpha-500)}.Menu_item__VtmwS.Menu_disabled__5afRm{cursor:not-allowed;opacity:.4}.keyboard .Menu_item__VtmwS.Menu_focused__FLWqW,.pointer .Menu_item__VtmwS:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Menu_group__6e-Ef{background-color:var(--decent-color);color:var(--accent-color);font-size:14px;font-weight:500;padding:8px 12px;pointer-events:none;position:sticky;top:0;z-index:1}.Menu_levelIndent__S6HXJ{--menu-indent-size:var(--indent-s)}.Menu_levelIndent__S6HXJ.Menu_level-1__kueO2{padding-left:calc(var(--menu-indent-size)*2)}.Menu_levelIndent__S6HXJ.Menu_level-2__JZGkJ{padding-left:calc(var(--menu-indent-size)*3)}.Menu_levelIndent__S6HXJ.Menu_level-3__LFd-F{padding-left:calc(var(--menu-indent-size)*4)}.Menu_levelIndent__S6HXJ.Menu_level-4__2DUMl{padding-left:calc(var(--menu-indent-size)*5)}.Menu_levelIndent__S6HXJ.Menu_level-5__xpgvQ{padding-left:calc(var(--menu-indent-size)*6)}@keyframes Menu_fadeIn__XRZkT{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
+var S = {"root":"Menu_root__xhtlo","item":"Menu_item__VtmwS","fadeIn":"Menu_fadeIn__XRZkT","size-s":"Menu_size-s__DA0r3","size-m":"Menu_size-m__0EI47","size-l":"Menu_size-l__PXpIm","size-xl":"Menu_size-xl__U1WW8","selected":"Menu_selected__V71xy","disabled":"Menu_disabled__5afRm","focused":"Menu_focused__FLWqW","group":"Menu_group__6e-Ef","levelIndent":"Menu_levelIndent__S6HXJ","level-1":"Menu_level-1__kueO2","level-2":"Menu_level-2__JZGkJ","level-3":"Menu_level-3__LFd-F","level-4":"Menu_level-4__2DUMl","level-5":"Menu_level-5__xpgvQ"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -348,7 +348,7 @@ class Popup extends Component {
         const { isOpen } = this.store;
         if (!trigger)
             return null;
-        const disableTrigger = disabled || !content;
+        const disableTrigger = disabled || !trigger;
         const classesTrigger = cn(S.trigger, isOpen && S.isOpen, disableTrigger && S.disabled, triggerProps.className);
         if (!disableTrigger) {
             triggerProps.role = 'button';

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

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

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

@@ -0,0 +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"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/hooks/useEvent.js

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+function useEvent({ elem, event, callback, isActive = true, }) {
+    useEffect(() => {
+        const events = Array.isArray(event) ? event : [event];
+        const elems = elem ? (Array.isArray(elem) ? elem : [elem]) : [document];
+        const getElem = (el) => el && ('current' in el ? el.current : el);
+        const each = cb => {
+            events.forEach(ev => {
+                elems.forEach(el => cb(getElem(el), ev));
+            });
+        };
+        const enable = () => {
+            each((el, ev) => el?.addEventListener(ev, callback));
+        };
+        const disable = () => {
+            each((el, ev) => el?.removeEventListener(ev, callback));
+        };
+        const hasRef = !elem || elems.some(getElem);
+        if (isActive && hasRef) {
+            enable();
+        }
+        return () => {
+            disable();
+        };
+    }, [isActive, elem, callback]);
+}
+
+export { useEvent as default };

package/dist/esm/src/hooks/useIsMounted.js

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from 'react';
+
+const useIsMounted = () => {
+    const isMounted = useRef(false);
+    useEffect(() => {
+        isMounted.current = true;
+    }, []);
+    return isMounted;
+};
+
+export { useIsMounted };

package/dist/esm/src/hooks/useListKeyboardControl.js

@@ -0,0 +1,50 @@
+import { useState, useCallback, useEffect } from 'react';
+import useEvent from './useEvent.js';
+
+const useListKeyboardControl = ({ isActive, itemsCount, onSelect, }) => {
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const handleKeyDown = useCallback((e) => {
+        let newIndex = focusedIndex;
+        const set = (index) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setFocusedIndex(index);
+            return;
+        };
+        if (e.key === 'ArrowDown') {
+            newIndex++;
+            if (newIndex >= itemsCount)
+                newIndex = 0;
+            set(newIndex);
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            newIndex--;
+            if (newIndex < 0)
+                newIndex = itemsCount - 1;
+            set(newIndex);
+            return;
+        }
+        if (e.key === 'Enter') {
+            onSelect(newIndex);
+            return;
+        }
+    }, [focusedIndex, itemsCount, onSelect]);
+    useEvent({
+        elem: document,
+        event: 'keydown',
+        callback: handleKeyDown,
+        isActive,
+    });
+    useEffect(() => {
+        if (itemsCount < focusedIndex) {
+            setFocusedIndex(itemsCount - 1);
+        }
+    }, [itemsCount]);
+    return {
+        focusedIndex,
+        setFocusedIndex,
+    };
+};
+
+export { useListKeyboardControl };

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

@@ -0,0 +1,2 @@
+import * as T from './Autocomplete.types';
+export declare function Autocomplete(props: T.Props): JSX.Element;

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

@@ -0,0 +1,19 @@
+import { FormControl, Size } from 'uilib/types';
+import { Props as InputProps } from 'uilib/components/Input/Input.types';
+import { Props as PopupProps } from 'uilib/components/Popup/Popup.types';
+export type Option = {
+    id: string;
+    label: string;
+};
+export type Value = string;
+export type Props = FormControl<Value, HTMLInputElement> & {
+    className?: string;
+    inputWrapperClassName?: string;
+    size?: Size;
+    value: Value;
+    getOptions: (value: Value) => Promise<Option[]>;
+    onSelect: (value: Value) => void;
+    debounceDelay?: number;
+    inputProps?: Partial<InputProps>;
+    popupProps?: Partial<PopupProps>;
+};

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

@@ -11,6 +11,7 @@ export declare const icons: {
     chevronDown: () => Promise<any>;
     chevronRight: () => Promise<any>;
     chevronLeft: () => Promise<any>;
+    clearAll: () => Promise<any>;
     delete: () => Promise<any>;
     draft: () => Promise<any>;
     edit: () => Promise<any>;
@@ -23,6 +24,7 @@ export declare const icons: {
     fullscreen: () => Promise<any>;
     fullscreenExit: () => Promise<any>;
     function: () => Promise<any>;
+    flyover: () => Promise<any>;
     gear: () => Promise<any>;
     geolocation: () => Promise<any>;
     group: () => Promise<any>;
@@ -53,6 +55,7 @@ export declare const icons: {
     settings: () => Promise<any>;
     shoppingBag: () => Promise<any>;
     sparks: () => Promise<any>;
+    star: () => Promise<any>;
     syncArrows: () => Promise<any>;
     table: () => Promise<any>;
     telegram: () => Promise<any>;

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

@@ -30,7 +30,7 @@ export declare class Input extends Component<T.Props> {
     onClearPress: (e: any) => void;
     onDocKeyUp: (e: KeyboardEvent) => void;
     handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
-    onChange: (value: any, e?: any) => void;
+    onChange: (value: string, e?: ChangeEvent<HTMLInputElement>) => void;
     onNumberWheel: (delta: any) => void;
     onTextAreaInput: (e: any) => void;
     onLabelClipPathChange: (clipPath: string) => string;

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

@@ -3,7 +3,7 @@ import type { ComponentType, FormControl, Size, Variant } from '../../types';
 import type { Props as ScrollProps } from '../Scroll/Scroll.types';
 export type ControlProps = HTMLProps<HTMLInputElement>;
 export type Value = string | number;
-export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & Omit<ControlProps, 'ref'> & FormControl<Value> & {
+export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & Omit<ControlProps, 'ref' | 'onChange'> & FormControl<Value, HTMLInputElement> & {
     name?: string;
     step?: number;
     size?: Size;

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

@@ -0,0 +1,6 @@
+import { Scroll } from 'uilib/components/Scroll/Scroll';
+import { MenuGroupProps, MenuItemProps, MenuProps } from './Menu.types';
+export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<Scroll>> & {
+    Item: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").FC<MenuGroupProps>;
+};

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { Size } from 'uilib/types';
+export interface MenuProps {
+    children: ReactNode;
+    className?: string;
+    size?: Size;
+}
+export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    selected?: boolean;
+    focused?: boolean;
+    disabled?: boolean;
+    level?: number;
+    size?: Size;
+}
+export interface MenuGroupProps {
+    children: ReactNode;
+    className?: string;
+    label: string;
+    size?: Size;
+}

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

@@ -0,0 +1,7 @@
+import { Size } from 'uilib/types';
+type ShimmerProps = {
+    className?: string;
+    size?: Size;
+};
+declare const Shimmer: ({ className, size }: ShimmerProps) => JSX.Element;
+export default Shimmer;

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

@@ -1,4 +1,5 @@
 export * from './AssistiveText/AssistiveText';
+export * from './Autocomplete/Autocomplete';
 export * from './Button/Button';
 export * from './ButtonGroup/ButtonGroup';
 export * from './Calendar/Calendar';
@@ -18,6 +19,7 @@ export * from './InputFile/InputFile';
 export * from './Label/Label';
 export * from './Lazy/Lazy';
 export * from './LightBox/LightBox';
+export * from './Menu/Menu';
 export * from './Notifications/Notifications';
 export * from './Paranja/Paranja';
 export * from './Popup/Popup';
@@ -27,6 +29,7 @@ export * from './Router/Router';
 export * from './RequiredStar/RequiredStar';
 export * from './Select/Select';
 export * from './Scroll/Scroll';
+export * from './Shimmer/Shimmer';
 export * from './Spinner/Spinner';
 export * from './Table/Table';
 export * from './Tabs/Tabs';

package/dist/esm/types/src/hooks/useEvent.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+export type UseEventParams = {
+    elem?: Document | RefObject<HTMLElement> | RefObject<HTMLElement>[] | HTMLElement | HTMLElement[];
+    event: string | string[];
+    callback: (event: Event) => void;
+    isActive?: boolean;
+};
+export default function useEvent({ elem, event, callback, isActive, }: UseEventParams): void;

package/dist/esm/types/src/hooks/useIsMounted.d.ts

@@ -0,0 +1 @@
+export declare const useIsMounted: () => import("react").MutableRefObject<boolean>;

package/dist/esm/types/src/hooks/useListKeyboardControl.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    isActive: boolean;
+    itemsCount: number;
+    onSelect?: (index: number) => void;
+};
+export declare const useListKeyboardControl: ({ isActive, itemsCount, onSelect, }: Props) => {
+    focusedIndex: number;
+    setFocusedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+};
+export {};

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

@@ -5,9 +5,9 @@ export type ComponentType = {
     className?: string;
 };
 export type FormFieldChangeHandler = (e: ChangeEvent | null, value: any) => void | boolean;
-export type FormControl<T> = {
+export type FormControl<T, E = HTMLInputElement> = {
     value: T;
-    onChange?: (e: ChangeEvent | null, value: T) => void | boolean;
+    onChange?: (e: ChangeEvent<E> | null, value: T) => void | boolean;
     required?: boolean;
     disabled?: boolean;
     error?: string | boolean;

package/package.json

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