@homecode/ui 4.20.0-beta-0 → 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

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { mapById, isMultiple, renderLabel } from './Select.helpers.js';
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { INTERACTION_MODE, getInteractionMode } from '../../tools/dom.js';
@@ -7,16 +7,17 @@ import omit from 'lodash.omit';
 import { AssistiveText } from '../AssistiveText/AssistiveText.js';
 import { Button } from '../Button/Button.js';
 import { Input } from '../Input/Input.js';
+import { Icon } from '../Icon/Icon.js';
 import { Label } from '../Label/Label.js';
 import { Popup } from '../Popup/Popup.js';
 import { RequiredStar } from '../RequiredStar/RequiredStar.js';
-import S from './Select.styl.js';
 import { Scroll } from '../Scroll/Scroll.js';
 import { useThrottle } from '../../hooks/useThrottle.js';
 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);
@@ -45,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
@@ -167,13 +169,15 @@ function Select2(props) {
             .join(', '));
     }, [isMultiple$1, value]);
     // console.log('selectedLabel::', selectedLabel);
-    const renderTriggerArrow = () => {
-        return null;
-    };
+    const triggerArrow = useMemo(() => {
+        if (inputProps?.hasClear && searchVal)
+            return null;
+        return (jsx(Icon, { type: "chevronDown", className: cn(S.triggerArrow, isOpen && S.isOpen), size: size }));
+    }, [isOpen, searchVal]);
     const renderTriggerInput = () => {
         return (jsx(Input, { ...triggerProps, ...inputProps, 
             // TODO: autoComplete
-            addonRight: renderTriggerArrow(), error: isErrorVisible, value: isFocused ? searchVal : selectedLabel, onChange: handleSearchChange, label: getFieldLabel(label) }));
+            addonRight: triggerArrow, error: isErrorVisible, value: isFocused ? searchVal : selectedLabel, onChange: handleSearchChange, label: getFieldLabel(label) }));
     };
     const renderAdditionalLabel = () => {
         return null;
@@ -185,9 +189,8 @@ function Select2(props) {
         const hasSelected = fullSelectedLabel.length > 0;
         const displayLabel = hasSelected ? fullSelectedLabel : label;
         const title = hasSelected ? fullSelectedLabel : null;
-        const triggerArrow = renderTriggerArrow();
         const isError = isErrorVisible;
-        const classes = cn(S.triggerButton, isError && S.isError, triggerArrow , className);
+        const classes = cn(S.triggerButton, isError && S.isError, triggerArrow && S.hasTriggerArrow, className);
         return (jsxs("div", { children: [jsxs(Button, { className: classes, variant: "default", ...props, style: { clipPath: labelClipPath }, title: title?.join?.(', '), children: [jsx("div", { className: cn(S.triggerButtonLabel, hasSelected && S.hasSelected), children: displayLabel }), triggerArrow] }), jsx(Label, { size: size, isOnTop: hasSelected, isError: isError, onClipPathChange: setLabelClipPath, children: getFieldLabel(label) })] }));
     };
     const renderTrigger = () => {

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