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

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/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/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-2",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",